Is it possible to have a slider at the top of the page of the single blog pages?

Hi, I’ve set up a blog and on the main blog page there’s a slider that goes behind the nav bar. I’d like to replicate this on the single blog pages - is it possible to do?

I’ll put the URL links in a secure note as it’s built on a temporary link.

Thanks!

Hi there,

Thanks for writing in!

You can add a slider in your blog page with custom development. While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, add following code in your child theme’s functions.php file:

// Adding a Slider in Blog Page
// =============================================================================

add_action('x_before_view_renew__landmark-header', 'custom_blog_header');

function custom_blog_header() {
    if ( is_home() ) {
        echo do_shortcode('[rev_slider alias="slider_alias"]');
    }
}

// =============================================================================

// Add a custom blog header image for single posts
// =============================================================================
add_action('x_before_view_renew__landmark-header', 'custom_blog_header01');

function custom_blog_header01(){
    if (is_single() && in_category('Uncategorized')) {
        echo do_shortcode('[rev_slider alias="slider_alias"]');
    }
}

Replace slider_alias with your Revolution Slider alias.

Hope this helps.

That’s great, thank you!

I’ve put the slider in for the single blog pages following what you said and there’s a gap at the very top of the screen and I haven’t got a clue how to get rid of it! I’ve highlighted it on the screengrab:

Also, under the slider, the page content (the featured image and widget down the right hand side) starts straight under it without a gap. Can this be moved further down the page so there’s a gap after the slider and before the content?

Thanks again!

Hi There @core365

That gap on top is coming from an extra bracket of your code. Could you please double check the code that you have added or post it here to check.

To add a gap on the bottom, try adding the following CSS rule into your X -> Theme Options -> CSS area.

.single-post .x-container.max.width.offset {
    margin-top: 15px;
}

Hope that helps.

Hi, thanks for the CSS, I’ve added it in and it’s spot on!

I’ve double checked the Global CSS I’ve put in and can’t find the extra bracket you’re referring too. I’ve also ran it though CSS Lint and that hasn’t flagged up any warnings. If you don’t mind checking it, that would be great, thanks!:

/* Home – header transparent for fullscreen bg image */
.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}
.x-navbar-fixed-top-active .x-navbar {
background-color: transparent;
border-bottom:none;
}
.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
background-color:#ffffff;
border-bottom: none;
}
.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}
.x-navbar {
    background-color: transparent;
    border:0;
}
.x-topbar-fixed-top,
.x-logobar-fixed-top {
     position:fixed;
     top:0;
     width:100%;
}


/* Slideshow*/
.page-template-template-blank-4-php .x-slider-container.below {
  border-bottom: 0px;
}
.hentry {
  margin-top: 0px;
}


/* Masthead */
.masthead .x-navbar {
    background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0), rgba(255,255,255,0));
}


/* Top bar */
.x-topbar .p-info {
    font-size: 16.5px;
    color: #fff;
    letter-spacing: 0.3px;
    margin: -8px auto;
    font-family: "Roboto",sans-serif;
    float: right;
    margin-right: 30px;
    background-color: #000000;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 13px;
    border-radius: 0;
    line-height: 1.4;
  border-radius: 0 0 0px 25px;
}
.x-topbar-inner {
    display: flex;
}
.x-topbar .p-info {
    position: relative;
}
.x-topbar .p-info::after {
    width: 0;
    height: 0;
    border-top: 45px solid black;
    border-right: 18px solid transparent;
    content: '';
    position: absolute;
    right: -18px;
    top: 0;
}
.x-topbar {
  position: fixed;
  width: 100%;
  min-height: 37px;
  height: 37px;
  text-align: center;
}


/* Social Media Icons */
.x-topbar .x-social-global a {
    width: 30px;
    height: 30px;
    line-height: 30px;
  margin-right: 3px;
  margin-left: 3px;
    float: none;
  color: #fff;
}
.x-topbar .x-social-global a:hover {
color: #ffffff;
  background-color:  #0095db !important;
}
.x-topbar .x-social-global a i {
    font-size: 20px;
}
.x-colophon.bottom .x-social-global a {
    width: 32px;
    height: 32px;
    line-height: 32px;
  margin: 0px;
  color: #ffffff;
      background-color: rgba(255, 255, 255, 0.35);
    margin-right: 4px;
  margin-left: 4px;
}
.x-colophon.bottom .x-social-global a i {
    font-size: 22px;
}
.x-colophon.bottom .x-social-global a:hover {
color: #ffffff;
  background-color:  #0095db !important;
}
.x-social-global a {
  background-color: #000000;
}
.x-social-global a:hover {
  background-color: #000000 !important;
}


