Styling Excerpts

[nstratman]

On the test page http://www.lavenhamliteraryfestival.co.uk/test-home-page using Xtreme+ I have implemented a post excerpt which reflects what I understand my customer is after. The idea is that as planning for the 2015 festival proceeds, authors will be signed up to take part. We’d like a nice way to reflect that on the home page and allow for further reading if required. So first I used the plugin which allows categories to be used with pages, and assigned the category author-2015 to some test pages. To my pleasant surprise the Xtreme feature posts with page works even though the entities being summarised are pages not posts. I’ve set the feature image, and chosen to display in masonry columns of 3. Then when the customer adds new author pages, they just have to assign the category, set the featured image, and the new page excerpts will be added to the grid.

What I want to be able to do is make some changes to the style and content of each cell in the grid, for example:

• centre the featured image
• remove the stray bits of text that appear next to the image instead of below
• reduce the number of words in the excerpt
• apply some style to each cell in the grid, such as perhaps borders and a colour coded title

I’m starting to learn about using inspection tools to find out the class I need to style, and have successfully done this in one situation. Do I need to use the same method for changes such as those above, or is there a better way? I assume style will not impact the excerpt length. How can I modify that?

Finally can you explain why cell 1 in row 2 is void rather than cell 3 as I would expect? I have 5 pages with the category assigned for this test.

Thanks.

[scrambler]

You have options to center the featured image in Main option > Post Specifics > Featured Image

Centering the featured image will automatically make the text start under and not flow beside it

You can set the excerpt length In Main options > Post Specifics > Excerpts section

You can style the post by adding CSS in Main options > Post Specifics >  Post BG CSS+ box.

If you only want style for them in that page, you can add a rule like below in Main Options > FOnts & Custom > Custom CSS Rule box

.page-id 1177 #blog-posts .blog-post {border:1px solid black;}

Finally, there is no reason to use masonry if you want regular rows, just use 3 regular columns for your posts

[nstratman]

Brilliant thank you. As the entities are pages rather than posts, I didn’t think to use the post specifics section of the theme options.

[nstratman]

As a follow up, having set up the page with posts, and got your advice re styling, I see that on my iPhone the excerpts are not responsive in the way I would expect. The excerpts content wrap in the viewable area ok, but the 6 images (I’ve added 1 since the above discussion) instead of displaying 2,2,2 as I would expect, show as 2,1,2,1. Is this to be expected, and can I influence this by using mobile styling options?

http://www.lavenhamliteraryfestival.co.uk/test-home-page

[scrambler]

How are you creating the 3 columns?

[nstratman]

Just using the ‘Display Post Columns’ Setting in the Page with Posts Template area

[scrambler]

OK, then it appears there is a bug.

@weaver, When using the display post as 3 columns, when the browser gets to the mobile size, The css for the column width does change to a width of 49.8% to make 2 columns, but the clear:left that was on the 3n+1 post remains and prevents the 2 columkns to look ok (you get 2 then 1 then 2 then 1….

Normally when the 3 columns CSS changes from 3 to 2 columns, the clear needs to be on the 2n+1 post

@nstratman To fix that for now, you can add the rules below in Main Options > Fonts & Custom > Custom CSS Rule box

.is-mobile .content-3-col {clear:none !important;}

[Weaver]

@scrambler –

I don’t think your rule fixes things. There is an inline style=”clear:left;” on BOTH 2 column and 3 column posts, and the clear none breaks the mobile 3 reduced to 2 column layout, too.

To fix this may require new CSS, and removing the inline style. The other fix might be to change jump directly to one column display.

[scrambler]

When I tested, the rule did fix it, but only if all the post have the same height as without any clear, the post stacks based on the width, and if the first post in a column was higher than the one in the second column, the one stacking would but against it and leave a hole in the layout..

So it is not a real fix, just seemed enough for his case.

Ideally you would not use an inline clear:left, but may be you can use a clear based on an nth-child rule

[Weaver]

I got it fixed – needed some nth-of-type rules, removed the inline clear. Will be in 1.2.3, whenever that happens – updates are 2 weeks out, but I have other changes that need done also.

This issue must actually go all the way back to Weaver II. The fixed version is now “broken” on IE8 – degrades sometimes depending on the height of the 3rd column posts, but does not affect content. I suspect the inline clears were there to make it work on IE8.

[Author]

Posts