ThemeShaper Forums » Thematic

[closed]

Need Sprite graphics in Menus

(2 posts)
  • Started 8 years ago by johnxe22
  • Latest reply from helgatheviking
  • This topic is not resolved

Tags:

  1. johnxe22
    Member

    Hi,

    I have a friend who wants to use her own "branding" type face in menus via sprite gif files. The purpose is that she has her own fonts that she wants to display. I have seen this done elsewhere and have found the following code. I'm trying to map this to what i see in the default.css. Can anyone help me and suggest how i might integrate something similar into the child css?

    Here is the snippet i have found elsewhere . . . i know that the classes are called elsewhere by a different function and so probably not the same as here in thematic.

    I am thinking one needs to know the right function calls for mapping into thematic. Any ideas?

    #menu {
    width:auto;
    }
    #nav {
    background:url("images/bg-greyline.gif") repeat-x scroll left center transparent;
    border-right:1px solid #CCCCCC;
    height:32px;
    margin-left:13px;
    }
    #menumain ul {
    float:right;
    width:auto;
    }
    #nav ul {
    margin-bottom:0;
    margin-top:0;
    }
    #menumain ul li {
    background:none repeat scroll 0 0 #FFFFFF;
    float:left;
    list-style:none outside none;
    }
    #menumain ul li a {
    background-color:#FFFFFF;
    background-position:center bottom;
    background-repeat:no-repeat;
    display:block;
    font-size:0;
    height:14px;
    line-height:0;
    margin:9px 10px;
    overflow:hidden;
    text-indent:-999em;
    }
    ul li.home a {
    background-image:url("images/nav-home-sprite.gif");
    width:34px;
    }
    li.about a {
    background-image:url("images/nav-about-sprite.gif");
    width:106px;
    }
    li.speaking a {
    background-image:url("images/nav-speaking-sprite.gif");
    width:154px;
    }
    li.other a {
    background-image:url("images/nav-other-sprite.gif");
    width:103px;
    }
    li.contact a {
    background-image:url("images/nav-contact-sprite.gif");
    width:54px;
    }
    li.books a {
    background-color:#F1F1F1 !important;
    background-image:url("images/nav-books-sprite.gif");
    border-left:1px solid #CCCCCC;
    width:41px;
    }
    #menumain ul li a:hover {
    background-position:center top;
    }
    #menumain li.books, #menumain li.books li {
    background:none repeat scroll 0 0 #F1F1F1 !important;
    position:relative;
    z-index:999;
    }
    #nav li.books ul {
    background:none repeat scroll 0 0 #F1F1F1;
    border-bottom:1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
    border-top:1px solid #CCCCCC;
    bottom:-34px;
    display:inline;
    float:right;
    margin:0;
    padding:0;
    position:absolute;
    right:0;
    width:316px;
    z-index:-1;
    }
    li.books {
    border-left:1px solid #CCCCCC;
    }
    #nav li.books li.drive a {
    background-image:url("images/subnav-drive-sprite.gif");
    border-left:medium none;
    width:35px;
    }
    #nav li.books li.wnm a {
    background-image:url("images/subnav-wnm-sprite.gif");
    border-left:medium none;
    width:124px;
    }
    #nav li.books li.johnnybunko a {
    background-image:url("images/subnav-johnnybunko-sprite.gif");
    border-left:medium none;
    width:95px;
    }
    #menumain li.books li a {
    }

    Posted 8 years ago #
  2. i think you will need to hand-code a menu. see this page (all the way at the bottom)

    http://themeshaper.com/wordpress-menu-tricks/

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.