[Resolved] Volume: List Child Pages With Title, Featured Image, Excerpt, More button

Home Forums Support Volume: List Child Pages With Title, Featured Image, Excerpt, More button

This topic contains 7 replies, has 2 voices, and was last updated by  David 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1206741

    Tim

    Hello

    I would like to list a Page’s Child Pages in the content. With Title, Featured Image, Excerpt, More button.

    I have tried and tested 5 different plugins that offer such functionality, but for one reason or another I’m not able to match the styling of the Volume Blog post listings.

    If there is not a suitable plugin for this purpose, do you have a code suggestion whereby I could reuse Volume’s Blog listing style ?

    Thanks

    Tim

    #1207187

    David Customer Support

    Hi there,

    was there a particular plugin you liked that allowed all the elements to be displayed in the correct order ? As I may be able to assist with some CSS to match the styling.

    #1208218

    Tim

    Hi David

    That is very kind of you to offer.

    I got the furthest with:

    https://wordpress.org/plugins/page-list/

    and

    https://wordpress.org/plugins/cc-child-pages/

    They are both present on the URL cited in the OP, the later “cc-child-pages” being the closest.

    cc-child-pages has no link anchor in the Title, which would be useful so I’d like to know how to implement that. The more link could look more like button.

    The other thing I had considered was putting the Title as an overlay to the cover thumbnail.

    #1208242

    David Customer Support

    The CC Child Pages looks less convoluted – well at least for styling as all the elements are where they need to be.

    For the title link, looking at the plugin page, there is this Shortcode argument link_titles="true" which should add the link to the title.

    See if you can add that and ill look at the CSS

    #1209129

    Tim

    Hi David

    Thank you for pointing out the Shortcode argument, which I’ve added.

    I already added this CSS:

    .cc-child-pages-thumb {
    height: 250px;
    object-fit: cover;
    }

    As those appeared in the Volume styling.

    Any additional help with CSS would be great.

    I noticed that another Shortcode argument is to add a class class="myclass" and another one specifically for the Title title_link_class="my_title_link_class".

    Might those arguments be used to apply existing CSS from the Volume’s Blog styling ?

    #1209325

    David Customer Support

    Unfortunately they dont provide a class for the read more or an easy filter to change the H2 title to a H3.

    So try this:

    /* Fixed column width and remove spacing */
    .onecol .ccchildpage {
        width: 100%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Increase title size and weight */
    .ccpage_linked_title {
        font-size: 36px;
        font-weight: 800;
    }
    
    /* Adjust spacing between thumb and excerpt */
    .ccpages_excerpt,
    .cc-child-pages-thumb {
        margin-bottom: 2em !important;
    }
    
    /* Style more to look like button */
    .ccpages_more a,
    .ccpages_more a:visited {
        padding: 10px 20px;
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        background-color: #0066b2;
    }
    
    .ccpages_more a:hover {
        color: #ffffff;
        background-color: #0096d6;
    }

    And you can use this Arg to change your read more button label:
    more="More..."

    #1210273

    Tim

    Hi David

    Fantastic.

    Thank you for taking the trouble to interrogate and make the CSS for the page lists consistent with the Volume styling.

    Tim

    #1210478

    David Customer Support

    Glad to be of help … good to see Volume being used 🙂

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.