Customize unordered lists in stack (pile) style~Give margin, padding, border, hover effect and more on Blog or Website [CSS, XHTML]

Understanding the CSS code to be used: [For general Web-Page]

As you have already guessed, we are going to make some changes on the CSS code to make the bullets look like piled lists. Basically with CSS there nothing which can not be done to stylize HTMLs. So let us first take a look at the basic CSS code:

BASIC CSS CODE:

<style>

ul.stacked {

    list-style:none;

    margin:0;

    padding:0;

}

ul.stacked li {

    background: #fff;

    color: #000;

    margin:5px 0 5px 0;

    padding: 2px 0 2px 0;

    border-width: 1px 0 2px 0;

    border-style: dashed;

    border-color: #475A48;

}

</style>

IMPLEMENTATION of the code:

Above we have given a code which when inserted before the closing </head> tag of your Web-site HTML file or included inside your CSS file without the <style> and </style> Tag will make the ul having class stacked to appear as piled list. We need to write down the HTML ul list as shown below

<ul class="stacked">

    <li>Piled list 1</li>

    <li>Stacked list 2</li>

    <li>Basically piled and stacked mean the same :P </li>

    <li>4 list is enough of illustration. Now we are going to close the ul</li>

</ul>

Understanding the code and further customization:

• Margin is the space left outside the li tags and Padding is left inside. The values are given in “Top Right Bottom Left” order. So change the value in pixel(px) in that order to leave that amount margin and padding respectively.
• Of-course we can change the background and color hex code to any value we like. Click here to see what are hex code and how to generate them, (if you are not familiar with this)!
• border-style, border-width, border-color are also set in “Top Right Bottom Left” order. Change them the way you like. Permissible border styles are “dashed”, “dotted”, “double”, “ridge”, “groove”, “inset” and “outset”. [Of course without the quotes]

Note that the <li> tags are by default displayed as block. So here we do not actually need to add another display: block; definition. Also if you are familiar with other CSS codes then add them to the ul.stacked li snippet.

Adding Hover effect to change background color and font color and many more:

Now we shall see how add a good looking hover effect using pseudo CSS class. After learning this we shall be able to customize the background, color and many more to the piled list when mouse is hovered on that. Let us first take a look at the code below:

ul.stacked li:hover {

    background: #000;

    color: #CCC;

    margin:5px 0 5px 0;

    padding: 2px 0px 2px 10px;

    border-width: 1px 0 2px 0;

    border-style: dashed;

    border-color: #475A48;

}

This code when inserted in the CSS file or within the style tag instructs your browser to

• Change the background color code to black(#000) and font color to gray(#ccc)
• Make the text jump a little bit right as we have added a left padding value of 10px [Note padding: 2px 0px 2px 10px;].
• We could have also added other padding values and change margin, border styles border colors or anything you wish.

Illustration of the Above code.

Below is a illustration of the result of the codes mentioned above:

• Piled list 1
• Stacked list 2
• Basically piled and stacked mean the same 😛
• 4 list is enough of illustration. Now we are going to close the ul

This is the source code used to style up them [Just for your quick reference]

<style>

ul.stacked {

    list-style:none;

    margin:0;

    padding:0;

}

ul.stacked li {

    background: #fff;

    color: #006699;

    margin:5px 0 5px 0;

    padding: 2px 0 2px 0;

    border-width: 1px 0 1px 0;

    border-style: dashed;

    border-color: #475a48;

}

ul.stacked li:hover {

    background: #375862;

    color: #e1f7fd;

    margin:5px 0 5px 0;

    padding: 2px 0px 2px 10px;

    border-width: 1px 0 2px 0;

    border-style: dashed;

    border-color: #475a48;

}</style>

<ul class="stacked">

  <li>Piled list 1 </li>

  <li>Stacked list 2 </li>

  <li>Basically piled and stacked mean the same :P </li>

  <li>4 list is enough of illustration. Now we are going to close the ul </li>

</ul>

Installing these codes on your Blogger templates:

As now you have learned the basic thing behind this customization, changing your Blogger template is only a click away now. Suppose you want to make your sidebar lists to appear like this. Simply follow the instruction given below:

• Open up Blogger dashboard and Go to Layout > Edit HTML.
• Now before the closing ]]></b:skin> [Just above this line] add the following snippet of code…

.sidebar ul {

    list-style:none;

    margin:0;

    padding:0;

}

.sidebar ul li {

    background: #fff;

    color: #000;

    margin:5px 0 5px 0;

    padding: 2px 0 2px 0;

    border-width: 1px 0 2px 0;

    border-style: dashed;

    border-color: #475A48;

}

.sidebar ul li:hover {

    background: #000;

    color: #CCC;

    margin:5px 0 5px 0;

    padding: 2px 10px 2px 0;

    border-width: 1px 0 2px 0;

    border-style: dashed;

    border-color: #475A48;

}

As you can see we are actually just instructing the browser through CSS to add these styles to every ul and li tags under a <div> tag having a class="sidebar". If you want to add this style to anything else then just find out the class of the wrapping div using Firebug and replace the .sidebar with the class of that div.

Well that’s all for this customization. Practice a little bit to achieve your design. Also if you have liked this post then do share it with out friends using the twitter or other social bookmarking buttons at the end of the post. If you are facing any problem then feel free to ask us through your comments.