[Resolved] Problem with bullet point styling

Home Forums Support [Resolved] Problem with bullet point styling

Home Forums Support Problem with bullet point styling

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1310497
    Adrien

    HEllo,

    I’ve followed the other tickets to style my bullet point into check mark using:

    .entry-content ul li {
    list-style: none;
    position: relative;
    }

    .entry-content ul li:before {
    content: “\2713”;
    position: absolute;
    top: -5px;
    left: -1.4em;
    color: #1dd19b;
    font-size: 22px;
    }

    However, it is also styling the products I insert inside my blog post placing a check mark at the top. How exclude the above styling to products inserted into blog post?

    Thank you for your help.

    #1310564
    Leo
    Staff
    Customer Support

    Hi there,

    Edit your CSS to this:

    .entry-content ul li:not(.wc-block-grid__product) {
        list-style: none;
        position: relative;
    }
    
    .entry-content ul li:not(.wc-block-grid__product):before {
        content: "\2713";
        position: absolute;
        top: -5px;
        left: -1.4em;
        color: #1dd19b;
        font-size: 22px;
    }
    #1314839
    Adrien

    Thank you Leo! It worked but now I still see the checkmarks on my order checkout page.
    Please check the screenshot: https://ibb.co/XD6gbdj

    I would like to exclude this page from showing the bullets/crosscheck.

    Thank you for your guidance.

    #1315467
    David
    Staff
    Customer Support

    Hi there,

    try this:

    body:not(.woocommerce-order-received) .entry-content ul li:not(.wc-block-grid__product) {
        list-style: none;
        position: relative;
    }
    
    body:not(.woocommerce-order-received) .entry-content ul li:not(.wc-block-grid__product):before {
        content: "\2713";
        position: absolute;
        top: -5px;
        left: -1.4em;
        color: #1dd19b;
        font-size: 22px;
    }
    #1316318
    Adrien

    Thanks a lot David. Im sorry to bother you but I also want to get rid of them on my check out page here:
    https://ibb.co/jDq1T8S

    Thank you for your help.

    #1316338
    Adrien

    I also have this issue with WordPress gallery and everything that has bullets that I m using:
    Please take a loook at my homepage, where I inserted a classic wordpress image block in gutenberg:

    https://ibb.co/zZf4Cy0

    #1316590
    David
    Staff
    Customer Support

    It may be simpler to add a custom class to the List block.
    In the Block Editor – select the List Block and on Settings (Sidebar) > Advanced –> Additional CSS Class add tick-list

    then use this CSS:

    ul.tick-list li {
        list-style: none;
        position: relative;
    }
    ul.tick-list li:before {
        content: “\2713”;
        position: absolute;
        top: -5px;
        left: -1.4em;
        color: #1dd19b;
        font-size: 22px;
    }
    #1317289
    Adrien

    Thank you very much David. I have done it as show on this picture but the check mark arent showing.

    Sorry for the trouble.

    PS: Can you delete this message later or remove the URL link please?

    #1317786
    David
    Staff
    Customer Support

    Hmmmm – the CSS class is not appearing on the UL element.
    Could try this CSS instead:

    .single-product .entry-content ul li:not([class*="block"]),
    .single-post .entry-content ul li:not([class*="block"]) {
        list-style: none;
        position: relative;
    }
    
    .single-product .entry-content ul li:not([class*="block"]):before,
    .single-post .entry-content ul li:not([class*="block"]):before {
        content: "\2713";
        position: absolute;
        top: -5px;
        left: -1.4em;
        color: #1dd19b;
        font-size: 22px;
    }

    This should apply to only the single product and the single posts.

    #1318718
    Adrien

    It worked! Thank you so much for your tenacity and great support David.
    After check unfortunately I still have an issue. Pls see my mess below.

    #1318749
    Adrien

    Sorry David, Again inside my blog articles I have some check mark showing on the products.

    PS: Can you delete this message later or remove the URL link please?

    #1318924
    David
    Staff
    Customer Support

    Made some edits to the code here

    #1323329
    Adrien

    Dear David. Thank you so much!!! It’s all perfect and working. I really appreciate your help.

    #1323373
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.