Change color of form background.
I want to add color to the form background. How do you change the color of a form background?.
Forum Discussion
- Use image onload technique and commands (plural) of this nature:
$("#bodyTable").css("backgroundColor", "yellow");
See screenshot.
I think you will not find this to be a little more complex than it should be because QuickBase did not design their CSS to be skinnable by users. If you look at the attached screenshot you will see gaps where in the yellow background where other elements are sneaking their non-yellow color on top. You would have to hunt down these elements and provide additional CSS statements through the image onload technique.
- Awesome :)
- Here is an example of some added form styling to make it more legible.
- Hi Matthew,
It looks good. Is it same as Dan has done in above example or do you have any other method to implement this?
Regards,
Gaurav - Same method, just different styling. You can use pretty much any variation of the css styling that Qb uses, just change a few of the variables.
- Great :)
- So you have to make those changes in the developer tools for the browser?
- Replying if you did not get an idea yet.
Yes, if you just want to do a quick try else you have to use IOL technique to make it permanent.
Thanks,
Gaurav
- > ... use IOL technique ...
You can use the 3Q&S Technique without any setup. Just create a Rich Text Formula Field and write your inline script to modify the CSS without using the double or single quote characters - instead use the backtick character:"<img src onerror='
You will have to poke around a bit as QuickBase did not design their forms to be skinnable and you will see weird interstitials where your intended re-styling did not take effect. This of course can be corrected with additional CSS statements in your code but as I said your will have to experiment. Somewhere in the forum I posted a fix for the white areas that are peeking through that you see in the form below:
(async () => {
// your code here
$('#bodyTable').css('background-color', 'yellow');
})();
'>"
Color My Form Beautiful ~ View Record 1
https://haversineconsulting.quickbase.com/db/bn89ceqip?a=dr&rid=1
Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=712- You can add this code to close up borders to be yellow:
$('table.LabelsLeft tr > td.cell,
table.LabelsLeft tr > td.label,
div.Email table.LabelsLeft tr td.cell,
div.Email table.LabelsLeft tr td.label').css('border', 'solid yellow');
