CSS customization won't work

Question

Recently, I signed up with the Amazon's Lightsail service that comes with a version of Drupal (8.3) provided by Bitnami. I am not sure how this is different from any other installations, but when I tried to increase the font size of my site name, it wouldn't work.

The file I updated is style.css under ~/apps/drupal/htdocs/themes/zircon/css. (I am using the Zircon theme.)

The CSS ruleset I added is the following.

.site-name {
  font-size: 30px;
}

I tried clearing the cache, unchecking the "Aggregate CSS files", but none of them works.

Googling, I learned that adding a sub-theme is recommended for the job, that I tried, but the admininistration pages of the site simply wouldn't load after I created a folder (with the .yml file in it) under the themes(~/apps/drupal/htdocs/themes) directory.

Is it still possible to update a given style.css file from a given theme?

Answer 1

It seems like you updated the CSS semi-correctly. Semi because, it does look like Zircon's CSS is built using SASS/Compass and not directly. You might want to look at how to set this up properly.

You are also correct that you really need to set up a sub-theme first. The reason to do this is that when updates to the Zircon theme come out, you will need to figure out what you changed, save it, update the theme and then re-merge your changes.

See the documents on how to set up a sub-theme.

As to why your CSS change did not take effect, these are some possibilities:

• First, your rule was added, but is being overridden by a more specific rule. Inspect the element and see if the rule shows up but it's red lined. A quick hack is to just add !important to your rule. This should make it most specific, unless someone else added it to their rule.
  The best way would be to get SASS/compass set up, find where the .site-name is themed in the SASS files, change it there, and rebuild the CSS with Compass.

• If it's not a CSS rule thing, it might be an external caching system. First, I assume you did a FULL reload of the page (Generally Shift F5) to clear the local browser cache.

• Next, did you set up Varnish with your site? If so, you might need to clear the Varnish cache, or set up some rules so that logged-in users don't use cache.

• Are you using something like Cloudflare? This can also cache CSS. You can check for external caching by using Chrome's Network tab (inspect something on the page or select the Network tab). Look for the CSS file that you modified, click on it, then check the headers. See if there are any tags like CF-xx or X-varnish with values like hit or miss. (A hit means it was served from cache).

That said, while you are developing a site, you probably want to do what you did:

• Turn off all aggregation
• Turn off caching (Config -> Devel-> performance)

This might seem a bit daunting but it's really not.