Solved

Change CSS Menu Colors

Posted on 2015-01-14
11
134 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Kill default webkit margin!  Please! 6 22
Form Submit falis 6 24
Materializecss - Different Behaviors in Browser's 1 17
Bad <form> statement? 9 20
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

929 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

12 Experts available now in Live!

Get 1:1 Help Now