[Support request] Change bullet points into square

Home Forums Support [Support request] Change bullet points into square

Home Forums Support Change bullet points into square

  • This topic has 5 replies, 2 voices, and was last updated 1 year ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1492705
    Sanu Kumar

    What is the easiest way to change bullet points into square, color should be: red

    #1492864
    David
    Staff
    Customer Support

    Hi there,

    you have several lists on your page – some of which have different styles.
    You would therefore need to add a class to the Lists you want to make that change to.

    1. Add this CSS:

    ul.square-bullet {
        margin-left: 0px;
        padding-left: 0px;
    }
    
    ul.square-bullet>li {
        position: relative;
        margin: 0px 0px 10px 0px;
    
        list-style: none;
    }
    
    ul.square-bullet>li:before {
        content: '';
        position: absolute;
        left: -30px;
        top: 15px;
        width: 10px;
        height: 10px;
        background-color: #f00;
    }

    2. Then edit the List in Text ( HTML ) view and give the list a class of square-bullet eg.

    <ul class="square-bullet">
       <li>Your list elements here</li>
       <li>Your list elements here</li>
       <li>Your list elements here</li>
    </ul>
    #1492918
    Sanu Kumar

    Do we have to do this manually or is there a single code which will change the bullet points of all my posts into squares?

    #1492958
    David
    Staff
    Customer Support

    It has to be manually or it will apply to all lists that have a different style.
    For example your Features list has a Star icon as the bullet. Making a general rule will override that.

    If you simply want to change the Bullet to square and let it inherit the list color then you can do this instead:

    .entry-content ul {
        list-style-type: square;
    }
    #1492965
    Sanu Kumar

    thanks

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