Sridhar Katakam

Genesis and WordPress Tutorials

Full Width Page Template in Showcase Pro

by 8 Comments

In my Tutorial Requests Trello board, a user asked:

Hi, I love this tutorial and have implemented this on Infinity Pro theme with no issues. I was wondering if you can do the same tutorial for the new Showcase Pro theme? Thank you. https://sridharkatakam.com/set-custom-page-template-full-width-content-digital-pro/

In this tutorial, we are going to create a custom Page Template for Showcase Pro v2.0 based on Bill Erickson's and set up a sample Page having some text (limited by a max width) and a full width image background div.

Step 1

Create a file named say, template_custom-full-width.php in Showcase Pro's directory having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Exactly what I was looking for, great tutorial! Is there a way to automatically have all the content wrapped for the full width template from CSS? The only problem for me, is that I am having difficulty getting the content and images in classes like

    <

    div class=”one-half”> and

    <

    div class=”one-third”> inside the wrap.

    New member and love it so far!

    Thank you.

    Reply

    • Is there a way to automatically have all the content wrapped for the full width template from CSS?

      Yes.

      In the page template file, delete:

      // Remove .site-inner's wrap.
add_action( 'genesis_before_header', 'sk_remove_site_inner_wrap' );
function sk_remove_site_inner_wrap() {
    add_theme_support( 'genesis-structural-wraps', array(
        'header',
        'subnav',
        // 'site-inner',
        'footer-widgets',
        'footer',
    ) );
}

      Now you no longer need to apply wrap CSS class for the divs. All the content will be inside .site-inner’s .wrap this way.

      Reply

  • Hi Sridhar, thanks for the response, however, removing the code didn’t work for me. This is an example page where I have the problem http://traveltopspot.com/field-service/ as you can see your code works beautifully but as soon as I use columns or other div class the content stretches out to the edge of the screen. Do you have any other tips on how I could all the content wrapped but keep full-width image background div? (I have tried removing the max width: none in .site inner but that constraints the background div to go inside the wrap as well).

    Thank you again for taking the time to help!

    Reply

  • I was able to figure it out all I had to was add an additional wrap before the div classes I am using. The only annoying thing now is that I have to wrap each paragraph and content section. I have tried to have all the content wrapped automatically by removing the site.inner code you suggested but the problem is that it also adds a wrap to the full-width background div which is the main reason I am trying to implement the

    Any other tips or advice you can share would be much appreciated!

    Reply

  • Hi Sridhar,

    Thank you for this tutorial. It worked beautifully and the comments afterward we’re helpful as well.

    Is it possible to make a widget-section on the front page of Showcase Pro full width? I’d like to be able to show, in one of the sections, a full width image of

    <

    iframe> content, similar to the full-width header image.

    Thank you!

    Reply
    • >