How to theme OBM

Preconditions

  • Strong knowledge of CSS2 or/and CSS3!
  • Use a browser with developer tools to easily find CSS classes you want to modify.

Copy Time!

Copy the default folder from ui/resource/theme and rename to newtheme for exemple.

howtotheme1 howtotheme2

Change path to theme

In the new folder, the file theme.inc show where CSS, icons and flag are loaded from. You must change all paths to include the new theme name.

howtotheme3

Code!

First, we suggest to modify the preview image preview_theme.gif to see easily your new theme in settings page.

Now your you can modify css files. You must use the web developer tools in your browser (key F12 by default) to select the elements you want to modify. With the developer tools, you can live edit your CSS files and have an instant preview of your changes. Once you're fine with the changes, you have to report them back to the source files.

howtotheme4