Home>Support>Bullet list stays grey despite added css change

Bullet list stays grey despite added css change

Greetings!

Various attempts to create a bulleted list in text sections always result in barely visible (and small) light grey squares.

Added .entry-content ul li{ list-style-type: disc; } to the Custom css and that worked, with a nice round black disc, except the grey square still stayed right after the round circle and in front of the bulleted line of text.

How do I get to choose and apply selected bullets, perhaps in a designated color?

BTW I’ve got tinyMCE installed as well.

Regards,
Tom

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 3 months ago Alex S
    Hi, I Work Here

    Hi Tom,

    Do you have a public URL where we can take a look at the bullet list? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    It should be noted that there is no native support for changing the color of the list style type. I know that sounds weird and I agree. It’s possible to change it but it’s slightly complicated to do. Basically, you need to change the color of the list and then change the contents of the list item to your desired text color. I’ll provide you with further instructions and CSS once I’ve seen your website.

  2. 8 years, 3 months ago imtomekam

    Greetings Alex! I use Instant WP off a usb key (for portability between sites and laptops/desktops) so I don't have public url, and won't until I migrate from staging to production. I can send a png or jpg snippet if that works. Otherwise you can imagine a black disk (good) then a small light grey square then the text of the item being bulleted. All very strange.

    I found the color change html off some obscure wp related website and tried that out of curiosity and it worked. But I changed it back to default as I am not interested in colored text. I just want the small grey square to go away.

    BTW if I remove the additional css to get the black disk, default remains the grey square, even if I try disk or square or circle.

  3. 8 years, 3 months ago Alex S
    Hi, I Work Here

    Hi Tom,

    No that’s fine. Hm. Could you save the page and send me that? To save the page please open up the page with the list present and press CTRL + S and save the page as Web Page Complete. This will generate an HTML file and an assets directory. Please zip and upload them directly to teknik.io and send me the link it gives you.

  4. 8 years, 3 months ago imtomekam

    Greetings: sorry for delay, all sorts of website development problems after recent theme upgrade. Back to partial functionality.

    Just uploaded zip folder. Link is: https://u.teknik.io/JL5FX.zip

  5. 8 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Tom,

    Sorry for the delay. So this is still showing as the other “list” isn’t actually a list. To correct this issue you’ll need to use some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .widget li:before {
        content: none !important;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

  6. 8 years, 2 months ago imtomekam

    Thanks Alex… worked like a charm, got rid of the grey squares. But still unable to add a black bullet.

    I already had SiteOrigin CSS Editor active but still nothing. Tried all manner of list making, no luck.

    Having rummaged around the support site before, I had saved a line of code about "disc as type".

    So I added:

    .panel-grid-cell .widget li {

    list-style: disc;

    }

    …and lo and behold, everything worked! Of course, that makes all the bullets throughout the site "list-style: disc" but I'm OK with that.

    So thanks for your help. Not to be stubborn but: why did we have to go through these steps? Am I missing something about bullet creation? and I noted "widget li" – where did that widget come from and can I access it for further customization?

  7. 8 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Tom,

    Glad you worked it out. So the reason why we needed to do these extra steps was because I wasn’t familiar with your markup. As your website wasn’t publicly accessible I had you send me a copy of your page so I can see what the problem is. The problem is that your theme has CSS that will add the grey bullets (in a non-standard way). I would have never have guessed your theme was doing this.

    You can adjust the .widget li class via CSS WP AdminAppearanceCustom CSS. I would recommend giving the getting started video a watch.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More