Skip Navigation

How do I change the width of scribble template?

Travel Forums System Talk How do I change the width of scribble template?

1. Posted by rachie-roo (Budding Member, 4 posts) 12 Nov '12 04:05

Hi

I have recently signed up for a travel blog and love the scribble template but it seems to have everything squashed on the left-hand side. Is there any way to make the blog post section wider with yellow bit at the right a bit narrower?

It seems to look fine on my phone so assume the narrow layout might be for that reason but none of the other designs look quite a squashed up and there is so much wasted space on the right-hand side. It is ok with the small introduction I have added so far but future posts are likely to be longer so will look really long if I keep it that narrow for the main blog!!

I have tried learning how the CSS thing works but not sure I can work this out for myself!!

Thanks for your help!
Rachel

2. Posted by Sander (Moderator, 4394 posts) 12 Nov '12 10:12

As you discovered in the other thread, this template unfortunately is based on a fixed width background image, which really determines its width.

One thing you can do to make it look less cramped on big screens (without actually changing the width) is to center the content. In your edit template stylesheet, find the #wrapper line:
#wrapper {width:755px;padding-right:22px;text-align:left;background:#fff url(img/9/diary3.jpg) no-repeat;}
and change it like so:
#wrapper {width:755px;padding-right:22px;text-align:left;background:#fff url(img/9/diary3.jpg) no-repeat;margin: 0 auto;}

If you don't care about users on IE6/7/8 (current version is IE10, although anyone on Windows XP can't upgrade beyond IE8, other than by moving to Firefox/Chrome/Opera), I could also suggest some trickery by "stretching" the size of the background using a new CSS property "background-size" - but do be aware that anyone using those old browsers would have a pretty bad experience, and that the background image might look a bit "blurry" due to the stretch.

3. Posted by Sander (Moderator, 4394 posts) 12 Nov '12 10:55

Even if you don't currently want to go that way, I figure it's worth documenting for the happy future in which old Internet Explorer versions have died out.
Minimal necessary changes:
#wrapper {width:1133px;padding-right:22px;text-align:left;background:#fff url(img/9/diary3.jpg) no-repeat;background-size:1350px;}
#header {width:1035px;height:413px;margin:auto;}
#navigation {font-size:.95em;float:right;width:360px;padding:4em 0 4em 15px;background: url(img/9/bg_navhead.gif) right bottom no-repeat;background-size:220px;min-height: 880px;}
#blogcontent {width: 600px;float: left;padding: 0 10px 0 40px;}
.map,.tp_map {width:600px;height:375px;display:block;margin:10px 0;}
#blogcontent .entry {margin-bottom: 1.5em;padding-bottom: 1em;background: url(img/9/bg_entryBottom.png) left bottom no-repeat;background-size: 600px;}

As you can probably see, that basically multiples most fixed distances by 1.5, and sets a background-size for the most important images to fit. You can see the result here. You might still encounter some places where things don't fit right, and you'll have to adjust more values in a similar way.

The one thing I can't test myself is if this template intends for all text to be very neatly lined out with the horizontal lines of the background, as I don't have the font installed which this template uses. It doesn't seem to have any logic to make that work when images are inserted, so I'm assuming it's not, but if it is, and if you want to preserve that effect, then you need to change the line-height property (or maybe keep the base line-height, but set it additionally to a larger value on #blogcontent .entry).

4. Posted by rachie-roo (Budding Member, 4 posts) 12 Nov '12 15:55

That's fantastic; thank-you!

I tried out both suggestions then checked it through IE and the one that fills the page better does go a bit strange through that and can't be sure what versions people are using (especially as I think my work has really ancient systems so anyone looking from there won't see it properly).

So that's a shame but I'm glad you've found a way to do it as I can always change to that later if I do decide I prefer to stretch it out...and centralising the blog does look much better anyway so thanks for suggesting that for me too, I feel happier to use the template looking like that (and it is my favourite of the selection as more colourful etc)!

Not sure about the lines either but think you're right as they only seem to be at the start of the page anyway then fade away so probably not intended for text to be neatly lined up. But again useful to know if I do stretch it out and need to adjust it. This CSS stuff is quite clever once you know how isn't it!! :)

Thanks again for your help
Rachel

5. Posted by Peter (Admin, 5465 posts) 12 Nov '12 21:28

The real show-stopper for this one is that background image.. so I've gone ahead and made an alternate version of that image to allow for a larger width if desired. It's not ideal, because I don't have the source PSD, but it's quite acceptable in my opinion.

To change to that image instead, try reverting the template to its original and then add these lines of CSS to the end of your template

/* Custom */
#wrapper {width:955px;background:#fff url(img/9/diary3_large.jpg) no-repeat;margin: 0 auto;}
#blogcontent {width: 600px;}
.map,.tp_map {width:600px;}
.entrycontent img.photo {max-width:600px;}

Hopefully that does it nicely for you!

6. Posted by rachie-roo (Budding Member, 4 posts) 13 Nov '12 00:07

Hoorah, that's fantastic, I love it!! Was just thinking last night that if the central one could just be a bit wider it would be ideal so thank-you for working that out. I will look forward to sharing my blog with my friends while I am away!!