Modify Omeka S themes

Hi everyone,
Has anyone been able to duplicate a big picture theme like this one Omeka Classic - Big Picture but that works in Omeka S?

We are trying to create a big hero image on our landing page, but all of the S themes have padding built into the content/body classes of their CSS. I’m able to change this, but doing so makes the subpages not render nicely. And since you can’t override that high level padding with inline markup, I’m a bit stuck.

Suggests are greatly appreciated!

Hi @tam ,

I have a solution, but it’s going to require a little digging into the CSS to work.

Things you need to know:

  1. The limiting container selector
  2. The container padding if it exists
  3. The limiting container’s maximum width if it exists

I’m going to use Center Row as an example.

For my hero image, I’m going to use an asset block. I will assign it an image and also the class hero-image to target with CSS.

Next I use my browser’s inspector tools to look up the values I need.

In Center Row, you can see the following:

  1. The #wrap container is what’s restricting all the page elements to a certain width.
  2. It has a padding of .625% on the left and right.
  3. It has a maximum width of 1100px.

Using this information, I can write styles to put into CSS Editor to create full bleed hero images. I’m using an approach described in this write up from CSS Tricks: Full-width Containers in Limited Width Parents.

.assets.hero-image {
    width: calc(100% + 1.25%); // 100% width and the total padding values
    margin-left: -.625%; // Negative margins to negate the padding values
    margin-right: -.625%;
}

.assets.hero-image img {
  width: 100%; // Ensure your hero image takes up the full width.
}

// Use a breakpoint to style when the browser exceeds the `#wrap` container's maximum width.
@media screen and (min-width: 1100px) { 
  .assets.hero-image {
    margin-left: calc(-100vw / 2 + 1100px / 2); // The calculation for full width incorporating the parent container's maximum width.
    margin-right: calc(-100vw / 2 + 1100px / 2);
    width: auto;
  }
}

I hope this helps!

1 Like