Add a line break between sidebar widgets
-
The widgets in both my right and left sidebars appear a bit crowded and I would like to add a line break between the bottom of one widget and the top of another.
Would someone know the appropriate code and the location in the template where I shoudl add it to?
Thanks,
Gene
-
I’d do it with CSS. What is your site’s address?
Link to website please…
I am using the same edited theme on 6 different blogs
One of them is: http://www.mmti.org/podcasts/assessmentCan you contact me privately as I don’t want to give details of my sites admin section publicly.
Why do you think you can trust me privately? A fake name… a short-lived email address… my cute little baby face… Your site’s mine, man! 🙂 Point is, don’t be too quick to give out the admin info.
The good news is that I don’t need your admin info to help. Open your
style.css
file. It should be inwp-content/themes/yourthemename/
. Find#sidebar li, #sidebar_left li
. Those words should be followed by curly braces, several lines of text and a closing curly brace. Inside those curly braces addborder-bottom: 1px solid green;
. You can of course change the size and the color to whatever you want. ‘px’ is pixels– about the size of a period. ‘Solid’ will get you a<hr />
type line but the css border property can do other types of lines too. Look it up if your curious. You might also want to add a margin as well, so addmargin:0 0 20px 0;
inside the curly braces.The only code in the style.css file is the following:
@import url(layout.css);
@import url(colors.css);
@import url(typography.css);#wp-admin-bar {align:center; margin:0; padding:5px; background:#f9f9f9; border:1px solid #666; clear:both; text-align:center}
#wp-admin-bar ul {margin:0; padding:0}
#wp-admin-bar ul li {list-style-type:none; display:inline; margin:0 10px; padding:0}
Everything else abou that is just commented out.
Could the code be in anohter file?Gene
I found the code in the layout.css
But adding the line you suggested created a green line at the bottom, but didn’t really chang the spacing.Yes, the code I provided will make a green line. You can edit the color to suit your preferences. The part that will control the spacing is the part about the margin– last sentence of my previous post.
Ah ok, it worked. Thanks so much. I used the code: margin:0 0 26px 0;
However, what I notice is that there is double line spacing in some widgets. See the “RANDOM POSTS” and the “WELCOME DR GENE” widgets in the left sidebar of http://www.mmti.org/podcasts/asessment
Is there a way I can force each line to be single-spaced?
Thanks again,
GeneTry adding something like this to your css file:
#sidebar * p, #sidebar-left * p { margin:0; }
Which css file?
The layout.css
I added it there right after my other edit but it didn’t seem to have any effect.You could try:
#sidebar li p, #sidebar-left li p { margin:0; }
Or even:
#sidebar li p, #sidebar-left li p { margin:0 !important; }
If it doesn’t work in layout.css put it in typography.css, at the bottom.
Before you do any of that, though. Switch the
#sidebar li, #sidebar_left li
that we added earlier for#sidebar ul li, #sidebar_left ul li
and see if that gets you any closer to the look you want.I tried all of that. No luck yet.
Frustrating!Yeah, it can be frustrating. There are seven different stylesheets loading on that page– wow.
Try:
li#random-posts-widget p{ margin:0 !important; }
This one is very specific. It should only effect the random posts widget.
ok that worked for random posts widget
Ok. All you need to do then is find the appropriate id’s for the other widgets you want to manipulate and add those to the working code. You need to make sure you are targeting the right elements though. We just targeted a paragraph within a list item that has the id ‘random-posts-widget’. That may not always be the way the widget is structured. For example, ‘Recent Forum Posts’ is structured differently. You’d have to write
li#simplepress-forum ul li{ margin:0 !important; }
to target that one though
li.sftagli{ margin:0 !important; }
might do it too.
By the way, you can just add to the working code by separating items with commas like this:
li#random-posts-widget p, li#simplepress-forum ul li{ margin:0 !important; }
- The topic ‘Add a line break between sidebar widgets’ is closed to new replies.