How to manage the “more” menu transparency – Layout 1 & 2

If you choose the Layout 1 or the Layout 2 for your mobile apps, you will get a “more” menu in case you use a higher number of pages than it can be displayed in the icon tab bar. This “more” menu will display the complete list of your mobile app pages. There is a transparency applied on this menu which can make the text not readable that well depending on your text color and the app background:

 

You can manage this transparency directly from the css files on your server.

Connect by FTP to your server (or through the File Manager of your hosting panel) and modify the file “layout_1-7.css” which is in the folder app/design/mobile/angular/css/homepage of your install.

In this file, find the ID:

#scrollview_tabbar_items

with these attributes:


#scrollview_tabbar_items {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
opacity: .7;
filter: alpha(opacity=70);
}


The transparency is managed by these properties “opacity:” and “filter”. By default the opacity is set to 70%. You can set your own background opacity by setting another value from 0% (full transparency) to 100% (no transparency).

For example, if we want less transparency we can set these values to:


opacity: .9;
filter: alpha(opacity=90);


Here is the result:

Modify this transparency, save the file and replace the one on your server. Warning: this change will be applied on all your apps.

Then, like for any changes you can make on the css file of the mobile section, go in the var/cache folder on the root of your install and delete the file css_mobile.css.

Voilà!