Skip to Content

Customizing your Site's Theme with the In-Browser Theme Editor

The theme_editor module allows administrators to develop and design customized themes for their sites by simply using a browser interface. HTML and CSS knowledge are required for making changes to the templates, as does a knowledge of how PHPTemplate themes work in Drupal.

Note: This documentation only applies to Drupal 4.6 sites on the Bryght hosted service. Drupal 5 sites do not have a theme editor, but rather can customize the CSS of a theme.

Initial Setup

Administrators need to turn on the theme_editor module and assign appropriate permissions.

  1. Enable the theme_editor module. This is done by clicking administer » modules and checking the box next to theme_editor.
  2. Users with the "administer site configuration" permission can administer the theme editor. This permission can be granted to roles by clicking administer » users » configure tab » permissions, then clicking on the box in the "administer site configuration" row for each role (column) in the screen.
  3. Click administer » theme editor. If there are no customized themes available, you need to click the add tab and select a theme to copy over the the theme editor. This needs to be done even if you have an entirely different-looking theme you wish to upload. You can simply overwrite the text that is supplied in the copied theme.
    • Once you've selected a theme to copy over, the theme's name (e.g. box_grey) will have "_customized" appended to it. You can rename it by clicking rename and typing in a new, more descriptive name for the new theme.
  4. See the instructions below for editing a theme.

Editing a Theme

  1. Click administer » theme editor
    • you'll see a list of themes available for editing
  2. Click on “edit” on the theme you want to edit
    • A list of all files is shown. You can edit/delete existing files, create new, blank files, or upload new files.
  3. Click on “edit” next to file will open it in a textarea, where you can edit/save changes in plain text.
    • Knowledge of HTML and CSS is required to make changes to the design.

To rename a theme, click the "rename" link instead of "edit". You will be given a box in which you can type the new theme's name.

On the first screen, you can also create a new theme. Designers might use this so that they can experiment, then merge changes into. It's also useful for looking at the files associated with the base themes.

Remember:

  • newly created themes need to be enabled for selection by going to administer » themes, and checking off the “enable” box; the default theme is also selected there
  • you can go to my account » edit tab, then scroll down and select which theme your account is using; this is useful for viewing themes that are not ready to be shown as default

Adding a Customized Icon (favicon.ico) to Your Theme

  1. click administer » theme editor
  2. click edit next to the theme you wish to add the favicon.ico to.
  3. scroll down to "Upload file", browse to the favicon.ico on your computer, then click the Upload button.
    • The favicon.ico you've uploaded should automatically be added to the theme's <link> element inside the HTML which tells the browser to use the file you just uploaded.