Editing css files in Berlin theme


#1

A few weeks ago I attempted to change the font color of the headings in the Berlin theme by editing the hex codes in the ~/themes/berlin/css/style.css file. At first it seemed I was unsuccessful; nothing changed. Now I notice that the color change has taken place. I just tried altering the color that links have when you hover the cursor over them, to see if I could replicate the change, but it didn’t work. So basically it appears that I succeeded in making a change a few weeks ago but have no idea why or when it took place, and now I can’t replicate the change.
Can anyone explain to me how the font colors in the Berlin theme are controlled? It appears that more than the style.css file is involved. Somehow, any changes to the hex codes in that file are eventually stored or replicated elsewhere, because I have deleted the revised style.css file that changed the heading colors, yet those color changes persist.
I searched the SQL database but did not find anything there–am I overlooking it somehow?
Thanks in advance to anyone who lends me a hand.


#2

An update: I posted my original message on December 22 around 1:30 am. I worked on other aspects of my Omeka site on the evening on December 22 until ~2:30am on December 23, and at that time the CSS changes I had made to the font colors still persisted, despite my having deleted the style.css file that had contained those changes and replacing it with the original style.css file (although now with the hover font color for links changed). I have screen-shots showing the different font colors, and I know when they were produced.
It is now early afternoon on Dec 23 and the font colors have finally reverted to the original native blue of the Berlin theme, with the color when hovering over a link changed. So, sometime between (very) early this morning and this afternoon the style.css file for the Berlin theme was accessed by Omeka and the changes applied to my site. But, just as when I made changes the first tiime, I have no idea why the change occurred when it did and/or whether some action on my part caused the changes to take effect.
Why are these changes not applied immediately? How and when does Omeka access the Berlin theme’s style.css file?
I’m happy to know that I can make at least some changes to Berlin’s appearance, I just wish I understood how the style.css file functions within Omeka. (And I would prefer to not wait hours or days for those changes to take effect.)
If anyone understands what is going on, I’d be very grateful for your insight.


#3

This sounds more like an issue of browser caching than with Omeka. Some browsers are much more aggressive at caching CSS and keeping that cache. As a matter of habit, I generally clear my browser cache whenever I make a change to the CSS files for a theme.

Another thing I would consider is placing these overrides to the theme’s style.css file in a separate CSS file just for these kind of changes. I usually name the file with the name of the site. I recently did one site whose initials were IDHP and I named the custom, override file IDHP.css. The custom file goes in the same directory as style.css. That way if you ever upgrade your theme you don’t have to worry about losing your changes. You’ll need to add that file name to header.php so that it is also read in when you access pages for the site.

This is the pattern you should follow in most cases. Don’t make changes to core files but put your overrides in separate custom files and call those files in.


#4

Thank you for your reply!
I should have considered the possibility that the issue was with my browser cache, as I ran into a problem with it recently interfering with the proper display of one particular website. Even after clearing my cache, that website wouldn’t display correctly. I had to create a new persona in Chrome (the browser in question).
I understand your point about creating an override CSS file. I’ll give it a shot, and if I still have questions I’ll send them along.
Thanks again!


#5

I am having this same problem, which makes me not even know if I’m editing in the right place in the CSS file. All I want to do is make the basic

font bigger for Berlin! Why is this so hard? I have spent about three hours on this. Very frustrated.


#6

The easiest way to go might be to add the CSS Editor plugin (https://omeka.org/classic/plugins/CSSEditor/) and add your styles there – using your web development inspector to identify the font spec that you want to override.


#7

Thanks, Sharon, I’ll try that!