Mobile menu background too bright

Post

Posted
Rating:
#845 (In Topic #218)
psc996
Hello!

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

Post

Posted
Rating:
#846
Chris Graham
Hi,

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).

Post

Posted
Rating:
#848
Chris Graham
The CSS is:

Code

.menu_type__mobile ul {
   background-color: {$GET,area_6_background};
}
in menu__mobile.css

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.

Post

Posted
Rating:
Item has a rating of 5 Item has a rating of 5 Item has a rating of 5 Item has a rating of 5 Item has a rating of 5 (Liked by Adam EdingtonLiked by psc996)
#849
Chris Graham
Ok these changes make it look better:

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 {
 

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.

Post

Posted
Rating:
#850
psc996
It was the wizard and seed colour #349438. Will try suggestions tomorrow. Thanks.

Post

Posted
Rating:
#852
psc996
That worked a treat except I couldn't read the white text on my light green background when the menu items are selected. I therefore changed this section back to how it was:

.menu_type__mobile li.current, .menu_type__mobile li:hover {
    background-color: ;
    color: ;
}

Many thanks!

Post

Posted
Rating:
#862
Chris Graham
Thanks, yeah I see that is definitely needed on the green. The green draws the eye more than the default blue, hence the need for better contrast. I'll add it by default, as it's an improvement on any seed.
0 guests and 0 members have recently viewed this.