WordPress.org

1. prazim
   Member
   Posted 1 year ago #

   Hi,
   All of the images and text in my left sidebar are properly placed, and I would now like to include an RSS icon for each of those items represented in my blogroll. The problem is when I provide the icon for any of the links, the icon is overly indented in the sidebar and the URI is placed on the next line. Below is the existing CSS for the sidebar. I need the CSS to align the icon and link on the same line, and 6px to the left of where it is presenting, without affecting everything else in the sidebar.
   Thanks in advance,
   Sue

   #left {
   width: 179px;
   float:left;
   margin: 0;
   padding: 0;
   overflow: hidden;
   }

   #left h2 {
   color: #fff;
   background: #6A829E;
   font-family: verdana, "Microsoft Sans Serif", Times, serif;
   font-size: 8pt;
   padding: 3px 6px;
   margin: 0px;
   margin: 0 0 10px 0;
   border-bottom: 1px solid #fff;
   }

   #left p {margin:0 6px 0 12px; padding: 0;}

   #left a {color: #6A829E; display: inline; text-decoration: none; margin: 0; padding: 0; line-height: 14pt;}
   #left a:hover {color: #333; text-decoration: underline;}

   #left ul{
   list-style-type:none;
   margin:0 0 12px 0;
   padding:0;
   }

   #left ul li{
   list-style-type:none;
   margin:0 0 0 12px;
   padding:0;
   }

   #left ul ul{
   margin:0;
   padding:0;
   }

   #left ul ul li{
   /* list-style-type:square;
   list-style-position: inside; */
   margin:0 0 0 12px;
   padding:0;
   color: #6A829E;
   }

   #left ul li.recentcomments {
   margin: 0 12px 0 12px;
   }

   #left ul li.recentcomments a{
   line-height: 12pt;
   }

2. dcole07
   Member
   Posted 1 year ago #

   The blogroll is an unordered list, so you can set the RSS image as the list-style-image (more info at: http://www.w3schools.com/css/css_reference.asp#list )
   You could then use: list-style-position to get the RSS images where you want them. If you want the alignment of the text to be like there was no image, then someone stuck an image in front of text without moving the text, use: list-style-position:outside;

   This CSS is going to be applied to the class called "xoxo blogroll". If you check the source code of your page or use Firebug, you'll find that class name and it only applies to the blogroll and not all the widgets in the sidebar.

3. prazim
   Member
   Posted 1 year ago #

   Thank you so much. that is an excellent CSS reference, and I have installed Firebug.

   I tried the line-style-position and it didn't do what I wanted, and I wasn't able to locate the class for my "Great Blogs" area, but I found something which will enable me to accomplish the objective:
   http://www.z-oc.com/blog/2007/11/wordpress-plugin-to-display-names-favicons-description-notes-and-even-the-feed-on-your-blogroll/

   It's a plugin to fix up your blogroll.
   Sue

Topic Closed

This topic has been closed to new replies.