Changing the styling of accordion headings/date field theme

Labels

This Discussion is public

Notifications

We've just implemented an accordion-style theme on our website and while one of the themes in the 'Date Fields' section was close to matching the colors of our brand, they're don't match absolutely perfectly.

Is there a way we can tweak the CSS of the accordion styles to change the color of the headings of the accordion?

I'm having a hard time finding the exact classes to add custom CSS to.

Can you provide a link to the page?

The page in question can be seen at https://positech.com/quote-test

 

The orange color is coming from the .ui-state-active class that is in the jQuery UI CSS. The color is embedded in an image: https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/excite-bike/images/ui-bg_diagonals-thick_20_e69700_40x40.png, so you would have to edit the image to match the color.

This is the CSS that is there now:

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 1px solid #e85a05;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(232, 90, 5);
background: #e85a05 url("images/ui-bg_diagonals-thick_20_e69700_40x40.png") 50% 50% repeat;
font-weight: bold;
color: #fff;
}

The way you would have to adjust this is copy this class to Formidable's custom styles or your theme's style.css to override the jQuery UI CSS.

Reply to this Discussion