Understanding the CSS Class Selectors used in LayoutPal tutorials
My first job is to add content to my front page. I do this by dragging widgets into widget areas. For example I could put a text widget in the front-page-2 widget area, then type some words into the text widget. The words I’ve typed now display in the front page 2 section of my front page.
My next step is to style the content in those widgets and change how my front page looks
To do this I need to find the relevant CSS Selectors.
In many of the videos I’ll be using the Infinity Pro theme by studioPress. But the basic principles I’ll teach you, should work on most themes that have the Genesis Flexible Layout Grid, built in to the front page code.
Once you understand how this process works, styling your home page becomes much easier.
If you want to follow along exactly without using the plugin, this is the code I made in the video.
You will need to add a CSS class of johnsonBox to one of your widgets. You’ll need the Widget CSS Classes plugin to do this.
You can paste the code directly into WordPress via…
Appearance > Customize > Additional CSS (in WordPress versions 4.7+)
.johnsonBox {
border: 2px solid #FFFFFF;
padding: 25px 25px 25px 25px;
}
Targeting the home page sections of your theme
The home pages of themes such as Infinity Pro and Altitude Pro are divided into sections or stripes. Each section or stripe has it’s own name. Unfortunately the themes are not labelled consistently but they are very similar. So you’ll find sections labelled front-page- in some themes and home-page- in other themes. Either way it’s obvious you’re dealing with the front page of your site.
So if I wanted to target all h4 headlines in the front page 2 widget area of my site, I would use code like this…
.front-page-2 h4 or .home-page-2 h4
Any style I added to that selector would be applied to all h4 headings in the Front Page 2 widget area of my site.
But what do you do if you have three h4 headlines in the same widget area, but you only want to style one of these headlines?
I would use the Widget CSS Classes plugin. This plugin allows me to assign CSS classes to any widget.
This system allows me to individually style any element in any row of my front page. I can also style individual elements in the sidebar or footer etc.
I’ve now got real control over the content I display in any widget area and I can style that content in any way I wish.
Practice makes perfect
The easiest way to understand how this works is to follow along with some of my tutorials. Then experiment on your own site. I highly recommend that you use a practice site when ever you’re learning a new skill.
Bitnami is a good way to install a practice version of WordPress on your own laptop. That way you don’t risk breaking your real website.