Or is it more correct to ask for wider margins? In any case I'm using a slightly modified version of the Watercolour template. I have not been able to modify the width of the main text bloc. It is in my opinion too wide to read effortlessly.
Easiest would be to keep the "main column" (with the lighter background color) the same width, but to add white-space around the text within the column. To do this, find the #blogcontent rule in your stylesheet, and chance both the width and the padding rules.
Right now those are:
width: 661px;
and
padding: 10px;
And you want to change them to, for example:
width: 601px;
and
padding: 10px 40px 10px 40px.
What we're doing here is reducing the width by 60px, and compensating for this by changing the horizontal padding from 10px to 40px (both right and left, for 2x30px= those same 60px). (When padding gets 1 value, it applies to top/right/bottom/left equally; when it gets 4 values, it's one for each side.)
Reducing the width of the entire column is harder, as the background image used has a fixed width and is set on an outer element, so you'd either want to upload a new (edited) background image, or to remove the background-image from its current element, and set it for the blogcontent instead (which I suspect will look slightly less nice with borders). Let me know if you want to go that way, and I'll try to give you detailed instructions.
Note that both solutions have the problem of cutting off (on the right side) content which is now suddenly wider than the available space in the column, like for example your picasa gallery image (and all other "large" size photos). You can work around that by finding the .entry img.photo rule, and adding the following property:
width: 97%;
That'll size the image according to the available space. (If you have more padding, you might have to decrease the width to 96% or 95%, as the border will get cut off otherwise.)
The other way you could go for improving legibility is by increasing the font-size (and line-height), so that the lines will remain the same widths in pixels, but contain fewer characters, making it easier for your eyes to scan back and forth.
[ 28-Dec-2011, at 03:24 by Sander ]
A third solution is always to Control-Mouseroll, but that is less elegant. I tried the font-size solution, but preferred to keep the original size 12.
I went for the padding solution and decreased the width even more to 580 pixels, simultanously compensating by increasing the padding. I adjusted the photo percentage. It all works!
Thanks a lot!
I do believe it makes better reading, but it does on the other hand look a bit strange with the large empty space to the left and right.... The best would have been to change (crop) the light-grey background picture, or find a way to redefine its width.
Whoops!
Something happened to my pictures standing "vertically". They were all
- pressed to a large size,
- given an inferior resolution than they used to have.
[ 28-Dec-2011, at 06:40 by Sandalsand ]
Oh, meh, of course. Any image which was smaller than that width would now be increased by the rule. Sorry, brainfart on my part, especially since there's already a correct rule, which would simply need to be edited. So, remove the width: 97% again, and find the line under .entry img.photo,object#player embed which says "max-width:633px;" and change that to "max-width: 543px;"
With that change it seems fine now
0 Response to "Narrower text margins"
Post a Comment