In this video I…
- Changed the background color of Front Page 5 widget area of Infinity Pro theme.
- I used 150 x 150 pixel square thumbnail images.
- I didn’t need to center the images and text because the theme’s built in CSS style sheet has already centered the content of all widgets in Front Page 5 widget area.
The plugins used are the Black Studio TinyMCE Widget and a premium CSS plugin.
The CSS selectors I used were…
.front-page-5 .front-page-5 img .front-page-5 h2 .front-page-5 p .front-page-5 a.button
The button code is…
<a href="#" class="button">Button</a>
The Hexadecimal code for the blue color is: #136ec2
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-5 {
background: #2B5DFF;
}
.front-page-5 img {
border: 3px solid #FFFFFF;
margin: 0px 4px 0px 4px;
}
.front-page-5 a.button {
background: #D43C67;
}
.front-page-5 h2 {}
.front-page-5 p {}