Custom CSS for a Blog Style listing using the Genesis Featured Post widget
This is the script I used for the video…
I want to build a blog style listing, in one of the Front Page widget areas, of Infinity Pro theme by StudioPress.
To do this, I will put one Genesis Featured Post widget, in one of the Front Page widget areas of Infinity Pro. I’ve set the widget to display three posts. The posts will display one above the other in a blog style listing.
Now I want to target the different elements in this widget area.
I will target the featured image, the widget title, the post title and the excerpt text.
I’m using a premium plugin to help me write the CSS and my first job is to tell the plugin which CSS selectors I’ll be using.
These are the selectors I used in the video…
.front-page-4 .front-page-4 .widget-title .front-page-4 .entry-title a .front-page-4 .entry-header::after .front-page-4 .featured-content p .front-page-4 .featured-content .alignleft .front-page-4 .widget-title
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-4 .entry-header::after {
display: none !important;
}
.front-page-4 .entry-title a {
display: block;
font-family: Helvetica, sans-serif;
font-size: 32px;
font-weight: normal;
}
.front-page-4 .featured-content .alignleft {
}
.front-page-4 .featured-content p {
font-family: Helvetica, sans-serif;
font-size: 22px;
}
.front-page-4 .widget-title {
font-family: Helvetica, sans-serif;
}
@media screen and (min-width:1024px) { .front-page-4 .entry-title a { text-align: left!important; } }
@media screen and (min-width:1024px) { .front-page-4 .featured-content .alignleft { float: left!important; } }
@media screen and (min-width:1024px) { .front-page-4 .featured-content p { text-align: left; } }
@media screen and (min-width:1024px) { .front-page-4 .widget-title { text-align: left; } }
@media screen and (max-width: 667px) { .front-page-4 .featured-content .alignleft { float: none; } }
The WIDGET title, not post title.
.front-page-4 .widget-title
The Genesis Featured Post widget’s, post title.
.front-page-4 .entry-title a
The underline between The post title and the excerpt.
.front-page-4 .entry-header::after
The excerpt paragraph.
.front-page-4 .featured-content p
The code I used to build a media query that centres the Featured Post image on mobiles.
.front-page-4 .featured-content .alignleft
This is what I did in the video…
- I changed the font size and the font family of the widget title and the post title.
- I change the font size of the excerpt paragraph.
- I used a media query to left align the text, but ONLY on large monitors.
- I used a media query to centre align the featured image. Because I used a media query, this will only affect small mobile devices.
As you can see, the Genesis Featured Post widget is incredibly useful. You can easily build blog style listings that display the post title, featured image and an excerpt of the post’s content.
If your blog post has a featured image, you can tell the Genesis Featured Post widget to show or hide that featured image. And if you choose to display the featured image, you can set the image’s size and alignment.
The Genesis Featured Post widget also includes a read more link that your site visitors can click to view the full post.
After watching this video, you now have the skills to make your own blog style listings and customize their look to match your own web site.
That’s all for this video. You’ve just learned a really useful skill. Give yourself a pat on the back, you deserve it!
Bye for now. I hope to see you soon in the next video.