Change color of form background.

  • 1
  • 2
  • Question
  • Updated 6 months ago
  • Answered

 I want to add color to the form background.  How do you change the color of a form background?.

Photo of Jason

Jason

  • 10 Points

Posted 3 years ago

  • 1
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
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 :)
Photo of Matthew Neil

Matthew Neil

  • 31,698 Points 20k badge 2x thumb
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
Photo of Matthew Neil

Matthew Neil

  • 31,698 Points 20k badge 2x thumb
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.
Photo of Michael Halbreiner

Michael Halbreiner

  • 230 Points 100 badge 2x thumb
Matt,

I like your layout.  How did you make this?  Sorry, I'm just learning about iol technique and have minimal work with CSS.  

-Scott
Photo of Scott

Scott

  • 60 Points
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
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
> ... 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='
(async () => {
  // your code here
  $(`#bodyTable`).css(`background-color`, `yellow`);
})();
'>"
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:



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
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
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`);