Display and Appearance

This section provides tools to adjust the visual elements of your eMuseum site—such as colors, fonts, and layout—so you can craft a cohesive design that enhances user experience and aligns with your institutional identity. The Appearance Configuration Options include:

• Colors Customize the color scheme, ensuring consistency with your branding.

• Fonts Select and configure the typography used for a cohesive and readable design.

• Layout and Grid Options Control the structure and spacing of content, allowing for flexibility in how information is displayed.

• Header/Footer Adjust the appearance and content of the header and footer areas, key elements that frame the user experience.

• Breadcrumbs Configure breadcrumb trails to enhance navigation and help users understand their location within your online collection.

• Skins Apply predefined skins or create custom skins to change the overall look and feel of your eMuseum site quickly.

• Custom CSS For advanced users, inject custom CSS to apply unique styles or override existing styles for finer control over the appearance.

General

The General section includes a set of fundamental appearance settings that affect your eMuseum site's overall layout and visual style. These options allow you to establish a consistent and appealing design that aligns with your brand or user preferences.

Global Layout Max Width

This setting determines the maximum width of the content displayed across all pages within your eMuseum site. By setting a max width, you ensure your content remains visually cohesive and does not become too spread out on large screens or too cramped on smaller screens.

Default Value 1400px (as shown in the example).

Customization Adjust the value in pixels to control how wide the content can stretch. A higher value will allow the content to expand more, while a lower value will constrain it within a narrower space.

Best Practice Set a width that complements your content structure and ensures readability across different devices.

Rounded Corners

Enables rounded corners to various UI elements such as buttons, text inputs, and select fields. This option softens the edges of these components, providing a modern and visually appealing aesthetic.

Unchecked Corners remain square.

Checked Corners are rounded, creating a more contemporary look.

Use Case Ideal for aligning the UI with modern design trends that favor softer, more approachable visual elements.

All Caps Text

Transforms all menu items and small labels to uppercase text. This setting can be used to create a uniform and prominent text style, making these elements stand out more clearly.

Unchecked Text retains its original casing.

Checked All relevant text elements are converted to uppercase.

Consideration While this option can enhance visibility, it may reduce readability if overused, particularly for longer text strings.

Enable Big Search Box

Moves the search box from the header to the main content area, where it is displayed more prominently and at a larger size. This can make the search function more accessible and easier to use, particularly on content-heavy pages.

Unchecked The search box remains in the header.

Checked The search box is placed within the content area, making it more noticeable.

Enable Sharing

Adds social media sharing buttons to objects within the collection, allowing users to share content across various platforms easily. This can help increase the visibility and engagement of your content.

Unchecked Sharing buttons are not displayed.

Checked Sharing buttons are enabled, making it simple for users to share items directly from your eMuseum site.

Fonts

The Fonts section allows you to customize the typography across your eMuseum site, giving you control over the visual style of text elements. These settings are crucial for establishing a consistent and readable design that enhances the user experience.

Use Google Fonts

This option enables the use of Google Fonts for both the body text and titles throughout your eMuseum site. If this setting is disabled, your eMuseum site will revert to the default fallback fonts.

Fallback Fonts Body Text "Lato"

Titles "Lora"

Unchecked Google Fonts are not used, and eMuseum defaults to the specified fallback fonts.

Checked Google Fonts are enabled, allowing you to select from a wide range of fonts available through the Google Fonts library.

Best Practice Enable this option if you want to use specific Google Fonts to match your branding or enhance the visual appeal of your online collection.

Typography Body Font

Sets the font face for the body text that appears on all pages within your eMuseum site. This setting controls the default typeface used for paragraphs, descriptions, and any other general text content.

Default Font "Lato" (as shown in the example).

Customization Select your preferred font from the dropdown list or enter a custom font name if using Google Fonts or other available fonts.

Use Case Choose a font that ensures readability and complements the overall design aesthetic of your online collection.

Typography Title Font

