Change blue bar of tabbed component to red

edited December 13, 2019 in Questions
I want to change the blues used throughout the components (tabs, etc) to our company red but am not all that familiar with css. How do I do this?

Comments

  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    Hi Melissa, here is some basic CSS that you can use. Go to the Resources tab of the page builder and click to add a new CSS resource. Choose "External" as the resource type and enter this URL: https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/blitzer/jquery-ui.css This will help give you a more red-themed color scheme. Then, if you want to add another resource of the type "Inline" for your page, it will help make the Skuid components better align with your theme: .nx-editor-header-title { color: #004276; } table.nx-skootable-data th { color: #004276; } .ui-tabs .ui-tabs .ui-state-default a:link { color: #004276; } .ui-tabs .ui-tabs .ui-tabs-nav li.ui-state-active { background-color: #cc0000; } .ui-tabs .ui-tabs .ui-state-active a:link { color: #FFFFFF; } .nx-actionbutton { background-color: #cc0000; } .nx-basicfieldeditor-section-header { color: #004276; } .nx-cal-header-title { color: #004276; } .nx-cal-dowpicker-item { color: #004276; } .nx-viewswitcher { background: #cc0000; } .ui-tabs .ui-tabs .ui-tabs-nav { border-color: #004276; } Your finished page will look like this: Let me know if you want to experiment a bit with CSS and I'll give you some pointers.
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited November 23, 2015
    Also I used this information to create an improved CSS tutorial where you can get step by step instructions on how this works and next steps.
  • edited October 7, 2014
    Hi melissa

    I think this one is help full to you

    Go to Resources -->Click on css-->Select  In-Line -->copy this code-->save

    image


    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited{   

     background-color: red;
        color:black;
        
    }


    Thanks,
    Raghavendra Reddy.D
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!