I added a menu above the top menu (I first created a new menu, then add a block above the top menu block), I gave it my own css class in the block options, and set color for that css class in base.css.
But this doesn’t change the color for that new menu, it always use the color of the original top menu.
How do I set different color for this new menu I created?
In ./design/themes/basic/css/base.css :
.my_top_block {
margin-top: 15px; /* This does work whenever I change it I see the margin-top changes /
margin-bottom: 0px;
background-color: #4E9BB5; /* try to change color but has no effect /
color: #4E9BB5; / try to change color but has no effect */
}
[quote name='yong2014' timestamp='1400545016' post='183829']
I added a menu above the top menu (I first created a new menu, then add a block above the top menu block), I gave it my own css class in the block options, and set color for that css class in base.css.
But this doesn't change the color for that new menu, it always use the color of the original top menu.
How do I set different color for this new menu I created?
In ./design/themes/basic/css/base.css :
.my_top_block {
margin-top: 15px; /* This does work whenever I change it I see the margin-top changes /
margin-bottom: 0px;
background-color: #4E9BB5; /* try to change color but has no effect /
color: #4E9BB5; / try to change color but has no effect */
}
[/quote]
Please try
.my_top_block {
margin-top: 15px; /* This does work whenever I change it I see the margin-top changes */
margin-bottom: 0px;
background-color: #4E9BB5 !important; /** try to change color but has no effect */
color: #4E9BB5 !important; /* try to change color but has no effect */
}
Hello yong2014,
You can also try this variant
.my_top_block ul {
background: #4E9BB5;
}
Clear the cache to see the changes.
!important is not always a solution.
Best regards, Alt-team
I tried, including using “!important” but it doesn't make a difference.
When I changed the color in the visual editor, I noticed that the following line in design/themes/basic/styles/data/my_theme_name.less file is changed:
@menu: #3D9945;
Does the color in the .less file always has the highest priority?
Is it possible that the javascript in core.js is controlling the color based on what's in the less file (this doesn't seem to make much sense though)?
Have you tried our variant?
.my_top_block ul {
background: #4E9BB5;}
Best regards, Alt-team
Yes, I have tried this one: .carl_top_block ul { background: #4E9BB5;}
My site is at www.AustralianGift.com.au/index.php?sl=en
When I inspect element in google Chrome, I can see the following properties, and when I change the margin-top dynamically in google Chrome, I can see it's making a difference; but if I change the background-color there, it's not making a difference to to my web site!
[font=Consolas,]
[color=#888888][color=#222222].carl_top_block ul[/color][/color] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background-color[/color]: #4E9BB5!important;
[][color=#C80000]color[/color]: #4E9BB5;
[/list][color=#222222][font=Consolas,]
}[/font][/color]
Hello!
Great that you have given a link to your site. This variant works fine (as we said before):
[font=Consolas,][color=#888888][color=#222222].carl_top_block ul[/color][/color] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background[/color]: #4E9BB5;
[/list]
[font=arial, verdana, tahoma, sans-serif]}[/font]
[font=arial, verdana, tahoma, sans-serif]Why you don't like it? background-color doesn't work because background element covers it.[/font]
[font=arial, verdana, tahoma, sans-serif]You can write as follows also:[/font]
[font=Consolas,][color=#222222].carl_top_block ul[/color][/font][font=Consolas,] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background-color[/color]: #4E9BB5 !important;
[][color=#C80000]background[/color]: none;
[/list]
[font=Consolas,]}[/font]
It will also work fine.
Or even better
[font=Consolas,][color=#888888][color=#222222].carl_top_block ul[/color][/color] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background[/color]: none;
[*][color=#C80000]background-color[/color]: #4E9BB5;
[/list]
}
Best regards, Alt-team
[quote name='Alt-team' timestamp='1400658461' post='183950']
Hello!
Great that you have given a link to your site. This variant works fine (as we said before):
[font=Consolas,][color=#888888][color=#222222].carl_top_block ul[/color][/color] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background[/color]: #4E9BB5;
[/list]
[font=arial, verdana, tahoma, sans-serif]}[/font]
[font=arial, verdana, tahoma, sans-serif]Why you don't like it? background-color doesn't work because background element covers it.[/font]
[font=arial, verdana, tahoma, sans-serif]You can write as follows also:[/font]
[font=Consolas,].carl_top_block ul[/font][font=Consolas,] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background-color[/color]: #4E9BB5 !important;
[][color=#C80000]background[/color]: none;
[/list]
[font=Consolas,]}[/font]
It will also work fine.
Or even better
[font=Consolas,][color=#888888][color=#222222].carl_top_block ul[/color][/color] {[/font][list]
[][color=#C80000]margin-top[/color]: 15px;
[][color=#C80000]margin-bottom[/color]: 0px;
[][color=#C80000]background[/color]: none;
[*][color=#C80000]background-color[/color]: #4E9BB5;
[/list]
}
Best regards, Alt-team
[/quote]
@yong2014, do not forget to add “border-color: #4E9BB5;” also
[quote name='yong2014' timestamp='1400722180' post='184028']
@Alt-team, Thank you very much! It works perfectly now.
[/quote]
I was glad to help!
Best regards, Alt-team