Forum Discussion

GiuseppeMacri's avatar
GiuseppeMacri
Qrew Captain
5 years ago

Changing the background colors on tabs

Hi,

I noticed that i can change the background color of my tabs using the following code snippet:

document.getElementById("ui-id-3").style = "color: white;background-color: blue";

However, when i try to incorporate that code into a JS code page for IOL, it doesnt seem to work.

Any thoughts?

------------------------------
GMacri
------------------------------
  • Here is from a different post which may help you:

    You can also do a lot of form element changes using code pages:
    * just replace the bolded "#" with the appropriate number, which you can find when inspecting element.

    To color form borders of a particular section:

     $("table#sect_s# tr td").css("border-color", "yellow");

    To color tab content background entirely:

    $("#tab_t# table.formSection").css("background-color", "yellow");
    $("#tab_t
    # table.formSection tr td").css("border-color", "yellow");

    To color section header:

    $("#sect_s#Header.Title").css("background-color", "yellow");


    To color the background of all field contents from grey to something else:

    $("table.LabelsLeft td.cell").css({backgroundColor: "yellow"});          // or

    $("table.LabelsLeft td.cell").css({backgroundColor: "#03fbe4"});       // or

    $("table.LabelsAbove td.cell").css({backgroundColor: "yellow"});     // for lables above the field contents

    To color the background of a particular field's contents from grey to something else:

    $("#tdf_#.cell").css({backgroundColor: "orange"});

    To color the background of a particular field's label from white to something else:

    $("#tdl_#.label").css({backgroundColor: "pink"});

     

    To color all text below tabs(not including section titles):

    $(".ui-widget-content").css({color: "blue"});

     

    To resize all tabs:

    $(".ui-widget").css("font-size", "2em");

     

    To color the background of a tab:

    $("#tab_t#_link").css({backgroundColor: "#03bef0"});

     

    To color the text of a tab:

    $("#ui-id-#.ui-tabs-anchor").css({color: "#ff0000"});

    To reformat the text of all section titles:

    $(".sectionTitle").css({color: "red", fontWeight: "bold", fontFamily: "cursive", fontStyle: "italic", fontSize: "150%"});

     

    To reformat the text of a particular section:

    $("#sect_s#Header.Title span.sectionTitle").css({backgroundColor: "white", color:"purple", fontWeight: "bold", fontFamily: "serif", fontStyle: "italic", fontSize: "150%"});




    *NOTE: Using code pages like this is not guaranteed to work or be a permanent solution because Quick Base could change things at any time that could break these code pages. Also, the list code above is just experimental stuff I've done and will not necessarily work in every case.



    ------------------------------
    Jordan McAlister
    ------------------------------
    • GiuseppeMacri's avatar
      GiuseppeMacri
      Qrew Captain
      $("#ui-id-#.ui-tabs-anchor").css({color: "#FFFFFF"});

      isnt working with my IOL script. Thoughts?

      ------------------------------
      GMacri
      ------------------------------
      • AdamKeever1's avatar
        AdamKeever1
        Qrew Commander
        Did you see Jordan's comment:

        "* just replace the bolded "#" with the appropriate number, which you can find when inspecting element."

        It should be something like this:
        $("#ui-id-2.ui-tabs-anchor").css({color: "#FFFFFF"});

        Use the inspect function of Chrome and you can find the number for yours; cntrl+F using anchor as a search term can help you find it quickly:




        ------------------------------
        Adam Keever
        ------------------------------
    • StephenSchuessl's avatar
      StephenSchuessl
      Qrew Member

      Hello!

      Hoping that this is still being viewed today, but I was using these formulas to color a form of ours using Tabs and sections and was able to color basically everything on the form minus mainly the white space to the sides of the fields.

      Anyone have any ideas how to get these to color?



      ------------------------------
      Stephen Schuessler
      ------------------------------
      • BlakeHarrison's avatar
        BlakeHarrison
        Qrew Captain

        Unfortunately, there are a lot of elements that make up the form and many of them inherit their styling from other parts higher up in the <div> hierarchy. I've tried a number of different possibilities and have not been able to identify a way to get rid of the background white 100%.

        With that said, just remember that Quick Base is constantly making updates to the UI and any JS you use outside of a codepage (such as this) could break at any time.



        ------------------------------
        Blake Harrison
        bharrison@datablender.io
        DataBlender - Quick Base Solution Provider
        Atlanta GA
        404.800.1702 / http://datablender.io/
        ------------------------------