.. _howto_style_the_toolbar:
How-to style the toolbar
========================
Want to change the styling for a toolbar icon? No problem! GeoMoose was
written in order to provide easy-to-override CSS. Making it easy to
change icons, colours, and other styles without writing any code!
Getting started
---------------
When starting from the GeoMoose desktop example there are two css files
already included ``geomoose.css`` and ``app.css``. It is recommended to
create another css file, ``site.css`` which will contain all of your
site-specific customizations. More advanced users may have more heavily
customized the application, in which case this guide should still be
helpful in understanding the styling of tools.
``site.css`` can be added to the html by adding the following line to
the HTML file's ```` section:
.. code:: xml
How to remove all toolbar labels
--------------------------------
In ``site.css`` add:
.. code:: css
.toolbar .tool .label {
display: none
}
How to change all tool colors
-----------------------------
In ``site.css`` add:
.. code:: css
.toolbar .tool {
color: red;
}
Styling an individual tool in the toolbar
-----------------------------------------
This example refers to the identify tool which is defined in the mapbook
as follows:
.. code:: xml
The ``name`` attribute of the tool is added to the CSS classes. This
gives a direct mapping between what is in the Mapbook and what is seen
in the application.
Remove the label from one tool
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
This is *very* similar to what is seen above with removing icons from
all the tools in the toolbar. The critical part is changing ``.tool`` to
``.tool.identify``. There is no space between ``.tool`` and
``.identify``.
.. code:: css
.toolbar .tool.identify .label {
display: none
}
Changing the color of one tool
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.. code:: css
.toolbar .tool.identify {
color: steelblue;
}
Icon customization
------------------
GeoMoose uses webfonts to define icons. Two are included by default:
- `Font Awesome `__
- `MapSkin `__
This means using the CSS ``before`` selector to change the icon.
Change the icon using webfonts
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
**Using a FontAwesome icon:**
.. code:: css
/* first change the icon font to FontAwesome */
.toolbar .tool.identify .icon {
font: normal normal normal 14px/1 FontAwesome;
}
/* then change the icon */
.toolbar .tool.identify .icon:before {
/* This is the "eye dropper" */
content: "\f1fb";
}
**Using a MapSkin icon:**
.. code:: css
/* first change the icon font to mapskin */
.toolbar .tool.identify .icon {
font: normal normal normal 14px/1 mapskin;
}
/* then change the icon */
.toolbar .tool.identify .icon:before {
/* This is the "label" */
content: "\e087";
}
Change the icon color
~~~~~~~~~~~~~~~~~~~~~
This works for any webfont based icon!
.. code:: css
.toolbar .tool.identify .icon {
/* This make the identify icon yellow. */
color: #ffff00;
}
Change the icon to an image
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Don't love the webfont options? Have something hanging around you'd like
to use? This example uses the GeoMoose favicon. The URL can be replaced
with any image end-point.
.. code:: css
/* disable the webfont icon */
.toolbar .tool.identify .icon:before {
content: '';
}
/* use an image file icon */
.toolbar .tool.identify .icon {
/* since this icon has no content, the size needs to be set */
width: 1em;
height: 1em;
/* this ensures the entire icon will fit inside the width, height */
box-sizing: border-box;
/* URL to the icon image. */
background-image: url(https://github.com/geomoose/geomoose-art/raw/main/logo_2011/favicon/favicon-32.png);
/* prevent the icon image from repeating. */
background-repeat: no-repeat;
/* ensure the background fits inside the icon */
background-size: 1em;
}