Solved

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

Posted on 2003-12-02
13
654 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:Saqib Khan
ID: 9864296
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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:Saqib Khan
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
 
LVL 23

Expert Comment

by:Saqib Khan
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 SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

773 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