[Support request] Custom UL CSS

Home Forums Support Custom UL CSS

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #938898
    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;
    }
    #939267
    David
    Staff
    Customer Support

    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.

    #1132844
    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?

    #1133093
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

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

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

    #1133476
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.