Jump to content
Sign in to follow this  
esensio

Base Menu Bar Colors

Recommended Posts

esensio    0
esensio

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
cmunns    16
cmunns

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

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

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

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

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
catrina    103
catrina

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?


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

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
cmunns    16
cmunns

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

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
catrina    103
catrina

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?


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
catrina    103
catrina

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; }


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

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

Yes, I am using a custom menu.

Share this post


Link to post
Share on other sites
catrina    103
catrina

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; }


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

added the new code...still the same.

Share this post


Link to post
Share on other sites
kastelic    6
kastelic

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

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

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
Kate    3
Kate

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

Share this post


Link to post
Share on other sites
esensio    0
esensio

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
Kate    3
Kate

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

Share this post


Link to post
Share on other sites
esensio    0
esensio

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

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  

×