Support Forum

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? Reply To: How I add padding on title?

#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>';
} );