Options: Custom CSS
The Global Custom CSS Option
This panel may be one of the most useful and used advanced option sections. This option is found on the Legacy Custom : Custom CSS panel. On the Customizer, this is found on the Custom CSS -> Global Custom CSS menu. This is where you can enter custom CSS to fine tune the styling of your site. The sources for these CSS rules can vary.
You should enter just CSS rules in this box. Don’t include a <style></style> block. The style rules you add here will be included after any other CSS rules Weaver Xtreme generates – so they will override those rules.
Note that with Weaver Xtreme Basic, these CSS rules will be added to the general <style> section Weaver Xtreme generates in the site <head> block. In Weaver Xtreme Plus, this code is added at the end of the actual .css style file Weaver Xtreme Plus generates, and won’t appear directly in the <head> block.
The Weaver Xtreme documentation also includes a short introduction of CSS, and you will likely find it worth your time to learn a a bit about CSS.
Note: You can also insert code into the <HEAD> section on a per page basis when you use the Edit Page editor. If you define a Custom Fieldnamed page-head-code for the page, then you can supply HTML for that page’s <HEAD> section.
Per Element Custom CSS
If you don’t know, or don’t want to track down specific element IDs or classes, you can use the Per Element Custom CSS options. This lets you add custom CSS without the need for that.
In the Legacy version of the Options interface, these options are found attached to most options for Background Color on a button called CSS+.
In the Customizer interface, these options are listed under the Custom CSS menu and then under the specific area with the element.
Note that using these options does require CSS knowledge.
Example
We will give an example of using this option. For example, say you’d like a custom border around the Header area. Custom CSS makes this easy. Open the Custom CSS -> Header Area panel where you can enter a CSS rule. The rule should include the {}‘s plus the css rules. So, to add a wide red border around the header area, you would put {border: 4px solid red;} in the box. The theme will then add the appropriate selector for the header (#header in this case) to your rule and add that to the generated CSS. For this example, this will result in the following rules being generated:
#header {background-color:#59AD44;}
#header {border: 4px solid red;}
In this case, the selector, #header, is pretty simple. For other options, the required selector can be much more complex, but you don’t have to know the details. In some cases, there is even more than one selector
You can add more than one rule to the CSS box, but the selector is applied only to the first rule. For example, if your CSS rules were: {font-style:italic;} .custom-font{font-family:serif;} the output would be (using #header again) #header {font-style:italic;} .custom-font{font-family:serif;}.
If you would like the option’s selector to be applied to additional rules, CSS supports a “macro” called %selector%. Wherever you use %selector% in your CSS, it will be replaced by the selector associated with the option. Using the last example, {font-style:italic;} %selector% .custom-font{font-family:serif;} would generate: #header {font-style:italic;} #header .custom-font{font-family:serif;}. Spacing is significant – if you don’t have a space right after the %selector%, there won’t be one in the output. If there are multiple associated selectors for the option, there will be a rule generated for each selector. You can use %selector% as many times as you need. If you put it on the first rule, however, you’ll get a doubled selector (#header #header).
If you don’t want to add any extra styling for the actual option, you can simply include a blank rule at the beginning: {} .custom{rule}.