Customizing the Elementaire Theme

Here is a guide to customizing the Elementaire theme, developed by Jonathan Reeve. It is still in development, so please let me know if there is something you want that you cannot do. You can file bug reports on a site for the development of the theme.

Style Sheet - (Right now this is not working)

  • Horizontal —the sections will appear horizontally with pages appearing in a second row of horizontal boxes
  • Vertical — the sections will appear on the left margin, when you select one, the pages will be displayed beneath them.

Background image or Background color

The background is the area that appears around the edges of your exhibit. You can choose a background image or a background color. If you want, you can also use an item from your collection. If you use an image, it may be rendered in tiled form if this image is too small. You can find free background images on the web to download to your computer and then upload to Omeka. There are tons of sites online that you can use. Here are just a few suggestions:
* Paper backgrounds
* Vintage backgrounds
* Generic site
* GR Sites Background textures have complex patterns in a variety of colors.

If you choose to use a color, enter the hex code you want in the Background color field. If you want a simple, clean page, use the same color for your background as you do for your page.

For examples of background images, see:

Page color

The "page" is the central portion of the exhibit, where the navigation, headings, and text appear. Enter the hex code for the color you want in the Page color field.


Logos replace the "New Jersey Digital History" part of the webpage with something else. To make it look good, it needs to be roughly the same shape as this—very narrow. I don't think that this is needed for much in the Omeka 2.0 version.

Header image

You can create a graphic header for your exhibit that will appear on each page. This image should be wide enough to go across the whole screen, but be fairly narrow in height, so that it does not take up too much screen space. Try out 950px by 120px or something in that neighborhood for a start and adjust as you see how it looks. The default will be that Omeka puts the exhibit title over this image, so you may need to work to be sure that the text is legible.

For examples of headers, see

Hide Header Text

If you find that the pre-generated header text doesn't look the way you like with the header image that you have chosen, you can click this button and Omeka will not generate a header for the exhibit. You can then make the header part of the header image that you create.
For examples, see:

Heading color

Select the color for your header text here by inserting the hex code. Note that any place in the exhibit that you used the <h1> or other HTML header codes, this font color will be used.

Heading font

Choose a font for your header and HTML header codes within pages from the list at Google Web Fonts. You can be creative here to make a choice that works with your topic or time period, but it should be legible and not too hokey. When you have selected the font that you want, enter its name in the Heading font field.

Heading Font Size

You can adjust the size of the heading so that it fills the screen area, breaks in a way that you like, or is big or small enough to make a striking appearance. You can use a variety of methods of changing the size, from specifics like 60pt or 1.5em to relations 80% or x-large.

Hide Dividers

Ignore this one for now— I think it is not applicable to the 2.0 conversion

Navigation Font

This font is used for the navigation buttons. Select a font from Google Web Fonts and enter the name here. Note that if your navigation titles are long, you may want a compressed font.

Navigation Color One

This color is the background of the inactive buttons and the text of the active button. Select the color using the hex code. If you want to have a clean, simple design, consider using the same color here as you have used for the page color.

Navigation Color Two

This is the color of the text of the inactive buttons and the background color of the active button. Select the color using the hex code.

Custom Navigation

Don't use this right now—I'm not sure that it is working.

Body Text Color

This color will be used on your pages and captions. Select the color you like using the hex code. Note that you can override the color of specific words or sections on a page by using html on that page.

Body Text Font

This font is used for the body and captions of the exhibit. Select a font from Google Web Fonts and enter the name here.

Body Font Size

This will determine the size of your exhibit's main text. You can use a variety of methods of setting the size, from specifics like 60pt or 1.5em to relations 80% or x-large. You can select portions of the text to make larger or smaller, using the HTML code on individual pages.

Display Exhibit Sections

Don't bother using this—changed with Omeka 2.0.

Display Dublin Core Fields

Don't use this right now—this is for using the Elementaire theme for an entire Omeka site.

Footer Text

You can add some text here that will appear at the bottom of every page.

Copyright info

You can show the site's default copyright setting at the bottom of each page. This currently says: "For copyright see individual items."

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License