Solved

Change CSS Menu Colors

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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

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…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 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