1

this is the code in our Volusion nav menu:

#display_menu_1 .nav {background-color:transparent;}
#display_menu_1 .nav_hover {background-color:transparent;}
#display_menu_3 .nav {background-color:transparent;}
#display_menu_3 .nav_hover {background-color:transparent;}

The URL is http://www.markpoulin.com As you can see, the nav menu is in a different font. The "About Us" and "Where to Buy" links at the bottom of the nav menu are in Verdana, and we'd like to match them, but I don't know how to change the font in the nav menu. I have tried researching online, but can't find this particular type of code, and have tried inserting the font family bit in different places but it hasn't changed the font.

user2158654
  • 13
  • 3

2 Answers2

1

The reason why you're unable to style the nav menu is because it contains inline CSS. Here's a snippet from the first item on your nav menu :

<a onclick="return $K(0)" name="mM1" onfocus="_iF0C(0)" href="http://www.markpoulin.com/category-s/292.htm" class="nav" id="lnk0" style="border:none;background:transparent;display:block;;font-Family:Georgia;font-Weight:normal;font-Style:normal;font-Size:11px">Mother's Day</a>

Notice there font-Family:Georgia in the style attribute. Inline styles have the highest specificity, so it's impossible to overwrite with CSS selectors. Is there any way you can prevent the nav from generating inline styles?? eg. <a onclick="return $K(0)" name="mM1" onfocus="_iF0C(0)" href="http://www.markpoulin.com/category-s/292.htm" class="nav" id="lnk0">Mother's Day</a>

Read this learn more about CSS specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Amy
  • 7,388
  • 2
  • 20
  • 31
  • I'm pretty sure that this coding is part of our "template" and is not something we have access to. Which is probably why Volusion wouldn't help me fix it without a fee. – user2158654 Mar 27 '13 at 18:55
  • @user2158654 If you cannot change the inline style, then I think you're last option is to use JavaScript to remove those inline styles. It's ugly, but I think that is your last resort. There's no CSS that can be more specific than inline styles. The only thing that trumps it is to modify the DOM using JavaScript. – Amy Mar 27 '13 at 19:05
  • I was able to change the style using bjornio's fix below. As I said before, our site is template-based and we don't access to a whole redesign, nor would we ever want to do that as we're not programmers! Even figuring this out was difficult enough ;) – user2158654 Mar 27 '13 at 19:34
0

I work with Volusion all the time and this is what I do when I absolutely can't find a way to change what I need to (only as a last resort!!). Specifically this will target all of those side menu links:

#lnk0, #lnk1, #lnk2, #lnk3, #lnk4, #lnk5, #lnk6, #lnk7, #lnk8, #lnk9, #lnk10, #lnk11, #lnk12, #lnk13, #lnk14, #lnk15, #lnk16, #lnk17, #lnk18, #lnk19, #lnk20, #lnk21, #lnk22, #lnk23, #lnk24, #lnk25, #lnk26, #lnk27, #lnk28, #lnk29, #lnk30, #lnk31, #lnk32, #lnk33, #lnk34, #lnk35, #lnk36, #lnk37, #lnk38, #lnk39, #lnk40, #lnk41, #lnk42, #lnk43, #lnk44, #lnk45, #lnk46 {
font-family: tahoma!important;

(Of course, change the font to whatever you wanted it to be). With volusion, because code is nested within tables within tables within tables (gag!), you'll need to be specific about what you are targeting.

Using !important can sometimes make css really messy but unfortunately I have to use it alot with volusion. Unlike what sweetamylase said, this trick will overwrite most of your inline style needs.

Here is an article on !important http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

Bjorn.B
  • 1,473
  • 1
  • 10
  • 11