’m having a little trouble adding some custom HTML to our site. Here’s what I want and what I’ve done so far: I’m trying to add a notification bar that appears at the top of our site notifying users about the site’s status.
I created a basic HTML file:
<div class="notification-bar">
<p>This site is currently being revised and will be updated in November 2023</p>
<button class="close-button">Close</button>
</div>
saved and uploaded that as an “Additional File” under the “Advanced” settings in Omeka.
Then in the Custom CSS field I added styling for it
.notification-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #f5f5f5;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 9999;
}
.notification-bar p {
margin: 0;
}
.close-button {
float: right;
}
But I can’t get it to show up at all. Admittedly I’m not great at HTML/CSS but have done similar tweaks using this method in the past, and they’ve worked just fine. Anyone see something I’m doing wrong?
Where are these settings? I’m not familiar with them… are they from a theme or plugin maybe?
1 Like
You’ll need to edit the actual theme to include that file (or just write the same HTML into the /common/header.php file). Uploading an additional file via theme settings just puts it on the server in the /files/theme_uploads directory.
1 Like
Pretty sure @abcowan is using the Curatescape Echo theme, which includes this as a theme option. It’s meant for adding sponsor logos and such (which can then be referenced in the Custom CSS and Custom Footer HTML theme options).
@ebellempire thanks - I forget what options are native to Omeka and which ones get added by Curatescape. And yeah, you’re right, now that I’m thinking about it my approach makes no sense. I was thinking of when I’ve used the upload field for adding a custom background image in blockquotes.
Sorry for the confusion, everyone!
Maybe a simpler way to approach this would be to do it all in CSS. Below is a very simple example. It doesn’t provide any mechanism for dismissing the notice but it sounds like this will be a temporary thing so it might be fine.
header.primary::before {
content: 'Your text here.';
display: block;
background: red;
text-align: center;
}
1 Like
hmm…that didn’t seem to do anything, but that’s not really your problem. I’ll keep fiddling…Thanks!
That’s odd. I added to the Custom CSS theme option and it works as expected. I guess if you have other customizations, you might need to make adjustments.
1 Like
I moved it up to the top of the CSS box, and that seemed to fix it - this will definitely suffice as a short-term solution, so thanks!
