Skip to main content

Customize the Style of Default Components

By default, component styles can be configured using CSS variables.
See https://doc.geogirafe.org/docs/styling/styling-css-variables

This is the most efficient way to minimize workload during migrations.
If you find that some variables are missing, feel free to contact us so we can find a solution together.

That said, GeoGirafe provides a mechanism to completely redefine a component's style.

⚠️ Warning: This should be used with caution.
If the default template or style of a standard component changes in the core application, you will need to manually adapt any overridden stylesheets during migrations.

The GeoGirafe project strives to ensure smooth and low-cost migrations between versions.
However, some changes, such as internal component style updates, are inevitable and difficult to control.

Therefore, please be aware: When using this mechanism, any style modifications you make must be reviewed and potentially adjusted after each version update. These internal changes within GeoGirafe's core will not be documented, and it will be your responsibility to check the GitLab code for updates.

With that in mind, here’s how to customize the styles of internal components:

1. Call initializeGeoGirafeCustomStyles​

Ensure you call the initializeGeoGirafeCustomStyles method in all your main files (main.ts, main.mobile.ts, ...)

This methode must be called before initializing the GeoGirafeApp component.

Example​

import { initializeGeoGirafeCustomStyles, SplashScreen } from './main.tools';
import GeoGirafeApp from './tools/app/geogirafeapp';

const splash = new SplashScreen();
splash.begin();

initializeGeoGirafeCustomStyles();

const girafeApp = new GeoGirafeApp();
girafeApp.isReady().then(() => {
  // Remove the splash-screen
  splash.end();
  girafeApp.context.onBoardingManager.start();
});

2. Configure the vite plugin​

The Vite plugin InlineTemplatesPlugin allows you to configure custom css paths for all internal component.
For this, you can use the cssOverrides option.

This option is a dictionary where the key is the internal component name, and the value is the path to the file containing the custom CSS for that component.

The following example defines custom styles for the components about and share.

Example​

InlineTemplatesPlugin({
  cssOverrides: {
    'about': './about-custom.css',
    'share': './share-custom.css'
  }
})

At build time, the css content of the file will de read and integrated directly into the code. This will optimize performance and prevent the flash of unstyled content that can happend when the styles are loaded asynchronously at runtime.