Sets the font face for titles on all pages. This includes headings, section titles, and any other prominent text elements that serve as labels or headers within your eMuseum site.

Default Font "Lora" (as shown in the example).

Customization Similar to the body font, you can select a preferred font from the list or specify a custom font, especially if using Google Fonts.

Best Practice Select a title font that contrasts well with the body font, ensuring that titles are distinct and easily noticeable.

Typography Font Base Size

Determines the base font size, which serves as the default size for body text. All other text elements will scale relative to this base size, maintaining consistent proportions across different devices and screen sizes.

Default Size 16px (as shown in the example).

Customization Adjust the value in pixels to increase or decrease the overall text size. A larger base size will make all text elements appear bigger, while a smaller size will reduce the overall text size.

Consideration Adjust this setting to balance readability with the overall layout, ensuring that text is neither too small nor too large for comfortable reading.

Colors

The Colors section allows you to define the color scheme for various elements across your eMuseum site. By customizing these settings, you can create a visually cohesive and branded interface that enhances user engagement and experience.

Global Link Color

This setting determines the text color for all hyperlinks on your eMuseum site. Consistent link color helps users quickly identify clickable text elements.

Color Picker Choose the desired color using the color picker or enter a hex code for precise color selection.

Best Practice Use a color that contrasts well with the background and body text to ensure links are easily distinguishable.

Global Link Hover Color

Sets the text color for links when the mouse hovers over them. This provides a visual cue to users that the text is interactive and clickable.

Color Picker Select a color that differs from the standard link color to enhance the hover effect, signaling interactivity.

Consideration Ensure the hover color is distinct enough from the regular link color to be noticeable yet still harmonious with the overall color scheme.

Global Base Dark Color

Applies a dark color to menu items, body text, and other primary content areas. It serves as a foundational color that provides contrast against lighter background colors.

Color Picker Choose a dark shade that complements the overall theme of your online collection.

Use Case Ideal for establishing a strong contrast between text and background, improving readability and focus on content.

Global Highlight Color

Sets the color for buttons, highlighted text, and active states throughout. This color is often used to draw attention to important elements or actions.

Color Picker Select a vibrant color that stands out against other UI elements, making interactive components more visible.

Best Practice Choose a highlight color that aligns with your brand identity and creates a sense of urgency or importance where needed.

Media Zone Background Color

Controls the background color on detail pages when using a one-column layout. It helps distinguish media-rich areas from the rest of the content.

Color Picker Select a background color that complements the content within the media zone, ensuring that text and media are easily viewable.

Consideration Use a subtle or neutral color that supports the content without overwhelming the visual balance of the page.

Skins

The Skin section allows you to define the overall look, feel, and structure of your eMuseum site by selecting and configuring a skin, also known as a theme. Skins are essential for establishing a consistent and branded visual identity for your online collection.

Understanding Skins

Skins, or themes, are a collection of styles and templates that control the appearance of your site. They consist of various file types common to web design, including CSS stylesheets, JavaScript files, and image graphics. These skins allow you to easily customize the design of your eMuseum site without altering the core content.

CSS Files Control the visual styling, including colors, fonts, and layout.

JavaScript Files Add interactivity and dynamic behavior to elements on the page.

Template Files (*.tml) Define the structure of pages and how content is displayed.

Selected Skin

Allows you to select the skin you want to apply to your eMuseum site. The selected skin dictates the overall aesthetic and user experience.

Dropdown Selection Choose from the available skins listed in the dropdown menu. The selected skin will be applied across the entire site, changing the visual presentation instantly.

Best Practice Select a skin that aligns with your brand identity or the specific look and feel you want to achieve for your users. Consider how the skin's design complements the content and functionality of your online collection.

Customization and Flexibility

Since eMuseum was created with modern web standards in mind, there is a clean separation between content and design. This allows you to make basic changes to your site's appearance by editing the skin files. Anyone familiar with CSS can modify these files to adjust the look and feel.

