• Article Type: General
• Product: MetaLib
• Product Version: 4

Description:
How can we change the action icons at the top right side of the MetaLib screen to text? Those icons are Login, Logout, Help, End Session, Language, and Institution.

Resolution:
The action icons are controlled through the following section of metalib.css:
- - - - -
#actionIcons{float:right;}

/*Set display:inline to display action icons; set display:none to hide action icons */
#actionIconsLang {display:inline;}
#actionIconsEnv {display:inline;}
#actionIconsLogin {display:inline;}
#actionIconsLogout{display:inline;}
#actionIconsHelp {display:inline;}

#actionIcons ul li {list-style: none;}
/* display:inline to show images; display:none to hide icons */
#actionIcons img {display: inline;}
/* display:none to hide text; display:inline to show text*/
#actionIcons .ActionText {display:none; border-right: 1px solid #000000;; padding-right:0.25em;}
#actionIcons a { text-decoration:none; font-size:70%;}
#actionIcons a:hover { background-color: #fe8657;}
#actionIcons a:active { background-color: #fe8657;}
- - - - -
Three changes are possible using this code.

[1] Replace the action icons with text:
Change these lines:
* display:inline to show images; display:none to hide icons */
#actionIcons img {display: inline;}
/* display:none to hide text; display:inline to show text*/
#actionIcons .ActionText {display:none; border-right: 1px solid #000000;; padding-right:0.25em;}
To
* display:inline to show images; display:none to hide icons */
#actionIcons img {display: none;}
/* display:none to hide text; display:inline to show text*/
#actionIcons .ActionText {display:inline; border-right: 1px solid #000000;; padding-right:0.25em;}

[2] Remove the icons (and text) completely:
Change
/*Set display:inline to display action icons; set display:none to hide action icons */
#actionIconsLang {display:inline;}
#actionIconsEnv {display:inline;}
#actionIconsLogin {display:inline;}
#actionIconsLogout{display:inline;}
#actionIconsHelp {display:inline;}
To
/*Set display:inline to display action icons; set display:none to hide action icons */
#actionIconsLang {display:none;}
#actionIconsEnv {display:none;}
#actionIconsLogin {display:none;}
#actionIconsLogout{display:none;}
#actionIconsHelp {display:none;}

[3] Displaying both text and icons
Change these lines:
* display:inline to show images; display:none to hide icons */
#actionIcons img {display: inline;}
/* display:none to hide text; display:inline to show text*/
#actionIcons .ActionText {display:none; border-right: 1px solid #000000;; padding-right:0.25em;}
To
* display:inline to show images; display:none to hide icons */
#actionIcons img {display: inline;}
/* display:none to hide text; display:inline to show text*/
#actionIcons .ActionText {display:inline; border-right: 1px solid #000000;; padding-right:0.25em;}

• Article last edited: 10/8/2013