background color in skin-thesis.css overwritten

[CindyPoole]

I have changed some colors in skin-thesis.css as follows:

.block-views-promoted-cards-block, .bluebg {
	/* background-color: #2c3e66; */
}

.l-bottom {  background: #99BADC;}

.l-footer {
	text-align: center;
        font-size: .85rem;
	border-top: 1px #2c3e66 solid;
	margin: 0;
	padding: 0;
}

But after clearing the cache, each time in the browser window they appear black. Using Firefox Dev console, it's showing the css code has actually been changed to #000000. But in the actual file, it remains the original colors as defined above.

.block-views-promoted-cards-block, .bluebg {
	/* background-color: #000000; */
}

.l-bottom {  background: #000000;}

.l-footer {
	text-align: center;
        font-size: .85rem;
	border-top: 1px #000000 solid;
	margin: 0;
	padding: 0;
}

Has anyone come across this before? It's not just Firefox, when I preview the site in Safari the areas are showing black there too, so it appears to be changing all my colors to black when processing the css file.

[olafgrabienski]

Thanks for your report, and welcome to Backdrop on Github!

I hadn't come across the issue before, but was able to reproduce it, experimenting with the Color settings of the theme. Have you maybe changed some Color settings before you encountered the issue?

When I changed the "Footer Border" color in the Thesis theme settings (admin/appearance/settings/thesis) to black, I noticed the behavior you describe. Some elements (not only the footer border) became black, and in the browser dev tool I get the notion that the color values in skin-thesis.css were changed to #000000. That's however not the case, the CSS file is the same as before.

So far, I don't have an explanation for this odd behavior. I even wasn't able to reverse the unwanted color change by resetting the theme colors. In this situation, the only way to make the actual colors from skin-thesis.css visible again, was to disable the Color module. (Would this work for you as a temporary workaround?)

[olafgrabienski]

There is a Backdrop core issue regarding color settings of sub-themes. Not sure, but it might be related: backdrop/backdrop-issues#4463

[argiepiano]

I've been able to reproduce following these steps:

• Enable Thesis. Be sure color.module is enabled
• Modify skin-thesis.css as suggested by the OP

Visit the front page - everything is fine, the css classes in skin-thesis.css are applied correctly.

• Visit admin/appearance/settings/thesis and choose a different preset color set
• Visit the front page. Inspect the footer. The color for the css classes changes to #000000 as stated by the OP
• Visit admin/appearance/settings/thesis again, and choose back to Basis (default) color set. Clear caches
• Visit the front page. The color remains changed to #000000.

So, at this point, there doesn't seem to be a way to change that back to the definition in skin-thesis.css. The only way is to disable color.module.

So, if you can, disable that module, and then the theme will use the colors correctly.

As a sidenote: the Color module actively rewrites the cached css files for the site. Those files are stored in files/color/thesis-XXXX. Every time the caches are cleared a new version of those css files is created, and stored in a new folder. skin-thesis.css is among the rewritten files, since it's found in the css folder of the theme. Although the color for l-footer is not supposed to be rewritten, what happens is that the color for that class is run through _color_shift(), which results in it being modified to #000000. I'm not sure if this is intentional, or if it's a bug.

[argiepiano]

I have found another workaround that allows to keep Color enabled (in case you are using for other elements), BUT it also respects the overrides you made in thesis-skin.css.

1. In your installation folder, head to core/themes/basis
2. Find the folder color with its content (it contains color.inc)
3. Put a copy of that entire folder inside themes/thesis. So the folder color and its content should be found at themes/thesis/color

@olafgrabienski: this is a simple change to the theme that will assure other people won't run into this problem.

So, I think this is what's happening.

• The module Color looks for a file called color.inc in the Thesis theme folder. Color needs this file to build a configuration file called thesis.settings.json which contains a list of the css files to be rewritten
• Since Color doesn't find it (because the theme Thesis doesn't provide one), it builds thesis.settings.json from scratch AND adds ALL css files it can find in the Thesis theme's css folder, including skin-thesis.css!
• This means that in this situation, the file skin-thesis.css is added to that config file, meaning that Color will REWRITE all colors in skin-thesis.css

By adding Basis' color.inc to the theme Thesis theme, we are telling Color to ONLY use the files listed in that file when creating thesis.settings.json. This means that skin-thesis.css will never be included in that list, and therefore those colors will never be rewritten.

[olafgrabienski]

@argiepiano Many thanks for confirming the issue and for your instructive findings. I'll test the workaround as soon as possible.

1. In your installation folder, head to core/themes/thesis

Probably just a typo, I guess it should be core/themes/basis.

[argiepiano]

Probably just a typo, I guess it should be core/themes/basis.

Yes! I'll fix

[CindyPoole]

@argiepiano Thank you so much! I have placed a copy of the color folder into the thesis folder, and everything is working as it should now. Your help is very much appreciated.