How I add padding on title?

Tagged: padding, post listing, title

This topic has 12 replies, 3 voices, and was last updated 2 years, 5 months ago by elvin.

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

Author

Posts
September 2, 2020 at 10:35 am #18866

Sara
Participant

Hello,

I just purchased wpshowposts pro and I would like to know how I can do on my website: [URL redacted as requested by user] 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

September 2, 2020 at 3:13 pm #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?

September 4, 2020 at 2:29 am #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 [URL redacted as requested by user] 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!

September 4, 2020 at 2:38 am #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!

September 4, 2020 at 2:38 pm #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>';
} );
```
September 15, 2020 at 12:30 pm #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 => [URL redacted as requested by user]

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

September 15, 2020 at 2:20 pm #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?
October 21, 2020 at 6:32 am #21453

Sara
Participant

Hello Tom,

Its working now, thanks a lot 🙂

October 23, 2020 at 1:52 pm #21545

Tom
Keymaster

No problem!

April 1, 2021 at 1:26 pm #28748

Sara
Participant

Hello Tom,

One last thing can you please delete all URLs on thread?

Thank you!

April 1, 2021 at 4:47 pm #28773

elvin
Moderator

Hi Sara,

I’ve removed all the URLs as requested. 🙂

April 2, 2021 at 1:43 am #28777

Sara
Participant

Thanks a lot Elvin 🙂

April 4, 2021 at 8:23 pm #28850

elvin
Moderator

No problem. 🙂
Author

Posts

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

You must be logged in to reply to this topic.

[Resolved] How I add padding on title?