Discussions

 View Only
Expand all | Collapse all

Change color of form background.

  • 1.  Change color of form background.

    Posted 05-05-2016 18:24

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



  • 2.  RE: Change color of form background.

    Posted 05-05-2016 18:53
    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.


  • 3.  RE: Change color of form background.

    Posted 03-11-2017 07:55
    Awesome :)


  • 4.  RE: Change color of form background.

    Posted 03-13-2017 02:45
    Here is an example of some added form styling to make it more legible.



  • 5.  RE: Change color of form background.

    Posted 03-14-2017 01:58
    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


  • 6.  RE: Change color of form background.

    Posted 03-14-2017 02:18
    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.


  • 7.  RE: Change color of form background.

    Posted 03-14-2017 02:21
    Great :)


  • 8.  RE: Change color of form background.

    Posted 12-17-2018 21:35
    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


  • 9.  RE: Change color of form background.

    Posted 08-24-2022 06:46
    Quickbase no longer permits the use of the Image Onload Technique as it could potentially lead to security loopholes.

    ------------------------------
    Mark Shnier (Your Quickbase Coach)
    mark.shnier@gmail.com
    ------------------------------



  • 10.  RE: Change color of form background.

    Posted 08-24-2022 06:28
    Hi Neil,
    New to Quickbase - can you provide some additional detail on how / where you modified the form background attributes.

    Rgds
    Pat

    ------------------------------
    Patrick O'Neill
    ------------------------------



  • 11.  RE: Change color of form background.

    Posted 07-19-2017 20:50
    So you have to make those changes in the developer tools for the browser?


  • 12.  RE: Change color of form background.

    Posted 07-09-2018 10:00
    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


  • 13.  RE: Change color of form background.

    Posted 12-17-2018 22:04
    > ... 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


  • 14.  RE: Change color of form background.

    Posted 12-17-2018 22:33
    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');