Indenting Wrapped Lines of Titles or Labels on the Sidebar

If you have post titles or labels on the Sidebar that wrap to a second line, this can make the list hard to read.

This is especially true when the list of post titles is generated from a feed because the post titles are not listed in alphabetical order, but in chronological order.

The image below shows an example of post titles that wrap to a second line:


The links would be easier to read if the wrapped lines were indented, as pictured.


The instructions for making this change are below. But first let's discuss our technique. This has worked on the templates we have tested, but there are many templates, and your template may use different variables.

We are modifying the CSS code for .sidebar li. The li tag stand for link. Here is the modified code:

.sidebar li {
padding-top: 0;
text-indent:-14px;
padding-$endSide: 0;
padding-bottom: 4px;
padding-$startSide: 24px;
background: url(http://www.xxx.com/image.gif) no-repeat $startSide 3px;
}

Only two changes are made. First, we increase the value of padding-$startSide from 17px to 24px. This specifies the number of pixels that the Sidebar links, no matter how many lines, indent from the left side of the Sidebar.

Secondly, we add text-indent:-14px to the code. This negative margin causes the first line only of each link to move left (or "outdent") a small amount to achieve the look we want.

To make this change, follow these directions:

1. Go to your blog's Layout tab and click Edit HTML
2. Download a copy of your template to disk for backup.
3. Press Ctrl-F, type .sidebar li in the Find box, and click Next until you have found the CSS for .sidebar li.
4. If you didn't download your template, copy the code for .sidebar li and paste it into a Notepad file - in case you need to undo the changes you are attempting.
5. Increase the value of padding-$startSide.
6. Place your cursor after the first line of code and press Enter to create a blank line. Then type text-indent:-14px
7. Click Preview. Adjust these two values until satisfied and click Save Template.

►  Take a look at some of our other interesting posts, such as How to Change the Default Background Color of All Blog Posts

If this post has been helpful, please consider linking to our blog or sharing!