Modifying the header image container

A user recently contacted me about making changes to the background image in the story header. Here are a couple tips.

[Note that these customizations apply to theme version 3.1.1 and may not be suitable to other versions]

Resizing

The title is actually absolutely-positioned inside the container so it sticks to the bottom. If you want to resize the container height, you first need to make sure that the title area is relatively-positioned. This will make it stick to the top of the container, so the next thing you need to do is remove the min-height value on the outer container and add any desired padding to the top. That padding will determine how much of the image is visible in the area above the title.

/* resize header image container */
.item-hero .item-hero-text{
	position:relative !important;
}
article.story.item.show header#story-header div.hero{
	min-height: none !important;
	padding-top: 150px; /* this now controls the height above the title */
}

Removing

To remove the header background image altogether, simply override the background settings.

/* remove header image */
article.story.item.show header#story-header div.hero{
	background:black !important; /* this removes the image from the header */
}

You can implement these CSS snippets (and any other valid CSS) by using the Curatescape theme’s Custom CSS theme configuration feature on your Omeka site.

Note on official support for customization

These are just a couple examples of how to use the Custom CSS feature in the Curatescape theme. Please note that the Curatescape Team cannot provide answers to all questions that fall into the “learning web development” category, but we are here to point you in the right direction when it comes to using our tools correctly and efficiently and will occasionally jump in to provide recommendations when we think it might be generally useful for users.