Solved

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

Posted on 2003-12-02
13
676 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Dreamweaver CS5.5 Error 5 539
Dreamweaver CS6 Sites Setup 2 435
Editing PHP within Adobe DreamWeaver 11 188
Semi-transparent PNG 5 192
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…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

733 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