Changing the global column layout of the Customizr theme 19

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

With the hooks API, Customizr offers a simple way to change the global layout of your website . The following snippet explains how to create different column layouts for your content and sidebars, and apply them to specific contexts on your website.

 

Customizr theme layouts

As explained here, the theme proposes four different layouts that you can easily set up from the customizer options and on a post/page basis.

1 One column full width. See full width layout demo.
2 Two columns with sidebar on the left. See left sidebar layout demo.
3 Two columns with sidebar on the right. See right sidebar layout demo.
4 Three columns with two sidebars. See three columns layout demo.

 

The theme is based on the 12 columns Twitter Bootstrap grid. The default layout is 1/4 | 3/4 or 3/4 | 1/4 with a sidebar.

  • More about grid and columns in Customizr here
  • More infos about the Bootstrap Grid System here

 

Creating a new layout

The Customizr layout is defined in an array you can hook into with the tc_global_layout  filter. In this example, I apply a 1/3 | 2/3 layout.

 

Applying different layouts depending on the context

Now let’s say you need a specific layout for your categories, another one for pages, and the default one for the rest of your website. You can use WordPress conditional tags to do it as follow :

 

Hope this will help you doing awesome web designs with the theme!


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


19 thoughts on “Changing the global column layout of the Customizr theme

  • Reply
    Ducktape

    Hi Nicolas,

    Is there a way to have fix width page (i.e. text + sidebar = max 960px) with a 75% – 25% ratio will keeping the rest in full width ???

    Regards,

    Ducktape

  • Reply
    Daniel Alvares

    I reduced the span of the columns but the main wrapper did not reduced and the elements are no longer centered on the page. How to adjust the size of the main wrapper? And how to keep the elements centered on the page?

  • Reply
    Brooke Babington

    Hi there, terrific theme – I love its flexibility and your support!
    I have changed the global layout of my front page to span1, span10, span1 (with right and left sidebars) and have moved the featured pages block to hook ‘__after_article’ so that the sidebars run the whole length of the front page.

    My problem now is that the featured pages are set to span6 (at 2 blocks per line) and so they overflow the right sidebar. Could you tell me how to resize the featured pages blocks to be span5 so that they can fit within my new span1, span10, span1 global layout?

    Thanks so much in advance! Brooke

  • Reply
    Nicolas Post author

    Hi Brooke, you can play with the featured pages hook controling the featured pages by row called ‘tc_fp_per_line’ which has a value of 3 by default.
    Hope this helps!

    • Reply
      Brooke Babington

      This worked perfectly – thank you very, very much! I made a copy of the class-content-featured_pages.php file in my child theme and adjusted the span array defaults for tc_fp_per_line.

      Another question: Is there a way to have the sections resize to fill larger screens? When I view the page on my 13″ laptop it seems to reflect my span1, span10, span1 layout, but when I look at it on my mac the contents are constrained to the centre of the page. It still reflects the span1, span10, span1 layout but does not extend to either edge of the screen.

      Thanks again!

  • Reply
    Leon

    Hi guys, I guess this is a silly question but I’m a newbie: where do i need to paste this code to make it work? I don’t know what the tc_global_layout filter is.

    Thank you

  • Reply
    Sugaboss

    Hi Nicolas, I really appreciate this great theme for its beauty, flexibility and support.
    I am not a programmer and usually just copy and paste any CSS from forum or support web to solve my problems.
    Is it possible to change the 1st default layout (which is 1 column full width) into 1 column but 80% of the screen width?
    Any help is really appreciate

    • Reply
      Nicolas Post author

      Hi Bookstart, you might want to customize this part of the css :

      Hope this helps!

      • Reply
        Sugaboss

        Thank you for your reply Nicolas

        My objective for this modification is to have different color for general web background and page/post background.
        previously I used this modification in my CSS:

        /* narrow the fornt page */
        .tc-header{
        max-width: 1170px;
        margin: 0 auto;
        }
        footer#footer {
        max-width: 1170px;
        margin: 0 auto;
        }

        And your solution resulted the same. When I change the general website background … the background of the featured page and any other page/post is also changing as the general website background. Some people suggest me to modify the container of the page/post but I do nt know how. Thanks … any help is really appreciated.

  • Reply
    David

    Hi Nicolas, love the theme. Just one issue, every time I try to put a widget on the right sidebar it ends up at the bottom like a footer. I use the theme’s sidebars and custom sidebars, but I still get the same results. Have any ideas?

    Thanks in advance

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">