Discussions

Expand all | Collapse all

Customize color for tabs

  • 1.  Customize color for tabs

    Posted 10-31-2018 04:34
    I want to customize the color for tabs in the form. I know there is a tab color in the form properties but the color does not fill the whole tab. It only acts like a color underline of the tab. I want to fill the color for the background of the whole tab. Please help! 
    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1759765/RackMultipart20181031-28287-8xpve6-Capture_inline.PNG?1540960222">

    Also, regarding to the tabs, as you see above, I have too many tabs that I have to click on the arrow left or right to go to tabs. How do I do to make half of the tabs in the end move to the second row so I can see all the tabs at once? 

    Please support and help with these problems? Thanks so much!


  • 2.  RE: Customize color for tabs

    Posted 10-31-2018 04:35
    Quick Base Junkie (find me on YouTube),

    Can you please help me with these problems?

    Thanks!!


  • 3.  RE: Customize color for tabs

    Posted 10-31-2018 10:32
    @Sales Info

    It works how it works. I suggest that you design your form with fewer tabs. Keep in mind that you still can use Section within your tabs. 

    The color is only the underline ands not the whole tab.

    Here are 20 colors which look very different beside each other.  I just use them in sequence for my tabs.

    Red       e6194b   
    Green    3cb44b   
    Yellow    ffe119   
    Blue      0082c8   
    Orange    f58231   
    Purple    911eb4   
    Cyan       46f0f0   
    Magenta    f032e6   
    Lime    d2f53c   
    Pink     fabebe   
    Teal      008080   
    Lavender    e6beff   
    Brown    aa6e28   
    Beige       fffac8   
    Maroon    800000
    Mint         aaffc3   
    Olive    808000   
    Coral    ffd8b1   
    Navy    000080   
    Grey    808080
    White    FFFFFF   
    Black    000000




  • 4.  RE: Customize color for tabs

    Posted 10-31-2018 13:00
    Everett Patterson,

    Do you have any suggestion for how to do this?.

    Please help!!! Thanks!!


  • 5.  RE: Customize color for tabs

    Posted 10-31-2018 14:23
    You can do alot with script, just be prepared to use the dev console (F12), track down which elements you want to select, and develop/support your own code



    $("#tab_t4_link").css("backgroundColor", "red");
    $("#tab_t5_link").css("backgroundColor", "green");

    (Uses IOL to inject script on page load)





  • 6.  RE: Customize color for tabs

    Posted 10-31-2018 14:43
    Everett Patterson,

    You're awesome! It works perfectly. Thanks so much! Can you please help me with the problem below?

    Regarding to the tabs, as you see above, I have too many tabs that I have to click on the arrow left or right to go to tabs. How do I do to make the second half of the tabs move to the second row so I can see all the tabs at once? 


  • 7.  RE: Customize color for tabs

    Posted 10-31-2018 14:56
    No sorry I don't know any solutions to that problem, I recommend that you explore Mark's suggestion above

    I suggest that you design your form with fewer tabs. Keep in mind that you still can use Section within your tabs. 

    Are you using one form for all roles? Does all roles need access to the same form or can you create different forms for different roles? Can you replace a few tabs with sections?



  • 8.  RE: Customize color for tabs

    Posted 10-31-2018 15:30
    Everett Patterson,

    Yes. I am using this form for all roles. I already created a few section headings and those tabs that are necessary to be displayed as a tab so my team can see it. Is it possible to add the code in the IOL so when it went to the specific tab, the next tab will go the next row? or inserting the "new line" code before the tab so it will go to the second row?

    Anyways, Thanks so much for your support!  


  • 9.  RE: Customize color for tabs

    Posted 10-31-2018 16:11
    Test this out and see if it works like you want

    $("#formTabsList").css("white-space", "inherit");
    $("#tabHolder").css("position", "inherit");



  • 10.  RE: Customize color for tabs

    Posted 10-31-2018 16:31
    Everett Patterson,

    It works. It would be nice if both rows have the length so it looks better. However, it works so I will stick with it if there is no way to do. 

    Thanks so much, Everett!!! You're a genius!! AWESOME!!!