Instead of altering Twenty Twelve, did you search the Themes (http://wordpress.org/themes/) for ones which are designed full width?
Thread Starter
jummy
(@jummy)
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?
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).
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
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 __________*/
Thread Starter
jummy
(@jummy)
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.
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.
Thread Starter
jummy
(@jummy)
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!
@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.
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 😉
Thread Starter
jummy
(@jummy)
Yes, please Tomas! Thank you—I cannot wait to learn from this.
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!
