CODEWITHSUNDEEP
csswordpressmenusifrselector
Kara
Kara

Reputation: 11

CSS selector to use for sIFR menu

I've used sIFR successfully for simple applications like headings, I'm trying to use two different fonts simultaneously - one for a heading and one for a menu.
The heading works, but not the menu. I'm using the Tofurious Wordpress theme. This is the section of the theme's stylesheet that governs the menu font and link styles:

/*MENU COLORS****************/
#menu {
 background:#bc7d90;
}

#menu li a {
 font:11px Arial, Helvetica, sans-serif; /*MENU FONT STYLES*/
 text-transform: uppercase;
 color:#fff; /*MENU FONT COLOR*/
}

#menu li a:hover {
 color:#ecd1d9; /*MENU FONT COLOR WHEN HOVERING*/
}

I entered #menu li a as the Item To Replace on the sIFR settings page, and then used this code:

.sIFR-root { font-size:15px; font-weight:normal; color:#fff; }
a { text-decoration:none; color:#fff; }
a:hover { color:#fff; }

The font appears - but not with any of the styles specified above, and it appears on the blog in an unexpected way. You can see the example at this address: www.laurenparkinson.com/blog

Also, the actual sub-menu items are not appearing at all.

Upvotes: 1

Views: 172

Answers (1)

emmychan
emmychan

Reputation: 1618

You'll do yourself a big favor by ditching sIFR completely for @font-face which is now supported in all major browsers including IE since version 4 (more compatibility information: http://webfonts.info/wiki/index.php?title=@font-face_browser_support).


@font-face {
 font-family: myFont1;
 src: url('myFont1.eot'); /*For IE*/
 src: local('myFont1'), url('myFont1.ttf') format('truetype');
}
@font-face {
 font-family: myFont2;
 src: url('myFont2.eot'); /*For IE*/
 src: local('myFont2'), url('myFont2.ttf') format('truetype');
}

#header{
 font-family: myFont1, Georgia, Times New Roman, Serif;
}

#menu {
 font-family: myFont2, Verdana, Arial, Sans-serif;
}

Just make sure your fonts are licensed for embedding.

Online eot converter: http://www.kirsle.net/wizards/ttf2eot.cgi

Upvotes: 0

Related Questions