Giter VIP home page Giter VIP logo

default's Introduction

Default

This the default Omeka S theme.

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.

Customizing the Theme

For those dipping their toes into customizing sites with CSS, the CSS Editor module allows site administrators to write style overrides.

For advanced CSS and Sass users, Default provides variables for easily customizing typography, spacing, and colors in asset/sass/_base.scss. There is also a mixin for a set of standard container styles.

Sass Tasks

Run these commands within the theme's root directory.

  • npm 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.

Theme Configuration

  • Main accent color: An accent color to be used on links. The default hex value is #920b0b.
  • Top navigation depth: If the main navigation is set to display child pages, this setting controls how many navigation levels to display. Setting this to '0' shows all levels.
  • Logo: Upload an image asset to use as a logo in place of a text site title.
  • Banner: Upload an image asset to use a banner that sits above the main content area of every view.
  • Banner height: The maximum banner image height in pixels.
  • Banner height for mobile devices: The maximum banner image height in pixels at narrower viewport widths.
  • Banner position: Where to anchor the banner image within its container: centered, stuck to the top, or stuck to the bottom.
  • Truncate Body Property: Controls the size of the body property of resources in a browseable list. It can be set to show the full value, truncate after 4 lines and fade out, or truncate after 4 lines and clip with an ellipsis.
  • Footer content: Control what appears in the footer. This field takes HTML markup.

Resource Page Configuration

Omeka S 4.0 introduced configurable resource pages. Default supports block configuration for items, item sets, and media show pages. Each of those views contains a single configurable region.

Copyright

Default is Copyright © 2016-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.

default's People

Contributors

daniel-km avatar dependabot[bot] avatar fukuchi avatar jimsafley avatar kimisgold avatar patrickmj avatar sharonmleon avatar zerocrates avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

default's Issues

Advanced search in mobile view

Here’s an interesting thing about the public advanced search interface. When the screen is reduced enough that the default theme switches to mobile mode, the simple search box spreads across the width of the screen. As a result, it’s easy to set the advanced search parameters and then miss that the search button is at the bottom of the form and hit the search icon for the simple search instead.

Screenshot_2021-03-18 OTG Dev Description · On These Grounds

Title and logo weirdness

The title and logo are being "pre-calculated" in a sense in the header of the layout view, but those variables aren't actually being used.

The logo is also being manually created and lacks an alt, which should just be the text title.

Variations of this probably apply to other themes.

Regions

Default is only offering a "Main" region on item sets, but on the public page everything is displaying in, like, a right sidebar.

Screenshot 2024-05-14 at 12 54 29 Screenshot 2024-05-14 at 12 54 45

Breadcrumb margin-top

In 4.1, the breadcrumb is loading with a really big margin-top and getting hidden under the page title.

Screenshot 2024-03-06 at 16 20 40 Screenshot 2024-03-06 at 16 20 56

Test new block templates and special html classes

Default now comes with the following block templates and classes, designed to provide more page building options for attractive landing pages. Test that these block templates and classes display as intended and scale well at both mobile and desktop widths.

Asset block template: 3-column grid

This template is best used for displaying page links with asset images. It lays the assets out in a 3-column grid for widths greater than 800px, then scales down to 2 for widths greater than 400px, then a single column for anything smaller.

image

Media block template: 2-column cards

This presents media attachments as white cards with the media on the left and metadata on the right, each taking up half the card width. At widths above 800px, it shows as 2 columns. Each card should be a uniform height in its row. This template ignores the vertical vs horizontal layout setting. It looks best with an even number of attachments, each set with a short caption.

image

HTML class: "spotlight"

Available paired classes: "left-image", "light accent", "dark accent"

This is intended to pair a user-assigned decorative background image inline with text content. The user must set a background image using the block configuration. By default, the background image is aligned to the right. Users can pair this class with "left-image" to move the background image to the left. There are also options to set a single color accent background using "light accent" and "dark accent".

image image image

Banner & Logo Behavior

Is this expected behavior?

When I add an logo in the theme settings, the site Title does not display:
Screen Shot 2022-01-09 at 6 31 20 PM
Looking at the HTML, it seems the site title is given as the logo alt-text, but does not render on the page.

When I add a banner instead (no logo), I get the site title and the nav bar, but above the banner. I'd expect the title & nav to be below the banner (like it is for logo).
Screen Shot 2022-01-09 at 6 35 41 PM

Thanks

Odd placement when appending HTML to existing HTML with event

So, I'm tinkering with ways to add content based on a URI value for a property by pulling in additional content using the rep.value.html event.

In default theme, doing this code, the little signal I add that the link goes to data gets offset in this theme, but not in others (Cozy and Center Row).

defaulteventplacement

The added content -- "(Full Data)" -- looks like it's bumped up a little higher than the default content that comes in when I add it.

The basic code of my module goes like this:

                $html = "<div>" . $event->getParam('html') . ' ' . $translator->translate('(Full Data)') . " </div>";
                $property = 'dbo:abstract';
                $abstract = $resource->getLiteral($property, 'en');
                $html .= $abstract->getValue();
                $event->setParam('html', $html);

To reproduce, install LodConnect, and add URI property to something that refers to a DBpedia resource (e.g., http://dbpedia.org/data/Swindon )

This might just be that my module needs to deal with theming better. Dunno whether this is an issue on my side or not.

Initial testing

Use cases we're testing for:

Browsers

Chrome
Firefox
IE 11
Modules

Mapping
Collecting
MetadataBrowse
Other

Mobile devices
Multiple levels of navigation
Logo upload
Please make separate issues for any found bugs or unexpected behaviors.

Test new mobile menu and fix for awkward positioning when nav item is selected

See forum post for details: https://forum.omeka.org/t/default-theme-navigation-bar-jumping-when-item-is-selected/10539/3

The problem was spillover behavior from mobile submenu navigation. The mobile navigation itself wasn't working, as it relied on unreliable hover behavior using a pure CSS approach. I've revised it to use jQuery generated buttons that should behave more consistently.

This test issue is looking for the following:

  • On desktop, selecting a navigation item no longer causes the nav bar to jump left.
  • Mobile navigation now uses buttons for toggling submenus open and closed.

The fix is on the mobile-nav-button-toggle branch.

Test single line top nav containing submenus

The initial bug is documented in omeka/omeka-s#1453. The solution in the flex-fix branch constrains navigation to a single row on the desktop so that the hover menu is never vertically separated from its parent.

I predict users will ask about wrapping, but I'd like to think it's a reasonable request to pare the navigation down to something that works on one line...

Test banner setting

There is now a theme setting that allows users to select a banner image to appear across site views. In additional settings, they can control:

  • the maximum height of the banner for both mobile and desktop widths
  • where to position the image within the banner container when the container ratio has a much greater width than height

Note: we're testing this setting across a bunch of themes, and I decided to omit the contained width setting for Default, as it doesn't really fit the look of this theme.

This is on the master branch and should be tested on desktop and mobile browsers.

Title sizing

The text size for item titles seems to differ, based on the number of images per row.

Demo page has multiple showcases, some with more items than others. All of these showcases are set for "Large" thumbnail sizes. These are standardized in rows with two or more images. The text size for item titles is also different based on number of images per row- one image in a row is large, two or more are all the same size.

screen shot 2016-10-25 at 1 08 39 pm

The result is that showcases with one image have a title font size that is significantly larger than the font used in any of the other showcases.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.