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
    Some Customizr layout examples
    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

    (@simongiddings)

    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.

    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. 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 offsetx class. This works in conjunction with, and in the same way as, the spanx classes explained in the 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="https://lorempixel.com/600/400/nature/"><img alt="A random image" src="https://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="https://lorempixel.com/600/400/people/"><img alt="Another random image" src="https://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="https://lorempixel.com/600/400/technics/"><img alt="Yet another random image" src="https://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="https://lorempixel.com/600/400/technics/"><img alt="A final random image" src="https://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

    (@simongiddings)

    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.