Post Display Custom Layout

  • Author
    Posts
  • #2773977

    resetasia
    Member

    Hi there,

    I would like to display my case studies posts on my case studies page here: https://resetasia.wordpress.com/our-portfolio/case-studies/

    I was wondering if there was a way to edit the CSS to make the posts look like the Venture Theme effect displayed on the page (see NRDC: Clean by Design program, WWF: Scaling-up Carbon-Finaced Forest projects in Mekong Region, etc.).

    I really like the whole Venture theme layout, however, the page function does not allow for the tags display. As such, I’ve manually changes my pages to posts. The effect definitely does not have the same appearance as the theme. Thus, I’m hoping you can help me with customizing the CSS to make it similar to the theme effect.

    Thank you!

    The blog I need help with is resetasia.wordpress.com.

    #2774158

    Hi there, are you talking about the images with the blue linked block with text beside the images? If so, it looks pretty good to me. I do notice that the bottom pair is not aligned as the others. If you change display to inline-block in your .listing-item CSS rule it will fix that. It would look like this.

    .listing-item {
        display: inline-block;
        list-style-type: none;
    }

    …however, the page function does not allow for the tags display.

    Are you talking about in the sidebar, or about assigning tags to pages like you can with posts?

    #2774162

    resetasia
    Member

    Hi,

    Yes the blue linked block with text beside the images. Could you please show me what other layout options are possible? I really like the venture theme boxes at the bottom of the same page where there’s text and color overlaying the image and when you hover your mouse over the image, it darkens.

    RE: .listing-item CSS rule, thanks for providing the CSS. However, this also changed the layout on my “Our Portfolio” page (https://resetasia.wordpress.com/our-portfolio/). Would it be possible to just have this CSS rule apply to the “Case Studies” page?

    Please let me know if it’s possible.

    Thanks for your help!

    #2774168

    Yes the blue linked block with text beside the images. Could you please show me what other layout options are possible? I really like the venture theme boxes at the bottom of the same page where there’s text and color overlaying the image and when you hover your mouse over the image, it darkens.

    The boxes at the bottom with the dark overlay when hovered have an extra div that the darkening is applied to when you hover. Since you are using the display posts shortcode, we can’t really do that sort of effect. You could do the layout completely in HTML instead of using the shortcode, but it would not update if and when you added more items to that particular tag, so it would be a completely manual thing.

    RE: .listing-item CSS rule, thanks for providing the CSS. However, this also changed the layout on my “Our Portfolio” page. Would it be possible to just have this CSS rule apply to the “Case Studies” page?

    Absolutely. What we can do is precede the .listing-item CSS class with the unique page id class from the opening body HTML tag on your case studies page to target only that page. This would be the CSS.

    .page-id-222 .listing-item {
        display: inline-block;
        list-style-type: none;
    }

The topic ‘Post Display Custom Layout’ is closed to new replies.