Hi
As you discovered , 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.
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 . 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).
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
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!
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!!
0 Response to "How do I change the width of scribble template?"
Post a Comment