The WP Edit Pro Custom Styles has always been a premium plugin… until now. Beginning in version 1.7 of WP Edit Pro; the Custom Styles addon has been incorporated into WP Edit Pro.
Custom Styles will allow a user to create unique styles (inline or by class name), which will appear in the “Formats” editor dropdown button. These custom created styles can then be applied to any element in the content editor.
WP Edit Pro Styles Tab
Visit the WP Edit Pro admin settings page, and click the “Styles” tab. This tab contains four different sections.
- Enable Predefined Styles
- Create/Edit a Custom Style
- Created Styles
- Editor CSS Stylesheet
Enable Predefined Styles
The Predefined Styles include over 80 styles, written by the plugin author. When enabling the option, these predefined styles will appear in the “Formats” dropdown button.
Predefined styles include text colors and weights, color inset boxes, link download buttons, and much more.
Create/Edit Custom Style
This is the area where custom styles can be created/edited. When a custom style is created, it will be added to the “Created Styles” box below. Unlimited custom styles can be created. We will be looking at how to create a custom style further down this article.
Created Styles
After a custom style is created, it will appear in this table. Each custom style can be edited (loading it back into the “Edit Custom Style” area); or deleted.
Editor CSS Stylesheet
This editor stylesheet will be applied to the TinyMCE content editor. If it is desired to change the default CSS behavior of the editor, this is where the changes need to be made.
Enable Predefined Styles
By enabling the Predefined Styles option; a new sub-menu item called “Defined” will be added to the “Formats” editor dropdown button.
You can use these predefined styles and add them to applicable content area selections. Let’s add a 3D button to some text:
Create/Edit a Custom Style
Custom styles can also be created. When one or more custom styles are created; a new sub-menu item called “Custom” will be added to the “Formats” editor dropdown button.
Creating a custom style follows the TinyMCE formatting syntax (more info). There are six steps when creating a custom style:
Step 1: Title
A title will need to be entered for every custom style. Titles are case-sensitive, and cannot be duplicated. You may have MyTitle and myTitle; but you cannot have myTITLE and myTITLE.
Step 2: Type
There are three types of custom styles; inline, block and selector.
Inline Type
Inline types include span, bold, italic, strong, button, code and img elements. These types of elements appear “inline”; typically inside a p element.
Block Type
Block types include div, blockquote, h1 – h6, p, pre, ol, ul and table elements. These types of elements appear as a block.
Read more about the Differences Between Inline and Block Level Elements.
Selector
For even further custom control, a selector may be entered. Let’s say we would like to target all span elements inside a p element; our selector would be p span. Or, if we wanted to target each list item in an unordered list; our selector would be ul li.
Step 3: Element
The Element selection will change, based on which item “Type” is selected in step 2. If “inline” is selected in step 2, the available inline elements will appear. If “block” is selected in step 2, all available block elements will appear. If “selector” is selected in step 2, an input field will appear here, where you may enter your selector syntax.
Step 4: Classes
Specific class names can be inserted here. If you prefer to keep elements using class names; and the class is defined in the theme stylesheet; the element will appear with the proper styles in the front-end of the website. The element WILL NOT appear with the proper styles in the tinymce editor (content editor), unless you also add the class name to a stylesheet used by the editor (more below).
Step 5: Styles
CSS styles can be inserted here. These styles will apply only to this element; so it is only necessary to enter the “property name: property value;” pairs. Let’s say we wish the element to be a red color with a bolded font; we would enter color:#F00;font-weight:bold; into this area.
Step 6: Wrappper
If true, the created style will be used as a block level wrapper. This will typically be set to “false”. The wrapper option will disable itself if “Block” is selected in step 2 above; since it is not applicable.
Custom Styles Examples
Let’s look at a few examples.
Created Styles
As new custom styles are created, they will be listed here. This provides quick access to edit and delete a custom style; as well as a great reference for each styles attributes.
Edit Style
This button will load the selected custom style back into the “Create/Edit Custom Style” area. The custom style attributes will be auto-loaded; and can be easily modified and saved again.
Delete Style
This button will delete the selected custom style. This action is permanent; and the custom style will no longer be available.
Custom Styles in Content Editor
The custom styles created will appear in the content editor, under the “Formats” dropdown button.
Editor Stylesheet
Alas! An easy way to add a stylesheet to the TinyMCE editor (content editor) initialization process. Here is how it works:
- The editor below is a CSS stylesheet editor. It will highlight and space CSS code accordingly.
- This stylesheet gets included in the loading of the TinyMCE editor. Any styles added to the stylesheet below will be used on content inside the editor.
- For example, if p{color:red;} is entered into the stylesheet below; all p elements in the editor will appear with a red font color.
- When the editor is loaded; the styles below will be written to a .css file; and included in the loading of the editor.
Use the stylesheet to add classes or selectors matching that of your active theme. It’s a good idea to look at the themes stylesheet, and try to mimic the commonly used styles and classes.
Then, create a custom style which matches the class name; and your users will easily be able to apply your custom styles to the editor content.