Core Features:

Custom CSS Selector Styling

The core of the plugin is Selector Rules panel where you can add any number of CSS selectors to be styled with any font, a number of font and text-based styles, box model styling and text and box shadows.

Selector Rules
Selector Rules

Selector Rules Grid

The plugin allows you to add any selectors for assigning font or full styling. You can add standard selectors from the predefined list, selectors from currently detected theme (all default WordPress themes are directly supported), add fully custom selector you need or create a selector for TinyMCE editor Formats drop down menu. When adding new selector, you can copy styling from existing selectors.

Selectors list can be reordered (arrow or drag-drop). In the list, you have options to preview, delete, disable (or enable) selectors, see currently active styling, assigned font. Most important feature is to use the Styler dialog where you can change the font and all kind of styling for the selector.


Preview Selector CSS

Any selector styles can be previewed as CSS, and this includes shadows.


Adding New Selector Rules

You can add selectors for styling with a very helpful tool on the Selector Rules panel. You can start by simple default selectors (headings, paragraphs, body…) if you want to affect a wide range of page elements. Or, if you need very specific selectors to match one or two elements, switch to Custom Selector and enter its label (for informational purposes) and exact selector in the field.

If you want to add the selector for WordPress TinyMCE editor integration, you get more options to specify the type of element, the method for integration and tag that will be affected. This will generate new entries for the Format drop down in the editor toolbar.

And, the plugin allows for integration with themes and plugins, so depending on the theme you have installed you might see new selector types: From Current Theme and From Plugin. The plugin has predefined selectors for WordPress default Twenty themes (2010 – 2015) and if you use any of these, the plugin will load rules for it for easier styling. You can add rules for any theme (instructions provided in the user guide), and same goes for plugins.

When adding new rules, you can start with an empty rule, or you can select existing selector to copy settings from it. This way you can easily reuse and expand on styles you already created.

Selector Styler Editor

Styler in Action
Styler in Action

Styler has several tabs with CSS styles you can apply to any selector. Any change made is reflected in the preview. You can set font family, various font styles, text styles, box model and text and box shadows. Shadows editors have multiple predefined shadows and you can add any number of shadows you nee.