Change CSS Menu Colors

Posted on 2015-01-14
Medium Priority
Last Modified: 2015-01-17
I have a CSS/JS based menu at www.gatewaypesach.info. The client has asked for one of the menu elements to be in a different color and font.
I changed the font inline, and each letter has a different color inline, as well as an !important statement
<li><a href="children.asp" style="font-family:'Comic Sans MS'"><span style="color:red !important">D</span>
<span style="color:orange !important">A</span>
<span style="color:yellow !important">Y</span> 
<span style="color:aqua !important">C</span>
<span style="color:green !important">A</span>
<span style="color:purple !important">M</span>
<span style="color:pink !important">P</span></a></li>

Open in new window

The colors and font do not show up in MSIE or FF. The "inspector" tools on both browsers show that the computed font color for each letter is the correct color!!

Do you see a way to override the default color and font for this menu in another way?

Thank you.
Question by:Lev Seltzer
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
  • 5
  • 5
LVL 38

Expert Comment

by:Tom Beck
ID: 40549456
Broken link.
LVL 38

Expert Comment

by:Tom Beck
ID: 40549607
Found this image of "Day Camp" with multi-colored letters at gatewaysonline.org
Day Camp imageSo I guess I'm getting closer, but still no site at the links provided, gatewaysonline.info and gatewaypesach.info.
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

by:Lev Seltzer
ID: 40549731
I am not thinking straight today.


Sorry - and thank you for your patience.
LVL 53

Expert Comment

ID: 40549736
The clue is that it is a CSS/JS menu as opposed to a straight CSS implementation. so it is quite likely that the styling is being overwritten by load time styling.  The inspector shows values based on the source code.  Howver the rendering enging does not render from source it renders from the Document Object which has been hacked by the scripting.  Using inline with important is a worse hack.  To fix it you will have to find the part of the script that is messing it up.

BTW using inline styling for anything is going to create maintenance problems 100% of the time.  CSS belongs in stylesheets in the head.

LVL 38

Accepted Solution

Tom Beck earned 2000 total points
ID: 40549836
Try this. Replace your Cufon script with this:
<script type="text/javascript">
			Cufon.replace ('#middle h1 a, #middle h2 a, #middle h3 a, #middle h4 a, #middle h5 a, #middle h6 a', { hover: { color: '#2cbffd', textShadow: '1px 1px rgba(255, 255, 255, 0.4)' }, color: '##191919', textShadow: '1px 1px rgba(255, 255, 255, 0.4)' });
			Cufon.replace ('.tabs a, .tog a', { hover: { color: '#2cbffd' }, color: '#feffff' });
			Cufon.replace ('h1, h2, h3, h4, h5, h6', { hover: { color: '#fefffe', textShadow: '1px 1px rgba(0, 0, 0, 0.4)' }, color: '#171617', textShadow: '1px 1px rgba(255, 255, 255, 0.4)' });
			Cufon.replace ('#navigation li:not(:last-child) a, .toggle a, .date, #slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider h6, #middle_bottom h1, #middle_bottom h2, #middle_bottom h3, #middle_bottom h4, #middle_bottom h5, #middle_bottom h6, #bottom h1, #bottom h2, #bottom h3, #bottom h4, #bottom h5, #bottom h6', { hover: { textShadow: '1px 1px rgba(0, 0, 0, 0.3)' }, color: '#fefffe', textShadow: '1px 1px rgba(0, 0, 0, 0.3)' });
			Cufon.replace ('#footer .links a', { hover: { color: '#fefefe' }, color: '#898989', textShadow: '1px 1px rgba(0, 0, 0, 0.3)' });
			Cufon.replace ('#middle a.button', { hover: { color: '#fffffe', textShadow: '1px 1px rgba(0, 0, 0, 0.4)' }, color: '#feffff', textShadow: '1px 1px rgba(0, 0, 0, 0.4)' });
			Cufon.replace ('blockquote');
                        Cufon.replace ('#navigation li a span.red', {color: 'red'});
                        Cufon.replace ('#navigation li a span.orange', {color: 'orange'});
                        Cufon.replace ('#navigation li a span.yellow', {color: 'yellow'});
                        Cufon.replace ('#navigation li a span.aqua', {color: 'aqua'});
                        Cufon.replace ('#navigation li a span.green', {color: 'green'});
                        Cufon.replace ('#navigation li a span.purple', {color: 'purple'});
                        Cufon.replace ('#navigation li a span.pink', {color: 'pink'});

Open in new window

Replace your markup for the "Day Camp" menu item with this:
<li><a href="children.asp" style="font-family:'Comic Sans MS'"><span class="red">D</span><span class="orange">A</span><span class="yellow">Y</span> <span class="aqua">C</span><span class="green">A</span><span class="purple">M</span><span class="pink">P</span></a></li>

Open in new window

That should work and eliminate the inline css.

Author Closing Comment

by:Lev Seltzer
ID: 40549992
Perfect. Thank you for the quick response.
LVL 38

Expert Comment

by:Tom Beck
ID: 40550019
You're welcome, glad (and a little surprised) that it worked on the first try.

Author Comment

by:Lev Seltzer
ID: 40550030
Can I ask one more question? IF I wanted to add another attribute, such as RED and font-face:BOLD, or font-family:comic san how would I add it to the code you gave me? I added it in a place I thought I would work, but the entire script failed.

Thank you.
LVL 38

Expert Comment

by:Tom Beck
ID: 40550079
This is javascript so there are two ways, either use normal css property names in single quotes or javascript css property names in CamelCase.

Example 1, css property with single quotes:

Cufon.replace ('#navigation li a span.red', {color: 'red', 'font-weight': 'bold'});

Example 2, javascript css property in CamelCase:

Cufon.replace ('#navigation li a span.red', {color: 'red', fontWeight: 'bold'});

Author Comment

by:Lev Seltzer
ID: 40555531
Thank you. I was able to get this to work for bold. The font family didn't work, but perhaps I have a spelling error or the google font isn't connecting properly. I'll figure it out later - it looks good enough now with bold and colors.

Thank you for all your help.

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

752 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