X
Publisher: Sigit purnomo kangsigit.com@gmail.com

How To Change Automatic raquo UL LI Being with CSS

default vs raquo

You certainly know what the function of UL LI on an article. It enabled to clarify important points on a script which is usually the default display for small spheres whose position slightly to the right.

Advertisement

As for the OL LI function as numbering some important points that the result is in the form of numbers made automatically and structured.

HTML code is typically used are:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and 
<ol>
<li></li>
<li></li>
<li></li>
</ol>
However, the display produced by this code sometimes it would interfere with our view, could be exacerbating the blog with some conditions.

Through CSS, we can manipulate objects generated from these codes, including display: none visibility: hidden font-size: 0px and others. It is just a trick to remove or obscure the view.

Next we need to change it from the default display sessuai be a new look to our wishes, I demonstrated on &raquo;

At the blogger, if we want to eliminate li on all post pages and replace it into raquo, please use this procedure:

Should you use a template class = 'post-body' so that the direction of the CSS to be like this.
.post-body ul li {
  margin-left:-20px;
  list-style:none
}

The above is to remove the default view, while replacing it into raquo, add this CSS
.post-body ul li:before {
  content: "\00BB";
  padding-right:5px;
  font-size:20px;
  color:#8C0000
}

Remember, the above css code I created this means UL LI leads to <ul> <li>
Please change becomes OL LI to change the destination or even just directly use only, the OL LI and UL will be renamed raquo.

Advertisement

examples:
.post-body li {
  margin-left:-20px;
  list-style:none
}
.post-body li:before {
  content: "\00BB";
  padding-right:5px;
  font-size:20px;
  color:#8C0000
}
Where can I use CSS above? For blogger.com users can put it in the template. Please put just below the <head> and above </head>. I've also tried this way and the result is perfect, good luck ..

This demonstrated on UL
  • Text 1
  • Text 2
  • Text 3
How To Change Automatic raquo UL LI Being with CSS
Add Comments
2 Comments
Click Here to Add Comments

2 comments

How do I use this for all post pages that use the LI?

@The Pos Please use li {...} and li:before {...}