Forum Discussion

JasonJason's avatar
JasonJason
Qrew Member
8 years ago

Change color of form background.

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

13 Replies

  • 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.
  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    Here is an example of some added form styling to make it more legible.

    • GauravSharma3's avatar
      GauravSharma3
      Qrew Commander
      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
    • MCFNeil's avatar
      MCFNeil
      Qrew Captain
      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.
  • So you have to make those changes in the developer tools for the browser?
    • GauravSharma3's avatar
      GauravSharma3
      Qrew Commander
      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='
    (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
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      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');