You can easily customize your WordPress theme’s width of content area and sidebar widget area by manipulating the CSS file.
Why we need to create custom size content area and sidebar?
980 pixel days are gone. Do you still have a monitor with that resolution at home? Frankly, we get 12% of visitors with screen resolution <1200 pixels. Most uses mega resolution monitors; some are even greater than ours. So, with a big monitor, the 980 pixel wide website looks like a Lilliput. Admit it. It is the matter of fact.
Secondly, with the wide area, you will be able to put bigger pictures, more Advertisements, particularly 330 box and the bigger banner can be placed nicely.
Before starting; make the principles clear:
- Use a clean theme with good CSS structure, all themes can be made of any size, but with a well structured CSS, it will be easy.
- Install WordPress locally on your Windows 7 PC. We wrote in Windows 7 Tutorials section how to do it. Try on your computer first, then simply open your Theme folder (on server) in Windows 7 explorer and knock out that old with this custom CSS style sheet or you can copy paste from WordPress theme editor.
- You have to edit the header, footer, content area and the sidebar. If it is a complex theme, your head will be enough saturated, so create a chart in paper with pen and write what it was and what is done.
- Header area will be of same width as footer, take it as abcd pixels wide.
- Body is divided in to two areas: content area + side bar. So, the equation should be : abcd pixels = content area’s width + Side bar’s width.
Now, say you thought to make the theme of 1160 pixels width. Then width of the header (not your banner area, if defined), footer, total body will be 1160 pixels. Now, you have to divide body to content area, say 380 pixels width and rest will be (1160 – 380) = 780 pixels will be of content area.
Now, some things which were of good width at 980 pixels will look odd in 1160 pixels theme. Say the footer widgeted area, if you have such. So, you have to calculate a bit and put the new values.
I have made my WordPress theme of custom size as you have written, by why the theme is getting pushed to one side when viewed on a smaller resolution screen?
This is where you now need to define the minimum width of the theme; that it, if you make the browser window smaller, it will somewhat adapt with vertical scroll bars. It is nothing, but you need to add a value to the wrap declaration, it is happening because you have wrap defined. Find out the wrap. There should be three wraps: header, footer and body. Add this code in red after starting of each second bracket; well we are giving full example:
#wrap {
(you will have other things here)min-width: 1160px;margin: 0 auto 0;position: relative;
No more pushing to one side with custom width.
More on custom width theme
Nowadays, many good themes are available (both free and paid) that allows to create custom width from your dashboard; if your not good to take the risk, you can try them. Two themes are coming in mind: Platform pro of Pagelines and Suffusion made by Sayantan Sinha. Sayantan’s Suffusion offers more than expected among current free themes.
Incoming search terms:
change width of wordpress body,suffusion body full width,suffusion how to change width of sidebar,suffusion how wide is the main body,width blog area wordpress,booklite wordpress theme change width,width of widget side bar in wordpress,wordpress 980 pixel,wordpress css width body,wordpress how to add more space between main body and sidebar,wordpress make sidebar smaller,setting width sidebar wordpress,my sidebar width is 12% how can i make it go to the right?,change body size wordpress,change body width wordpress,change gadget width windows 7,change sidebar width in purple pastels child theme,change size of sidebar in suffusion,free wordpress wide 1200px theme,how to change body width wordpressVisitors Read This Post Also Read:
- Customize the logo of your WordPress login page : second method Want to customize the logo of WordPress admin login page? This is possible by inserting...
- Checklist to choose a perfect WordPress theme Previously, we gave a basic primer on how to choose the right WordPress theme ;...
- Put the right things in WordPress sidebar It is likely that too often neglect the sidebar of the WordPress blog (or other...
- Create a free child theme of your own in WordPress The principle of child theme is to enable the modification and adding features to a...
- Tips and tricks to start and continue a professional and successful blog In this article we will give you some tips for a having a successful and...
- Reasons to use WordPress for business or a blog website Presentation of features a WordPress Blogging platform WordPress is the blogging platform used most...
- Tips for chossing the right WordPress theme WordPress has become the most popular open source content management system (CMS). In its beginnings,...
- How to customize Feedburner email subscription form You must have noticed our Google Feedburner email subscription form along with social icons and...
- How to install WordPress on Windows 7 to test themes and plugins offline Testing a new theme or plugin for developing them or just for normal usage in...
- Customize blockquote using CSS and graphics in WordPress Blockquote should reflect the personality of the blog site writer. It looks nice when it...
- WordPress Plugins to create a glossary in your blog Be faster and more precise, what many bloggers love. Using a glossary is widespread in the...
- Create custom menus in WordPress Creating custom menus is now possible in WordPress via drag and drop interface, make your...
- Create a favicon for your WordPress blog Branding is a very important factor on the web to differentiate yourself from others, to...
- Create a custom menu location for WordPress Since WordPress 3.0, there has never been easier to create and edit navigation menus ....
- Guide to optimize content of your blog for mobile devices A few days ago we wrote an article on the Mobile SEO, however, today during...
About Abhishek
