Each folder that will be created under the GUI / Theme folder is treated as theme content. By creating a theme, existing images, icons, CSS files can be replaced with new ones or you can specify new css, javascript content to be added to each page. A theme can contain all or some of the files under the GUI folder.

Selecting a Theme

A theme is activated with the link http://127.0.0.1:3323/?Theme=[ThemeName] .

The default theme can be activated back with the link http://127.0.0.1:3323/?Theme=None

The GEODI address may be different in your environment. Local GEODI is used as an example.

Changing existing CSS, image sources

The theme folder can contain all or some of the folders and files under the GUI folder. The designer will determine how much will be required according to her/his needs.

The GUI / img, GUI / CSS, and GUI / icons directories will be the most frequently used directories. With these directories, you can easily change the appearance and icons. Make sure that the new theme files that you create have the same name as the replacement files. For the files that are not in the theme directory, the originals at the GUI / * will still be used.

Example folder structure

GUI
- Theme
  - MyTheme
- - - img
      - windowsMenu
        mainMenu
      - 16.png
      - 24.png
      - docs24.png
    - CSS
      - ol
        ol3-controls.css
      - bootstrap.css
    - icons
      - Content
        file.pdf.png

Defining additional CSS and javascript for each page

In some cases, you may want to make a change that will affect all pages. In this case, you must create a Default folder under the [ThemeName] folder.

The contents of CSS and js in this folder are loaded on all pages. All bootstrap plugins can be changed by adding a Bootstrap 3.3.1 theme file. The sample theme was created using this method.

Example folder structure

GUI
- Theme
  - MyTheme
- - - Default
      - bootstrap.theme.css
      - custom.css
      - AllPage.js
      - ...

Default and Sample Theme images

Browser not supported