Display and Appearance
Last updated
Last updated
Appearance Configuration Options
This section allows you to customize the overall appearance of your eMuseum site, giving you control over various visual aspects to match your brand's identity or personal preferences. Whether you're looking to adjust colors, fonts, layout, or other stylistic elements, the options provided here enable you to create a tailored user experience.
Overview
The Appearance Configuration Options cover a wide range of settings that impact the visual presentation of your eMuseum site, including:
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.
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
Description: This setting determines the maximum width of the content displayed across all pages within your eMuseum iste. 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.
Configuration:
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
Description: 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.
Configuration:
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
Description: 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.
Configuration:
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
Description: This option 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.
Configuration:
Unchecked: The search box remains in the header.
Checked: The search box is placed within the content area, making it more noticeable.
Enable Sharing
Description: When enabled, this setting 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.
Configuration:
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
Description: 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"
Configuration:
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
Description: 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.
Configuration:
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
Description: 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.
Configuration:
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
Description: This setting 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.
Configuration:
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 Configuration
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
Description: This setting determines the text color for all hyperlinks on your eMuseum site. Consistent link color helps users quickly identify clickable text elements.
Configuration:
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
Description: 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.
Configuration:
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
Description: This setting 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.
Configuration:
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
Description: Sets the color for buttons, highlighted text, and active states throughout. This color is often used to draw attention to important elements or actions.
Configuration:
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
Description: This setting 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.
Configuration:
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.
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
Description: 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.
Structure:
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
Description: This option allows you to select the skin you want to apply to your eMuseum site. The selected skin dictates the overall aesthetic and user experience.
Configuration:
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
Modifying Skins: 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
Procedure: 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.
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
Description: Centers the logo and main menu on the page, creating a balanced and symmetrical header layout.
Configuration:
Option: Select this option if you prefer a centered alignment for your header elements, which can create a more traditional and organized appearance.
Bar
Description: Adds a colored bar behind the header section, providing a distinct background for the header that can enhance visibility and aesthetic appeal.
Configuration:
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
Description: Sets the color of the text inside the header, applicable to all textual elements such as navigation links and headings.
Configuration:
Color Picker: Select a color that contrasts well with the header background to ensure text readability.
Header BG Color
Description: 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.
Configuration:
Color Picker: Choose a background color that aligns with your site’s theme and branding.
Header Vertical Padding
Description: Adds padding to the top and bottom of the header, increasing the space around header elements to adjust the overall height of the header.
Configuration:
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
Description: 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.
Configuration:
Option: Review the displayed logo to ensure it’s the correct representation of your brand.
Upload New Logo
Description: Allows you to upload a new logo to the list of existing ones. This feature provides flexibility in updating your branding as needed.
Configuration:
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.
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
Description: Enables or disables the page footer. The footer typically contains additional links, copyright information, and other relevant details.
Configuration:
Checkbox: Check this option to display the footer on all pages. If unchecked, the footer will be hidden.
Centered Footer
Description: Centers the content within the footer, creating a balanced and organized layout similar to the centered header option.
Configuration:
Option: Select this option if you want a symmetrical alignment for your footer elements.
Footer Text Color
Description: Sets the color of the text inside the footer, applicable to all textual elements such as links and copyright notices.
Configuration:
Color Picker: Choose a text color that contrasts well with the footer background to ensure legibility.
Footer BG Color
Description: Sets the background color of the footer, establishing the overall visual tone for the footer area.
Configuration:
Color Picker: Select a background color that harmonizes with the rest of your site’s theme.
Footer Padding Vertical
Description: 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.
Configuration:
Default Value: 30px (as shown in the example).
Customization: Modify the padding value to achieve the desired footer spacing and appearance.
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
Description: This setting 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.
Configuration:
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
Description: 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.
Configuration:
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
Description: This option 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.
Configuration:
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.
The Images Grid section allows you to define 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.
Layout Styles:
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
Description: 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.
Items Per Page
Description: 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.
Configuration:
Default Value: 12 items per page.
Customization: Adjust the number based on the amount of content and the desired page load performance.
Columns Per Page (Responsive Design)
Description: Defines the number of columns displayed per page for different screen sizes (e.g., x-small, small, medium, large screens). This ensures that the grid layout is responsive and adapts to various devices.
Configuration:
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.
The List Grid section controls the presentation of lists of content, such as text-based entries, in a grid format similar to the Images Grid.
Items Per Page
Description: Sets the number of list items displayed per page.
Configuration:
Default Value: 12 items per page.
Customization: Adjust the number to fit the amount of content and user preference for scrolling or pagination.
Columns Per Page (Responsive Design)
Description: Defines the number of columns for list items across different screen sizes.
Configuration:
X-Small Screens: 1 column.
Small Screens: 2 columns.
Medium Screens: 2 columns.
Large Screens: 3 columns.
Use Case: Optimize these settings for readability and navigation on various devices.
The Table section manages the display of tabular data, ensuring that data tables are presented in a clear and organized manner.
Table Items Per Page
Description: Sets the number of table rows displayed per page.
Configuration:
Default Value: 24 items per page.
Customization: Adjust this number based on the complexity of the data and the need for scrolling or pagination.
Consideration: Larger tables might benefit from fewer items per page to maintain clarity and prevent overwhelming users with too much information at once.
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
Description: For details pages, three different layout options are available, providing flexibility in how detailed 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.
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
Description: Select how result pages can be navigated by users. This setting determines whether users will scroll through results continuously or navigate through distinct pages.
Options:
Scroll: Enables infinite scrolling for results. With this option, users can continuously scroll through results without having to manually navigate to the next page. This option is often preferred for a more dynamic and uninterrupted browsing experience.
Pager: Enables traditional page navigation for results. With this option, users navigate through results by clicking on numbered pages or navigation buttons, offering more control over which page they are viewing.
Best Practice: Choose the navigation type that best fits your content and user preferences. Infinite scrolling is great for content-heavy pages, while paginated navigation provides a more structured browsing experience.
Result Count
Description: When enabled, this option allows users to define the number of items that will appear per page in List and Lightbox views for search results. This setting gives users more control over how much content they view at once.
Configuration:
Max. Result Count: Sets the maximum number of items per page that users can specify. This helps prevent users from selecting an excessively high number of items, which could impact page load times.
Default Value: 100 (as shown in the example).
Customization: Adjust the maximum result count based on the balance between performance and user experience. A higher number may show more content at once, but could slow down loading, especially 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
Description: This option controls whether to show links to the first and the last pages in paginated views. These links provide quick access to the beginning and end of the result set, which can be useful for users who want to jump to these positions.
Configuration:
Checkbox: Check this option to display links to the first and last pages in the pagination controls. If unchecked, these links will be hidden, and users will have to navigate through the pages sequentially.
Use Case: Enable this option if your content spans many pages and you want to offer users a quick way to access the first or last pages. It’s particularly useful for large datasets where users may need to skip to the beginning or end.
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
Description: 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.
Configuration:
Checkbox: Check this option to display breadcrumbs on all pages. If unchecked, breadcrumbs will be hidden.
Best Practice: Enable breadcrumbs if your site has a deep or complex structure, where users might benefit from a visual cue that shows their navigation path.
Show ‘Home’ Link
Description: 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.
Configuration:
Checkbox: Check this option to include a ‘Home’ link in the breadcrumb. If unchecked, the breadcrumb will start from the first level below ‘Home.’
Use Application Name
Description: This option controls whether your online collection or institution name is used as the 'Home' link in the breadcrumb instead of displaying the literal word "Home."
Configuration:
Checkbox: Check this option to use the application’s name as the link text for ‘Home.’ If unchecked, the breadcrumb will display "Home" as the link.
Consideration: Using the name can provide a more branded experience and may be preferable if you want to reinforce the application’s identity.
Show Link to Current Page
Description: 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.
Configuration:
Checkbox: Check this option to make the current page a clickable link in the breadcrumb. If unchecked, 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
Description: 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.
Configuration:
Checkbox: Check this option if you want the current page in the breadcrumb to be a clickable link to itself. If unchecked, 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.
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
Description: 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.
Configuration:
Default Value: 12 records (as shown in the example).
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
Description: 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.
Configuration:
Default Value: 1 (as shown in the example).
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
Description: 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.
Configuration:
Default Value: 1 (as shown in the example).
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.
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 that they might find interesting, thereby increasing the time they spend on your site.
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
Description: This option 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.
Configuration:
Checkbox: Check this option to enable custom CSS. When unchecked, the custom CSS will not be applied, and the site will use the default or other configured styles.
Best Practice: Enable this option only after you’ve tested your custom CSS to ensure it doesn’t conflict with existing styles or cause unexpected layout issues.
CSS Code
Description: This is 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.
Usage:
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 body background color is set to red using the following
Customization: Use this editor to apply specific styles that meet your design requirements, whether it’s changing colors, fonts, layouts, or adding unique visual effects.
Consideration: Be cautious when applying global styles like the example, as they will affect the entire application. Always test your CSS thoroughly in different browsers and devices to ensure compatibility and responsiveness.
Modular CSS: Consider writing 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 you make 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.
