how to change WP theme to take whole browser page

Question

I am trying to change thematic default theme to take the whole browser page ...

for example: http://themeshaper.com/demo/thematic/

Is there a simple fix that can be done? I tried few things on that page with firebug but none seemed to have worked..

Answer 1

You can make the main container 100% width with CSS, but that would not only imply that you change all the width properties of the markup to percent values, as you'll not have the same result on different screens.

Also, it's quite difficult to work just with percent values when dealing with markup.

So, in conclusion, it might be possible, but quite hard if you don't master CSS.

Answer 2

The theme appears to be built with a "fixed" width layout -- meaning that the width of the page is set to a fixed value and resizing your browser window will not change the layout of the page. You are trying to change it into a "fluid" layout -- meaning that the page will adjust sizes to fit the browser window. Unfortunately, themes (and webpage layouts in general) are typically built as one or the other (fixed vs. fluid) and it is hard to switch between the two without changing a large amount of the CSS. So the answer to your question is: no, there is no simple fix.

Answer 3

Not sure about simple, here is some CSS to get you started, but you will probably find more as you dig into the different page styles, etc. Add it to the end of the main style.css for the theme.

#access, #branding, #main, #footer { padding-left: 20px; padding-right: 20px;}

#branding, #header .menu, #siteinfo, #main { width: auto }

#container { width: 70% }
#content   { width: 90% }

.main-aside { width: 28% }

Also, beware of IE specific stylesheets, etc, that might change these same selectors.