Mobile menu background too bright
Standard member
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
Site director
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).
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Site director
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.
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Site director
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.
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Standard member
Standard member
.menu_type__mobile li.current, .menu_type__mobile li:hover {
background-color: {$GET,area_hover_2_background};
color: {$GET,BW};
}
Many thanks!
Site director
Become a fan of Composr on Facebook or add me as a friend. Add me on on Mastodon. Follow me on Minds (where I am most active). Support me on Patreon
- If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
- If so, please let others know about Composr whenever you see the opportunity or support me on Patreon.
- If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying Composr on fun personal projects.
- If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
1 guest and 0 members have just viewed this.
