WordPress.org

Forums

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

  1. jummy
    Member
    Posted 1 year ago #

    Hello,

    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:

    http://blog.bettyreddesign.com/
    http://wiaforum.com

    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!

    Jummy

  2. David Manning
    Member
    Posted 1 year ago #

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

  3. jummy
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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. David Manning
    Member
    Posted 1 year 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 1 year 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 __________*/
    
    .site-header,
    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 {
    	padding-left:10px;
    	padding-right:10px;
    }
    
    @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;
    		padding-left:20px;
    		padding-right:20px;
    	}
    
    }
    
    @media screen and (min-width: 960px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role="contentinfo"] .site-info {
    		max-width: 940px;
    		padding-left:0;
    		padding-right:0;
    	}
    }
    
    @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
    Member
    Posted 1 year 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. alchymyth
    Forum Moderator
    Posted 1 year 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
    Member
    Posted 1 year 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 1 year 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
    Member
    Posted 1 year ago #

    Hi, jummy,

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

    http://matulaitismission.org/pamaldu-tvarkarastis-ir-kalendorius

    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:

    http://mtomas.com/1/tiny-forge-wordpress-theme-for-learning-and-site-building

    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
    Member
    Posted 1 year ago #

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

  13. fluxappeal
    Member
    Posted 1 year 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.

    Cheers!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic