• 0
Sign in to follow this  
Followers 0

Base Menu Bar Colors

Question

Posted · Report post

Hello PageLines team, I have platform pro 1.5.1 + base child theme 1.4.1 I have the same issue, like Maurice Moore (topic: http://www.pagelines.com/forum/topic/10840), but the code don't seem to work on me. I need some help to make custom css code in style.css of Platform Base in order to: - change the background and text colors of menu buttons - change the background and text colors of menu buttons on hover - change the background and text colors of menu buttons when clicked, focused, visited, etc and most important when that page is opened (currently viewing) I am currently using the code from the topic 10840, but as you can check, it's not seems to work on me. site: http://myccibg.com/ Please, I will appreciate any help on this Thank you! Regards, Alex

Share this post


Link to post
Share on other sites

33 answers to this question

  • 0

Posted · Report post

You are probably using a different design mode than the original poster. Double check his to yours to confirm.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Adam, I am using the default mode: Full-Width Design With Canvas After several hours I am almost done with the css code of menu. just added #primary-nav in front the classes and it working... my code so far is: #primary-nav .texture { background-color: #729abd; color: #000000 !important; } #primary-nav .sf-menu li { background-color: #729abd; } #primary-nav .sf-menu li li { border-color: #81a1bd; } #primary-nav .sf-menu li a { color: #FFFFFF; } #primary-nav .sf-menu li a:hover { background-color: #3573b2; color: #000000; } #primary-nav .sf-menu .current_page_item a { background-color: #3573b2; color: #FFFFFF !important; } #primary-nav .sf-menu .current_page_item a:hover { color: #000000 !important; } still there are classes which are not very clear for me...but I will figure it out.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So far the only thing that is not fixed: When click on any page from menu, the whole list of the child pages becomes with the hover color, instead only the first, the parent page....and I just need to know the class of the child li's to fix it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Oh, I forgot one more thing, which is complete mist for me. when click on any button from the menu, the color changes for a while...then changes to what it has to be. That little issue is still not fixed.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, I need a little help on the last one...When click on any button from the menu, the color changes for a while...it's like blinking. Anybody know how to change that?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I looked at your site and moused over the navigation but I don't see any blinking of any sort. Did the problem fix itself or do you still see a problem?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Catrina, No I can't figure this out, because I have never seen that button actions before....maybe it is modern browsers thing. You must click on the button to see what happens...not hover I am using Mozilla Firefox 3.6.18 and also tested with Internet Explorer 8, on a 64bit Windows 7 Ultimate Please, check my screenshot...I hope you will understand what I am talking about. http://myccibg.com/main_menu_button_state.jpg Regards, Alex

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

add an active state selector ` #primary-nav .sf-menu li a:active { color: #000000 !important; } `

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Adam, I tried this already, but there is no change. Do you see what I am talking about? Maybe I can't explain well what exactly happens.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I tried going to your site to see what happens when I click on the menu item, but it's currently under maintenance mode. Is it possible to make it so that someone can access it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I see what you mean now when clicking on the menu items. I took something out of your CSS. You should try adding this instead of the code you have right now:

#primary-nav .texture { background-color: #729abd; color: #000000 !important; }
	#primary-nav .sf-menu li { background-color: #729abd; border-color: #81a1bd; }
	#primary-nav .sf-menu li a { color: #FFFFFF; }
	#primary-nav .sf-menu li a:hover { background-color: #3573b2; color: #000000;}
	#primary-nav .sf-menu .current_page_item a { background-color: #3573b2; color: #FFFFFF !important; }
	#primary-nav .sf-menu .current_page_item a:hover { color: #000000 !important; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I removed my code and put yours, but no change....now I am using the code you provide. I am not sure if it's important, but somehow the Page Background Color in Design Control section of Platform Pro is connected with Menu colors. When you click on any button from Main menu the color changes to #e7f3ff which I set as Page background color.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hmmm. What kind of menu are you using? A custom menu?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes, I am using a custom menu.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That could be why the selectors are off. Try this:

ul#menu-main-menu { background-color: #729abd; color: #000000 !important; }
	ul#menu-main-menu .main_nav li { background-color: #729abd; border-color: #81a1bd; }
	ul#menu-main-menu .main_nav li a { color: #FFFFFF; }
	ul#menu-main-menu .main_nav li a:hover { background-color: #3573b2; color: #000000;}
	ul#menu-main-menu .main_nav .current_page_item a { background-color: #3573b2; color: #FFFFFF !important; }
	ul#menu-main-menu .main_nav .current_page_item a:hover { color: #000000 !important; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

added the new code...still the same.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I can't seem to recreate the issue, what browser and version are you using?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jimmy, I mentioned this above: "I am using Mozilla Firefox 3.6.18 and also tested with Internet Explorer 8, on a 64bit Windows 7 Ultimate" The same is on mac with Snow leopard and Mozilla Firefox and Safari

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ok, who needs these actions, let's deactivate it. I mean to disable/remove button actions like 'on mouse down', 'on click', etc....but as I know this is not CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Aleksandar, Am I to understand you want to end the thread?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Kate, No, I do not want to end the thread (this post). I was talking about DOM Event Attributes (http://www.w3schools.com/jsref/dom_obj_event.asp) To visualize better what I meant please see this small piece of code below.

<div id="menu_about_bg" class="cnt10 bgr04 pro03 pro01" onmouseover="toggleMenu('menu_about_bg',1)" onmouseout="toggleMenu('menu_about_bg',0)" onclick="jumpto('about.html')"></div>

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay... please bear with me, here :) What exactly do you need assistance with, then?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Kate, I don't understand you. Can you clarify your previous post words? So far we can't control the colors of menu buttons (with CSS) when the mouse button is pressed (when you click on any button from the main-menu the bgr color is changing to page background color and we don't want this to happen) So, I am asking, is it possible to exist any DOM events, that we don't/can't declare in the CSS?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The active state in general is only apparent in certain browsers...can you tell us which browser you see this in bc in Safari and Chrome things look perfectly fine.

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  
Followers 0