Change blue bar of tabbed component to red

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?

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: 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.

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.

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;

Raghavendra Reddy.D