Compatibility eMuseum template files are HTML-compatible and include processing logic. This logic is unobtrusive to web browsers, meaning that browsers will simply render the content as HTML without affecting the skin's functionality.

Applying a New Skin

To apply a new skin, select it from the dropdown menu and save your changes. eMuseum will reload with the new skin applied, giving your site a refreshed appearance.

Consideration Before applying a new skin, review its layout and design to ensure it meets your requirements. Test the skin in various browsers and devices to confirm compatibility and responsiveness.

Header

The Header section allows you to control the appearance and layout of the header, which is shown at the top of all pages. These options are only used by the default skin and play a crucial role in establishing the first impression of your site.

Centered Header

Centers the logo and main menu on the page, creating a balanced and symmetrical header layout.

Option Select this option if you prefer a centered alignment for your header elements, which can create a more traditional and organized appearance.

Bar

Adds a colored bar behind the header section, providing a distinct background for the header that can enhance visibility and aesthetic appeal.

Option Choose this option if you want a more defined header section that stands out from the rest of the page content.

Header Text Color

Sets the color of the text inside the header, applicable to all textual elements such as navigation links and headings.

Color Picker Select a color that contrasts well with the header background to ensure text readability.

Header BG Color

Sets the background color of the header bar if the bar option is enabled. This color forms the backdrop for the header elements, impacting the overall look of the header.

Color Picker Choose a background color that aligns with your site’s theme and branding.

Header Vertical Padding

Adds padding to the top and bottom of the header, increasing the space around header elements to adjust the overall height of the header.

Default Value 30px (as shown in the example).

Customization Adjust the padding value to create a more spacious or compact header, depending on your design needs.

Selected Logo

Displays the currently selected logo that appears in the header. This logo represents your brand and is a critical visual element of your site’s identity.

Option Review the displayed logo to ensure it’s the correct representation of your brand.

Upload New Logo

Allows you to upload a new logo to the list of existing ones. This feature provides flexibility in updating your branding as needed.

Option Use the "Browse" button to select and upload a new logo file from your device. The newly uploaded logo will be available for selection in the header.

Footer

The Footer section controls the appearance of the footer, which is displayed at the bottom of all pages. These settings, like the header, are only used by the default skin and are important for providing essential information and navigation links at the end of the page.

Footer Enabled

Enables or disables the page footer. The footer typically contains additional links, copyright information, and other relevant details.

Checkbox Check this option to display the footer on all pages. If unchecked, the footer will be hidden.

Centered Footer

Centers the content within the footer, creating a balanced and organized layout similar to the centered header option.

Option Select this option if you want a symmetrical alignment for your footer elements.

Footer Text Color

Sets the color of the text inside the footer, applicable to all textual elements such as links and copyright notices.

Color Picker Choose a text color that contrasts well with the footer background to ensure legibility.

Footer BG Color

Sets the background color of the footer, establishing the overall visual tone for the footer area.

Color Picker Select a background color that harmonizes with the rest of your site’s theme.

Footer Padding Vertical

Adds padding to the top and bottom of the footer, allowing you to control the space around footer elements and adjust the overall height of the footer.

Default Value 30px (as shown in the example).

Customization Modify the padding value to achieve the desired footer spacing and appearance.

Result Pages

This section allows you to customize the layout, grid settings, and display options for result pages in your eMuseum site. These settings enable you to control how search results, images, lists, and tables are presented, ensuring a consistent and user-friendly experience.

Results Layout

Determines how search results and associated filters are displayed on the page. You can choose between a one-column or two-column layout based on your content's structure and the desired user experience.

One Column Displays filters and results in a single column. This layout is straightforward, providing a linear flow from filters to results.

Two Column Displays filters and results in two columns. This layout places the filters alongside the results, allowing users to easily adjust filters while viewing the results.

Best Practice Use the two-column layout for content-rich pages where users need to frequently adjust filters without losing sight of the results.

Grid Gutter Width

Sets the space between items in grid views, such as image grids or list grids. This spacing helps define the visual separation between items, contributing to the overall readability and organization of content.

