not resolvedSo far I have asked 3 questions here and gotten 3 terrific answers, so let's go for a fourth! ;)
The text in my sidebar (more so the left one), is on the very edge of the sidebar. Do I need to create padding around the text or a margin within the sidebars? What is the CSS code?
Thanks again!
(To see what I mean, http://www.spiltmilkblog.com)
You use the padding property to put space between the edge of the margin and your content. It looks like you are using widgets for your content in your sidebars, an dI'm not, so I'm not sure which one of these elements will work to pad the widget boxes.
Cutline has a wonderful feature called the "custom.css" file. It enables you to override the default "style.css" file without editing the default file, which will make it much easier to know what properties you edited when updates come out! If it isn't listed already, create it in the same folder that your "style.css" file is in, and add this line to it:
li.widget p { margin: 0 0 1.5em 0; padding: 0 10px; }
Then play with the padding elements in those to see which one applies. You can list just one element ... "padding: 1em;" ... and it will apply that padding on all four sides. Or you can specify each side of the text independently with something like "padding: 5px 1em 5px 2em;" ... that puts padding on TOP, RIGHT, BOTTOM and LEFT sides in pixels or ems (you can also use percentages, etc.) See http://www.w3schools.com/css/pr_padding.asp for more examples.
I'm not sure which of the "widget" style declarations apply, but that one would be my best guess without playing around.
This answer wasn't totally correct, but it put me on the right track and I figured it out. The code you gave changed the padding for the text within the sidebars. I should have been more specific - it wasn't the actual text, but the headers in the sidebars that were all the way to the edge.
I changed:
li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 0.4em 2px; border-top: 3px solid #000; background: url('images/hr_dot_black.gif') 0 100% repeat-x; }
to this:
li.widget h2, li.linkcat h2 { font-weight: bold; font-size: 1.077em; text-transform: uppercase; letter-spacing: normal; margin: 0 0 0.8em 0; padding: 3px 1em 3px 1em; border-top: 3px solid #000; background: url('images/hr_dot_black.gif') 0 100% repeat-x; }
...and now it looks great. The headers are away from the edge. Looks much better. Thank you.
You must log in to post.