Solved

Change CSS Menu Colors

Posted on 2015-01-14
11
133 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
  • 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now