Custom UL CSS

[Matt Stern]

Hi Guys,

Wonder if you might be able to advise me on this?

At this URL: you can see first a bulleted list and then and colored custom ordered list.

My goal is that the unordered, bullet list will look like the ordered list but with a bullet in place of a number.

Here is the CSS for both UL and OL. I’ve tried some different ideas, but I’m really a hacker and don’t know much about CSS. 🙂 Thanks for looking.

ul {
	counter-reset:li; /* Initiate a counter */
	margin-left:1px; /* Remove the default left margin */
	padding-left:0px; /* Remove the default left padding */
         line-height:1.6em;
         list-style-type: square;
ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0px; /* Remove the default left margin */
	padding-left:0px; /* Remove the default left padding */
}
ol > li {
	position:relative; /* Create a positioning context */
	margin: 0px 0px 10px 0px; /* Give each list item a left margin to make room for the numbers */
	padding:12px  20px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
	border-top:1px solid #9f5b50;
	background:#FBFAF9;
}
ol > li:before {
	content:counter(li); /* Use the counter as content */
	counter-increment: li; /* Increment the counter by 1 */
	/* Position and style the number */
	position:absolute;
	top:-1px;
	left:-2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:2em;
	/* Some space between the number and the content in browsers that support
	   generated content but not positioning it (Camino 2 is one example) */
	margin-right:8px;
	padding:4px;
	border-top:2px solid #9f5b50;
	color:#fff;
	background: #9f5b50;
	font-weight:bold;
	font-family:"Helvetica Neue", Arial, sans-serif;
	text-align:center;
}

[David]

Hi there,

so it would be something like this:

ul {
    margin-left: 0px;
    padding-left: 0px;
}

ul>li {
    position: relative;
    margin: 0px 0px 10px 0px;
    padding: 12px 20px;
    list-style: none;
    border-top: 1px solid #9f5b50;
    background: #FBFAF9;
}

ul>li:before {
    content: '';
    position: absolute;
    top: -1px;
    left: -2em;
    width: 2em;
    height: 2em;
    background-color: #9f5b50;
}

But – you’re going to need to make that CSS very specific to the content or elementor widget or it will effect every list on the page e.g Navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Russell]

Hi David,
I’m trying to do something similar. For a picture of what I’m up to go to:
https://agnetic.com/its-about-flipping-time/

I’m trying to reduce the amount of white space to the left of the numbers in the table of contents list that is in the right column.

My trouble is every time I find a bit of css to move the list to the left, the css I’m using also moves all the lists in the left column.

How do I make ” make that CSS very specific to the content or elementor widget”, in particular the Table of Content’s widget only?

[David]

Hi there,

try this CSS:

.elementor-toc__list-wrapper {
    margin-left: 0.5em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Russell]

David,
Well Done! Thank you for the timely response that was spot on!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts