One largely requested item is a button similar to Microsoft Words “Format Painter” button. Until now, no such button existed.
Format Painter Button
The purpose of this button is to allow easy copying/pasting of styling. A WordPress post or page may have dozens of styles on different content editor elements. A heading tag may have a pretty blue color with a nice indentation; while a notification paragraph may use a yellow, italicized font.
What if you’d like to apply that pretty style to, say, a link; or a list item? Without knowing HTML or CSS, it might be a challenge. However, with the help of the Format Painter button; it’s a breeze!
The Format Painter button will easily allow you to “copy” the styling of one page element; and “paste” it onto a different page element. A popup window will visually guide you through the process.
Working with Page Elements
Let’s walk through the various steps involved.
The Format Painter button will pick up (copy) both the class names and the inline styles used on the element. A window will alert the user the styles have been successfully copied. From here; the styles are stored in a buffer; and the Format Painter button will “depress”, meaning it is active.
You may continue to edit content until you are ready to “paste” the buffered styles onto a new element. When ready, click the Format Painter button again and another window will open. This window contains a few important key pieces of information:
- The class names and the inline styles which were picked up “copied” from the original element.
- The class names and the inline styles if the new element (if any exist).
- An option to “Replace”, “Combine” or “Ignore” the changes:
- Replace – Will replace the new classes and styles with the ones being “copied”.
- Combine – Will combine the old styles with the new styles; and merge them together.
- Ignore – Will ignore the old styles; and nothing will be changed.
Let’s take a look at a simple example post I created; both from the visual side and the text side.
There is a blue Heading 3 element; a bold and italic paragraph element; an unordered list with three list items; and finally another paragraph element.
We are going to copy the purple text from the paragraph element at the bottom of the page, and paste it onto the second list item.
First, we copy the styling from the purple text paragraph. Position the cursor anywhere in the purple text, and click the Format Painter button. A window will open, confirming our classes and inline styles. Click the “Okay” button to buffer the information.
Notice how our inline styles of “color:purple;” have been copied.
Next, we want to select the area where we wish to paste the styles. Position the cursor anywhere in the text on the second list item; and click the “Format Painter” button again (it should still be depressed). A new window will open, displaying additional information (as mentioned above).
Again, we can verify our inline style of “color:purple;” is being applied.
Also, we can note our new element (where we are pasting to) is void of any class names or inline styling.
Verify the information, then make a selection for the classes and a selection for the inline styles. The default option is to “Replace” the styling; since that is the sole essence of a Format Painter button.
That’s it. Our purple text will be applied to the second item in the unordered list.
Extending to other Elements
Because the Format Painter only uses class names and inline styling; virtually any two page elements can be used to copy. Copy from headings to paragraphs, or images to list items; they will all render properly.
Have you found another use of the Format Painter button? Please share it with us below.