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

April 21, 2016

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:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

Ask, comment & share:

Bharat Karavadra Cancel reply

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

  1. 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. 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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra