Posted 3 years ago #
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
Posted 3 years ago #
I'd do it with CSS. What is your site's address?
Link to website please...
Posted 3 years ago #
I am using the same edited theme on 6 different blogs
One of them is: http://www.mmti.org/podcasts/assessment
Can you contact me privately as I don't want to give details of my sites admin section publicly.
Posted 3 years ago #
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 in wp-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 add border-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 add margin:0 0 20px 0; inside the curly braces.
Posted 3 years ago #
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
Posted 3 years ago #
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.
Posted 3 years ago #
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.
Posted 3 years ago #
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,
Gene
Posted 3 years ago #
Try adding something like this to your css file:
#sidebar * p, #sidebar-left * p {
margin:0;
}
Posted 3 years ago #
Which css file?
The layout.css
I added it there right after my other edit but it didn't seem to have any effect.
Posted 3 years ago #
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.
Posted 3 years ago #
I tried all of that. No luck yet.
Frustrating!
Posted 3 years ago #
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.
Posted 3 years ago #
ok that worked for random posts widget
Posted 3 years ago #
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;
}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;
}
Posted 3 years ago #
Hmm... sorry about the double post. I thought I was editing not posting new.
Posted 3 years ago #
that worked too for the Simple forum posts.
Thanks so much
Where do i search for the widget code for the others (categories, links and the sidebar login widgets?
Posted 3 years ago #
The low-tech way is to view source in your browser and look around but I'd recommend using Firefox, if you don't already, and installing an extension called Firebug. Once installed you can load a page, right-click on whatever you are interested in, and select 'Inspect Element'. You'll get loads of useful information.
Posted 3 years ago #
ok, I was able to edit the Categories widget, by using:
li#categories-1 ul li{
margin:0 !important;
}
but still have trouble figuring out the code for the links
<li class="widget widget_links" id="linkcat-2"><h2 class="widgettitle">Links</h2>
and Top Commentators widgetts:
<li class="widget widget_topcomm" id="top-commentators"><h2 class="widgettitle">Top Commentators</h2>
Posted 3 years ago #
li#linkcat-2 ul li doesn't work?
By the way, when you deal with classes rather that IDs use a dot-- . rather than a pound sign-- #.
Posted 3 years ago #
Yes that worked!
I am using several different wordpress installations and the linkcat number is different for each. That did the trick.
Thank you so much for your time and patience!
Gene
Posted 3 years ago #
I'd actually try to avoid that linkcat number if you can, for the reason you noted. Those numbers might change. They might change even if you reorder the sidebar, I'm not sure. Now that you have something working you can play with the css and try to get something working that doesn't depend upon them.
Posted 3 years ago #
you're right
I noticed that the number changed when I moved the widget from the right to the left sidebar.
But then what code woudl I be editing if not the linkcat?
gene
Posted 3 years ago #
For 'linkcat-2' you could try ul.widget_links ul li instead. Note that with classes you use a dot rather than a pound sign. You could try ul.xoxo li as well.
Posted 3 years ago #
I don;t see any id's for the last two widgets.
I saw that the code for both is:
<h2 class="widgettitle">Popular Searches</h2>
<h2 class="widgettitle">Recent Searches</h2>
Wht can I do to modify them?
Gene
Posted 3 years ago #
You don't need ID's. You can use classes too. For example, h2.widgettitle {color:red} will turn the text color of your widget titles red. (The code you posted only effects the titles of the widgets, by the way.) Classes work the same way as IDs just use a dot instead of a pound sign. That is, '#' means 'the item with the ID of whatever follows'. A dot or period--'.'-- means 'the item with the class of whatever follows'. Actually, you don't need classes or IDs. You can write h2 {color:red} and turn all of the <h2>'s red. But... more specific declarations will overwrite less specific ones. IDs are the most specific. You can only have one per page. Classes are a second level of specificity. Tags with neither are the least specific. You can also get specificity by explicitly naming the chain of tags down to the one you want like we were doing above with li#simplepress-forum ul li, which means something like 'apply the following commands to a list item (li) inside an unordered list (ul) inside a list item with the ID of simplepress-forum'.
Posted 3 years ago #
ok that makes a lot of sense now.
However, in trying to remove the double-spaced listing of the items, I cannot fine the code using Firebug to accomplish that.
I found the following code:
<li class="widget widget_search" id="search"><form action="http://www.mmti.org/podcasts/assessment/" id="searchform" method="get">
<label for="s" class="hidden">Search for:</label>
<div><input type="text" id="s" name="s" value=""/>
<input type="submit" value="Search" id="searchsubmit"/>
</div>
</form>
and tried adding each of these:
li."widget widget_search" ul li{
margin:0 !important;
}
li#"search" ul li{
margin:0 !important;
}
li#"searchform" ul li{
margin:0 !important;
}
I also tried it without the quotations, to no avail.
Posted 3 years ago #
The quotations are not only not needed but are invalid.
In the first case you tried-- li."widget widget_search" ul li-- you have a problem with syntax. When assigning classes to elements in an html file you can assign multiple classes by separating them with spaces like this:<p class="class class1 class2">Hello</p>. You can't do that in a css file. That is what you tried to do though. widget is one class. widget_search is another. You'd have to write li.widget ul li, li.widget_search ul li to assign some set of directions to both classes. Other wise you are giving confused directions. In your example widget_search isn't a class or an ID (not preceded by a dot or a pound sign and it isn't a valid html element, like p or ul, so the parser has no idea what to do with it.
You should really try to get the page valid too.
Posted 3 years ago #
Wow, there are so many errors on the page!
Could it be that there is something in the template code which makes every widget double space its entries?
This topic has been closed to new replies.
