Change blue bar of tabbed component to red

Questions
,
1

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?

2

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.

3

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.

4

Hi melissa

I think this one is help full to you

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




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

 background-color: red;
    color:black;
    
}


Thanks,
Raghavendra Reddy.D