Default Value 15px (as shown in the example).

Customization Adjust the pixel value to create more or less space between items. A larger gutter width creates more breathing room, while a smaller width results in a denser layout.

Consideration Choose a gutter width that balances content density with visual clarity, especially on grids where items need to be distinctly separated.

Limit Titles to Single Line with Ellipsis

Truncates long titles to fit within a single line, adding an ellipsis ("...") at the end to indicate that the full title is longer. This feature maintains a clean and uniform appearance by preventing titles from wrapping onto multiple lines.

Checkbox Enable this option to limit titles to one line. If left unchecked, titles will display in full, which may cause them to wrap onto additional lines.

Use Case Ideal for maintaining a consistent layout in grids or lists where space is limited and titles vary in length.

Images Grid

Defines how images are displayed across various content types, such as Collections, Objects, People, and Exhibitions. You can choose from different grid layouts to best showcase your visual content.

Masonry Stacks images on top of each other like bricks. This layout dynamically adjusts to different image sizes without cropping, creating a visually interesting and varied grid.

Standard Each item is given equal space on the grid. This layout provides uniformity, making it suitable for content that requires a consistent and balanced presentation.

Fit Crops images so that they are uniform in size. This layout is ideal when consistency in image dimensions is important for the overall design.

Mosaic Crops images with varied sizing throughout the grid, resulting in a non-linear, artistic presentation that emphasizes visual diversity.

Content Type Configuration For each content type (e.g., Collections, Objects, People), select the layout style that best suits the visual presentation of that content. Each content type can be configured independently, allowing for tailored displays.

Best Practice Choose a layout style that enhances the content's visual impact while ensuring usability and accessibility.

Grid Items Per Page

Sets the number of images displayed per page within the grid. This setting controls how much content is visible before users need to navigate to the next page.

Default Value 12 items per page.

Customization Adjust the number based on the amount of content and the desired page load performance.

Consideration Choose a number that balances performance with usability, ensuring pages load quickly while still presenting enough content to users.

Grid Columns Per Page (Responsive Design)

Defines the number of columns displayed per page for different screen sizes. This ensures that the grid layout is responsive and adapts to various devices.

X-Small Screens 2 columns.

Small Screens 3 columns.

Medium Screens 3 columns.

Large Screens 4 columns.

Best Practice Configure these values to optimize the display across all devices, ensuring a smooth and visually appealing user experience.

List Grid

Controls the presentation of lists of content, such as text-based entries, in a grid format similar to the Images Grid.

List Items Per Page Sets the number of items displayed per page within the list. This setting controls how much content is visible before users need to navigate to the next page.

Default Value 12 items per page.

Customization Adjust the number based on the amount of content and the desired balance between scrolling and pagination.

Consideration Optimize this setting for readability, ensuring list items remain easy to scan without requiring too much scrolling.

List Columns Per Page (Responsive Design) Defines the number of columns displayed per page for different screen sizes. This ensures that the list layout is responsive and adapts to various devices.

X-Small Screens 1 column.

Small Screens 2 columns.

Medium Screens 2 columns.

Large Screens 3 columns.

Use Case Configure these values to optimize the display across all devices, ensuring a smooth and readable user experience.

Table

Manages the display of tabular data, ensuring that data tables are presented in a clear and organized manner.

Table Items Per Page Sets the number of rows displayed per page within tables. This setting controls how much data is visible before users need to navigate to the next page.

Default Value 24 items per page.

Customization Adjust the number based on the complexity of the data and the desired balance between scrolling and pagination.

Consideration Larger tables may benefit from fewer rows per page to maintain clarity and prevent overwhelming users with too much information at once.

Details Page

The Details Page section allows you to customize the layout of detail pages. Each module can be configured individually, enabling a tailored presentation of detailed content based on the specific needs and characteristics of each module.

Layout Options

For detail pages, three different layout options are available, providing flexibility in how content is displayed.

