Applying CSS to lists using ID

[aniemczyk]

Hi, I’m trying to add custom CSS to my lists. However, since the header items are

with IDs of “menu-item”, adding CSS for ul, li, and li:before alone did not work. So I added the ID of #list.

When I created my list in Cornerstone, I added a text box, and clicked the bullets in the WYSIWYG. I double checked the code, and I have a regular unordered list. I Under “customize” on the text box, I added the ID “list”.

It doesn’t apply. I’ve tried a variety of methods, and I can’t get it to apply, except for when I remove all classes and IDs and it applies to the header, too.

Any suggestions on how to make it specific to just text boxes and not the header?

Thanks in advance.

Here’s the dev site: http://dev.centralvirginialawyers.com/practice-areas/traffic-violations/

Here’s my code:

ul #list{
list-style: none;
padding:0;
margin:0;
color: #051664;
}

li #list{
font-size: 16px;
padding-left: 1em;
text-indent: -1.7em;
line-height: 1.6em;
color: #051664;

}

li:before #list{
padding-right: 1em;
content: "• ";
color: #051664; /* or whatever color you prefer */
}

[Prasant]

Hello @aniemczyk,

Thanks for asking.

Not sure if I understood the question properly as the link you have shared if asking for admin details. But i spotted few errors in your code i.e the selector. Sharing the modified code.

ul #list{list-style: none; padding:0; margin:0; color: #051664;}
#list li { font-size: 16px; padding-left: 1em; text-indent: -1.7em; line-height: 1.6em; color: #051664;}
#list li:before{padding-right: 1em; content: "• ";color: #051664; /* or whatever color you prefer */}

Essentially you don’t need to add code for bullets because you can change the bullets from Cornerstone builder. In that regards you can remove following code #list li:before{padding-right: 1em; content: "• ";color: #051664; /* or whatever color you prefer */}.

I have recorded a screencast that should help you: https://screencast.com/t/nOUaygmoMl

Thanks.