When we make a list, we want them to appear a little diffrenly than our regular post content.This is our way of emphasising certain things. For long I have been using the the following tags for list
Appearence of Lists in Posts
<ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item3</li> </ol> |
<ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> |
|
|
Arrow Shaped bullets for Unorderd Lists
Earlier I used to get a “dot” in place of the arrows that you now see in the unordered list.I was getting bored by that look. So i did this in my template
- SAVE AND BACKUP the template
- Locate the .post{}
- Add
.post ul
{list-style-image: url(http://h1.ripway.com/Deepa/bullet.ico );} - Save and View
Bullet numbers in a diffrent color in Ordered Lists
- SAVE AND BACKUP the template
- Locate the .post{}
- Add
.post ol.coloredNumbers
{ color:maroon;
}.post ol.coloredNumbers li span
{
font-weight: regular;
color:#375267;
} - Add following to your post template
Use this for ordered lists only
<ol class=”coloredNumbers”>
<li><span>First </span></li>
<li><span>Second </span></li>
</ol> - So that anytime you use ordered list..place the list items between the following tags
<ol class=”coloredNumbers”>
<li><span> —List Item -1— </span></li>
<li><span> —List Item -2— </span></li>
<li><span> —List Item -3— </span></li>
</ol>
Appearence of list in sidebars
The lists in my sidebar have diamond shaped icons as bullets
- Locate
.sidebar li {
margin-left: -10px;
padding: 0 0 .03em 0px;
text-indent: -15px;
line-height: 15px;
} - Add
list-style-image: url(http://h1.ripway.com/Deepa/bullet2.ico ); - Here you can substitute the URL with the icon-image that you want to use with the bullets…Till then feel free toshare my link to the bullet icon.
- When ever you want a bulleted list in the sidebar..use only
<ol>
<li> —List Item -1— </li>
<li> —List Item -2— </li>
<li> —List Item -3— </li>
<ol/>
I undersntad that this is too much to grasp in one reading..So just take your time…trythis in a test blog. I am sure that withlittle time and perseverance you too can give your posts a cool look with customised bullets.Do drop a word if you are facing any difficulty.I shall be Glad to help