One Column Displays content in a single, full-width column. This layout is straightforward and ensures that content is presented in a linear, easy-to-read format.

Two Column Splits the content into two columns, allowing for a more organized presentation where different types of information can be displayed side by side.

Three Column Further divides the content into three columns, ideal for displaying a large amount of related information in a compact and structured manner.

Best Practice Use the one-column layout for simple records where readability is the main priority. Choose the two-column layout when you want to separate complementary content (e.g., images on one side, descriptive text on the other). Select the three-column layout only when dealing with complex records that contain multiple types of related information, ensuring the page remains structured without feeling cluttered.

Navigation

The Navigation section allows you to configure how users navigate through result pages within the your eMuseum site. These settings determine the flow and usability of search results, lists, and other paginated content, ensuring a seamless user experience.

Navigation Type

Select how result pages can be navigated by users. This setting determines whether users will scroll through results continuously or navigate through distinct pages.

Scroll Enables infinite scrolling for results. Users can continuously scroll without manually navigating to the next page, creating a dynamic and uninterrupted browsing experience.

Pager Enables traditional page navigation. Users move through results by clicking on numbered pages or navigation buttons, offering more control over which page they are viewing.

Best Practice Use infinite scrolling for content-heavy pages where users expect to keep browsing fluidly (e.g., image-heavy collections). Use paginated navigation when structure and control are important, such as datasets where users may want to return to a specific page.

Result Count

Allows users to define the number of items displayed per page in List and Lightbox views for search results. This setting gives users more control over how much content they view at once.

Max. Result Count Sets the maximum number of items per page that users can specify. This prevents excessively high values that could slow page performance.

Default Value 100 items per page.

Customization Adjust the maximum result count to balance performance and usability. A higher number shows more content at once but may impact loading speed for large datasets.

Consideration Enable this option if you want to give users flexibility in how they view content. If disabled, eMuseum will use the default items-per-page setting.

Show Links for First and Last Page

Controls whether links to the first and last pages appear in paginated views. These links give users quick access to the beginning and end of the result set.

Checkbox Enable this option to show links to the first and last pages in pagination controls. If disabled, users must navigate sequentially through pages.

Use Case Enable this option if your content spans many pages and users may need to quickly jump to the start or end of results. It is especially helpful for large datasets.

Breadcrumbs

Breadcrumbs provide users with a navigational aid that shows the path they have taken through the site, helping them understand their location within the online collection. Although useful, breadcrumbs may not fit well into all site designs and can sometimes be redundant, which is why they are disabled by default.

Show Breadcrumb

Enables or disables the display of breadcrumbs on pages. Breadcrumbs provide a visual trail that helps users understand their path through the site, allowing them to navigate back to previous pages easily.

Checkbox Enable this option to display breadcrumbs on all pages. If disabled, breadcrumbs will be hidden.

Best Practice Enable breadcrumbs if your site has a deep or complex structure where users may benefit from a visual cue that shows their navigation path.

Show ‘Home’ Link

Determines whether to include a ‘Home’ link at the beginning of the breadcrumb trail. The 'Home' link typically points to the main page of your online collection, providing a quick way for users to return to the start.

Checkbox Enable this option to include a ‘Home’ link in the breadcrumb. If disabled, the breadcrumb will start from the first level below ‘Home.’

Use Application Name

Controls whether your online collection or institution name is used as the 'Home' link in the breadcrumb instead of displaying the literal word "Home."

Checkbox Enable this option to use the application’s name as the link text for ‘Home.’ If disabled, the breadcrumb will display "Home" as the link.

Consideration Using the application or institution name can provide a more branded experience and may be preferable if you want to reinforce identity.

Show Link to Current Page

Determines whether to display a link to the current page within the breadcrumb. By default, the current page is displayed as plain text without a link.

Checkbox Enable this option to make the current page a clickable link in the breadcrumb. If disabled, the current page will be displayed as non-clickable text.

