Title: Creating custom page template layout
Last modified: August 21, 2016

---

# Creating custom page template layout

 *  [SimonGiddings](https://wordpress.org/support/users/simongiddings/)
 * (@simongiddings)
 * [12 years ago](https://wordpress.org/support/topic/creating-custom-page-template-layout/)
 * I am building a few custom pages and need to adjust the column layouts.
    I have
   seen the following snippets : [Creating a column layout in Customizr](http://www.themesandco.com/snippet/creating-a-column-layout-in-customizr/)
   [Some Customizr layout examples](http://www.themesandco.com/snippet/customizr-layout-examples/)
   [Changing the global column layout of the Customizr theme](http://www.themesandco.com/snippet/changing-the-global-column-layout-of-the-customizr-theme/)
 * However, I am having difficulty in understanding how to apply all this.
    This
   is what I need to do : Each page has responsive background images (they resize
   via css) which add a decorative border around the screen. So I need to ensure
   that the content does not overlap this border. I thought that I could create 
   a layout which ensures that this border would not be overlapped, by using a 4
   column layout – a column at each edge to “protect” the border.
 * How can I use the filter **tc_global_layout** to create this kind of layout ?

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Thread Starter [SimonGiddings](https://wordpress.org/support/users/simongiddings/)
 * (@simongiddings)
 * [12 years ago](https://wordpress.org/support/topic/creating-custom-page-template-layout/#post-4848026)
 * I forgot to mention that I am wanting to use the **row-fluid** class by default
   as well, but cannot see where to insert it.
 *  [ElectricFeet](https://wordpress.org/support/users/electricfeet/)
 * (@electricfeet)
 * [12 years ago](https://wordpress.org/support/topic/creating-custom-page-template-layout/#post-4848329)
 * The row-fluid is a class that you add to the div tag in the html in your page.
 * I presume you are using the “`cover`” value for the [background-size property](http://www.w3schools.com/cssref/css3_pr_background-size.asp).
   That’s a good way to make a background image responsive.
 * If you want your border never to be overlapped, then you could try using the `
   offset`_**x**_ class. This works in conjunction with, and in the same way as,
   the `span`_**x**_ classes explained in the [layout examples](http://www.themesandco.com/snippet/customizr-layout-examples/).
   It allows you effectively to “indent” your rows.
 * So for example, if you want 4 images, each with 2/12 width, indented 2/12 of 
   the grid, then you can use the following in your page:
 *     ```
       <div class="row-fluid offset2">
   
           <div class="span2">
           [caption id="" align="aligncenter" width="600"]<a href="http://lorempixel.com/600/400/nature/"><img alt="A random image" src="http://lorempixel.com/600/400/nature/" width="600" height="400" /></a> A random image[/caption]
           </div>
   
           <div class="span2">
           [caption id="" align="aligncenter" width="600"]<a href="http://lorempixel.com/600/400/people/"><img alt="Another random image" src="http://lorempixel.com/600/400/people/" width="600" height="400" /></a> Another random image[/caption]
           </div>
   
           <div class="span2">
           [caption id="" align="aligncenter" width="600"]<a href="http://lorempixel.com/600/400/technics/"><img alt="Yet another random image" src="http://lorempixel.com/600/400/technics/" width="600" height="400" /></a> Yet another random image[/caption]
           </div>
   
           <div class="span2">
           [caption id="" align="aligncenter" width="600"]<a href="http://lorempixel.com/600/400/technics/"><img alt="A final random image" src="http://lorempixel.com/600/400/city/" width="600" height="400" /></a> A final image[/caption]
           </div>
   
       </div><!-- .row-fluid offset2 -->
       ```
   
 * Try it out: just cut and paste into your page. The images will load remotely.
   Once you have the layout you want, you can substitute your own images using the
   add media button.
 *  Thread Starter [SimonGiddings](https://wordpress.org/support/users/simongiddings/)
 * (@simongiddings)
 * [12 years ago](https://wordpress.org/support/topic/creating-custom-page-template-layout/#post-4848330)
 * This is what I had thought of.
    However, my difficulty is to know how to translate
   this into the default layout. The example given by Nico only deals with 2/3 layout.
   I don’t see how we can produce another type of layout, like that which you have
   given, via the filter `tc_global_layout`.
 * How are we supposed to define our own default global layout ?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Creating custom page template layout’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [custom](https://wordpress.org/support/topic-tag/custom/)
 * [filter](https://wordpress.org/support/topic-tag/filter/)
 * [Layouts](https://wordpress.org/support/topic-tag/layouts/)

 * 3 replies
 * 2 participants
 * Last reply from: [SimonGiddings](https://wordpress.org/support/users/simongiddings/)
 * Last activity: [12 years ago](https://wordpress.org/support/topic/creating-custom-page-template-layout/#post-4848330)
 * Status: not resolved