Change blue bar of tabbed component to red

  • 1
  • Question
  • Updated 4 years ago
  • Answered
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?
Photo of melissa

melissa

  • 102 Points 100 badge 2x thumb

Posted 5 years ago

  • 1
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
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...

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.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
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.
Photo of ragava Reddy

ragava Reddy

  • 102 Points 100 badge 2x thumb
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