Home Forums Weaver Xtreme Theme Styling Excerpts

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17772
    nstratman
    Participant

    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.
    #22042
    scrambler
    Moderator

    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

    #22043
    nstratman
    Participant

    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.

    #22044
    nstratman
    Participant

    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?

    #22045
    scrambler
    Moderator

    How are you creating the 3 columns?

    #22046
    nstratman
    Participant

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

    #22047
    scrambler
    Moderator

    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;}

    #22048
    Weaver
    Keymaster

    @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.

    #22049
    scrambler
    Moderator

    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

    #22050
    Weaver
    Keymaster

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.