Skins, or themes, give eMuseum its look, feel, and structure. You can adjust most aspects of your site's appearance by editing its default skin files or by adding and activating a new skin. A skin consists of file types common to the web, such as CSS stylesheets, JavaScript files, image (graphics) files, and eMuseum-specific template files ('.tml').
eMuseum 6 uses modern web standards with a clean separation between content and design, allowing anyone familiar with CSS styles to make basic changes to your site's appearance. eMuseum template files are HTML-compatible and also include processing logic. This logic is unobtrusive to web browsers, which will render the content as HTML.
Adding and activating a skin is straightforward. Your installation package contains 3 skins by default:
Internal - the default design that can be modified through configuration options but should not have its files altered.
default_neue - a copy of the internal skin which can be altered or copied. This is good for small design changes using eMuseum's default design as the basis.
skeleton_neue - A stripped-down/minimalist skin with all features but little design opinion. This is a good starting point for completely new designs.
To create your own skin, you can do so by:
Navigating to \skins
Copy the "defaultSkin" to start with a base exactly like the active internal skin, or copy the "skeleton" skin to start with a base that has all functionality but is stripped down with very little default styling to allow for a complete re-skinning.
Rename the skin you just copied
Refresh the skins configuration page and select the new skin from the "Available Skins" select list.
You can create additional skins by copying and renaming the default Skins directory or creating an empty directory with a unique skin name and copying only selective files (e.g.,' Layout.tml' and 'styles.css') into the Skins directory. eMuseum checks the active Skins folder for an override to the default skin running under the web application container:
If an override is found in the active Skins directory, it will load that template, stylesheet, etc.
If an override is not found in the active Skins directory, then the default template, stylesheet, etc., is used.
This allows you to easily modify and manage a few select files under your Skins directory while deferring to the default set of templates for most of your needs.
Note: There are no restrictions on how you name a skin. The name will only appear on the Skins Configuration page; it is never displayed to the end-user.
The Logo Configuration page allows you to assign a logo to appear in the top banner of all pages on your eMuseum site. The logo configured here will not display on non-configuration pages in the Skeleton skin (or copies).
The Appearance configuration options provide a comprehensive set of tools to customize the visual aspects and layout of your eMuseum site. These settings allow for the personalization of colors, fonts, layout structures, and navigation behaviors, ensuring the site aligns with your institution's branding and user experience goals. Below is a detailed description of each configuration option, including practical examples of how they could be used:
General Settings
Enables rounded corners for UI elements such as buttons and text inputs. Using rounded corners can create a softer, more modern look for the website.
Transforms menu items and small labels to upper case. Labels for buttons like "SUBMIT" and "CANCEL" appear in all caps for emphasis.
Displays a large search box inside the content area instead of in the header.
Enables social media sharing buttons for objects in the collection, allowing users to share individual works using social media applications such as Facebook, Twitter, and Pinterest, as well as email. It also enables sharing in the List, Images, and Detail pages.
Sets the color for hyperlinks across the site. Choosing a distinct blue for all links to maintain visual consistency.
Sets the color for links when the mouse hovers over them to provide clear visual feedback to users.
Sets the color for menu items and text.
Sets a color for highlighted elements such as buttons, selected text, and active states.
Sets the background color on detail pages when using a one-column layout to ensure images and videos stand out.
Sets the maximum width of the content for all pages.
Sets the font face for text in the body of all pages.
Sets the font face for titles on all pages.
Sets the base font size, which scales all text sizes up or down.
Sets the amount of space between items in grid view.
Adds a colored bar behind the header section.
Adds padding to the top and bottom of the header.
Sets the color of the header bar if it is enabled.
Sets the text color inside the header if the header bar is enabled.
Enable or disable the page footer.
Adds padding to the top and bottom of the footer.
Sets the background color of the footer.
Sets the color of text inside the footer.
Displays filters and results in one column.
Displays the filters and results in two columns.
| Masonry | Standard | Fit | Mosaic |
|---|---|---|---|
| One column | Two column | Three column |
|---|---|---|
Stacks images on top of each other like bricks.
Each item is given an equal amount of space on the grid.
Crops images so that images are a uniform size.
Crops images with varied sizing throughout the grid.