/* Footer */
.x-colophon.bottom {
    padding: 10px 0;
  text-transform: none;
  font-size: 12px;
  line-height: 28px;
  letter-spacing: 0.8px !important;
    font-family: "Noto Sans",sans-serif;
}
.x-colophon.bottom .x-colophon-content {
    margin: 0px 0;
}
.x-colophon.bottom .x-nav li a {
    font-size: 15px !important;
    font-style: normal !important;
    letter-spacing: 0em !important;
  text-transform: none;
}
.x-colophon.bottom .x-nav li:before {
    content: " ";
    float: left;
    margin: 0 0.85em 0 0.85em;
    opacity: 0.35;
}
.x-colophon.bottom .x-nav {
    margin-bottom: 20px;
}
footer.x-colophon.bottom {
    width: 89%;
    margin: 0 auto;
    max-width: 1350px;
}
.x-colophon.bottom .x-nav li a:hover {
opacity: 1;
color: #0095db;
}
.x-colophon-content {
   font-family: "Noto Sans",sans-serif;
  letter-spacing: 0.22px !important;
}


/* X Icons */
.x-icon-phone {
    transform:rotateY(180deg);
}
.x-icon-map-marker:before {
    content: "\f3c5";
}
.x-icon-calendar:before {
    content: "\f073";
}


/* Ubermenu */
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
letter-spacing: 0.01em;
}
.ubermenu .ubermenu-target {
padding-top: 10px ;
  padding-bottom: 10px;
  padding-left: 13px;
  padding-right: 13px;
}
.ubermenu .ubermenu-icon {
  width: 0.4em;
}
.ubermenu-transition-shift .ubermenu-item .ubermenu-submenu-drop {
  padding-top: 10px;
  padding-bottom: 10px;
}
.ubermenu-bar-align-center {
margin-top: 152px;
}


/* Pages with Sidebar */
.x-header-landmark {
border: none;
text-align: center;
background-color: #000000;
  padding-top: 0px;
  padding-bottom: 32px;
}
h1.h-landmark.entry-title {
font-family: "Roboto",sans-serif;
font-size: 3.2em;
font-weight: 700;
line-height: 1;
letter-spacing: 0em;
text-transform: uppercase;
color: #0095db;
}
.x-landmark {
  padding-right: 0;
}
.x-sidebar .widget {
  margin-top: 0;
}
.x-sidebar .widget:last-child {
  margin-bottom: 0;
}


/* Text */
h2 {
  font-family: "Roboto", sans-serif;
  font-size: 1.55em;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0em;
  text-transform: none;
  color: rgb(0, 149, 219);
  padding-bottom: 0.85em;
  line-height: 1.3em;
}

h3 {
font-family: "Roboto", sans-serif;
font-size: 1.3em;
font-style: normal;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0em;
text-transform: uppercase;
padding-bottom: 0.5em;
}


/* Image */
.fullwidth-image, .fullwidth-image img {
    width: 100%
}

/* Gradient */
.gradient-bg {
background: #d5dae2; /* Old browsers */
background: -moz-linear-gradient(top, #fff 0%, #d5dae2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fff 0%,#d5dae2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fff 0%,#d5dae2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5dae2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.gradient-25 {
background: #d5dae2; /* Old browsers */
background: -moz-linear-gradient(top, #fff 0%, #d5dae2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fff 0%,#d5dae2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,#d5dae2 0%, #fff 35%,#fff 50%,#fff 65%,#d5dae2 120%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5dae2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}


/* Trustpilot */
div#tp-widget-rating.tp-widget-rating {
 font-size: 20px !important;
}
div#tp-widget-logo.tp-widget-logo {
 width: 180px !important;
}



/* Blog Single Pages */
time.entry-date {
  color: #435a69;
  text-transform: none;
  font-size: 16px;
}
.single-post .widget ul {
  font-size: 16px;
    letter-spacing: -0.01em;
  border-top: 0;
}
.single-post .widget ul li a {
  color: #000;
}
.single-post .widget ul li a:hover {
  color: #0095db;
}
.single-post h4.h-widget {
  font-size: 24px !important;
  font-family: "Roboto",sans-serif;
    color: #0095db;
  text-transform: uppercase;
  letter-spacing: 0em;
}
.single-post .entry-title:before {
  display: none;
}
.single-post .entry-title {
  font-size: 32px;
  font-family: "Roboto",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
    letter-spacing: -0.005em;
  color: #0095db;
  line-height: 40px;
  padding-bottom: 5px;
}
.single-post .entry-title a:hover {
  color: #0095db;
}
.single-post .entry-content {
  font-size: 17px;
  letter-spacing: -0.01em;
  padding-bottom: 35px;
  line-height: 26px;
}
.single-post .entry-featured {
  margin-top: 0;
  margin-bottom: 0 !important;
  border: 0;
  padding: 0;
}
.single-post .h-landmark {
  display: none;
}
.single-post .x-header-landmark {
  display: none;
}
.single-post h1.entry-title.entry-title-portfolio {
  line-height: 1.2;
  padding-bottom: 5px;
}
.single-post .x-container.offset {
  margin: 0em auto;
}
.single-post .x-topbar {
  top: 0;
}
.single-post div#recent-posts-2.widget.widget_recent_entries {
  background-color: #eee;
  padding: 1.3em;
}
.single-post div#archives-2.widget.widget_archive {
  background-color: #eee;
  padding: 1.3em;
}
.single-post .widget ul li {
  background-color: #eee;
  border-bottom: 0px solid #dddddd;
}
.x-sidebar .widget {
  margin-top: 2em;
}
.single-post .x-main {
  width: 74%;
}
.single-post .entry-wrap {
    display: flex;
    flex-direction: column;
}
.single-post .entry-wrap header.entry-header {
    order: 2;
}
.single-post .entry-wrap .entry-featured {
  padding-bottom: 32px;
    order: 1;
}
.single-post .entry-wrap .entry-content.content {
    order: 3;
}
.p-meta span:nth-child(1), .p-meta span:nth-child(3) {
display: none !important;
}
.p-meta>span:after{
  display: none;
}
.single-post i.x-icon-arrow-left {
background-color: #000;
  color: #0095db;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1.1em;
    margin-right: 5px;
}
.single-post i.x-icon-arrow-left:hover {
  background-color: #0095db;
    color: #000;
}
.single-post i.x-icon-arrow-right {
background-color: #000;
    color: #0095db;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1.1em;
    margin-right: 5px;
}
.single-post i.x-icon-arrow-right:hover {
  background-color: #0095db;
    color: #000;
}
.navigation-post a {
  float: left;
      font-size: 18px;
  font-weight: 600;
    font-family: "Roboto",sans-serif;
  color: #000;
  text-transform: uppercase;
}
.navigation-post a:hover {
  color: #0095db;
}
.navigation-post .x-nav-articles {
  float: right;
}
.navigation-post:before, .navigation-post:after {
    content: '';
    clear: both;
    display: table;
}
.navigation-post {
    margin: 25px 0;
  margin-top: 55px;
}
.single-post .x-container.max.width.offset {
    margin-top: 40px;
}



