Theme Setup

dbFront ships with multiple themes.  Below you will find instructions on how to select, create and locally install your own themes.  You can also disable the use of the Content Delivery provided themes.

Selecting Themes

There are three options for selecting a theme within dbFront.

User Selection

If no theme is selected for the Site or Database then users will have the option to cycle through the available themes and use the one they like.  The theme selection buttons appear at the bottom left of the screen.

Site Theme

You can select a default site theme from Settings. [Help] / [Settings] / [Website] / [Layout]

Database Theme

You can also select a specific theme for a database from the Database Preferences window.

Content Delivery Networks

dbFront ships with multiple themes and uses the content delivery network code.jquery.com  to make additional themes available.

You can disable the use of the content delivery network from Settings. [Help] / [Settings] / [Website] / [Layout]

Custom Themes

It is always possible to hire someone to create a custom jQueryUI theme for you but one of the first things you should consider is using the jQuery provided Theme Roller.  The Theme Roller allows you to start with one of their existing themes and then adjust it to suit your own needs.  The Theme Roller URL is:  http://jqueryui.com/themeroller/.

Using the ThemeRoller is quite intuitive.  The steps are:

1. Select the Gallery tab,
2. Find a theme you like and click Edit,
3. This will switch to the Roll Your Own tab,
4. Adjust the theme to suit your needs,
   Note: Keep a log of your changes for when a new version of jQueryUI is released.
5. Once done, click the Download theme button,
6. On the download page specify:
   • Version: 1.12.1
   • Components: ALL
   • Scope: [ leave blank ]
   • Click Download

NOTE: It is important to keep a log of the changes you made to the theme in case you need to download an updated version.   dbFront will be updated to use a newer version of jQueryUI in the future.

Installing

dbFront looks for themes in the folder "themes" in the website folder.  Each theme should be contained in its own folder.   The name of the folder will be the name that dbFront displays to the user.

​Once you have created and downloaded the theme then you can install it into the dbFront Theme folder following the instructions below:

1. Open the zip file,
2. Copy the folder you find there into the dbFront Theme folder,
3. Rename the folder to something short but meaningful.  e.g. Company-Theme (Use Dashes to separate words)

 Your theme folder should contain at least the following files:

• Images folder
• jquery-ui.css
• jquery-ui.min.css

You may want to keep the other files since they make it easy for you to review the theme if you make any changes.