Jump to content

Help needed to modify existing wordpress theme menu


mistados
 Share

Recommended Posts

Hi guys, I am trying to customize the menu of the wordpress theme "Mingle"http://themeforest.n..._preview/235056 I have replaced the existing graphic behind the text links with a simple 990px menu bar, what i would like help with now is adding the buttons that sit behind the text link, but over the menu bar, and the hover state to those buttons. Here are the graphics im using: mm-bg.png (graphic behind the text links)157j4ih.jpg mb-default.png (button to sit behind the menu links)ip0cpf.jpg mb-hover (button to use on hover)2vile12.jpg Here is an example of what i would like the finished job to look like:xd5afq.jpg Im new to all this, but i think if i understand right, what i need to do is have some kind of border around menu text items and display that as block, the same size as my button graphic, and somehow have my graphic sit behind the text link and then apply a hover state? Im pretty new to all this, would a guru be kind enough to help me out with this? Here is our site: proaudioheadz.com i also have a test site at proaudioheadz.com/dev Any help is much appreciated..

Link to comment
Share on other sites

you would have to adjust the styling of

.slideMenu ul li a {	border-radius: 4px 4px 4px 4px;	color: #B9BBBE;	display: block;	line-height: 1;	margin: 2px 0;	padding: 6px 13px 9px;	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);}

to take the background image, the border radius, line-height can go completely, a width and height is required to hold the image, margin, padding will need adjusting, you also should use a sprite image of the button where default image is placed on top of the hover so only one image of both is required instead of to individual image, but the css height will be set to the height of single button.

Link to comment
Share on other sites

Thanks dsoneuk, Ok so i have made an image sprite of the menu button, the two different states, normal and hover..dws0zo.jpg What is the first step i need to do to get this ball rolling? Many thanks.

Edited by mustard
Link to comment
Share on other sites

theres a lot to do to change and use this menu heres most of it, there maybe more required

#MainMenu .inner-2 {    /*background: url("assets/images/mm-bg.png") repeat-x scroll 0 0 #2C3136;*/background: url("assets/images/mm-bg.png") repeat-x scroll 0 0 transparent; /*amended by dsonesuk */   /*border-radius: 2px 2px 0 0; removed by dsonesuk*/    /*height:33px;*/    height: 80px;  /*amended by dsonesuk */    padding: 0 7px;}#MainMenu .inner-1 {    /*-moz-border-bottom-colors: none;    -moz-border-image: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    border-color: #3E454B #3E454B -moz-use-text-color;    border-radius: 4px 4px 0 0;    border-style: solid solid none;    border-width: 1px 1px 0; removed by dsonesuk*/}.slideMenu ul li.current-menu-item, .slideMenu ul li.current-menu-item.li_hover, .noShowcaseContent.noHeaderContent .slideMenu ul li.current-menu-item.li_hover, .slideMenu ul li.current-menu-ancestor, .slideMenu ul li.current-menu-ancestor.li_hover, .noShowcaseContent.noHeaderContent .slideMenu ul li.current-menu-ancestor.li_hover {   /* -moz-border-bottom-colors: none;    -moz-border-image: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;*/    background: url("http://i43.tinypic.com/dws0zo.jpg") repeat-x scroll 0 -46px transparent;    /*border-color: #3E454B #3E454B -moz-use-text-color;    border-radius: 4px 4px 0 0;    border-style: solid solid none;    border-width: 1px 1px 0;    box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.05);    margin-top: -4px;*/}.slideMenu ul li.current-menu-item > a, .slideMenu ul li.current-menu-ancestor > a {    /*border-color: #6A747C #525C65;    border-radius: 4px 4px 0 0;    border-style: solid;    border-width: 1px 1px 0;*/    color: #BADCED;    /*margin: 0;    padding: 9px 11px 13px;*/}.slideMenu ul li a {   /* border-radius: 4px 4px 4px 4px;*/    color: #B9BBBE;    display: block;   /* line-height: 1;    margin: 2px 0;    padding: 6px 13px 9px;*/    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);height:42px;/* added by dsonesuk */line-height:42px;/* added by dsonesuk */width: 117px;/* added by dsonesuk */text-align:center; /* added by dsonesuk */}.slideMenu {    font-size: 13px;    line-height: 1;    margin-top: 10px;  /* added by dsonesuk */}.slideMenu ul li.current-menu-item > a.hasSubMenu, .slideMenu ul li.current-menu-item > a.hasSubMenu, .slideMenu ul li.current-menu-ancestor > a.hasSubMenu, .slideMenu ul li.current-menu-ancestor > a.hasSubMenu {    /*padding-right: 17px; removed by dsonesuk*/}.slideMenu ul li a.hasSubMenu {    /*border-radius: 4px 4px 0 0;    padding-right: 19px;  removed by dsonesuk*/}.slideMenu ul li.current-menu-item > a:hover, .slideMenu ul li.current-menu-item > a.hover, .noShowcaseContent.noHeaderContent .slideMenu ul li.current-menu-item > a:hover, .noShowcaseContent.noHeaderContent .slideMenu ul li.current-menu-item > a.hover, .slideMenu ul li.current-menu-ancestor > a:hover, .slideMenu ul li.current-menu-ancestor > a.hover, .noShowcaseContent.noHeaderContent .slideMenu ul li.current-menu-ancestor > a:hover, .noShowcaseContent.noHeaderContent .slideMenu ul li.current-menu-ancestor > a.hover {    /*background: none repeat scroll 0 0 #1E2225;    border-color: #1E2225;  removed by dsonesuk*/background: url("http://i43.tinypic.com/dws0zo.jpg") no-repeat scroll 0 0 transparent; /* added by dsonesuk */    color: #FFFFFF;    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);}.slideMenu ul li a:hover, .slideMenu ul li a.hover {   /* background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);  removed by dsonesuk*/    color: #FFFFFF;}.csstransitions .slideMenu ul li a {   /* -moz-transition: all 0.1s ease-in-out 0s;*/}.csstransitions .slideMenu ul li.current-menu-item > a.hover.hasSubMenu, .csstransitions .slideMenu ul li.current-menu-item > a.hasSubMenu:hover, .csstransitions .slideMenu ul li.current-menu-ancestor > a.hover.hasSubMenu, .csstransitions .slideMenu ul li.current-menu-ancestor > a.hasSubMenu:hover {    /*padding: 9px 17px 13px 11px; removed by dsonesuk*/}.csstransitions .slideMenu ul li a.hover.hasSubMenu, .csstransitions .slideMenu ul li a.hasSubMenu:hover {    /*margin-bottom: 0;    padding-bottom: 10px;    padding-top: 7px; removed by dsonesuk*/}

Link to comment
Share on other sites

:Shock: Oh my god! That's crazy.. So can i paste this code in my stylesheet? will that work? i take it i need to replace the tinypic links with the URL to the image sprite?
Link to comment
Share on other sites

Well yes!, but as I amended one area, I discovered another, and another, you have to remove all background colours, rounded corners, padding, margins, and even the transitions which affected the roll-over effect, and no you can't just paste at bottom, as you have to remove the styling i committed out from the original, or they will still be active.

Link to comment
Share on other sites

Oh, i was looking in default style.css.. :facepalm: Do you know if its possible to use firebug to search for lines of code and get the respective stylesheet from that? otherwise its a lot of guess work as to which styleshheet to search..and theres a lot in this theme..

Edited by mustard
Link to comment
Share on other sites

Ok, well i followed the instructions as best as i could, the code was spread between multiple stylesheet's. Not a lot has changed after making the edits, i know i screwed up somewhere but have no idea where.. :sorry:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...