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.
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.
I’ve implemented and it looks great! Thank you very much!
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!
In the page template file, delete:
Now you no longer need to apply
wrapCSS class for the divs. All the content will be inside .site-inner’s .wrap this way.
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!
Which child theme is the basis or starting point for the theme being used in your site? Is it Genesis Sample?
Hi Sridhar, the basis of the genesis child theme is Guru by appfinite.
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!
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.