WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
My blog is currently using the Benevolence theme which I like, but I just wish the column were wider; it would be ideal if it fit to the screen. The only thing I've been able to find that could potentially change this is CSS, but I know absolutely nothing about it. Does anyone know if a) CSS is a possible solution and b) an easy way to do this?
Any help would be greatly appreciated. Thank you!
The blog I need help with is lamodeaunaturelle.com.
Link to blog, please.
a) CSS is the only way to widen benevolence.
b) There are only a few here in the forums with any CSS experience, and they are only here randomly, so you really should have some knowledge of CSS and how it relates to the markup (HTML) or it can be quite frustrating.
The one thing to remember is that there are still a fair amount of people out there using 1024 x 768 resolution, which means the overall width of your theme should not exceed 1000px (and I prefer to stick with 990px max just for a little breathing space). Horizontal scrolling is the #3 thing out of 10 that people on the web don't like to do.
Delete everything in the CSS edit window (appearance > edit CSS) and paste the following into the CSS edit window and then click "preview".
hallaek
#wrapper {
width: 990px;
}
#masthead {
width: 990px;
}
#insideWrapper {
width: 990px;
}
#content {
width: 690px;
}
.post, .page {
width: 690px;
}
#footer {
width: 990px;
}There are other things that will have to be done, but this will give you an idea of what it will look like at 990px overall width. Basically it is an increase of 290px to the content area since I left the sidebar the same width and location.
Hey Devblog!
I was going to ask, but decided eh, what the heck.
(http://lamodeaunaturelle.com)
Thank you! Thank you! Thank you!!
It looks like you had the CSS upgrade already and everything looks fine.
Now what you will have to do is to create a new header image, upload it to the media library and then put the URL of that image into the proper location in the CSS which I have shown below. Add the following to the #masthead
background:url("http://lamodeaunaturelle.files.wordpress.com/2009/11/again.jpg") no-repeat scroll 0 0 transparent;
And replace the URL of your current image with the new image (in between the quote marks).
The #masthead section should then look like this (with the new image URL of course):
#masthead {
background:url("http://lamodeaunaturelle.files.wordpress.com/2009/11/again.jpg") no-repeat scroll 0 0 transparent;
width: 990px;
}Also, on the CSS edit page, there is a field where you can enter the maximum width for images, videos and such. Change that to 690.
Hmm, it doesn't seem to fit it to the column, but I'm just still elated at how much better it looks now! I can't thank you enough for being so helpful!
Did you upload the image to your media library and then get the URL of that image from the bottom of the image upload page?
That URL has to be put into the CSS edit window as I mentioned above. You cannot use the custom header upload feature if you change the width of the theme via CSS.
What is the URL of your new image? The CSS is still showing your old image URL.
Oh, actually it is a new image.
Upload it to the media library and then give me the URL and I'll give you the code.
Here's the URL for the image: http://lamodeaunaturelle.files.wordpress.com/2010/06/cropped-newheader.jpg
I've put it into the CSS edit box, but it stays the same size...
It looks like this in my CSS edit box:
#masthead {
background:url('http://lamodeaunaturelle.files.wordpress.com/2010/06/cropped-newheader.jpg') no-repeat scroll 0 0 transparent;
width:990px;
}
That header image is only 700 x 225. The header image has to be 990px wide.
I was playing with that earlier so I had a feeling that may be it, I just wanted to double check. Thanks again!
This topic has been closed to new replies.
