Clarification needed for the provided sample alberi overrides.css

Lili_Yu

The comments in the provided sample alberi overrides.css are very helpful. I was able to follow and verify most of the customization. But I noticed few of them are not doing what's been explained. Maybe you can verify or give more description on where/how to see the described customization:

/* Make toolbar button background green-ish when hovered above */

/* Make attribute-adding icon green */

/* Make dropdown menu item green when hovered above */

/* Make signing page button green */

Best regards, 

Lili

Ferdinand Prantl

It's not so important, if you can't connect some of the examples to their UI element.  Your real styling is important.  When overriding, you inspect the target element in web browser developer tools to learn about its selector and click on the stylesheet link to see more context in sources.

Some overrides might get broken in future updates.  We don't have a concept of "stylesheet interface" yet.  I recommend developers not to change HTML markup and selectors within a CS major version.

These work:

/* Make attribute-adding icon green */It is the "+" icon adding an attribute row for unlocked multi-row attributes./* Make signing page button green */You can ignore this. It is for the internal sign-in page used only by developers.

These do not work:

/* Make toolbar button background green-ish when hovered above */For buttons on the top toolbar in the nodestable widget./* Make dropdown menu item green when hovered above */Background color of a menu item, when hovered above with a mouse cursor.

and could be fixed by these, for example:

/* Make toolbar button background green-ish when hovered above */.binf-widgets .csui-toolbar > li > a:hover {  background-color: #b6d3c5;}.binf-widgets .csui-toolbar > li > a:active {  background-color: #dfeae7;}/* Make dropdown menu item green when hovered above; both in user profile   menu and in nodestable container header context menu */.binf-widgets .binf-dropdown-menu > li > a:hover,.binf-widgets .binf-dropdown-menu > li > a:focus,.binf-widgets .binf-dropdown .binf-dropdown-menu > li > a:hover,.binf-widgets .binf-dropdown .binf-dropdown-menu > li > a:focus {  background-color: #b6d3c5;}