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.

Comments

Your email address will not be published. Required fields are marked *