This is the script I used for the video
Hello. I’m using the Infinity Pro theme by StudioPress.
In this video I’m dealing with the Front Page 6 widget area. Front Page 6 is one of the white rows on the front page.
This theme has a built in CSS class that, if applied to a text widget, will make the background color grey and make the font size smaller.
I’m going to apply this CSS class, or style, to some of the text widgets in the Front Page 6 widget area of my site.
I’m also going to add a border to these grey boxes and add a horizontal rule beneath one of the headlines.
What I did in the video
Show FINISHED Front Page 6 row in MY demo theme.
Show Edit > Widgets > Front Page 6: the widget area I deal with in the video.
Put call out box slide on screen showing HTML used in text widget.
Remove styling from CSShero (the Premium plugin I use to write the CSS) and then start from scratch.
This is the code we need…
.front-page-6 .content-box .front-page-6 hr .front-page-6 .smallParagraphText p
If you want to follow along exactly without using the plugin, this is the code I made in the video.
This code will not work in other widget areas.
You can paste the code directly into WordPress via…
Appearance > Customize > Additional CSS (in WordPress versions 4.7+)
.front-page-6 .content-box {
border: 1px solid #CCCCCC;
}
.smallParagraphText p {
font-size: 28px;
font-size: 2.8rem;
font-style: italic;
// color: #CCCCCC;
line-height: 2.00;
margin-bottom: 0;
}
.front-page-6 hr {
border-bottom: 1px solid #CCCCCC;
}
Color used is #bababa
After this I explained that we need to add our own unique class to the first and last text widgets because I wanted to make the text smaller, but only in these two widgets.
1. Add border to content-box.
2. Search for .front-page-6 hr and change Border Top color.
3. Change paragraph text size.
As you can see, customizing your home page to make it look unique is not that complicated.
I bought a premium plugin to help me with the CSS but you could write the code by hand if you wish.
That’s all for now. I hope to see you soon in the next video.