Twenty Twelve
Twenty Twelve - full width template? (13 posts)

  1. jummy
    Posted 2 years ago #


    I would like to tweak Twenty Twelve so that I can have horizontal blocks of different colours on the homepage of my site. I think the first step (after creating a child theme, which I've done) would be to make Twenty Twelve into a full width template, something I don't know how to do. Here are sites that inspired the look I want:


    Please let me know how to create a full width theme and create those horizontal blocks of colour.

    Your help is much appreciated.

    Thank you!


  2. ModularBase
    Posted 2 years ago #

    Instead of altering Twenty Twelve, did you search the Themes (http://wordpress.org/themes/) for ones which are designed full width?

  3. jummy
    Posted 2 years ago #

    Thank you for your reply, ModularBase. I thought I'd learn more by working with Twenty Twelve. The other appeal was the fact that Twenty Twelve is kept up to date with the most recent version of WordPress.

    Do you by any chance have some tips for me?

  4. Nathan Hangen
    Posted 2 years ago #

    You'd need to either replace content parts by creating new ones in your child theme, adding new ones via get_template_part, or re-style the container elements via CSS.

    Since the theme is fluid, you'll need to make changes in multiple places (if using CSS). I'd recommend creating a new template part with absolute positioning to break out of the default wrappers. Otherwise, you could, for example, remove the max-width of the site class (960px).

  5. ModularBase
    Posted 2 years ago #

    To alter 20-12, you would need to know CSS and HTML fairly well, as well as create templates for your child theme, especially if you want to alter the landing page (index.php).
    You would have to remove the sidebar(s) and set the wrapping divs to 100%, among other multiple items.

    If you are up to the challenge, then go for it. It is a great way to learn. It's how I did it.
    Here is a CSS reference: http://www.w3schools.com/cssref/default.asp
    And an HTML reference: http://www.w3schools.com/html/default.asp

  6. paulwpxp
    Font hero
    Posted 2 years ago #

    Here is a CSS only to kind of change the look and feel of Twentytwelve to be less blocky on big screen.

    • Code must be used in child theme stylesheet or Custom CSS plugin.
    • Change the mintcream color to your own (might as well change link color to match).
    • Not tested in IE8.
    /*__________ Mint Cream Flavor child twentytwelve __________*/
    footer[role="contentinfo"] {
    	background: mintcream;
    footer[role="contentinfo"] { border:0; padding-top: 48px; }
    body .site { margin:0; padding: 0; box-shadow: none; }
    .site-content article { margin-bottom: 24px; }
    .wrapper { margin-top: 12px; }
    .site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
    @media screen and (min-width: 600px) {
    	.site-header { padding: 48px 0 0;}
    	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border: 0; }
    	.wrapper { margin-top: 24px; }
    	body .site, footer[role="contentinfo"] { max-width: 100%; }
    	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
    		margin-left: auto;
    		margin-right: auto;
    		max-width: 920px;
    @media screen and (min-width: 960px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
    		max-width: 940px;
    @media screen and (min-width: 980px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
    		max-width: 960px;
    /*__________ end Mint Cream adjustments __________*/
  7. jummy
    Posted 2 years ago #

    I really appreciate your input, Nathan Hangen and ModularBase. Your information was helpful but beyond me, I'm afraid. I guess I'll have to build up to it.

  8. Michael
    Part-Time Forum Moderator
    Posted 2 years ago #

    make Twenty Twelve into a full width template

    if you do not use any widgets in the 'Main Sidebar' the content area will automatically stretch to full width.

  9. jummy
    Posted 2 years ago #

    I really appreciate your suggested CSS code, paulwpxp. I'm going to email you if you don't mind.

    Thank you for your input, alchymyth!

  10. paulwpxp
    Font hero
    Posted 2 years ago #

    @jummy actually it's better to keep the discussion here for the community to learn and share ideas.

    Also, just in case that's something else entirely, you can always create a new separated topic for it.

  11. Tomas Mackevicius
    Posted 2 years ago #

    Hi, jummy,

    I'm preparing to release 2012 mod, that looks like this:


    It will come as a child theme to theme Tiny Forge (will be released very soon) which is almost exact Twenty Twelve clone with some improvements. You can read more here:


    It's still work in progress, but in couple of weeks it should be done.

    In case you will be interested, let me know ;)

  12. jummy
    Posted 2 years ago #

    Yes, please Tomas! Thank you—I cannot wait to learn from this.

  13. fluxappeal
    Posted 2 years ago #

    Hi Jummy,

    I used this Voodoo press tutorial to make my latest 20-12 project full width: http://www.voodoopress.com/modify-the-width-of-the-new-wordpress-twenty-twelve-theme/ The steps are clear and it works great.
    See it in action here: http://www.arthurtaussig.com

    The color blocks definitely involve coding tweaks. Theme "Enigmatic" from Themeforest comes with this capability and is full width.


Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic