Lively S: An Omeka S Theme

This is an Omeka S theme that offers some custom options and a clean design.

Installation

For basic out-of-the-box use of the theme, follow the Omeka S User Manual instructions for installing themes.

For more advanced use, such as customizing the theme with Sass, you'll need to install the tools with NodeJS (0.12 or greater). Navigate to your theme directory and run npm install.

Theme settings

General Settings

• Theme's Primary Color: The color to be used as the theme's primary color. The default value is #d62d6a (RGB 214, 45, 106).

• Theme's Secondary Color: The color to be used as the theme's secondary color. The default value is #4D1068 (RGB 77, 16, 104).

• Theme's Accent Color: The color to be used as the theme's accent color for links and accents. The default value is #0a4f9e (10, 79, 158).

• Theme's complementary Color: The color to use on decorative shapes. The default value is #F0B247 (240, 178, 71).

Contact Info

• Location
• Phone number
• Email
• Show contact info in Top Header and/or Footer

Header

• Top Navigation Depth: Maximum number of levels to show in the site's top navigation bar. Set to 0 to show all levels.
• Logo: A custom logo (SVG, JPG, PNG)

Banner

• Banner image
• Heading
• Description
• Button Label
• Button Link
• Content position
• Banner image vertical position within the wrapper
• Banner image horizontal position within the wrapper

Footer

• Footer Logo
• Footer Site description
• Footer Menu
• Footer Menu Title
• Footer Menu Depth
• Footer Content Title
• Footer Content

Social Media

• Facebook
• Twitter
• LinkedIn
• Instagram
• Youtube
• Mastodon

Footer Bottom

• Copyright
• Terms Title
• Terms URL
• Privacy Policy Title
• Privacy Policy URL

Image Settings

• Decorative border for Banner, Media and/or Assets

Resource Tags

• Show tags based on Resource Type and/or Class

Browse Settings

• Layout for Browse Pages
• Truncate Body Property

Customizing the Theme

If you want to customize the site with your own CSS, the CSS Editor module allows site administrators to write style overrides.

For advanced CSS and Sass users, this theme includes variables and mixins for managing and extending many styles.

Sass Tasks

Run these commands within the theme's root directory.

• npm run start: While this task runs, it watches for changes to sass files and recompiles the CSS.
• gulp css: This is the one-off task for compiling the current Sass/CSS.
• gulp css:watch: This task watches for changes in the Sass, then compiles the CSS.

Sass File Structure

sass
    ├── abstracts
    │   ├── mixins
    │   └── variables
    │       ├── breakpoints
    │       ├── colors
    │       ├── layout
    │       └── typography
    ├── base
    │   ├── elements
    │   │   ├── body
    │   │   ├── buttons
    │   │   ├── caption
    │   │   ├── fields
    │   │   ├── hr
    │   │   ├── icons
    │   │   ├── language-tag
    │   │   ├── links
    │   │   ├── lists
    │   │   ├── media
    │   │   ├── resource-description
    │   │   ├── resource-tag
    │   │   ├── tables
    │   │   ├── titles
    │   │   └── tooltip
    │   ├── layout
    │   │   ├── layout
    │   │   └── regions
    │   └── typography
    │       ├── copy
    │       ├── headings
    │       └── typography
    ├── components
    │   ├── accordion
    │   ├── advanced-search
    │   ├── annotation
    │   ├── banner
    │   ├── blocks
    │   │   ├── assets
    │   │   ├── browse-preview
    │   │   ├── carousel
    │   │   ├── collecting
    │   │   ├── item-showcase
    │   │   ├── item-with-metadata
    │   │   ├── list-of-sites
    │   │   ├── media-embed
    │   │   ├── table-of-contents
    │   │   └── timeline
    │   ├── breadcrumbs
    │   ├── facets
    │   ├── footer
    │   ├── header
    │   │   ├── header
    │   │   ├── search
    │   ├── linked-resources
    │   ├── mapping    
    │   ├── metadata
    │   ├── navigation
    │   ├── pagination
    │   ├── resources
    │   │   ├── browse-controls
    │   │   ├── resource-grid
    │   │   ├── resource-list
    │   ├── search-results
    │   ├── uri-dereferencer
    │   └── user-bar
    ├── generic
    │   ├── box-sizing
    │   └── normalize
    └── utilities
        ├── accessibility
        ├── alignments
        └── clearfix

Utility classes

Lively S offers a set of predefined utiliy classes that will help you to add styles to certain elements by just assigning them these classes.

You can even combine multiple utility classes.

• inline
• alignleft
• alignright
• aligncenter
• alignfull
• alignwide
• alignnarrow
• textleft
• textright
• textcenter
• clearfix
• screen-reader-text

Copyright

Lively S is Copyright © 2023-present Corporation for Digital Scholarship, Vienna, Virginia, USA http://digitalscholar.org

The Corporation for Digital Scholarship distributes the Omeka source code under the GNU General Public License, version 3 (GPLv3). The full text of this license is given in the license file.

The Omeka name is a registered trademark of the Corporation for Digital Scholarship.

Third-party copyright in this distribution is noted where applicable.

All rights not expressly granted are reserved.