Theme files

Could someone please explain to me exactly which files belong in which directories when putting together a custom theme? No matter what I try I can't see my custom theme in the drop-down selector. Is it still necessary to put the files in a zip archive? I have to change index-dark.html, index-dutch.html and so on to include the custom theme in the list, but where do the amended html files belong? Currently I've got this: [project root] |--- theme |--- ui |--- theme-custom | |--- custom.css | |--- index-custom.html | |--- index-dark.html | |--- index-default.html | |--- index-dutch.html | |--- index-nostalgia.html | |--- index-html | |--- login-default.html | |--- login.css | |--- login.html | |--- images (dir) |--- base-custom.css in which all the index-*.html files include the incantation <div dojoType="mendix.widget.ThemeSwitch" themes="custom;Dutch;Dark;Default;Nostalgia" label="Pick your theme:"></div> When I deploy the project, none of the above files are copied to deployment/web and the index*.html files in that directory continue to omit "custom" from the ThemeSwitch statement. I'm using Mendix 2.5.1-rc1 under Windows 7. OK, so what am I doing wrong here?
2 answers

The index files have to be placed inside the theme folder. The only files that you need to place inside the theme-custom folder are the style sheets and images.


We are currently renewing our tutorials. The structure has changed since Mendix version 2.5.1-RC1 (login page is different, imports are gone, base files are gone). We hope to have the tutorials online by next week!


I've made several themes for 2.5 and struggled also with creating the package. Why do you want to use the theme switcher? Try this:

  • Download the package from:
  • Extract the zip
  • Open the index.html
  • remove this line
  • Change this line: @import "ui/base-default.css"; to @import "ui/base-projectname.css";
  • Rename the ui/base-default.css to base-projectname.css
  • Rename the folder theme-custom to theme-projectname
  • Open base-projectname.css and change the line @import "theme-custom/custom.css"; to "theme-projectname/custom.css";
  • add your css code to the custom.css
  • So add all the modified files and folder to your package

Start your project with this zip, this should work. Is there some reason why you want to use the theme switcher?