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; }
Leave a Reply