Widening the Elegant Grunge WordPress Theme

David Muir

Introduction:

I love the look of the Elegant Grunge WordPress theme. It perfectly delivers on its name. Michael Tyson did a great job on it. That being said, the width of the theme is much too narrow. It is designed with an 800×600 screen resolution in mind, but honestly who uses that anymore? Operating under the assumption that 95% of visitors to my blog would at least have a width of 1024px, I optimized the theme for this resolution by adding an additional 224px to the content section. I am publishing the process for  making these modifications here both so I can remember what I did in the future, and for the benefit of others who may wish to modify Elegant Grunge in a similar way.

Note: This guide is written assuming version 1.0.3 of the Elegant Grunge theme. I have not tested it with any other version. Also, this modification is only built for use with the “Double Right sidebar” setting of Elegant Grunge.

Widening the content area of this theme requires both edits to the style.css file as well as the modification of the graphics which make up the background of the theme. Fortunately for you, I have already modified the graphics using Photoshop.

Process to make content area wider:

Firstly, in order for this to work you must be using the “Double Right sidebar” setting of Elegant Grunge. To enable this, go to the admin side of your blog and under the “Appearance” heading on the left click “Elegant Grunge.” Select “Double Right sidebar” from the menu next to the “Page setup” label.

Next, we will need to upload our custom background images. The required image files can be downloaded here: elegant_grunge_wide.zip Extract these image files into the wp-content/themes/elegant-grunge/images folder. They will not overwrite the existing image files.

We now need to update the style.css file to use our new images, as well as make some adjustments to the size of our divs. To do this visit again the “Appearance” heading, but this time select “Editor.” On the far right under the “Theme Files” heading select the “Stylesheet (style.css)” link near the bottom. You will need to replace the content of this file with my modified style.css file. Update the file, and the changes should be applied. You should now have a wider more usable version of this theme.

Note: The contents of the style.css file linked above are exactly the same as the contents of the default style.css file provided with this theme with the exception of a few modifications made by me. This means that if you completely replace your existing file with it that you will overwrite any changes that you have previously made to that file.

If anyone has difficulty implementing this from these instructions, please contact me so I can make them as complete and accurate as possible.


282,256 Responses to “Widening the Elegant Grunge WordPress Theme”

Leave a Reply