Use Case Enable this option if you want to provide users with the ability to refresh the current page by clicking its breadcrumb link.

Link Current Page to Itself

Controls whether the current page, if included in the breadcrumb, is linked to itself. This setting provides additional flexibility in how the breadcrumb trail is presented.

Checkbox Enable this option if you want the current page in the breadcrumb to be a clickable link to itself. If disabled, the current page will remain as plain text in the breadcrumb.

Consideration Linking the current page to itself can be useful in certain navigation scenarios, but it may also be redundant. Consider the typical user journey when configuring this option.

Discover More

The Discover More feature enhances the user experience by displaying related content at the bottom of Module details pages. This feature can be enabled on a per-Module basis through the Module configuration page, allowing users to explore content related to the current record without manually creating relations in the TMS (The Museum System). The Discover More section provides options to control how related content is surfaced and displayed.

Record Count

Sets the number of related records to display in the Discover More section. This determines how much content is shown at the bottom of the details page, giving users a broader or more focused view of related items.

Default Value 12 records.

Customization Adjust the number based on the amount of related content available and the desired page layout. Increasing the record count shows more related items, while decreasing it limits the display to the most relevant records.

Best Practice Choose a record count that balances the richness of related content with the overall page length and load time.

Minimum Term Frequency

Specifies the Minimum Term Frequency, which is the frequency below which terms will be ignored in the source document. This setting helps filter out less significant terms that might not be useful in identifying related content.

Default Value 1

Customization Increase this value to ignore terms that appear infrequently and may not be meaningful for establishing relationships between records.

Consideration Set this value based on the nature of the content and the specificity of terms you want to consider. A higher value will focus on more commonly occurring terms, while a lower value may include more varied but potentially less relevant terms.

Minimum Document Frequency

Specifies the Minimum Document Frequency, which is the frequency at which words will be ignored if they do not occur in at least the specified number of documents. This helps ensure that only terms occurring across multiple records are considered when identifying related content.

Default Value 1

Customization Increase this value to exclude terms that appear in only a few documents, thereby focusing on more widely shared terms that better indicate relationships.

Use Case Adjust this setting based on the diversity and distribution of content across your records. A higher value emphasizes terms that are more common across records, potentially leading to more broadly related content.

Customization Tips

The following recommendations will help you configure Discover More effectively, ensuring it surfaces relevant and engaging content for your users.

Relevance of Content Carefully configure the term and document frequency settings to maximize the relevance of the content displayed in the Discover More section. This helps users find genuinely related content that enhances their browsing experience.

User Engagement Use the Discover More feature to keep users engaged by surfacing additional content they might find interesting, thereby increasing the time they spend on your site.

Custom CSS

The Custom CSS section allows you to create or edit a custom stylesheet that will be applied across all eMuseum pages when enabled. This feature provides advanced users with the ability to further customize the appearance of their application by directly modifying or adding CSS code.

Enable

Controls whether the custom CSS should be applied to the site. Enabling this option allows the CSS code you have written to override or extend the default styles of the application.

Checkbox Enable this option to apply custom CSS. If disabled, the site will use only the default or other configured styles.

Best Practice Enable this option only after testing your custom CSS to ensure it does not conflict with existing styles or cause unexpected layout issues.

CSS Code

Defines where you input your custom CSS code. The code written here will be included in the site's stylesheet and will affect the appearance of all pages in the application.

Code Editor Enter your CSS code directly into the provided editor. The editor supports syntax highlighting, making it easier to write and review your code.

Example In the provided example, the text color of elements with the class customClass is set to red:

a.customClass {
    color: red;
}

Customization Tips

The following best practices will help you manage custom CSS effectively and avoid issues with styling and performance.

Modular CSS Write modular and well-organized CSS that targets specific components or pages to avoid unintended global changes.

Backup Keep a backup of your original CSS or any significant changes so that you can revert if necessary.

Performance Avoid overly complex or heavy CSS rules that could slow down page rendering or negatively impact user experience.