Change bullet points into square

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>

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?

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;
}

thanks

You're welcome