You are here: Blog » Updates » New Panels update allows you to set custom CSS for your panels

New Panels update allows you to set custom CSS for your panels

Included with the latest update to Spacer Panels is the ability to to set custom CSS for your panels. If you update to the latest version 1.0.1 of the add-on (In your WP admin > Plugins > Spacer – Panels, click ‘update now’), you can start taking advantage of this new feature.

The End Result

Before we get started, here’s a look at what you might do with the new update.

bnap

For all instances of a panel

The new update allows you to set custom CSS for your panels via the admin page. You can use this to modify your panel borders, panel width, and more. For example, you could use the following code to set the panel to 50% width,  make it centered, and give the panel border a width of 3px. To do this, enter the code in your WordPress admin > Spacer  > Panels (top tab) > Select Panel > CSS: width:50%;margin:0 auto;border-width:3px;

panel_edit

For a specific instance of a panel

Suppose you want to customize a specific instance of a panel, but leave all other instances of that panel on your site unchanged. You can do this by adding a style attribute to the shortcode for that panel. For example, if you wanted to give a panel a 10px panel border, the shortcode would look like this:

If you need help with CSS, please send a message and I can try and point you in the right direction.

Thanks for taking the read this quick Spacer Panels update. Hope you find it helpful. Please feel free to share in the comments how you end up implementing the new feature on your site.

The headers (The End Result, For all instances of a panel, etc) and dividers on this post were proudly made with Visual Artist
This entry was posted in Updates and tagged by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over fifteen years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">