Help with styling of single Blog pages please!

Hi, I’m designing a travel website and I’m using a plugin called WP Travel to display the tours/excursions available. I’ve styled it to how I want most of it to look with CSS, however when it comes to viewing the single tour page, the layout takes on the Blog styling, but for some reason it has filled the whole width of the page and there isn’t any padding whatsoever around it! There’s a few other things too, so I’ll list it all below:

  1. Is it possible to remove ‘The Blog’ heading at the very top of the page - it is hidden under the nav bar.

  2. Is it possible to have a background image header that appears on all of these single ‘blog’ pages, so it pushes the start of the content to under the nav bar? Similar to this page: https://www.worldjourneysplus.com/destinations/

  3. Can the page width be set so that it’s within the page content area, so it’s the same as the other pages?

Example of the single tours/excursions pages is:
https://www.worldjourneysplus.com/itinerary/best-of-brazil/

I’ll appreciate any help!

Thanks!

Hi there,

Please check in X > Theme Options > YOUR STACK > Blog Options then disable the Blog Header.

As for the other questions, they would require some custom CSS that is specific to your setup. I tried checking your site but it has a coming soon page active. Kindly provide us the access to bypass the coming soon page so that we can provide some suggestions.

Thank you.

Oopsie! Sorry about that, I forgot I had the maintenance page on! I’ve removed it now so you should be able to see it properly.

Thanks!

Hi there,

Thanks for that.

You can do this just like how you setup the other pages where you have a rev slider on top. But since the single posts don’t have the masthead option like the pages, you can login through FTP and go to wp-content/themes/x-child/framework/views/renew the create the file wp-single.php then edit the file and put this code:

<?php

// =============================================================================
// VIEWS/RENEW/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Renew.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>
  <div class="x-slider-container below">
    <?php echo do_shortcode('[rev_slider alias="the-header"]'); ?>	  
  </div>
  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'renew', 'content', get_post_format() ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

Please replace the shortcode in the code above [rev_slider alias="the-header"] to the rev slider shortcode that you will create.

It seems that there is a plugin that handles the template of the itinerary posts that is outside X which is beyond the scope of our support but try adding this code in the Global CSS:

.single-itineraries .wp-travel-content {
    max-width: 1250px;
    width: 88%;
    margin: 0 auto;
}

Hope this helps.

Hi @Jade, thank you so much for the code, however unfortunately it’s not working. There wasn’t a folder called ‘renew’ so I created one to put the ‘wp-single.php’ file in, but the header isn’t showing on any of the single blog pages (I tried it separate to the folder also to begin with, but that didn’t work either). I changed the rev slider alias to the one I wanted to use in the code destinations-page-header

The CSS you gave me for the page width size worked great though, thanks!

Cheers

Hi,

You can try this code instead.

Add this in your child theme’s functions.php file. It’s located in wp-content/themes/x-child/functions.php

function add_my_slider() {
 if(is_singular('post')) {
     echo do_shortcode('[rev_slider alias="the-header"]');
}
}
add_action( 'x_after_view_global__slider-below', 'add_my_slider', 10 );

Make sure to change [rev_slider alias="the-header"] with your revslider shortcode and remove the file you added wp-single.php

That code uses hooks, to know more about it kindly refer to the link below

Thanks

Hi, I’ve removed the wp-single.php file and added in the code you gave for the functions.php file, but it’s still not working I’m afraid.

Cheers

Hi @core365,

It looks like it uses different templates than the standard single pages. The theme structure for the content isn’t there for that post type. Do you use a plugin for that tours and excursions pages? If yes, I recommend contacting them and see if there are template options, it should use default one.

I see similar issues on other plugins that have its own post type, but they do have options for templates hence fixes it.

Thanks!

Ok, I’ll contact the creators of the plugin and hopefully they’ll be able to point me in the right direction!

Thanks for looking into this and taking the time to provide the work arounds.

Cheers

If you need anything else, feel free to create another tickets.

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