[Support request] How I add padding on title?

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How I add padding on title?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #18866
    Sara
    Participant

    Hello,

    I just purchased wpshowposts pro and I would like to know how I can do on my website: https://www.shopbelleza.com/ which I am using this plugin on homepage to show listing posts on category “Ultimo en Salud” in the bottom part. As you can see title on post its showing on the left side stuck to post div box, how can I make it so, on the left side shows as on the right side where you can see it has some padding space but, without moving image since I want to be like this?

    Also is it possible not to show so much space after category like its showing on posts on last row “Las mejores pelotas fitnes para yoga ….” and “Los mejores pedales estaticos ….” How can I remove that empty white background space that shows after the category tag salud?

    I am also using generatepress premium I am mention it in case that helps some how?

    Thanks!

    Sara

    #18880
    Tom
    Keymaster

    Hi Sara,

    Did you resolve the first part? I’m seeing equal space on either side.

    As for that space – it exists because the middle post is longer than the others. Do you have any examples of what you’d like it to look like?

    #18955
    Sara
    Participant

    Hello Tom,

    Yes thanks to David, I could resolve first part.

    For second part I found a better solution that I need that are the following:

    1) I would like to change h2 heading where category name shows to change style like on this page https://todateen.uol.com.br/ so, there is a line and on the middle shows category name with that italic background but, using oswald font and my pink color #FF5481 as background.

    2) Then on second part on post listing is to place category name and post date like it shows on this website similar style but with oswald font to show category and postdate under feature image

    Thanks!

    #18963
    Sara
    Participant

    Sorry tom forgot one last point that is the following:

    3) I would like to show widget title with same style as h2 category name.

    Thanks!

    #18991
    Tom
    Keymaster

    Hi Sara,

    Most of this is custom development that falls outside WPSP support, but I can help as much as possible.

    1. To center it, you could change your CSS to this:

    .ruled-heading {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    I believe in order to give the text a background color, you would need to alter the HTML a little. The site you like is doing this:

    <h4 class="mvp-widget-home-title"><span class="mvp-widget-home-title">Entretenimento</span></h4>

    h4.mvp-widget-home-title {
        float: left;
        margin-bottom: 20px;
        position: relative;
        text-align: center;
        width: 100%;
    }
    
    span.mvp-widget-home-title {
        background: #ff005b;
        color: #fff;
        display: inline-block;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1;
        padding: 5px 13px;
        position: relative;
        text-transform: uppercase;
        transform: skewX(-15deg);
        z-index: 1;
    }
    
    h4.mvp-widget-home-title:before {
        content: '';
        background: #555;
        display: inline-block;
        position: absolute;
        left: 0;
        bottom: 50%;
        width: 100%;
        height: 1px;
        z-index: 0;
    }

    2. First you would need to make it so that list is displaying the necessary meta using its settings. Right now I’m not seeing any meta.

    3. This would involve changing the HTML structure of the widget title to something like the above. For example:

    add_filter( 'generate_start_widget_title', function() {
        return '<h2 class="mvp-widget-home-title"><span class="mvp-widget-home-title">';
    } );
    
    add_filter( 'generate_end_widget_title', function() {
        return '</span></h2>';
    } );
    #19376
    Sara
    Participant

    Hello Tom,

    I had follow your steps and we are almost there but, got 3 issues that are the following:

    1) I had test new heading style on Wpshowposts Category “Cabello” on home page but, it seems that content listing on that category has dissapear as you can see => https://www.shopbelleza.com/

    2) Border lines on the side are not showing and should show between category name, is it possible to put instead border lines on pink that show in other post listings in category like for example Cuidado Corporal, Cuidado Facial, Salud, etc

    3) On Homepage on popular posts widget it seems to be broken on first image post that overlays with title and but, it seems to work fine on post listing

    How can I fix this?

    Thanks again!
    Sara

    • This reply was modified 1 week, 5 days ago by Sara.
    #19388
    Tom
    Keymaster

    Hi Sara,

    1. Are we talking about there not being any content in the posts? If so, is the content turned on inside the list settings?

    2. Try this:

    .entry-content h4.mvp-widget-home-title {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    
    .entry-content h4.mvp-widget-home-title:before,
    .entry-content h4.mvp-widget-home-title:after {
        content: '';
        display: block;
        height: 4px;
        width: calc(100% - 15px);
        background-color: #ff5481;
        position: relative;
        bottom: auto;
        left: auto;
    }
    
    .entry-content h4.mvp-widget-home-title:after {
        justify-self: end;
    }

    3. Not sure I’m seeing this – can you show me a screenshot?

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