Editing Omeka Exhibit Themes

In order to customize your Omeka exhibit, you need to create your own exhibit theme. The easiest way to do this is to take an existing theme and edit it. For an overview of the installed themes, see the themes gallery.

Download a Theme to Edit

I have copied each of the installed themes to my NYU files 2.0 public space. What you can do is:

  1. Make a zip file of the folder of the theme that you like to your own computer.
  2. Rename the theme folder with its base name and your netID. (ex. basic-cm18).
  3. Edit the screen.css file using your HTML editor or Dreamweaver (see instructions below) and save the file.
  4. Upload your theme folder with the edited screen.css file to the aphdigital.org using FTP software.

OR

  1. Using FTP software, access the Omeka Themes directory at aphdigital.org
  2. Copy the folder of the theme that you want to edit to your local drive
  3. Edit the screen.css file to customize your stylesheet
  4. Rename the folder theme name-netID and upload it back to the Omeka server.

Once this is done, you should be able to choose your theme from the drop down list on Omeka. Repeat steps until you are happy with it!

Best Practices

Omeka has a best practices guide to editing themes.

Each exhibit theme is made up of a number of php files and a screen.css file. For more on what each of these files does, see the Omeka documentation site.

The SCREEN.CSS file

This CSS file controls the appearance of your exhibit. It is made up of a number of sections, including "Structure," "Page Navigation," "Content," and "Layout." The best way to learn how to customize the appearance of your site is to play around with this page, changing one thing, uploading it and seeing the result, and then trying something else. It is labor intensive and not that feasible because of the way that we structured the digital archive.

Editing themes

Basic Theme

Here are some guidelines on how to customize Omeka's Basic theme. Some of these customizations may work with the other themes, but I have not tried them all out yet.

Task Instructions
Changing the Base Font Find the line: body {font: Verdana, Arial, sans-serif 62.5%; color: #555; background-color:#b9a28b; } To change the font, replace the "Verdana, Arial, sans-serif" with the font you want. To change the base font color, edit the "color" command and use the color that you want. Example: body {font: Arial, Helvetica, sans-serif 62.5%; color: #CC0033; background-color:#b9a28b; }
Changing the color of the background behind the page. Find the line: body {font: Verdana, Arial, sans-serif 62.5%; color: #555; background-color:#b9a28b; } To change the color of the bands around the edges, edit the background-color command, adding the color that you want. Example: body {font: Verdana, Arial, sans-serif 62.5%; color: #555; background-color:#62A2B5; }
Changing the size of the background behind the page. Find the line: body {font: Verdana, Arial, sans-serif 62.5%; color: #555; background-color:#b9a28b; }. Add the command margin: 25px for an equal margin all around. You can vary the margin width by using margin-top, margin-right, margin-left, and margin-bottom with different modifiers. Example body {font: Verdana, Arial, sans-serif 62.5%; color: #555; background-color:#b9a28b; margin:'margin-top' 25px 'margin-right' 10px'margin-bottom' 25px 'margin-left' 10px}.
Changing the background page color In the Structure section, find the line: #wrap {width:950px; margin: 0px; auto 1em; overflow:hidden;background-color:#fff;} and edit the background-color to the desired shade. Example #wrap {width:950px; margin: 0px; auto 1em; overflow:hidden;background-color:#FFFFB9; }
Adding a banner image that appears behind the exhibit title In the Structure section, find the line: #wrap {width:950px; margin: 0px; auto 1em; overflow:hidden;background-color:#fff;} and add the commands: background-image: url('the URL of your image'); background-repeat: no-repeat; background-position: opx 25px} Example #wrap {width:950px; margin: 0px; auto 1em; overflow:hidden;background-color:#FFFFB9; background-image: url('https://files.nyu.edu/cm18/public/GVS-banner.jpg'); background-repeat:no-repeat; background-position: 0px 25px } Note You need to create a banner to appear in the background and upload it to your webspace as a separate step . The image file should not have text on it, but just serve as a backdrop for the text. A good image size is around 1050 px by 95 px to go across the screen. See example.
Edit page heading font and style The page heading uses <h2>. Find the line h2 {font-size:2em; color: #663300; margin-bottom:1.25em; line-height:1.125em;} and change the color, size, or font-family. To create a background bar, add the background-color command to the line. Example h2 {font-size:2em; color: #FF3300; background-color: #000000; margin-bottom:1.25em; line-height:1.125em;} makes the font orange on a black bar.
To change the width of the sidebar and main text area In the Structure section, find the line: #content {float: right;overflow: hidden; min-height: 400px; width: 713px; padding:0 18px; border-left: 1px solid #c7b5a2;} and adjust the width. Making the width larger will leave a smaller side margin, smaller will give you a bigger one.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License