Need help? Check out our Support site, then


Post Display Custom Layout

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

  2. 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?

  3. 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!

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

Topic Closed

This topic has been closed to new replies.

About this Topic