Solved

HOW DO I CHANGE THE COLOR OF BULLETS IN A BULLETED TEXT LIST?

Posted on 2003-12-02
13
631 Views
Last Modified: 2010-04-25
Very simple question and premise.  My text is going to be white against a darker background.  I'd like to make it a bulleted list.  The default bullet color is black.  I want the bullet colorc to match the white text.  Can this be done (please say yes) and if so, how do I do it?

The program is Dreamweaver MX /  Windows XP Pro.

thanks in advance,

Syd Rabin
0
Comment
Question by:srabin1
  • 3
  • 3
  • 2
  • +4
13 Comments
 
LVL 4

Accepted Solution

by:
c_swanky earned 250 total points
ID: 9863279
Place this inbetween your <head> tags

<style type="text/css">
<!--
li {color: red }
-->
</style>



FULL CODE EXAMPLE:





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
li {color: red }
-->
</style>

</head>

<body>
<ul>
  <li><font color="#FF0000">one</font></li>
  <li><font color="#FF0000">two</font> </li>
</ul>
</body>
</html>
0
 
LVL 4

Expert Comment

by:c_swanky
ID: 9863292
NOTE: You do NOT need the <font> tags around the <li> text

Here's a dark grey background with white text and bullets.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
li {color: white }
-->
</style>

</head>

<body bgcolor="#666666">
<ul>
  <li>one</li>
  <li>two</li>
</ul>
</body>
</html>
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9864296
0
 
LVL 8

Expert Comment

by:klykken
ID: 9876116
adilkhan, what is the compatible and standards compliant way on that page you are linking too?
The accepted answer is surely not.

-klykken
0
 
LVL 23

Expert Comment

by:adilkhan
ID: 9876383
Comment from Webwoman

And neither is really 'correct', since you're nesting the tags incorrectly -- which means it may or may not work AT ALL.

The only reliable way to do it is to change the entire LI tag -- including the text.

Or use a graphic, which gives you the added option of using whatever you want for a bullet and making it mouseover if you wish.



And I personaly recommend using IMAGES as the bullets if you want to do any additional Stuff(Such as Custom Colors).
Again, There are so many possibilites and Ways.
0
 
LVL 8

Expert Comment

by:klykken
ID: 9876836
IMHO c-swanky's suggestion above is  completely correct, using the CSS properties to what they where intended for.
It also works in standard compliant browsers, no graphics, and it also means less code. Can you ask for more? :-)

-klykken
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 23

Expert Comment

by:adilkhan
ID: 9877898
hey whatever Works best dude:).
0
 
LVL 4

Expert Comment

by:c_swanky
ID: 9879116
@klykken - Thanks for the support.  Not a big deal as long as the srabin1 finds the answer that works for him...

@adilkhan - Just out of curiosity how am I nesting the tags incorrectly?  (is it because I put the closing </li> tags even though it can be done without them?)

<ul>
  <li>one
  <li>two
</ul>


Just playing around, I came up with this as well....

The character "l" (small-case L) in the Wingdings font face will give you a bullet image, so you could do something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>

<body bgcolor="#666666">
<p>Thing I want to do one day</p>
<blockquote>
 <p>
        <font color="#FFFFFF" size="1" face="Wingdings">l</font><font color="#FFFFFF">Fly a kit</font><br>
    <font color="#FFFFFF" size="1" face="Wingdings">l</font><font color="#FFFFFF">Swim with the sharks</font><br>
    <font color="#FFFFFF" size="1" face="Wingdings">l</font><font color="#FFFFFF">Start my own .com </font>
 </p>
</blockquote>
</body>
</html>




@srabin1 - Basically you can do it ONE of the following three ways:

1) Use an Image
2) Use .css style sheets
3) Use the Wingdings font example above.


Let us know which one works for you?







0
 
LVL 19

Expert Comment

by:webwoman
ID: 9880368
1) font tags are a REALLY bad idea, and deprecated.
2) you should ALWAYS close ALL tags, and nest things correctly. (the examples given were fine)
3) bullets are a pain in the butt unless you use an image. IE and Netscape/Mozilla do NOT render them the same. One applies the style to the bullet, one DOES NOT, so unless you use an image you have no control. Try it and see.

I usually wind up putting a span tag around the text, just to be sure that at least the list text is styled correctly. I rarely set a style for an li unless I'm doing something way more complex than the standard list - and then I'll use an image just so I KNOW I get what I want.
0
 
LVL 9

Expert Comment

by:pepsichris
ID: 9882864
Maybe use

&middot;

It's available on the character list in Dreamweaver, or just type it into the source, and it does the job.  It responds to whatever font/style you're using.  As long as you're okay with leaving an extra line then maybe use <blockquote> as well for the indentation of the list.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9952504
Good discussions about bullets, but unnecessary really, as Syd's original question makes an incorrect assumption:

The default bullet color is black.

The correct way of putting this is - the default "text" color is black. Whatever the text color is, that's the color of the bullets. You don't need all those font tags or li stylings. Just change the color of the body text:

<html>
<head>
<style type="text/css">
<!--
body { background-color: #333; color: #fff; }
//-->
</style>
</head>
<body>
<ul>
  <li>The are white bullets</li>
  <li>And so are these</li>
  <li>And these too...</li>
</ul>
</body>
</html>
0
 
LVL 23

Expert Comment

by:Zeffer
ID: 10046061
a brilliant observation and solution seanpowell
another good example of not being able to see ones navel..if one is wearing clothes..
forest for the trees etc :)

so : srabin1.. points to him i think
please don't hold it against him that he criticized the form of your question..it was a necessary
and integral part of the answer.

Zeffer
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10052348
I hope it didn't come out that way - I wasn't criticizing - just pointing out the context of the question which may have been leading some in the wrong direction. My apologies if it came out that way :-)
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
This video discusses moving either the default database or any database to a new volume.
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now