Top Navigation

WP Edit Pro Custom Styles

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.

Enable the Predefined Styles.predefined1
In the content editor, predefined styles appear under the “Formats” button.predefined2

You can use these predefined styles and add them to applicable content area selections. Let’s add a 3D button to some text:

Make a selection and select a predefined style.predefined3
The style will appear properly in the editor.predefined4
The style will appear properly on the front-end of the website.predefined5

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.

A span element titled Red Span; with a class name of mySpan; and inline styles of a red, bold font color.
custom_style1
A p element titled Blue Paragraph; with a class name of myBlueP; and an inline style of a line height of 1.3em.
custom_style2

This example uses a selector to target unordered list items.custom_style3

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.
created_styles

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.

The Custom Styles dropdown menu.custom_style_editor

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.

editor_stylesheet
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.

Password Reset
Please enter your e-mail address. You will receive a new password via e-mail.