[Support request] How to Customize Bullets-in and Text Selection?

[Ravi Dixit]

1. I want to change my bullets-in type Like it is in circle shape but I want to make it Square.

And also want to change its colour.

I also want to decrease the Size in mobile view, I highlighted in the image: https://ibb.co/6XpwX8k

2. How can I change the text selection color?

[David]

Hi there,

1. So you would need to use an OL (ordered list) instead of a UL list. Then this CSS to create our own custom counter that we can style:

ol {
    list-style: none;
    counter-reset: custom-counter;
    margin-left: 0.5em;
}

ol li {
    counter-increment: custom-counter;
    line-height: 1.8em;
}

ol li::before {
    display: inline-block;
    content: counter(custom-counter);
    width: 2em;
    margin: 0.2em 0.8em 0.2em 0;
    text-align: center;
    color: #fff; /* Counter text color */
    background-color: #000; /* Counter background color */
}

2. Selection colors:

::selection {
	background-color: green;
	color: #fff;
}

[Ravi Dixit]

Hi, David!

Thanks for the help but the code for order list you gave isn’t working.

I want bullets-in like this https://drive.google.com/file/d/1-KxAGOasg5s-tznWCarFmrHJJ9tUT3b4/view?usp=drivesdk

Only want it in square shape and want to change its colour.

Selection code ks working quite good.

Thanks,
Ravi Dixit

[David]

I can’t view the image provided as it requires a user permission – can you remove the permission and let us know.

[Ravi Dixit]

Now you can view it https://drive.google.com/file/d/1-KxAGOasg5s-tznWCarFmrHJJ9tUT3b4/view?usp=drivesdk

I also want to decrease the space from the left side of the screen.

[David]

Did you use the OL (order list) instead of the UL (unordered list)? Any chance you can link me to a test page with the list and the CSS added?

[Ravi Dixit]

Hi, David!

I have used OL instead of UL, It is working but not like as I want. Here is the screenshot of it: https://ibb.co/7yfmQxD

It is showing order list(Numbers) and the size of the square also very big But I don’t want to show numbers and want to show small like this: https://ibb.co/fxVmd9V

[Ravi Dixit]

And one more thing, I want to use UL instead of OL… Is it possible?

[David]

Sorry i thought you wanted numbers 🙂
UL’s can be used but they are used throughout the page for navs, widgets, galleries etc so when adding a list block in the editor you will need to add an Additional CSS class, select the list widget and on the Settings sidebar under Advanced you can add the CSS class of custom-list then add this CSS:

ul.custom-list {
    list-style: none;
    margin-left: 0.25em;
}

ul.custom-list li::before {
    content: '';
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin: 0.2em 0.8em 0.2em 0;
    background-color: #FF7700; /* Counter background color */
}

[Ravi Dixit]

Hi, David!

I am not good at CSS, Can you edit and make it only for text UL which I will use in Post not for widgets and Navs.

[David]

The CSS provide here applies to only the UL – you can remove the original OL CSS.

There is no way of determining what the UL contains, hence the need to give the List Block an Additional CSS class. There is no way around that.

Once you have the list working the way you like it, in Gutenberg you can click the 3 dot menu on the block toolbar and save it as a reusable Block. Then each time you need the list just add the re-useable block and via the same 3 dot menu you can convert it to a regular block and edit it.

[Ravi Dixit]

I am not using Gutenberg, Using Classic Editor.

I have pasted the CSS for UL not it is not working.
“advanced you can add the CSS class of custom-list then add this CSS:” how to do this?

[David]

Then when creating your list you will need to edit it in the Text mode ( not visual ) and edit the opening <ul> tag to this: <ul class="custom-list">

[Ravi Dixit]

Totally, Understood…

Thanks, David, For the help. you are awesome…

[David]

Glad to be of help 🙂

[Author]

Posts