Docs

[matt r]

Is there a way to override the global site width for a particular page?

I would like the majority of the site to be boxed layout. I would like the home page to be full width as well as a few splash pages I will have as part of the site.

I am guessing that it is possible with a custom page template. Any thoughts to get me started?

[Kory]

Matt,

There are a couple of ways you could accomplish this, but I believe the following will strike the perfect balance between flexibility and ease of implementation. It might look like a little bit of effort but it’s actually very easy to implement. I merely want to be thorough as to hopefully avoid any issues you might have setting everything up.

X outputs the structure of your pages utilizing various “views.” All views for X are stored in /framework/views/. After that, depending on the Stack you’re using you’ll go into that directory to find its Stack-specific views. For example, if you are using the Integrity Stack, you would find all relevant views at /framework/views/integrity/.

In there you’ll find the output for a lot of different sections for the site, along with the various page templates for that Stack (i.e. the Blank and Layout templates). Decide which one you want to use for these different splash pages. It sounds like you’re going to want template-blank-1.php or template-blank-4.php. These will both keep the header and footer visible on your site, but one will keep the main container, while the other removes it completely. Take some time to demo these pages on a selection of content to see which one gives you the result you’re after. All of the homepages for our demos use the template-blank-4.php page template, as removing the container allows us to use the [content_band] shortcode to create the fullwidth sections that span the entire width of the site. This shortcode also has an attribute called inner_container which if set to true, will add back in a container to each band, keeping all content inside constrained to the site’s max-width and centered.

In one of your previous questions I recommended using a child theme to style your buttons. If you are doing so, copy the file that you want to use and paste it into your child theme directory. If not, paste it into the root /x/ directory, but keep in mind that it could get overwritten upon upgrading the theme.

Next, rename the file to something unique. Something like template-splash-page.php. Next, open it up and add something like this to the top of the document inside of PHP tags, like so:

This will allow your template to be accessible via the Page Templates select field on your pages. Finally, you’ll want to go somewhere that you can add custom CSS styles (either via the Custom section of the Customizer or your style.css file in your child theme), and add the following bit of CSS:

.page-template-template-splash-page-php .x-container-fluid.max {
  max-width: 800px;
}

You can then adjust the value of the max-width property to whatever you want. Note that the name we gave to our page template earlier (template-splash-page.php) has become part of the class name (.page-template-template-splash-page-php). If you update the name of this file in the future, you’ll also need to update this class name. Additionally, you’ll need to reset these page templates, as they will be removed by renaming the file.

Hopefully this provides you with the solution that you’re after. Please don’t hesitate to contact us if you have any further questions!

[Author]

Posts