Changing Button & Link Colors
The following CSS rules change the color and background of the buttons, in this case to a gray background (#666) with white (#f8f8f8) text:
body #SFctr button:hover, body #SFctr a.SFbtn:hover {color:#fff;background-color:#444;text-decoration:none}
The following changes the color of the selected tab button to a red background (#b5111a) against white (#fff) text, and the inactive tabs to gray background (#666) with white (#f8f8f8) text:
body #SFctr nav>a{background-color:#666;color:#f8f8f8}
The following changes the color of all links to red:
body #SFctr a:hover,body #SFctr .SFlnk:hover{color:#d20e17;text-decoration:underline}
Overriding CSS
Before attempting to override any other CSS, please be aware that our system is continually updated, and we do not guarantee HTML layouts or CSS rules to remain the same. Updates occur even if you do not update your site or plugin. As a result, we do not recommend attempting extensive CSS overrides which may break layouts in the future when the HTML or CSS rules change. The only rules that will not be broken are the ones related to changing buttons and link colors above.
If you do wish to continue, note that we cannot provide further support, the following information is all we will provide.
To override the CSS rule for an element, use an appropriate browser developer tool to inspect the element style. Our CSS rules begin with #SFctr. To override that CSS rule, simply create a new rule, increase its specificity by adding the "body" element to the start of the rule and add it to your site/theme CSS file.
Note that our system is designed to be fluid and responsive, and some element styles would dynamically change based on class or javascript when the screen size or div container for changes. You will need to test your CSS at all browser widths.