0

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?

Improve this question
2
  • This is not a place to request tutorials. You have three questions; try to limit each post to one question. That said: 1. Yes it's possible but not recommended. 2. It should be in the CSS folder of the theme you are trying to change (but this depends on whether the theme is using SASS or LESS or something like that). 3. Nothing special about "Bitnami Drupal", it should work the same as Drupal everywhere else. For subthemes, see this documentation easily found by a Google search: drupal.org/docs/8/theming-drupal-8/…
    – Patrick Kenny
    Dec 5, 2017 at 14:39
  • Thanks Patrick. I deleted the third question, which is too broad..., my apologies.
    – xczzhh
    Dec 5, 2017 at 14:46

1 Answer 1

Reset to default
2

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.

Improve this answer
1
  • Thanks CG for the patience. I am a total newbie on this. You said that the best way is set up SASS/Compass. But I am not sure how this could work. I mean, SASS is the preprocessor, while style.css is the ultimate product, so if I updated style.css(under the css directory) directly, it should take effect right? So what I don't understand is when I set up SASS, and produced a css file, where should I put it? How is this any different from update the style.css file directly?
    – xczzhh
    Dec 6, 2017 at 3:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.