Increasing width in blogum?

annelouiselikes · Member · Nov 29, 2011 at 10:16 am
Copy link

Add topic to favorites
I apologise if this has been answered already, but I’d quite like to widen my blog, if it’s possible (and relatively simple).

I am brand-spanking-new to css, and am pretty chuffed that I’ve changed the heading colour, but that’s all I’ve managed so far.

I chose blogum because I like the look of this blog

b for bonnie

Is widening my blog to a similar width doable?

Thanks in advance :)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Nov 29, 2011 at 10:38 am
Copy link
First off, I consider b for bonnie too wide at 1200px. Even though I have a 2360px wide monitor, it is NOT so that I can have a super wide browser window open, it is so that I can have a couple of things open and see everything, and I keep my browser windows at about 900-1000px wide. Even when I’m on my laptop screen at 1440px wide, I never keep the browser full-width.

This would be the basics on widening the theme. However much you widen the first bit (the overall width of the theme) widen the width of #content by the same amount. In other words if you widened the overall theme by 100px to 1045px, then you would add 100px to the width of #content (805px).
```
.wrapper, .footer {
width: 945px;
}

#content {
width: 705px;
}
```
With the above, your header image will now be too narrow and that will require making a new header image that is as wide as the width you use in .wrapper, .footer at 150px tall, and then that image has to be uploaded to your media library, get the URL of that image, and then put it into the following where it says, URL OF IMAGE between the double quote marks.
```
#header-image {
background: url("URL OF IMAGE") no-repeat scroll center top transparent;
height: 155px;
}

#header-image img {
display: none;
}
```
On the header image, if you are OK on it being stretched a little horizontally (with the nature of the image it doesn’t much matter visually) then you could forgo the above and just do this and replace he 1000px with whatever width you put into .wrapper, .footer above.
```
#header-image img {
width: 1000px;
}
```
annelouiselikes · Member · Nov 29, 2011 at 10:44 am
Copy link
thank you so much for your reply

you’ve got a good point about the width, too: i hadn’t thought of it like that:)

okay: off to try it now.

thanks again
thesacredpath · Member · Nov 29, 2011 at 10:53 am
Copy link
You are welcome.

One other thing, in the maximum image and video width field down below the CSS text area, increase that number by the same amount you increase the two widths in the first CSS I gave above.

Also, put only the above stuff into your CSS edit window. Do not paste they entire stylesheet as that will cause issues typically.
annelouiselikes · Member · Nov 29, 2011 at 10:57 am
Copy link
a ha: i must be starting to ‘get’ css, as i suspected as much!

thanks again :)
thesacredpath · Member · Nov 29, 2011 at 11:13 am
Copy link
You are welcome.
yijihae · Member · Jan 4, 2012 at 1:56 am
Copy link
Where can I change the maximum image width and video (re: last advice)? I’m still having problems with this.
designsimply · Member · Jan 4, 2012 at 2:24 am
Copy link
You can find that on the Appearance → Custom Design → CSS page. It’s below the editor and is labeled “limit width.”
yijihae · Member · Jan 4, 2012 at 2:42 am
Copy link
Thank you so much, designsimply! I still seem to be having problems, however. My blog is yijihae.com — as you can see, the images are still smaller than the content margin, even though I’ve adjusted the image, wrapper, and content widths.

Any help would be fantastic. Thanks again for your reply!
yijihae · Member · Jan 4, 2012 at 4:29 am
Copy link
Just figured it out right now. No need to reply – thanks for all your help!

No items found.