User menu submenu color and location question

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Fri Sep 14, 2012 2:55 pm
Reply with quote
Report this post
Hello all,

I have a question on how to change the submenu color of a user menu dropdown. I want to be able to control what color the submenu and menu item is. In a sense, make it a different color than the other menu items. I know that you can do this in the overrides.css file, but need to know what css code to use to accomplish this.

Ok, that was question 1, second question is along the same lines. How do I shift a usermenu submenu content dropdown to the left with the override.css? I tried to apply the same method as I did when I set the location on my main menu, using this:

Code: Select all
li.apple > div.childcontent{
   margin-left: -67px!important;
}


It doesn't work. Any ideas? I've inserted an image for reference.

help.jpg


Thanks so much for your help,

Tim
User avatar
Junior Boarder

GK User
Fri Sep 14, 2012 4:20 pm
Reply with quote
Report this post
Hi

I think with one example it will explain both.

Here's one example:

I will create additional class and i will called "[space]left-margin" and the "Link title attribute" will be "left-margin". This attributes will be place on first menu level.

screen.png


On override.css file:

Code: Select all
/* for colors style */

#gkTopBarUsermenu ul a[title="left-margin"] {background-color: #48bd50!important}
#gkTopBarUsermenu ul a[title="left-margin"]:hover {}
#gkTopBarUsermenu ul a[title="left-margin"] + ul,
#gkTopBarUsermenu ul a[title="left-margin"] + ul li a{background-color: #48bd50; border-color: #54c75c; color: #fff!important}
#gkTopBarUsermenu ul a[title="left-margin"] + ul li a:hover {color: #212121!important}


/* for left margin */
#gkTopBarUsermenu ul a[title="left-margin"] + ul {margin-left: -102px!important
}



This should look like this now:
screen2.png



Cheers
User avatar
Platinum Boarder

GK User
Fri Sep 14, 2012 4:33 pm
Reply with quote
Report this post
Awesome! Exactly what I was needing!
User avatar
Junior Boarder


cron