Salient Theme Next Previous Post (Under Single Blog Post) Text And Background Styling

The style of the text and background of the ‘Next Post’ link that appears under single blog posts on the Salient Theme can be customised.

See before and after…

Before:

After:

The above images do not show the background color and fading colour effects. Click around the blog posts to see how this section looks under single posts where the next post has and does not have a featured image.

Instructions:

The following CSS can be added to wp-admin > Salient > General Settings > CSS/Script Related to customise the display of the text and the background fade colour in the next/previous section under single blog posts. The background fade-from colour only appears when a feature image is not assigned to the next post, and the foreground colour is a transparent overlay.

/* Next Post text */
.blog_next_prev_buttons span {
 font-size: 16px;
 color: #dddddd;
 text-shadow: -1px 1px #000000;
 color: #fff;
}

/* Next Post post title text */
.full-width-section > .col.span_12.dark h1, .full-width-content > .col.span_12.dark h1, .full-width-section > .col.span_12.dark h2, .full-width-content > .col.span_12.dark h2, .full-width-section > .col.span_12.dark h3, .full-width-content > .col.span_12.dark h3, .full-width-section > .col.span_12.dark h4, .full-width-content > .col.span_12.dark h4, .full-width-section > .col.span_12.dark h5, .full-width-content > .col.span_12.dark h5, .full-width-section > .col.span_12.dark h6, .full-width-content > .col.span_12.dark h6 {
 font-family: "Domine";
 color: #ffffff;
 text-shadow: -1px 1px #000000;
 font-size: 26px;
}

/* Next Post fade to background color */
.blog_next_prev_buttons {
 text-align: center;
 overflow: hidden;
 position: relative;
 background-color: #666666;
}

/* Next Post fade from background color */
.blog_next_prev_buttons span.bg-overlay {
 background-color: #27ccc0;
 z-index: 2;
 opacity: 0.5;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
}

Share this:

Comments

2 responses to “Salient Theme Next Previous Post (Under Single Blog Post) Text And Background Styling”

  1. GEORGE avatar
    GEORGE

    Hello Bharat,

    thanks for the custom CSS!
    Is there a way to hide the next, previous post under single post?
    It seems as a default feature.

    Regards,
    George

    1. Bharat Karavadra avatar

      Hello George,
      Sorry for the delay in replying but I have been and am quite busy but I can look into this when I have a moment. As I’m not using Salient with blog posts at the moment, can you send a link to the site’s page which has the next and previous links?
      Bharat

Leave a Reply

Your email address will not be published. Required fields are marked *

>