[Resolved] post design help

Home Forums Support post design help

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #1294258
    William

    Hi there,

    I was wondering if it is possible to have a similar post design like the website I linked. They have the featured image on top, then category in middle and post title bottom all centered in a container. Do I need CSS combined with wpsp?

    Thanks in advance!

    #1294515
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You’ll definitely need some CSS/PHP. Are you wanting to do this with the GP posts or within WPSP?

    #1294580
    William

    Hi Tom,

    Within WPSP.

    Thank You!

    #1294891
    David
    Staff
    Customer Support

    Hi there,

    do you have a live site with an example of the WPSP lists ? I can then look at whats required – let me know

    #1295732
    William

    Hi David, I’ve linked the site. Here’s the reference site: thespruce.com
    Thank You!

    #1296009
    Tom
    Lead Developer
    Lead Developer

    In the Show Posts settings, can you set the “Terms location” to “Below title”?

    Then we should be able to tweak it with some CSS.

    #1296099
    William

    Hi Tom, I’ve set them to below title.

    Thank You!

    #1296381
    David
    Staff
    Customer Support

    Lets give this CSS a shot – currently it will only apply to the first post list after the grid hero:

    #wpsp-1275 .wpsp-content-wrap {
        padding: 10px;
        text-align: center;
        position: relative;
    }
    
    #wpsp-1275 .wp-show-posts-inner {
        box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.09);
    }
    
    #wpsp-1275 .wp-show-posts-entry-title {
        font-size: 16px;
    }
    
    #wpsp-1275 .wp-show-posts-entry-meta-below-title {
        position: absolute;
        font-size: 0.75em;
        text-transform: uppercase;
        padding: 0.25em;
        top: -2.4em;
        left: 50%;
        transform: translatex(-50%);
        background-color: #ddd;
    }
    
    #wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms {
        position: relative;
        font-size: 1em;
    }
    
    #wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:before,
    #wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:after {
        content: '';
        display: block;
        width: 1.5em;
        height: 1.5em;
        background-color: #ddd;
        position: absolute;
        top: -1px;
        transform: rotate(45deg);
        z-index: -1;
    }
    
    #wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:before {
        left: -1em;
    }
    
    #wpsp-1275 .wp-show-posts-entry-meta-below-title .wp-show-posts-terms:after {
        right: -1em;
    }
    
    #wpsp-1275 .wp-show-posts-image img {
        width: 100%;
    }

    If that works correctly and we want to apply it elsewhere will need to make some adjustments to your HTML and the CSS.

    #1297028
    William

    Hi David, it works perfectly fine! So how would I go about applying it to all my wpsp list?

    And are there any CSS that I can delete to free up some space?

    Thank You So Much!

    #1297291
    David
    Staff
    Customer Support

    It will only work on the lists that have that same layout – so the first list and the Breeds list for example. So you can’t just ‘apply to all’ – instead we need to be selective.

    If you have WPSP Pro you can edit the List and there is a Custom Classes field. Within you could add a class e.g category-list

    Then in the code above you would replace #wpsp-1275 with category-list

    If you only have the WPSP Free then you would need to add a HTML container around each list eg.

    <div class="category-list">
    Add you WPSP Shortcode here
    </div>

    Then in the code above you would replace #wpsp-1275 with .category-list .wp-show-posts

    #1299998
    William

    Hi David, Thank You! I’ll give it a try.

    Also, is there any default theme CSS I’m able to delete if I decide to add the above CSS? Trying to free up some space.

    Thanks once again!

    #1300154
    David
    Staff
    Customer Support

    If you mean the CSS in Customizer > Additional CSS ( which was installed with the Dispatch Site ) – not really its as lean as it can be.

    The Theme CSS cannot be edited simply.

    Its not something i would be concerned about the Theme plus the Sites CSS is super minimal anyway

    #1301391
    William

    Hi David, so if I make all my wpsp list the same layout, do I still have to add HTML container around each list?

    If so how do I do that?

    Where do I add the code

    Thank You!

    #1301641
    David
    Staff
    Customer Support

    In the block editor add a HTML Block, then add this HTML, with your Shortcodes in place of the text:

    <div class="category-list">
    Add you WPSP Shortcode here
    </div> 
    #1302450
    William

    Hi David, I was able to do it! Thank You!

    I have 2 quick questions.

    How can I change the hexagon background shape that’s behind the term title into a rectangle?

    How do I change font color/style of the term and author?

    I played around with the CSS but with no luck.

    Thanks once again!

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