How To Add Text to a Tool

Some tools should have text. While an Icon is nice, sometimes you may only have a single icon that is used repetetively for a number of searches. As is often the case, it’s simply easier to read, “Search Assets” instead of filing through the four or five relatively obscure looking 16 x 16 pixel icons. Tools on the toolbar are defined in the <toolbar> section of the mapbook.

For this example, look at the “print” tool:

<toolbar>
        (snip)
        <tool name="print" title="Print" type="service" service="print" selectable="false"/>
        (snip)
</toolbar>

When GeoMOOSE renders the tool in the toolbar it creates a unique ID based on the name of the tool. Since the <tool> has the name of “print” the ID will be “tool-print”. Knowing this we can change the CSS properties of the tool in the toolbar. GeoMOOSE renders the text for every tool in the toolbar, however, by default that text is hidden. To display the text a few lines need to be added to user_tools.css:

#tool-print {
        /* By default the tools "width" is limited to 20 pixels */
        width: auto;

        /* This sets a custom icon for the tool */
        background-position: 2 2;
        background-image: url('../images/toolbar/printer.png');
}

#tool-print .ToolContent {
        /*
         * This must be in the code in this order, it makes the tools display
         * properly in both IE and FF.
         */

        display: -moz-inline-box;
        display: inline-block;

        /* This allows the tool to grow to fit the text */
        width: auto;
}

#tool-print .ToolText {
        /*
         * These padding settings center the text in the middle of the tool.
         * Depending on your icon this may not be neccessary.
         */
        padding-top: 3px;
        padding-right: 3px;

        /*
         * This must be in the code in this order, it makes the tools display
         * properly in both IE and FF.
         */
        display: -moz-inline-box;
        display: inline-block;
}

The CSS above is commented to explain the different actions of changing those specific CSS attributes, however, in a real application those comments would not need to be included.