The point of this series is to effect just the elements of your blog posts. We want to control, at least a little, what your members insert into your blog. And, the one thing I can't stand is un-styled lists.

Ordered Lists

These things are ugly if left naked

These things are ugly if left naked. We're going to try to give our list a little pizzazz and make it compliment the design of our site. This site has a bit of a formal, classic design, so why not use roman numerals instead of numbers.

 

Here is the shameful list before, look at how it cowers in its nakedness:

We're going to go about it in the same way by parenting the .blog-entry to the ol, so it won't effect other ol's:

First a little padding, notice on the "right" padding there is allot more than the rest, this might only be particular to my site, because of overriding CSS somewhere else I had to compensate, so play with it.

.blog-entry ol{
        padding: 3px 19px 4px 0;
}

Next I'll give it a light yellow background, then compliment that with a ornate image I made in Photoshop, notice it's a PNG., they are great for doubling up on background color and imagery. The options are limitless. I also float the image to the right and knock it a bit out of the frame with the -20px.

.blog-entry ol{
        padding: 3px 19px 4px 0;
        background: #eaeecb url(../img/ornateborder.png) no-repeat right -20px;
}

Last for the OL is a nice complementary border.

.blog-entry ol{
        
        padding: 3px 19px 4px 0;
        background: #eaeecb url(../img/ornateborder.png) no-repeat right -20px;
        border: 1px solid #cdcd8e;
}

Now for the LI. I'm going to change the list style to lower-roman and place the list "INSIDE." the reason for this is that I want the BORDER-BOTTOM to spread across the entire box and this is the only way to do it. You could use padding to get the LIs inside your box, but the BORDER would be too.

.blog-entry ol li{
        
        list-style: lower-roman ;
    list-style-position: inside;
                
}

The rest is just your own preference. I chose to go for 100% for the reason that in my posts, OL lists will usually be longer as well as Bullets.

.blog-entry ol li{
        
        list-style: lower-roman ;
    list-style-position: inside;
        border-bottom: 1px dotted #cdcd8e;
        padding-left: 15px;
        width: 100%;
        color: #9a9c62;
                
}

 

And Here is the Result:

1. Look At my list
   
2. Aint it great
   
3. no more messing up my post with lists
   
4. Yepee

Unordered Lists

This is what we start off with (it should say unordered list): 

 

The UL is unstoppable. There is almost no end to what you can do with this property. I'm going to just box it like the OL, but there are many possibilities to explore on your side.

Take a look at the border color differences on opposing sides. This gives a slight 3-d effect.

.blog-entry ul{
        border: 1px dotted #dfdfdf;
        border-bottom-color: #a2a2a2 ;
        border-left-color: #a2a2a2 ;
        background-image: url(../img/ulbg.png);
}

And then just a very light gradient to finnish off the 3-d effect.

.blog-entry ul{
        border: 1px dotted #dfdfdf;
        border-bottom-color: #a2a2a2 ;
        border-left-color: #a2a2a2 ;
        background-image: url(../img/ulbg.png);
}

I want to drop the default bullets from the list first.

.blog-entry ul li{
        list-style:none;
}

Then make room for my new image bullet.

.blog-entry ul li{
        list-style:none;
        text-indent: 23px;
    margin-left: 10px;
        
}

I drop my image bullet into place and notice the top position of the image is set to %50. this is very necessary when the user has the ability to change size of text in the blog pane. At 50% it will always keep it aligned in the middle.It's a good idea to use EM and Percents anyway, at least as much as possible because you never know what size the user is displaying there fonts at on their browser.

.blog-entry ul li{
        list-style:none;
        text-indent: 23px;
    margin-left: 10px;
                background: url(../images/bullets2_03.jpg) no-repeat left 50%;
border-bottom: 1px dotted #dfdfdf;
        font-weight: bold;
        color: #949494; 
}

The rest is up to your imagination.

.blog-entry ul li{
        list-style:none;
        text-indent: 23px;
    margin-left: 10px;
                background: url(../images/bullets2_03.jpg) no-repeat left 50%;
border-bottom: 1px dotted #dfdfdf;
        font-weight: bold;
        color: #949494; 
}
 

Here is the Result:

• Look At my list
• Aint it great
• no more messing up my post with lists
• Yepee

<1 2 3 4