Overriding the User agent stylesheet


I’m currently trying to create a new theme and I’m trying to utilize the entire space of the browser rather than the “box” that is the default. So far I haven’t had much luck with changing the width to fit the entire browser area. I was going to test by changing the div class for the css (user agent stylesheet)

When I add the class in the main.css file it doesn’t override the default. How can I change this?

Is there a better approach to doing what I want?


I’d love to see the final work, if your plan comes to fruition. We are currently moving towards responsive design (v17 with any luck), and so I imagine will end up with a Default theme that fills the whole screen.

In the meantime, your best bet is to copy /themes/Default and give the copy a new name. Use the same name inside the manifest.php file, within your theme. This is now installable as a new theme, which you can enable in your site. Work to edit this theme. With each change you make you should be able to force-refresh your browser (Cmd-Shft-R in Firefox/Chrome on Mac for example) in order to clear the cache and load the new style.

I hope this helps!