GIDForums  

Go Back   GIDForums > Webmaster Forums > Web Design Forum
Reload this Page Change bullet color in <UL> ?
User Name
Password
Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

 
 
Thread Tools Search this Thread Rate Thread
  #1  
Old 02-Oct-2005, 08:54
ubergeek ubergeek is offline
Regular Member
  
Join Date: Jan 2005
Posts: 775
ubergeek is a jewel in the roughubergeek is a jewel in the roughubergeek is a jewel in the rough

Change bullet color in <UL> ?

Is there any way to change the color the bullets in an unordered list, short of using images? My site background is too dark, and it is impossible to see the black bullets.
  #2  
Old 02-Oct-2005, 09:28
cable_guy_67's Avatar
cable_guy_67 cable_guy_67 is offline
Senior Member
  
Join Date: Oct 2004
Location: Nescopeck, PA
Posts: 1,108
cable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the rough

Re: change bullet color in <UL> ?

Quote:
Originally Posted by ubergeek
Is there any way to change the color the bullets in an unordered list, short of using images? My site background is too dark, and it is impossible to see the black bullets.

From the HTML 4.0 guide at W3C

Style sheets provide greater flexibility in suggesting list item styles. The list-style property of CSS includes the added abilities to suppress list item markers, use images as markers, and more.

I take this to mean that if you create an LI class in your css file, you can do whatever you want with them. If you are still having trouble, post your code and we can work from there. Of course, this may not be supported by every browser as the docs use the word suggesting not forcing.
__________________
"Opportunity is missed by most people because it comes dressed in overalls and looks like work."
--Thomas Alva Edison
"Those who would give up essential liberty to purchase a little temporary safety, deserve neither liberty nor safety."
--Benjamin Franklin
"A happy person is not a person in a certain set of circumstances, but rather a person with a certain set of attitudes."
--Hugh Downs
  #3  
Old 02-Oct-2005, 09:41
admin's Avatar
admin admin is offline
Administrator
  
Join Date: Sep 2002
Posts: 749
admin will become famous soon enough

Re: change bullet colour in <UL> ?

Interesting problem to solve...

I must admit, I have not really considered this (different bullet colour) issue before, but I think the following option could be a quick fix until someone posts a more intelligent solution.

For example, in this example markup (below), the CSS will render the bullets green while the list items themselves are navy (blue):

HTML Code:

<html>
	<head>
	<style type="text/css"><!--
		ul.specials li { color:green; }
		ul.specials li span { color:navy; }
	--></style>
	</head>
	<body>
		<ul class="specials">
			<li><span>One.</span></li>
			<li><span>Two.</span></li>
		</ul>
	</body>
</html>

Or, something like this:

HTML Code:

<html>
	<head>
	<style type="text/css"><!--
		ul.specials li { color:green; }
		ul.specials li p { color:navy; }
	--></style>
	</head>
	<body>
		<ul class="specials">
			<li><p>One.</p></li>
			<li><p>Two.</p></li>
		</ul>
	</body>
</html>
__________________
Custom BB codes you can use here:
[HTML] | [C++] | [CSS] | [JAVA] | [PY] | [VB]
  #4  
Old 02-Oct-2005, 09:59
cable_guy_67's Avatar
cable_guy_67 cable_guy_67 is offline
Senior Member
  
Join Date: Oct 2004
Location: Nescopeck, PA
Posts: 1,108
cable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the roughcable_guy_67 is a jewel in the rough

Re: change bullet color in <UL> ?

Ok, this is the information I was looking for. This will change the bullet type. Using a combination of Admin's post and this information should give you the flexiblity you desire.

Again, from the online docs at W3C

Syntax: list-style: <value>

Possible Values: <list-style-type> || <list-style-position> || <url>

Initial Value: Not defined

Applies to: Elements with display value list-item

Inherited: Yes


The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

CSS Code:
LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

It seems from the documentation that using the span is the supported way to make the color modifications if you don't wan't to use an image. It does sound like something fun to play with. If I come up with something more concrete I'll post it here.

HTH
Mark
__________________
"Opportunity is missed by most people because it comes dressed in overalls and looks like work."
--Thomas Alva Edison
"Those who would give up essential liberty to purchase a little temporary safety, deserve neither liberty nor safety."
--Benjamin Franklin
"A happy person is not a person in a certain set of circumstances, but rather a person with a certain set of attitudes."
--Hugh Downs
  #5  
Old 02-Oct-2005, 12:38
ubergeek ubergeek is offline
Regular Member
  
Join Date: Jan 2005
Posts: 775
ubergeek is a jewel in the roughubergeek is a jewel in the roughubergeek is a jewel in the rough

Re: change bullet color in <UL> ?

thanks admin...that worked
  #6  
Old 14-Aug-2007, 16:10
kd6aaj kd6aaj is offline
New Member
  
Join Date: Aug 2007
Posts: 2
kd6aaj is on a distinguished road

Re: change bullet color in <UL> ?

Quote:
Originally Posted by ubergeek
Is there any way to change the color the bullets in an unordered list, short of using images? My site background is too dark, and it is impossible to see the black bullets.
I know how to do it with html: In this example all bullets are blue, regardless of text or link color. The magic entry is immediately after "<ul>"......

(EXAMPLE OF BULLETS COLORED DIFFERENTLY THAN TEXT OR LINKS)
HTML Code:
<h2><a name="interests"><font color="#ffffff">Personal Interests</font></a></h2>

<ul><font color=#0000ff>
    <li><font color="#ffffff">first item</font>
    <li><font color="#ffffff">item2</font>
    <li><font color="#ffffff">item3</font>
    <li><font color="#ffffff">item4</font>
    <li><font color="#ffffff">Guitar Playing and Listening to
        Music </font>
    <li><font color="#ffffff">Joe Satriani </font>
    <li><font color="#ffffff">Digital Video (Editing and
        Mastering to DVD)</font>
    <li><font color="#ffffff">Photography and Videography</font></li>
</ul>

(ANOTHER EXAMPLE)

HTML Code:
<h2><a name="hotlist"><font color="#ffffff">Hot List</font></a></h2>

<ul><font color=#0000ff>
  <li><A href="http://www.myspace.com/kd6aaj" rel="www.myspace.com/kd6aaj"><FONT 
  color=#0000ff>KD6AAJ's Myspace page</FONT></A>
  <li><A href="http://www.satriani.com/2004/" rel="www.satriani.com"><FONT 
  color=#0000ff>The Official Joe Satriani Website</FONT></A>
  <p>
  <CENTER><A href="http://www.stryper.com" target="_blank"><img border="0" src="http://i42.photobucket.com/albums/e308/StrypedWolf/stryper-468-60-002.gif" alt="Stryper's 
     Official Web Page" 
 ></A> </CENTER> 
</li>
</ul>

I know there is a way to change each individual bullet, but I forget exactly.
I'll post my results when I get a chance.
I'm using IE6 in case you wondered.
Last edited by cable_guy_67 : 15-Aug-2007 at 03:43. Reason: Please surround your HTML code with [html] ... [/html]
  #7  
Old 14-Aug-2007, 16:52
kd6aaj kd6aaj is offline
New Member
  
Join Date: Aug 2007
Posts: 2
kd6aaj is on a distinguished road

Re: change bullet color in <UL> ?

Quote:
Originally Posted by ubergeek
Is there any way to change the color the bullets in an unordered list, short of using images? My site background is too dark, and it is impossible to see the black bullets.
Ok, I did a quick test, and here is the result. I changed each bullet to it's own color (but left the last 2 pink for reference). The last font color you use starting before a <li> becomes the default for the remaining bullets before the </ul> end point! So if you have more than one <ul> </ul> combo, the second group is unaffected.

HTML Code:
<h2><a name="interests"><font color="#ffffff">Personal Interests</font></a></h2>

<ul><font color=#0000ff>
    <li><font color="#ffffff">Jesus Christ, my personal Savior ! </font>
<font color=#800080>
    <li><font color="#ffffff">My Wife &amp; Kids !</font>
<font color=#0000ff>
    <li><font color="#ffffff">Amateur Radio</font>
<font color=#ffff00>
    <li><font color="#ffffff">Electronics Projects and Computers</font>
<font color=#00ff00>
    <li><font color="#ffffff">Guitar Playing and Listening to Music </font>
<font color=#ff8040>
    <li><font color="#ffffff">Joe Satriani </font>
<font color=#ff00ff>
    <li><font color="#ffffff">Digital Video (Editing and Mastering to DVD)</font>
    <li><font color="#ffffff">Photography and Videography</font></li>
</ul>

kd6aaj

www.myspace.com
Last edited by cable_guy_67 : 15-Aug-2007 at 03:44. Reason: Please surround your HTML code with [html] ... [/html]
 
 
« Previous Thread | Next Thread »

Recent GIDBlogA Week in Kuwait by crystalattice

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
change the caption on button when clicked drewdaman MS Visual C++ / MFC Forum 4 20-Oct-2004 08:46
Automate a data change php form mjfmn MySQL / PHP Forum 4 20-Oct-2003 09:37
Article by the W3C - Cool URI's don't change jrobbio Web Design Forum 4 28-Apr-2003 06:40

Network Sites: GIDNetwork · GIDWebHosts · GIDSearch · Learning Journal by J de Silva, The

All times are GMT -6. The time now is 01:17.

Contact Us - GIDForums™ - Archive - Top

vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.