[Resolved] Trying to customize a post style

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Trying to customize a post style

This topic contains 19 replies, has 3 voices, and was last updated by  Tom 3 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #8677

    Carlo
    Participant

    Hi Tom,
    currently using the beta version and am trying to make a similar style blog post layout and look to https://d.pr/i/cDBSso

    To be honest im not really getting anywhere close yet, best i could do was set the “cards” as Base but it seems the image ratio is preset and i cant seem to change it – trying to keep the aspect ration 2:1 (1200×600)

    is it possible to get some tips to be able to style:
    -featured image (so the aspect ratio stays true) EDIT- i think i got the image ratio correct now.
    -style the size, font & bold of the excerpt content and title (separately)
    -slight shadow to the outside of the box
    -only have the padding effect the text and not the image

    thanks

    • This topic was modified 4 months, 1 week ago by  Carlo. Reason: update
    #8688

    Tom
    Keymaster

    Hi there,

    Any chance you can link me to what you have right now so I can provide accurate CSS?

    Thanks! 🙂

    #8699

    Carlo
    Participant

    hey Tom,
    just sent through the details on the support contact form with Url and the url im trying to style similar to

    #8706

    Tom
    Keymaster

    How about this?:

    #wpsp-2687 p.wp-show-posts-entry-title {
        font-weight: bold;
        font-size: 22px;
    }
    
    #wpsp-2687 .wp-show-posts-entry-summary {
        font-size: 16px;
    }
    
    #wpsp-2687 .wp-show-posts-inner {
        box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
        border: 1px solid #dfdfdf;
    }

    Let me know 🙂

    #8711

    Carlo
    Participant

    hi Tom,
    I added that in via Simple CSS but none of it is making any changes and im not sure why?
    any ideas?

    #8712

    Carlo
    Participant

    do i also need to add any functions code via the snippets plugin?

    #8732

    Tom
    Keymaster

    Nope, only CSS. I just tried it in developer tools and it worked.

    Can you try clearing any caching plugins/autoptimize?

    #8817

    Carlo
    Participant

    Hi Tom,
    Sorry for the delay, worked out why the CSS changes were having no effect (although i found they were originally working in mobile view fine),
    it was/is some previous CSS i had that i am using to style a element header, if i take that out the WP show posts CSS takes effect (also if i make the wp show posts CSS before the element header CSS it works).
    here is both codes. as it is below, the wp show posts code doesnt work, but if i put it first it works (is there any obvious conflicting code here which i cant see?

    Also got 2 more questions:
    1: what CSS can i use to make both the post title and post entry line-height smaller (its a little too spread out at the moment).
    2: if i want this CSS to take effect on other wp show posts pages i make, how do i incorporate each wp show post id and combine them into this CSS?
    thanks heaps Tom

    /* Element Header – Author, Date, Category Font Size CSS Change */
    .hero-meta {
    font-size: 15px;
    }

    /* Author,publish,category make spacing and responsive on mobile */
    @media (min-width: 769px) {
    .author-meta, .publishdate-meta, .category-meta{
    display: inline-block;
    }
    .publishdate-meta {
    padding-right: 15px;
    }
    .author-meta {
    padding-right: 15px;
    }
    }
    @media (max-width: 768px) {
    .author-meta,
    .publishdate-meta, .category-meta {
    display: block;
    }

    /*WP Show Posts CSS*/
    #wpsp-2687 p.wp-show-posts-entry-title {
    font-weight: bold;
    font-size: 22px;
    }

    #wpsp-2687 .wp-show-posts-entry-summary {
    font-size: 16px;
    }

    #wpsp-2687 .wp-show-posts-inner {
    box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
    border: 1px solid #dfdfdf;
    }

    #8863

    Carlo
    Participant

    Hi Tom, just bumping this thread in case you missed my last post 😉

    #8872

    Tom
    Keymaster

    It looks like your media query is missing the closest bracket } (at the very end of your CSS).

    1. Try this CSS:

    .wp-show-posts-entry-title {
        line-height: 1em;
    }

    2. You need to duplicate the selectors where you have an ID:

    #wpsp-2687 p.wp-show-posts-entry-title,
    #wpsp-1234 p.wp-show-posts-entry-title {
        ....
    }
    #8881

    Carlo
    Participant

    Ahh, yes i did miss the } bracket, added that in and that part is working now.
    line height code works perfectly too.

    *Is it possible when we add the padding that it only adds the padding to the content (words) and not the images, so the image stays the full width of the content box?

    *Also, is there a more central way to add the individual Post ID’s for the CSS to take effect, for example could i group all my wp show post ID’s inside of a php snippet and give them a group name and use that one name for the CSS?
    this is only because i currently have about 9 different WP show post lists, so to style each page, i would be adding 9 ID’s x 3 (entry title, summary, inner(shadow) ).
    I still can do it the regular way, just seeing if there is a cleaner way for the CSS code?

    #8896

    Tom
    Keymaster

    1. Not by default, but you can try our base card: https://wpshowposts.com/wpsp-pro-1-0/

    2. There’s a custom class option you add a class name to. That way you can add one class to many lists and target all of them with that one class name.

    Let me know if you need more info 🙂

    #8908

    Carlo
    Participant

    the custom class option sounds like a clean solution to what im doing, could you give a quick rundown on how or whats involved?
    thanks 😉

    #8911

    David Beckwith
    Participant

    Hi there,

    the Custom Class can be added to any list from the More Settings tab, named Section HTML Classes. You can then specify a class instead of the WPSP ID in your CSS. For example you have this CSS:

    #wpsp-2687 .wp-show-posts-inner {
        box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
        border: 1px solid #dfdfdf;
    }

    Which is specific to list 2687. Using a custom class in any list would allow you to do this:

    .my-custom-class .wp-show-posts-inner {
        box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
        border: 1px solid #dfdfdf;
    }

    So many lists can have the same class and the one CSS Rule will apply to all of them.

    #9017

    Carlo
    Participant

    seems i’m doing something wrong? when im trying to use a custom class name, it isnt having any effect.
    this is what i’ve done below,

    Inside WP Show Posts settings: Section HTML Classes – global style class

    Inside Simple CSS:
    /*WP Show Posts CSS*/
    .global-style-class p.wp-show-posts-entry-title {
    font-weight: bold;
    font-size: 22px;
    line-height: 1em;
    }

    .global-style-class .wp-show-posts-entry-summary {
    font-size: 16px;
    line-height: 1.3em;
    }

    .global-style-class .wp-show-posts-inner {
    box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
    border: 1px solid #dfdfdf;
    }

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.