Solved

Change CSS Menu Colors

Posted on 2015-01-14
11
138 Views
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.
0
Comment
Question by:Lev Seltzer
[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
  • 5
  • 5
11 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40549456
Broken link.
0
 

Author Comment

by:Lev Seltzer
ID: 40549470
0
 
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.
0
Independent Software Vendors: 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.

www.gatewayspesach.info


Sorry - and thank you for your patience.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
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.

Cd&
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 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'});
                        Cufon.refresh();
		</script>

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.
0
 

Author Closing Comment

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

Expert Comment

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

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.
0
 
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'});
0
 

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.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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
Open dialog with server side controls in it 3 46
Validating Date Part2 2 27
[Bootstrap] Navigation Bar Collapse 27 35
title attribute 5 23
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

762 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