Skip to main content

Styling GeoGirafe

Colors​

You can style your GeoGirafe apps by overridden global CSS variables.

Update front/index.html and add the link to the custom.css file in the <head> section with:

/front/index.html
    ...
    <link rel="config-mobile-url" href="config.mobile.json" />
    <link rel="stylesheet" href="custom.css" />

You can find all variables that can be overridden in the list here : https://gitlab.com/geogirafe/gg-viewer/-/blob/main/src/styles/variables.css

Replace the variables in front/custom.css with your variables. For example, here the default background color is configured to grey instead of white :

/front/custom.css
    body {
      --bkg-color: #ddd;
    }

Below is a list of CSS variables that can be modified according to your colours, depending on whether you are using the dark or light theme.

Aucune variable détectée.

Fonts​

Change to another system font​

Geogirafe uses Arial as default font. If you want to use a different system font, add an entry to custom.css to declare your font of choice:

body {
  --font-family: Helvetica, Arial, sans-serif;
}

Change to a custom font​

If you want to use a custom font, follow these steps:

  1. Place the font file in woff2 format in a folder fonts.

  2. Create a file fonts.css to define your font-faces.

@font-face {
  font-family: 'MyFont';
  src: url('../assets/fonts/MyFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
  1. Include fonts.css in your index.html, mobile.html and iframe.html.
<link rel="stylesheet" href="src/styles/fonts.css" />
  1. Finally, add a new entry in your custom.css file to declare your custom font:
body {
  --font-family: 'MyFont', Arial, sans-serif;
}

Use custom icons​

If you want to override the default icons with custom ones, follow these steps:

  1. Create a directory src/assets/icons
  2. Copy your custom icons in this directory.

To override an icon, you have to use the same name as the original one.
The list of all default icons can be found here: https://gitlab.com/geogirafe/gg-viewer/-/tree/main/src/assets/icons

Limitations​

Please note that all icons cannot be overriden.
For performance reasons, some icons are directly integrated in the source code of the component.
This is the case for the checkbox and the caret icon in the treeview for example.
If overriding an icon does not work properly, this can be the reason. In this case you will have to extend the web-component to be able to redefine its template.