Making hidden controls visible in V4

One of the things I don’t like about the new V4 admin interface is the hidden controls - ie menus etc which only appear when you move the mouse over them.



This is very confusing for new users because if they can’t see the control they do not know that it is there. In the multi vendor edition, vendors use the admin interface, and new vendors - ie my customers - can find this confusing, which means that I get support calls.



I know that hidden controls are currently fashionable. Facebook uses them, for example (and I don’t much like the Facebook user interface either).



Anyway, if you want to make those controls always visible, edit design/backend/css/styles.less, find the following section:



.table {

.table-hover;

.dropdown-menu input[type=“checkbox”] {

margin-top: 0px !important;

}

.shift-left {

padding-left: 14px;

}

.shift-input {

margin-left: 7px;

color: #555;

}

.hidden-tools {

visibility: hidden;

}





and change “visibility: hidden;” to “visibility: visible;”



i think it would be nice to have these hidden tools as a configurable option that you could turn on or off.

Thank you camerojo for sharing the fix, we have been using V4 today for the first time and the hidden controls have been catching us out.

This was irritating me enough to hunt around to see if it's a setting somewhere. It isn't. So, to avoid having your changes overwritten at every upgrade, use hooks.



Create (filepath and file if they don't already exist):-

design/backend/templates/addons/my_changes/hooks/index/styles.post.tpl

Content:-

{style src="addons/my_changes/mystyles.css"}

Then create:-

design/backend/css/addons/my_changes/mystyles.css

Content:-

.hidden-tools {
visibility: visible !important;
}




Note you must use the CSS !important declaration for this, regardless if you use “styles.pre.tpl” or “styles.post.tpl”, neither override the original “.hidden-tools” class in design/backend/css/styles.less - there seems to be some confusion over how these overrides work. In V4 especially I find myself having to use !important much more than I did in V3 and before.



Clear your site cache (yourstore.com/youradmin.php?cc) if you see no difference. Magic.

Use of “important” is due to a bug in V4.0.1. Be prepared to remove it at V4.0.2 if it gets fixed. The issue is that priority of the addons is ignored when building the common css file from addon css/less files.

Cheers Tony, glad it's not just my imagination then!