Targetting Specific List Elements
Hide the li class “comments” in ul “meta-single”:
ul.meta-single li.comments { display: none; }
Getting rid of list dots
.page_item ul li { /* Remove the dots */
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
Using An Image As The List Bullet Point
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
li {
background-image: url(../images/list_bullet_blue.png);
background-repeat: no-repeat;
background-position: 0px 4px;
padding-left: 14px;
}
2 Column List
ul.my_style {
width:660px;
overflow:hidden;
}
ul.my_style li {
width: 50%; /* 2 col */
height: 30px;
margin: 0px;
float: left;
display: inline;
}
List items in a horizontal line and with an icon each
ul.my_class_name {
list-style-type: none;
margin: 2px 0px 6px 0px;
padding: 0px;
display: inline-block;
}
ul.my_class_name li {
background-image: url(../theme-child/images/list_selection_tick.png);
background-repeat: no-repeat;
background-size: 20px 18px;
background-position: 0px 0px;
margin: 0px 12px 4px 0px;
padding: 0px 0px 0px 18px;
line-height: 18px;
color: #008989;
float: left;
white-space: nowrap;
}
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.