/
Creating a Theme

Creating a Theme

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

(warning) 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


Related content

Creating a Template
Creating a Template
More like this
Tema Hazırlama
Tema Hazırlama
More like this
Creating a Layout
Creating a Layout
More like this
Creating a Dashboard
Creating a Dashboard
More like this
Adding a Banner to the Project
Adding a Banner to the Project
More like this
How to create a new form, how to modify forms?
How to create a new form, how to modify forms?
More like this