Blog styling quesitons

Support
#1

Hi, hope you can help:

I like how this looks as a whole, but can I?:

1: center the word news.

2: add more padding around each article

3: Make them all evenly spaced, even though the featured image might be a different size…so they all line up equally.

Also, on the individual post, how do I take out the header “NEWS” Or maybe keep it, but make it link back to the blog index page?

#2

Hello @logoglo,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.blog .h-landmark {
    text-align: center;
}
.x-iso-container-posts>.hentry .entry-wrap {
    padding: 10%;
}

For equal height blog entries, please use solution mentioned in following thread.

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Please note that providing support for custom codes (like CSS and JS changes) falls outside the scope of support we can offer. In case of any issues with the layout because of custom codes we won’t be able to provide support.

Thanks.

#3

Most of that worked, but the equal height, didnt, it bunched them up together and the images where still different heights, so it didnt work.

Also, on the individual post, how do I take out the header “NEWS” Or maybe keep it, but make it link back to the blog index page?

#4

Hi There,

Sorry you can not make that an equal height because that is how a Mansory style blog posts are (Theme Options > Blog > Style)

If you want an equal height posts grid, please utilize the The Grid or Essential Grid extension instead.

To hide the News landmark header on the individual posts page, please add this to Theme Options > CSS

.single-post .x-header-landmark {
	display: none;
}

Hope it helps,
Cheers!

#5

Thanks, could they not be made equal with a bit of css? I know the factors are the title lengths and image sizes, is there anything that can be done? I could change the title length, but for example, is there a way to keep the image at a certain height? and keep the excerpt a certain length? I set it at 30, but others seam to be longer than others.

#6

Hi there,

It would take more than a bit of CSS code to make the Masonry layout display evenly as it is not how it’s designed to display.

You might want to use either The Grid of the Essential Grid plugin to display the post items instead.

Here are some examples:

https://theme-one.com/the-grid/caracas/

Hope this helps.

#7

Thanks, Im checking it out, and seams the best solution, thanks.

#8

Glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.