How do you change the color of your bullets and numbers?

  • 2
  • Question
  • Updated 7 years ago
  • Answered
How do you change the color of your bullets and numbers to match the color and size of your text instead of default? Default is small text size and color is white (for my template)... and regardless of what color and size the text is when I click the button for bullets and numbers, it is always the default.
Photo of Donald

Donald

  • 2991 Posts
  • 37 Reply Likes
  • http://youcanneverbetoosmart.com

Posted 9 years ago

  • 2
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
I have been looking for advice on the forums about buttons and spotted this question from a while ago - so I guess there may be some updated info?

I would like to change the character ('dot') and the size of the bullet but don't want to change the style of the text afterwards. I am using the standard bullet format at present, but I would like to replace the 'dot' with a symbol of my choice.

Please could you let me know the correct way to do this without damaging the coding please?
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
Place this code in your page in an HTML widget (without the <!-- and --> )

<!--

<style>
li {
color: red;
}
</style>
<ol>
<li>
First item
</li
<li>
Second item
</li>
</ol>

-->
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
There's a good description and options for customising CSS Lists here

Describes the options and gives you a chance to practice before committing.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi debbym,

I hope that Phillip's and Gop's suggestions have helped!
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Thanks Philip and Gop. Unfortunately, the coding gives me a numbered list, and I want to insert a symbol.

I have check out the article referred to by Gop. I have absolutely no knowledge of CSS which will help me sorting out the one which I need, but I believe I would have to start at the Cross Browser one? But which part of the code will enable me to make a 'dot' become a 'square' or a 'tick' please?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi debbym,

Below are some example code snippets for different styles of bullets that you can add to your HTML Widget or in the Text Widget and going to the HTML button on your Text Editing Toolbar.

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>


Hopefully one of these solutions will work for you.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
I'm sorry Sanja but I am completely at sea with this.

I'm getting a square in the other side of my column divide with "line 3 showing" in my text.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
The type of list you're referring to is an unordered (ie unnumbered) list. Just change ol to ul in both places.

This method of changing shapes is not mentioned in the manuals, but it works:
Lists can be nested inside each other, to several levels. The first level will have dots, the next circles and the third squares. So if you nest one list inside another (with nothing in the other links) as below, the shape will change according to the level you place the li in.

The color can be changed within each li as shown, and you can have each li a different color if you like.

<!--

<ul>
<ul>
<ul>
<li style="color:red;">
item 1
</li>
<li style="color:blue;">
item 2
</li>
</ul>
</ul>
</ul>

-->
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Thank you for this Philip - much appreciated. I'm getting there.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
3 days down the line - Yes, I have a result. Hurrah!

I would like to make the dots bigger and aligned left, not 'tabbed'. Am I into editing CSS territory here?

Can't thank you enough for your patience with my ignorance.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
I think so... I don't use stylesheets (too hard for my little brain) but I'll see what I can find out; meantime, someone else may be able to help.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
LOL ,Philip! You;'ve been a huge help. I'll phaff about with it myself and see if I can fettle it.

My problem is that I want to make it work like Word or any other processor of text and I can't. So frustrating!

Thank you.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
Hi Debby.
Well, that was fun ! I've been "phaffing" as you call it, and finally came up with this little bit of code. It's probably not the most economical of solutions, but I think it gets the job done.
Add these few lines of HTML styling into your page near the top.
The first bit gets rid of the padding that is automatically added to LI.
Upload a small picture (say 20px by 20px), and it will have the address as below. For example I made a small green star called greenstar.png with MS Paint and uploaded it - took about 1 minute!), so its address is resources/greenstar.png (in quotes).

The background-position is location of the bullet only. Default is left, which is about 8 characters in from left of page; center is center of page; right is extreme right of page (useless?)
Experiment with the margin(s). You can just use 1 figure eg margin: 20px which sets all margins at 20px, or all 4 separately as I have. In order they are top, right, bottom and left margins around the whole of each li. Most useful are probably top (moves all li's down and separates vertically) and bottom (just separates vertically).

Then the messy bit: No-break-spaces are written & n b s p ; (6 characters long, and without spaces. Don't forget the ; at the end) and each adds a space between your bullet and its text, so add as many as you want (they don't take up much coding space). Write it once then copy/paste several times.
Then copy/paste the whole line, one for each LI and just change the text at the end.

Hope all this isn't too patronizing - just want to make sure you understand my gobbledegook.

Good luck.

<!--

<style>
ul{
list-style-type:none; padding-left:none;
}
li{
background-image: URL("resources/your-picture-name-and-extension");
background-repeat:no-repeat;
background-position:left;
margin: 20px 10px 10px 20px;
}
</style>

<ul>
<li>(put a few "no-break-spaces" in here)First item</li>
<li>(and again)Second item </li>
<li>(etc.)
</ul>

-->
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Crumbs! I am speechless. It is not patronizing at all. As I said, I am ignorant and although I should sit down and try to learn HTML or CSS properly, I am trying to run a business too - and there aren't enouogh hours in the day.

I shall try this out, as soon as I have addressed the issue of why my text boxes have suddenly started to change shape by themselves. The column divider which I had so carefully placed has moved across the page and my 8 texts boxes, horizontal lines etc will all have to be rebuilt.

Philip - many many thanks again. Your efforts are much appreciated.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
You're very welcome - I'm learning from this too.
As for the text boxes: again, it's not something I use a lot, but I'm sure someone will know. And I'll do a bit of fiddling on my test page and see what I can glean from that.. Do you mind telling me your website address so I can look? Or are you still holding out until it looks perfect?
Just noticed your "mood indicator".
To use a Latin phrase, "nil desperandum carborundum" ( don't let the ##&@##* grind you down) !
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
LOL again - I've been building a web site since July. Unfortunately I am a bit of a perfectionist (NO! surely not I hear the staff at Yola cry). However, I am a virtual PA and if my website doesn't look good, well I might as well pack up shop and give in. As you guessed I haven't currently got a site published ...although I did have one published but had to delete it because whilst editing it after publication, I changed the style, which is not allowed - I did'nt know that. I must have missed it in the tutorial.

Still, I have managed to sort out the wandering boxes and the curly quotes this morning. Unfortunately, in the course of that I deleted a widget which contained 16 lines of text, which I shall have to retype, reformat etc. Stupidly, my logical thought was that as a separate widget, the text box inside a customised box would remain, if I only deleted the coloured box. WRONG. As instructed by a member of yola staff, I use a text box with the coloured box as I can't get the customised text formatting in the coloured box to work - I didn't understand the response at all. Something about it having to be in H1 and H2, but I cant even get it to start entering the text I am typing. I didn't realise that I had deleted the text and went to preview itor post view as I prefer to think of it - by saving the page; I hit the yes to save button and thought - "oh *!#$". Wise people use test pages but I am becoming impatient after 5 months.

Hysterical - I must be mad! It's only my sense of nil desperandum etc that is keeping me going. My response could be 'Caveat emptor' particularly as I have a silver membership.

Still - on the positive side we are learning - so my efforts, like yours, are not totally in vain. Back to the drawing board.
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
With an attitude like that you can only succeed !!!
Go Debby... Can't wait to see the final result.
Glad to hear you got the curly quotes and boxes sorted. I'll still do some checking on that technique though... if nothing else, it'll keep my friend Al Zheimer at bay a bit longer.
All the best for your website.
Photo of debbym

debbym

  • 125 Posts
  • 2 Reply Likes
Ha ha ha - was sat there thinking "who the heck is Al..........?" then penny dropped!

You really are too kind - but I will let you know when - and I do mean when - not IF, I get my site up.

Cheers