Skip to main content
ExLibris
  • Subscribe by RSS
    • Back
    MetaLib
    Ex Libris Knowledge Center

    How Can We Change the Action Icons to Text ?

    1. Last updated
    2. Save as PDF
    • 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