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

Ok, so I'm a control freak. But, if you think about it that's actually not a bad quality for a designer,

Ok, so I'm a control freak. But, if you think about it that's actually not a bad quality for a designer, though my wife may differ. 

My wife and I had a little tiff the other day over a blog post. See, she found a tragic story of someone being persecuted in a foreign country, that i don't remember right now, and she wanted to post it right away for the other members to see.  It was a worthy post for my other network, little pray box, so why did I nearly fall over the coffee room table trying to delete it. Well, because I'm a control freak and the post looked horrible, with bullets and ordered lists naked and plain, images that had no style. It simply made my design look bad. Man, did she get mad; she said I cared about my site more than the people in whatever country that was. I tried to explain that my site looking like that was like her out to dinner with a dangling booger. She didn't get it. 

I finally had some time and fixed the post up a bit, and then I decided I wouldn't allow my members to put ugly lists and plain-jane pics on my blog.  So I got out the CSS. 

Now the truth is, they can always override my styles if they are handy with the HTML editor in the post section. But I don't think many will, and if they do, they will be banned. :)

We'll work with the few tags that are provided in a blog post.

,
• ,
  , and there is also and

  but we will hit those later.

   

  Images

  Here is how to give your member's or your images a little style. This is a simple example, but with a little imagination, you could do wonders.  If anything you can bring a little pf your sites theme and colors into the posts and therefore have more consistency... and you can't get enough of that.

  I will style this in my site theme.css, that way whenever someone posts a image it will have the style applied. 

  We will be working with the "img" tag, but I've got "imgs" all over the site so I have to narrow it down to just the blog posts and I'll do it with the class ".blog-entry"

  We'll grab the post IMG by telling it who its daddy is:

   

   

  .blog-entry img {
          padding: 10px;
          
  }
  

  We're going to make a frame on this, so we need some padding:

  .blog-entry img {
          
  padding: 10px;
  
  
          
          
  }
  

  Give the background a slight color variation:

  .blog-entry img {
          padding: 10px;
          
  background: #ebf1cf;
  
  
  }
  

  and now our border and wa'la (You coul also use the "outline" property for multi-colored double outline):

  .blog-entry img {
          padding: 10px;
          background: #ebf1cf;
          
  border: 1px solid #e2e7b1;
  
  
  }
  
  
  

  Here is The Result:
  
  

  _{NEXT TIME}

  In the next article of Tame your Post, we are going to look at a few potential problems with styling your LINKS and IMG elements and see what we can do to fix them.
  
  

  <2 3 4