Mobile menu background too bright
Posted
#845
(In Topic #218)
I'm not a programmer or a designer but I've managed to install the software and set up a new theme. First impressions are good, although I did come across some errors when I ran the setup wizard. I installed the latest update and it worked second time around.
The problem is that the mobile dropdown menu background is really bright compared to everything else and it has white text. It's so bright that it hurts my eyes. It would look fine if it was the same as the desktop site. I've spent a couple of hours going through CSS files but I can't fathom it. Can anyone help? It would be nice to get it sorted so I can start work on the functionality.
Thanks
Posted
Moderator
Is this on the default theme, or a Theme Wizard theme (ala Setup Wizard builds)? If Theme Wizard theme, what seed colour was used? You can find it in the themes/<theme>/theme.ini file if you can't remember (I think).
Posted
Moderator
Code
.menu_type__mobile ul {
background-color: {$GET,area_6_background};
}
It is a bit too bright on the default theme, but my guess is particular seed choices make it worse. I'll tweak it a bit for the next RC.
Moderator
Code (diff)
diff --git a/themes/default/css/menu__mobile.css b/themes/default/css/menu__mobile.css
index 046b9dc..23029f0 100644
--- a/themes/default/css/menu__mobile.css
+++ b/themes/default/css/menu__mobile.css
@@ -30,7 +30,7 @@
.mobile_search {
text-align: center;
padding: 1em 0;
- background-color: {$GET,area_6_background};
+ background-color: {$GET,area_5_background};
}
.menu_type__mobile {
@@ -39,6 +39,7 @@
top: 3.4em;
width: 100%;
z-index: 1000;
+ {$BETA_CSS_PROPERTY,box-shadow: 0px 20px 25px 0px {$GET,dark_border};}
}
.menu_type__mobile>ul {
@@ -46,13 +47,13 @@
}
.menu_type__mobile ul {
- background-color: {$GET,area_6_background};
+ background-color: {$GET,area_5_background};
}
.menu_type__mobile li {
border-top: 1px solid {$GET,standard_border};
background: url('{$IMG;,icons/24x24/buttons/proceed}') transparent no-repeat top 1em right 1em;
- color: {$GET,WB};
+ color: {$GET,BW};
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.menu_type__mobile li {
@@ -63,7 +64,7 @@
.menu_type__mobile li.current, .menu_type__mobile li:hover {
background-color: {$GET,area_hover_2_background};
- color: {$GET,BW};
+ color: {$GET,WB};
}
.menu_type__mobile li a {
index 046b9dc..23029f0 100644
--- a/themes/default/css/menu__mobile.css
+++ b/themes/default/css/menu__mobile.css
@@ -30,7 +30,7 @@
.mobile_search {
text-align: center;
padding: 1em 0;
- background-color: {$GET,area_6_background};
+ background-color: {$GET,area_5_background};
}
.menu_type__mobile {
@@ -39,6 +39,7 @@
top: 3.4em;
width: 100%;
z-index: 1000;
+ {$BETA_CSS_PROPERTY,box-shadow: 0px 20px 25px 0px {$GET,dark_border};}
}
.menu_type__mobile>ul {
@@ -46,13 +47,13 @@
}
.menu_type__mobile ul {
- background-color: {$GET,area_6_background};
+ background-color: {$GET,area_5_background};
}
.menu_type__mobile li {
border-top: 1px solid {$GET,standard_border};
background: url('{$IMG;,icons/24x24/buttons/proceed}') transparent no-repeat top 1em right 1em;
- color: {$GET,WB};
+ color: {$GET,BW};
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.menu_type__mobile li {
@@ -63,7 +64,7 @@
.menu_type__mobile li.current, .menu_type__mobile li:hover {
background-color: {$GET,area_hover_2_background};
- color: {$GET,BW};
+ color: {$GET,WB};
}
.menu_type__mobile li a {
These will be the new defaults. I flipped it from a dark-base to a light-base, but added a bottom shadow because we need to somehow make it distinguished from what it is overlaying.
Posted
Posted
.menu_type__mobile li.current, .menu_type__mobile li:hover {
background-color: ;
color: ;
}
Many thanks!
Posted
Moderator
2 guests and 0 members have recently viewed this.
