Jump to content
Sign in to follow this  
psaudio

How to add menu buttons?

Recommended Posts

psaudio

Just got platform pro. Awesome tool guys! I want the same menu buttons as I have in iBlog 4 - but I can't figure out how to change the simple text menu links I have into buttons of my choice.

Share this post


Link to post
Share on other sites
catrina
It's possible with CSS. You just need the gradient image (this is the image you need to apply to the navigation background to get the look you see in iBlogPro). That gradient image (the grey one) is called nav-bg.png (located in the iBlogPro theme files). Can you post link a link to your site?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
psaudio
http://66.40.29.164/~wpsaudio/ Ignore the Apple images as they are the perfect size and I am just using them for testing. I can find the image you refer to but then don't know what to do with it. Thanks for your time!

Share this post


Link to post
Share on other sites
catrina
Upload the gradient image to your media library and then grab the image URL for it and plug it into where it says [b]URL[/b] in the following CSS: [code]#primary-nav {background-image: url('http://URL');} li#menu-item {background-color: none;}[/code] ^ Add this CSS to your Custom CSS section.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
psaudio
Catrina. You are very kind to help! I added the script and it sort of worked. Maybe if you have a moment, take a look. It doesn't have the dividing lines and the rollover looks weird. Is there any way to make it look identical in both look and function?

Share this post


Link to post
Share on other sites
psaudio
Perhaps my basic question is too difficult to answer. Can anyone tell me how to change the navigation look on this theme? It's hard to imagine that with a theme based on customization that one couldn't make changes to the look of the navigation. Maybe I am just missing it.

Share this post


Link to post
Share on other sites
catrina
I visited your site and the navigation looks the same as before. Did you remove the script? Also, the divider lines are separate images that also need to be added, but I think that borders using CSS can just be used.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
psaudio
Thanks Catrina. I removed the script because it looked bad. I put it back up so you can see. The problems are that it seems to be just putting up a single long background image - without the image dividers and the text font changing colors - they don't look like buttons. I'll leave it up and hope for your advice. I don't know CSS so if there's something I can just drop in at your suggestion, including the image icon on the home page button, I would appreciate it.

Share this post


Link to post
Share on other sites
catrina
Here is CSS that can improve it: [code]#primary-nav {background-image: url('http://URL'); background-repeat: no-repeat;} ul#menu-main-menu li#menu-item-35 {background-color: none; border-right: 0px;} ul#menu-main-menu li#menu-item {background-color: none; border-right: 1px solid #454545;} ul#menu-main-menu li#menu-item a:hover {background-color: none;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
psaudio
Thanks. That appears to have cleaned up the right side. How do I change the text font to white so you can actually read the menu items and the hover color to dark? Also, how would I add the divider images to complete the menu?

Share this post


Link to post
Share on other sites
catrina
Replace this: [code]ul#menu-main-menu li#menu-item-35 {background-color: none; border-right: 0px;} ul#menu-main-menu li#menu-item {background-color: none; border-right: 1px solid #454545;} ul#menu-main-menu li#menu-item a:hover {background-color: none;}[/code] with this: [code]ul#menu-main-menu li#menu-item {color: #fff; background-color: none; border-right: 1px solid #454545;} ul#menu-main-menu li#menu-item a:hover {background-color: #454545;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
psaudio
Placed the new code right after the one above but it didn't seem to do anything.

Share this post


Link to post
Share on other sites
catrina
You need to get rid of the code I gave you initially and replace it with the new code. Here's the new code you need to add: [code]#primary-nav {background-image: url('http://URL'); background-repeat: no-repeat;} ul#menu-main-menu li#menu-item {color: #fff; background-color: none; border-right: 1px solid #454545;} ul#menu-main-menu li#menu-item a:hover {background-color: #454545;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
psaudio
I added that and now it looks like the same. There was one missing URL labeled "background image" which I added, again, the original background image. Was that supposed to be the divider image perhaps? Here's the code I entered. /*#primary-nav {background-image: url('http://66.40.29.164/~wpsaudio/wp-content/uploads/2011/08/nav-bg.png');} li#menu-item {background-color: none;}*/ #primary-nav {background-image: url('http://66.40.29.164/~wpsaudio/wp-content/uploads/2011/08/nav-bg.png'); background-repeat: no-repeat;} ul#menu-main-menu li#menu-item {color: #fff; background-color: none; border-right: 1px solid #454545;} ul#menu-main-menu li#menu-item a:hover {background-color: #454545;}

Share this post


Link to post
Share on other sites
catrina
The divider is actually supposed to be created by "border-right: 1px solid #454545" but I suppose it isn't working. There is a divider image located in the iBlogPro files. You can use that same one and upload it to your site then it can be implemented in the CSS.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
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

Sign in to follow this  

×