Jump to content
Sign in to follow this  
brentwalker500

How to change the color of the navigation menu items

Recommended Posts

brentwalker500

Hi there, I'd like to get some detailed information about how to change the navigation color. The "off" state, the "on" state, the "hover" state.... because I'm in a confused state about it. :) Any help would be much appreciated. http://www.webwalkersolutions.com/

Share this post


Link to post
Share on other sites
Rob

Brent, I started to help you before, but your site crashed my computer. You've something in there that won't let go of a browser. Unfortunately, I can't look at it again. To answer your question though, you need to use PlatformPro > Typography to change the colors of your menu OR, you can design your own custom CSS and add it to Custom Code in the CSS area. I recommend looking to some of the better CSS menu sites such as http://www.cssplay.co.uk/menus/ to learn CSS code for navigation menus. You would view the page source of a menu style you like and copy the CSS styling and tweak it to your own needs.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brentwalker500

woah! really? I'm getting like 40 visitors a day and haven't heard a peep.. to be honest it's a pretty vanilla installation... in fact, I've not even installed any plugins other than those recommended. Well, I don't expect I will have any others looking at my question after that statement so...

Share this post


Link to post
Share on other sites
brentwalker500

oh.. you know what it was? I had a form in the features area.. I ran it through a validator and it blew up. I've removed it now so it should be OK. Sorry.

Share this post


Link to post
Share on other sites
brentwalker500

I've just updated wordpress as well... should be all clear even if it was a sql injection.

Share this post


Link to post
Share on other sites
Rob

Sorry that happened to you. Glad it wasn't me, though. I've never been a fan of forms in the features area.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brentwalker500

ahh.. I'd been warned.. now I've learned. :) Here is proof I'm safe: http://www.avgthreatlabs.com/sitereports/domain/webwalkersolutions.com/ So I can mark this as answered... Do i just copy some css from that site you suggested and put it in pagelines css? Nothing else to consider. I'm seriously not good with stuff like that so if you could help please.

Share this post


Link to post
Share on other sites
Rob

Brent, we'll happily help you tweak it, but there are tens of thousands of menu styles and options for what you wish to achieve. Basically, I'm just asking you to shop for the one you like best, copy the code and together, we'll try to tweak it to your satisfaction. If I were to give you code most likely it would still need tweaking. Catrina who's much better than I comes on at 10PM EDST and should be able to help you tweak it more. It's not hard to do the shopping and shockingly, you might see some options you hadn't considered that are totally do-able.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

You can always used this site to design it for you, then you'll get the exact code you want. http://cssmenumaker.com/


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brentwalker500

I hear exactly where you are coming from and that makes a lot of sense. I will look over some of those in the morning and come back if I need help. Thanks very much rangelone.

Share this post


Link to post
Share on other sites
Rob

My pleasure!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
brentwalker500

OK, I've started digging into this more and know exactly what I want... still can't get it to do it though. I've spent almost two hours so... it could go on for days. Your help would be very much appreciated. I'd like to know the code to change the line underneath the menu like this lady did: http://www.simplemama.com/about/ Just so you can make the example code just make the line #FFFFFF I'd like for the "off" navigation button state to be: #00FFFF the "hover" state to be: #FF0000 and the "active" (meaning the page that I'm on) to be: #00FF00 and just in case... I'd like to have the code to change the color of the box that surrounds that nav and search bar area all the way across the screen.. if that one is confusing just leave it out. Thanks. This information should allow me and pretty much anyone else the ability to copy, paste and just edit the hex colors to get a slightly more customized menu. Looking forward to having this ability and thanks again for working with me.

Share this post


Link to post
Share on other sites
catrina

Please add the following code to your Custom Code:

#nav_row div.main-nav {border-bottom: 0px;}
	ul#menu-mainmenu li#menu-item a {background-color: #00FFFF;}
	ul#menu-mainmenu li#menu-item a:hover {background-color: #FF0000;}
	ul#menu-mainmenu li#current-menu-item a {background-color: #00FF00;}

and just in case... I'd like to have the code to change the color of the box that surrounds that nav and search bar area all the way across the screen.. if that one is confusing just leave it out. Thanks.
What color do you want it to be?

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
brentwalker500

put it in there but.... it doesn't work. I've applied other CSS fixes in the CSS Rules area so I know what I'm doing from that perspective but it just doesn't seem to work. Any ideas?

Share this post


Link to post
Share on other sites
brentwalker500

Hi again, I even cleared out all of the other style modifications I have in there and put only what you gave me and I'm still not getting any color changes at all.. all browsers, all cache cleared. Any ideas?

Share this post


Link to post
Share on other sites
Jenny

The site that you linked to above is mine so I should be able to help you. :) Just visit PlatformPro -> Design Control, and then use these tips: ** The line underneath the navigation is changed using "Border Color - Layout Borders and Dividers" in the "Basic Layout Colors" section. ** The off, hover, and active colors are all controlled in the Primary, Secondary, and Tertiary Site Element Colors sections. You'll just have to play around with the colors until you get the effect you're looking for. Hope that helps!


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
cloudbearing

Can you specify which option is the: - Off - Hover - Active There are four options per section which means we have to do trial and error on 12 different items before figuring out which is which...

Share this post


Link to post
Share on other sites
Jenny

Unfortunately the documentation for these items is not so good but I can try to guess which ones they are and hopefully it works for you. :) For off, I actually think it is the Page Canvas Background Color (that is the only #ffffff setting on my blog). For hover, try Box Color - Secondary Site Elements. For active, try Box Color - Primary Elements (keep in mind this only works for page menu items, not categories.. don't know how to fix this).


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
brentwalker500

Hi simple_mama. Some of that worked but while it worked it was applied to broadly. For example, changing the "box color" changed the search box color, and the twitter feed footer area color along with the menu. So it's close but a bit to wide. I really appreciate you chiming in and trying to help. For the PageLines team. I've got to say that I'm really disappointed in what it's taking to change the color of my menu. This is supposed to be a drag-n-drop system and for the most part it lives up to that name but in a case like this where it doesn't, even the pagelines support doesn't seem to have the right answer. Surely someone has just wanted to change the color of the main site navigation before right? It seems that it would be a matter of just pasting in some CSS into the custom code, similar to what Catrina suggested above but... it's not working. I've applied a few other modifications that required "more" than this but for some reason this one eludes everyone. Does anyone know the answer to this question?

Share this post


Link to post
Share on other sites
catrina
Please try this code (it's a variation of the one I gave you previously - hopefully it works properly): [code]#nav_row div.main-nav {border-bottom: 0px;} ul#menu-mainmenu li.menu-item a {background-color: #00FFFF;} ul#menu-mainmenu li.menu-item a:hover {background-color: #FF0000;} ul#menu-mainmenu li.current-menu-item a {background-color: #00FF00;}[/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
webmonkey
I am having the same problem as Brent with adjusting menu colors. I am using a fresh install of PlatformPro and PlatformBase. I am adjusting everything from within the GUI you provide, with a couple of nominal spacing changes added to the Custom Code settings CSS Rules textarea. The default rollover background color is #F1F1F1. There is only one place in the PlatformBase CSS that this value is mentioned: Box Color - Secondary Elements. In Design Controls, scrolling down to Box Color - Secondary Site Elements, you see the entry for #F1F1F1. Yet changing this value and saving makes no difference to anything. I can copy the code from PlatformBase into the CSS Rules and it'll work, but it does not appear to be working from the Design Controls. I can put anything in there (before adding any custom CSS) and nothing happens. Catrina, I tried the code you pasted above and it didn't seem to visually affect anything on the site. Just one part of the equation, Brent, the selected background color of the main menu is the first field under "Box Color - Primary Elements" in Design Control and appears to work. Similarly, the rollover code you need to copy to the CSS Rules to change the main menu's mouseover/rollover background color is this: [code]/* Box Color - Secondary Elements */ .main_nav .main-nav li a:hover, #wp-calendar thead th, #buddypress-page #object-nav, .item-avatar a, .comment blockquote, #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover, #carousel .carousel_text, pagination .wp-pagenavi a, #pagination .wp-pagenavi .current, #pagination .wp-pagenavi .extend, .sf-menu li:hover, .sf-menu li.sfHover, #featurenav a, #feature-footer span.playpause, .content-pagination .cp-num, .content-pagination a:hover .cp-num, ins{ background-color: #D0D3D8; } [/code] I left the other colors as they were as they were close to what I was looking for. You could probably delete some entries from the code above (copied from style.css of the PlatformPro theme) to stop this spilling into other design areas of the site. I would like to echo what Brett said here about what the functionality should be. Instead of an interface that requires us to learn concepts such as primary, secondary and tertiary elements??”elements which spill across a number of design elements with totally different functions, it would be way easier if the customization options centered around actual functions on the website, i.e. Primary Navigation (background, rollover, unselected/selected states), Secondary Navigation, Form appearance (including options for adding custom code). That way when you adjust something, you know what you're doing, and it only adjusts that. You'll get less support questions and everyone will get this basic task done quicker. Another problem I'm having is also related to this customization spill. If you adjust the em values of the letter spacing of headers, this gets your page headers looking like you want, but it also affects the size of the header in the feature slider. As there's way more room on a page for a loose font to stretch out, there's three word titles getting cut off my feature slider. That shouldn't be happening. So the same isolation of customization options in the GUI would be super helpful. Same deal with blockquotes and other key text elements, eg. actual ordered and unordered lists that are to appear in body text (usually hard for novices to figure out because of the CSS reliance on bullet HTML formatting for menus and other toggle functionality. You have a great system here, great for a lot of things right out of the box. Adding some aspects to it that dumb down the customization for new users, and improving the in-GUI documentation would be helpful. At the moment, the documentation as a whole requires users to learn a lot of new words and phrases and concepts, and many of them wouldn't be necessary if the GUI was designed to relate to individual site elements and functions rather than these concepts. I'm enjoying learning the system though...!

Share this post


Link to post
Share on other sites
catrina
We're currently working on improving the documentation (this includes defining phrases and concepts). :)

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
webmonkey
That's great but design changes are spilling which is an issue. It's not so much that the concepts are unclear as much as it matters if design changes spill. All the excitement you get at having a GUI to tweak the design kind of fades when, after pulling down the drop down and clicking the button, you then have to go and spend an hour in the CSS to remove other instances of it. That's not helpful. I said it before, I'll say it again: it would be way easier if the customization options centered around actual functions on the website. Have you seen the admin interface of StudioPress Genesis framework's Prose template set? Specifically the Design Settings section. Sadly the demo doesn't let you see it, but I presume you've checked out competitor interfaces: http://www.studiopress.com/demo/prose.html Prose is certainly not a perfect interface as it is missing things and could include more options, but it's got way less feature spill, and you can directly and quickly change colors, fonts, etc. at the HTML element level, eg. you can specify background color, font, font size for H1's or Blockquotes. It's done in a minute. PlatformPro's ability to customize HTML elements is very minimal. There's nowhere in the GUI to change the base font size is there? You just get to choose the leading/case/etc for all headers, H1, H2, H3, but not for each of them. The day I find an interface that handles all of those separately, as well as separate instances of them (Post category index pages, Feature boxes, Homepage, Post/Page pages, etc), and CSS for typography is redundant, is the day I stop looking for a new Premium Template set. As it stands, you appear to have a couple of major problems??”weak documentation and support (do you have anything to say about your CSS above to change navigation size, because two people have pointed out that it doesn't work now and you haven't answered either of them?). And the search engine on the forum is bad. "remove pagelines footer image" (the leaf on the bottom of the PlatformBase footer) doesn't get you anywhere useful. Sorry to sound negative, but there are some very frustrating aspects to this template framework, and I don't see any help in the documentation or the forums. And this really needs to be said. There are many things to commend this framework, but charging $100 for a theme that's poorly documented and supported is a big turn off. So what do I do? If trying to adjust every single tiny thing requires hours of research, then the point of getting a framework like this (faster) is undermined. Is there a list of common things people want to customize on the theme somewhere? In a situation like this, someone's probably asked it before but finding stuff in the forums is really hard. Sometimes the best tech support are header-organized lists of questions with links to posts on the forums where this stuff has been answered before. That's quicker than rewriting the wheel, so to speak! :-)

Share this post


Link to post
Share on other sites
catrina
If the CSS has been added to the custom CSS already and it's not working, the CSS can be added to the base CSS stylesheet instead (in PlatformBase).

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
Jenny
Hope this will help: [code]ul#menu-main.main-nav a:hover { color: #4b857a; background-color:#e8c8d0; } ul#menu-main.main-nav a:active { color: #4b857a; background-color:#e8c8d0; }[/code] Change the color and background color to whatever you want. The first one is for hover menu items and the second is for the active menu items (note: this will not work with categories used as menu items). If it doesn't work or if you still need help with something, please let us know! :)

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

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  

×