The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group
Changing the styling of accordion headings/date field theme
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.
August 15, 2017 at 5:16 pm
Can you provide a link to the page?
August 16, 2017 at 7:11 am
The page in question can be seen at https://positech.com/quote-test
August 16, 2017 at 9:38 am
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.
Discussion closed.