Styling Tips for Blog Posts Page

Beaver Builder
1

Dear Forum Members,

We are currently making a new blog posts page and the progress can be seen here:
http://www.pairfum.com/blog/

However, we would like to change the following:

  • place the image above post title
  • center align the title, date and author
  • we find the images a bit too big and notice that only the image resolution changes but not the visible image size when we change the featured image size
  • we would like the title / author / read more of both the blog posts and the right sidebar to be black and only turn orange on hover.

Essentially, we are trying to make the new blog look more like our current blog page:
http://www.pairfum.com/news-and-blog/

Do you have suggestions how we can achieve this ?

Many thanks for your help.

Pairfum

2

Hey Pairfum,

Placing the image above the Post Title can’t be done with CSS dynamically. The only way to achieve this is to create a Custom Module or override the Post Module.

You can center the post title and postmeta stuff using this CSS snippet.

/*Center align the post title and post meta*/
.fl-post-feed-header {
  text-align: center;
}

Can change the size of the featured image using this CSS snippet.

/*Center align and change the featured image size*/
.fl-post-feed-image {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

Those links are being controlled by your theme. If you want to override them whenever you use the Page Builder, you can use this CSS snippet.

/*Change link and hover colors when inside the BB Page Builder*/
.fl-builder-content a:hover {
  color: #ffbb55;
}
.fl-builder-content a {
  color: #000;
}

Hope this helps!

Ben

3

Dear Ben,

Many thanks for your reply and CSS snippets.

We are following the guideline in this tutorial for a full-width BeaverBuilder template:
https://sridharkatakam.com/beaver-builder-in-altitude-pro/

Hence, would we need to place .fl-builder-full in front of each of your CSS instructions ? Here is an example:

/Center align the post title and post meta/
.fl-builder-full .fl-post-feed-header {
text-align: center;
}

At the moment, we use the following instructions to display the featured image before the title. Could this be adapted to work with the BeaverBuilder template:
https://sridharkatakam.com/display-featured-images-post-titles-posts-page-genesis/

Many thanks for your help.

Kind regards,

Pairfum

4

Hey Pairfum,

Those should work as is, unless you changed those properties on those elements beforehand, which I don’t think you did.

Unfortunately, the only way to change the layout of the Posts module is to either use the settings it provides, or modify the way it works via custom modules. Also, you can always hit up our User Voice Forums to add a feature request for additional layout. :slight_smile:

Ben