/* Blog */
.blog .h-landmark {
font-family: "Roboto",sans-serif;
font-size: 3.2em;
font-weight: 700;
line-height: 1;
letter-spacing: 0em;
text-transform: uppercase;
color: #0095db;
}
.x-header-landmark {
  border-width: 0px;
  background-attachment: fixed;
  background-repeat: repeat;
  position: relative;
  background-color: #000;
}
.entry-featured {
  border: none;
}
.blog .widget ul {
  font-size: 16px;
}
.blog .entry-featured {
    width: 210px;
    float: left;
    margin-right: 20px
}
.blog .entry-content {
  padding-bottom: 40px;
  border-bottom:1px solid #ccc;
}
.hentry {
  margin-top: 40px;
}
.entry-thumb {
  background-color: none;
}
.p-meta span:nth-child(1), 
.p-meta span:nth-child(3), 
.p-meta>span:after {
    display: none;
}
.blog .entry-title:before {
    display: none;
}
.blog .entry-title {
font-family: "Roboto",sans-serif;
font-size: 2.7em;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0em;
text-transform: uppercase;
  padding-bottom: 0px;
}
.blog h2.entry-title a {
  color: #0095db !important;
}
.blog h2.entry-title a:hover {
  color: #000 !important;
}
.blog .entry-content {
  font-size: 18px;
  line-height: 31px;
}
.blog .more-link {
  color: #0095db;
  text-decoration: none;
  font-family: "Roboto",sans-serif;
text-transform: uppercase;
}
.blog a.more-link {
  color: #000 !important;
}
.blog .widget ul {
  font-size: 16px;
    letter-spacing: -0.01em;
  border-top: 0;
}
.blog .widget ul li a {
  color: #000;
}
.blog .widget ul li a:hover {
  color: #0095db;
}
.blog h4.h-widget {
  font-size: 24px !important;
  font-family: "Roboto",sans-serif;
    color: #0095db;
  text-transform: uppercase;
  letter-spacing: 0em;
}
.blog div#recent-posts-2.widget.widget_recent_entries {
  background-color: #eee;
  padding: 1.3em;
}
.blog div#archives-2.widget.widget_archive {
  background-color: #eee;
  padding: 1.3em;
}
.blog .widget ul li {
  background-color: #eee;
  border-bottom: 0px solid #dddddd;
}
.x-sidebar .widget {
  margin-top: 2em;
}

Thanks!

Hi there,

In case you want to check your CSS codes fore errors, you may check them using this site.

Hope this helps.

HI, thanks for the link but that’s what I’d already checked my code with, CSS Lint, and I couldn’t find the extra bracket that’s causing the gap, that’s why I asked if you wouldn’t mind taking a look through it!

Thanks

Hi @core365,

Sorry for the confusion, that square bracket is not CSS related. It’s added to your HTML or PHP code, which could be s custom code or templates. And it appears to added before the slider, would you mind providing the entire code of your child theme’s functions.php?

Thanks!

Ah, now you’ve said that, I’ve checked the php code and I’d left in a square bracket by mistake! The gap has now gone after I deleted the extra bracket.

Thank you!

Glad you were able to figure it out :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.