ThemeShaper Forums » Thematic

[closed]

Thematic Menu Assistance

(7 posts)
  • Started 7 years ago by faeree
  • Latest reply from faeree
  • This topic is not resolved
  1. faeree
    Member

    Hi Guys!

    Thanks in advance for your help! I've searched the forums and guides, but could not find my answer. I've searching using Firebug but its not showing all the CSS classes.

    Three Questions regarding menu customization:
    1) I have activated the drop menu (subfish) arrows except I cannot find where to change the arrow look. I want to have the arrow pointing down, not to the right. Where do I change this?

    2) I have the following menu code:

    /*MENU*/
    
    .skip-link {
        display:none;
    }
    #access {
    	background-color: #000;
        border: 1px solid #000000;
        min-width: 600px;
    	max-width: 100%;
    	min-height: 40px;
    	max-height: inherit;
    	margin: 0 auto;
        /*font-size:13px;*/
        overflow:visible;
        z-index:100;
    }
    /*** MENU POSITION ***/
    .sf-menu, .sf-menu * {
    	margin:			0 auto;
    	padding:		0;
    	list-style:		none;
    }
    .sf-menu {
    	line-height:	1.0;
    }
    .sf-menu ul {
    	position:		absolute;
    	top:			-999em;
    	width:			10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
    	width:			100%;
    }
    .sf-menu li:hover {
    	visibility:		inherit; /* fixes IE7 'sticky bug' */
    }
    .sf-menu li {
    	float:			left;
    	position:		relative;
    }
    .sf-menu a {
    	display:		block;
    	position:		relative;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    	left:			0;
    	top:			2.5em; /* match top ul list item height */
    	z-index:		99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
    	top:			-999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
    	top:			-999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
    	left:			10em; /* match ul width */
    	top:			0;
    }
    
    /*** MENU SKIN ***/
    .sf-menu {
        border-right:1px solid #000;
    	/*float:left;*/
    }
    .ie6 .sf-menu {
    	margin-bottom: -1px;
    }
    .sf-menu a {
    	border-left:1px solid #000;
    	border-top:1px solid #000;
    	border-bottom:1px solid #000;
    	padding:9px 16px;
    	text-decoration:none;
    }
    .windows {
    	font-size: 12px;
    	padding:9px 16px 10px;
    }
    .sf-menu li a {
    	font-family: 'Simonetta', Arial, serif; font-weight: 400;
    	font-size: 20px;}
    
    .sf-menu li li a {
    	font-family: 'Simonetta', Arial, serif; font-weight: 400;
    	font-size: 14px;}
    
    .sf-menu .current_page_item a,
    .sf-menu .current_page_ancestor a,
    .sf-menu .current_page_parent a {
        border-bottom-color:#000;
    }
    
    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    	color: #fff;}
    
    .sf-menu li {
    	background:	#000;
    	color: #fff;
    }
    .sf-menu li li {
    	background:	url(img/black_dd.png);
    	color: #fff;}
    
    .sf-menu li li li {
    	background:	url(img/black_dd.png);
    	color: #FFF;
    }
    
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background: #F2E700;
    	color: #000;
        border-bottom-color:#000;
    	outline:		0;
    }
    .sf-menu li.sfHover a{
    	color: #000;
    }
    .sf-menu li li a {
    	color: #fff;
    }
    .sf-menu ul {
        border-right:1px solid #000;
        border-bottom:1px solid #000;
    }
    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    	top:40px; /* overriding essential styles */
    }
    .sf-menu ul ul {
        margin-top:0;
    }
    .sf-menu ul a {
        background:#000;
    	color: #fff;
    	border-bottom:none;
    }
    .sf-menu ul a:hover {
    	background:	#000;
    	color: #fff;
    }
    .sf-menu li li a:hover {
    	background: #F2E700 url(img/pawprint_dd.png) right no-repeat;
    	color: #000;
    	}

    1) I need to have the color of the sub menu 'a' be white and the active top menu 'a' be black. It seems when I change one, it changes both. I'm not sure what I'm missing.

    2) I want to have the menu centered. I tried changing the margin, etc. but nothing gets it centered.

    Thanks so much for help!

    Posted 7 years ago #
  2. for the first one, have you read?
    http://forums.themeshaper.com/topic/thematic-menus-demystified-1

    there is a whole section called styling the beast that has lots of comments about which level of menu you are styling

    also instead of posting your code it is much better to post a link

    second, this is the best option for centering, but i haven't tried it w/ thematic. idk how it handles dropdowns:
    http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

    ps- please put code between backtick ( ` ) marks. [code] doesn't do anything on this forum

    Posted 7 years ago #
  3. faeree
    Member

    Hi Helga,

    Thanks for posting :) Sorry for my late reply, I have had a bad case of the flu!

    Thanks for the link- that was where I first started in my customization- its a great resource. However, I couldn't find the answers to my questions, which is why I posted in the forum :)

    Pardon my dust on this example, its obviously far from finished!
    http://jenscraig.freehostia.com/wordpress/

    So with my example the things I want to change are:
    1) The drop down indicator- I want it as a pointing down arrow, not a right pointing arrow.
    2) The drop down menu text color is an issue.
    3) I will check out the link for the centering and test that next!

    EDIT: The author of the website you provided for centering has a tutorial page for centering drop down menus- http://matthewjamestaylor.com/blog/centered-dropdown-menus Yay! I will work on implementing that as I type- so when you go to look at my test page, the centering may already be implemented :)

    Thanks!

    Posted 7 years ago #
  4. 1. that >> is contained within a span. style the span with a background image and text-indent away the >>

    2. more specifically?

    .sf-menu li.sfHover a {
    color: #000;
    }

    make the fonts in the drop-down black. but you've also got:

    .sf-menu li {
    background: #000;
    color: #fff;
    }

    which makes their background's black too. black on black = unreadable.

    Posted 7 years ago #
  5. faeree
    Member

    Re: sub-indicator- OK, I was hoping there was some code in the javascript that I couldn't spot easily to change it rather than resorting to hacking the CSS.

    Re- menu color issue- Yeah, if you notice the design I need the first level of li to be black background, white text. Then on mouseover of that first level li to be yellow background with black text. On active it needs to be same as mouseover.

    On the drop down (li level 2) I need black background and white text. And again, on mouseover the yellow background and black text.

    What is happening is that the top level active changes to white when I set the text on drop down to be white. SO to get help to show where the issue is, I have my current live design to have the top level shown how I want, but showing the issue in the drop down part of the CSS. I cannot figure out where that css code is. I thought this would fix it, but it doesn't override it:

    .sf-menu li li {
    	background:	url(img/black_dd.png);
    	color: #fff;}
    
    .sf-menu li li li {
    	background:	url(img/black_dd.png);
    	color: #FFF;
    }

    The images were supposed to be transparent black but that didn't seem to work.. I would so appreciate some help! Thanks!

    Posted 7 years ago #
  6. well no, b/c the A tag is more specific than the LI tag, so changing the color of LI will do nothing to the link color when your default.css is styling the color of the A link.

    i'd get rid of the sfhover a i mentioned above. it is doing things you aren't expecting.

    then

    .sf-menu li li a {
      color: yellow;
    }

    should change the color of the second level stuff as i probably showed in my menu thread. please reference that. if you start with "styling the beast" (and ONLY that for the menu) you should be able to style it any which way you please.

    sidenote- styling your CSS to achieve a certain look is not "hacking" your theme in any way. that's the whole point. and based on superfish options:
    http://users.tpg.com.au/j_birch/plugins/superfish/#options
    it doesn't appear to be possible to change the character being used

    Posted 7 years ago #
  7. faeree
    Member

    Thanks so much for your reply! I will go through the styling the beast again. It is where I started and a very good resource but I must have mixed up something when I was recoloring it as I tend to do :)

    Thanks about the superfish listing. I was hoping it was just me not being able to locate where the symbol was in the javascript. I did visit that page, or similar, when trying to figure out if changing the symbol was possible but that was as far as I was able to go too. To me, that symbol is being called somewhere and I thought it was just that I wasn't seeing it in the javascript.

    I appreciate the time you have taken to help me!

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.