- This topic has 5 replies, 3 voices, and was last updated 1 year ago by
David.
-
AuthorPosts
-
June 23, 2019 at 1:14 pm #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; }
June 24, 2019 at 2:58 am #939267David
StaffCustomer SupportHi 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/January 15, 2020 at 6:43 am #1132844Russell
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?
January 15, 2020 at 8:29 am #1133093David
StaffCustomer SupportHi 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/January 15, 2020 at 11:12 am #1133290Russell
David,
Well Done! Thank you for the timely response that was spot on!January 15, 2020 at 2:53 pm #1133476David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.