[HowTo] Increase Fervens’ (wordpress theme) width

Fervens is an extremely attractive and excellent theme for wordpress. After trying numerous themes, I settled for this and its really really amazing.

The only shortcoming was that its main content area was too small. On larger posts, the content would span upto numerous pages which would’ve not taken so much space if it had been a little bit wider.

I tried to experiment with the theme and modify it for greater width. It was not a difficult task and moderate knowledge in CSS is enought to make it accomplish. For the rest of you, I will teach you how to do it.

These are the steps:
Goto your admin panel and click on ‘Appearance’ and then ‘Editor’.
The default file ‘Style.css’ will open. If it doesn’t click on style.css from right hand side column.

Change these:

#bg { width: 960px; margin: 0 auto;}
to
add how much width you want to add. I’ve added 100px to mine. So 960+100 becomes 1060.
#bg { width: 1060px; margin: 0 auto;}

.con { width: 960px; float: left;}
to
.con { width: 1060px; float: left;}

.scs1 { float: left; width: 650px; margin-right: 10px;}
to
.scs1 { float: left; width: 750px; margin-right: 10px;}

.sc-all { width: 480px; background:#fff url(images/sl-top.png) no-repeat top; float: right;}
to
.sc-all { width: 580px; background:#fff url(images/sl-top.png) no-repeat top; float: right;}

.sc { padding: 20px; width: 440px; background: url(images/sl-bottom.png) no-repeat bottom;}
to
.sc { padding: 20px; width: 540px; background: url(images/sl-bottom.png) no-repeat bottom;}

Save the CSS. And see the changes. Width of middle column must’ve increased by 100px.

Its not done yet. You still have to make the rounded corners.
They’ve used 2 images – 1 for top and 1 for bottom. Thats not a good practice. You should always use 4 images so that you can change the width without modifying the pictures.

Save the two files namely:
{your-domain}/wp-content/themes/fervens-a/ferevens-a/images/sl-top.png
{your-domain}/wp-content/themes/fervens-a/ferevens-a/images/sl-bottom.png

To save the files:
Run this in your web browser. You may not see anything as it is almost white. So, just go to File-> Save.
Save the file.
Do this for the other file too.

Fire up your image editing software (I used photoshop).
Open both the images on it. You can just simply resize it to 581px which was 481px originally. Note that simply resizing won’t look that neat.

Optional:
To truly resize it expand the canvas width by 100px. Cut a portion consisting of right-side of the corner and paste it over the image and line it up at the right edge and save the image.
Flip this image vertically and you have the other image.

Upload both the edited image to the same folder from where they were download ie. {your-domain}/wp-content/themes/fervens-a/ferevens-a/images/

Reload the webpage and give a pat on your back.

Note: This method has been tested with Fervens A but it must work with B and C versions too.
Also note that I’ve increased 100px width, so I’ve put the references. If you want to increase width in greater or smaller amount, please add the corresponding width to original width.
Eg;
#bg{width: 960px
becomes
#bg{width: 1010px
for increasing width by 50 pixels. I hope you got the idea.

Any queries will be answered here.
Thanks and regards
Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *