Moving post headline below featured image

Byline centred for post

As a default, the headline for a post sits above the featured image, along with the Auther and date. My personal preference is to have all the text below the featured image, making this the first and standout feature of any post.

Site in the beginning

Site in the beginning

In this tutorial, I’m going to show you how to move this headline using the Skin Editor.

Next, we are going to centre the headline and other details below the image, which will make it look neat and inline.

1) Move the Headline using the Thesis -> Skin Editor

This is quite a simple part. To move the headline below the featured image, first, goto the Thesis->Skin Editor menu option.

Your current skin will look similar to the following image.

Skin Editor before change

Skin Editor before change

We need to move the ‘Headline Area’ block below the ‘WP Featured Image’ block. This places the featured image as the first item for a post.

Skin Editor after moving block

Skin Editor after moving block

After this is done, the site looks as follows.

Site after moving headline block

Site after moving headline block

2) Center headling and author elements

The first thing to do is centre the Headline. This is done with by adding this small bit of CSS to in your Custom CSS

.headline {
  text-align: center;
}

If you have followed a previous tutorial where we do some changes to the headline, you may already have a headline block in your Custom CSS. Just add the text-align to that.

This centres the headline. Next, we want to centre the author and date details. To do this, we need to add this next CSS to the Custom CSS

.small
{
  text-align: center;
}

This centres the Byline, which is the author’s name, date edited and any other details there. After this change, your post will look something like the following

Byline centred for post

Byline centred for post

Was this tutorial useful?

Please let me know if this small how to tutorial was useful and easy to follow. Every tutorial I put up, I try to make it as easy to follow and each one is small changes with a small number of steps.

In doing small changes, we can ensure all is done correctly and we don’t miss any issues.

Note: The changes in this post are for the Thesis Classic Responsive skin. Although some of the visual builder elements may be the same for other skins – the CSS changes may not work for other skins.

 

About the author: I’m a Software Engineer by trade and for a while I have been spending my time creating Websites and Blogs with Wordpress. I recently started to use the Thesis Framework and found only a few tutorials and help. So, I started this site to document what I learn and to share with others. I’m also available to help on a one to one basis for those that would like to work with me.

{ ( 0 comments… add one ) }

Leave a Comment