Often times, the need to customize the look and feel of your site may require some extra work by manually applying new CSS styles, overriding MemberPress template files and can even extend out to hiring a developer to get a site looking the way you envisioned. With that said, you can quickly see how things can get a little time consuming and can become a little costly.
Luckily, there’s a WordPress plugin out there that may be just what you might have been looking for – the Visual CSS Style Editor Plugin, also called the Yellow Pencil Plugin. We’ll just use the Yellow Pencil name for the purpose of this article.
What is the Yellow Pencil Plugin?
The Yellow Pencil plugin is a highly advanced theme editor, which allows anyone to quickly and easily edit their website theme, layout and so much more in real time. Making changes to your form fields, button colors are just a small portion of what this plugin can do. Simply select the page you’d like to make the changes on, and start making your changes right then and there – no need to modify any WordPress files directly or outsource things out to a web designer.
You’ll first need to head over to your plugins page to get the plugin installed, just as you would for any WordPress plugin. Once you’re on the Plugins page, just click on the ‘Add New’ button, and do a search for either ‘Visual CSS Style Editor’ or ‘Yellow Pencil’. Both search keywords will pull up the plugin as seen below:
Then just click on ‘Install’ and then ‘Activate’ the plugin to get it enabled and ready for use. Once that’s done, you’re ready to get going!
How to make styling edits on your pages?
To start with editing your pages, simply visit any of your pages, as you’re logged into your WordPress dashboard, then click on the element on the page you'd like to edit. We'll point out some examples on how to do this with editing text and button elements.
After clicking on the element on the page, a panel will appear on the right with some options available for that element you selected.
We’ll use the MemberPress Account page as an example here. Let’s say we want to bold the ‘Logout’ menu text on the page. By clicking on the ‘Logout’ text element, several options will now appear on the right as seen below:
In our example, we’d like to bold just the ‘Logout’ text. To do this, you would click on the Text option on the right panel to expand and show several options. We would then head to the Font Weight attribute, and select the preferred value to bold the ‘Logout’ text.
The ‘Extra Bold 700’ value was selected, and here’s the result of the bolded text:
There are several other options available to make changes to your text – you can explore the ones that will fit your needs.
If you're looking to make some quick edits to your buttons, you can easily do that with the Yellow Pencil plugin. We'll use the MemberPress registration page as example. And in this case, we want to change the button shape to be a little more rounded.
Simply click on the button element on that page – that will load the button options on the right side of the page as captured below:
From this point we can click on the Border Radius option to expand and see the options available for shaping up our button. When the options appear for the Border Radius, you'll see that you have the capability to use either use the slider or you can manually input the radius value you'd like to use to increase or decrease the rounded corners. Here's an and example of how that looks with the Top Left Radius being modified.
Once you've determined the button radius values you'd like to use, the same values can be applied to all the other radius properties to get the final rounded look for the button.
Previewing and Saving your Changes
Before committing to your changes or saving them, it’s always a good idea to see how things will look when they get published. So to quickly check your changes in live mode, you can simply click on the ‘Live Preview’ option, found in the top area of the right panel.
Once you confirm your changes, and are satisfied with them, click on the “Save” button from the Yellow Pencil panel to publish your changes.
As you will probably notice, the free version of this plugin may not have the ability to completely overhaul your site’s design in some instances. But if you’d like to do a little more with this plugin, upgrading to the Pro version will unlock many more premium features and options – you’ll have little more control over your layout design, text, button styles and so much more. But overall, if you’re just looking to make some quick edits to your text, buttons and several other layout changes, the free version should do just the trick.
For more details about the Yellow Pencil Plugin, you can review the plugin page here, which includes a live demo and introduction video. You may also find the Yellow Pencil Plugin documentation as a great resource too, so don’t forget to check that out. Happy editing! 🙂