Do liferay internal CSS overwrite custom.css?

[Piña Kanpokaldean, geändert vor 10 Jahren.]

Hi,

I'll start by saying that I'm usually backend oriented, so my knowledge of liferay themes and CSS in general is a bit limited, but I found myself in a positon where I have to deal with it and I've realized something that defies my understanding of how it works, so hopefully someone can point me to a place where I can instruct myself on this matter.

The situation is the following: I need to implement some pages made by a freelance designer, which are on plain html and css. As wonderfull as it would be to ask them on a liferay-friendly way, already separated on each file for the theme, I'm in no position to ask for that. And the css is prone to change, so I can't divide it myself either, it would be too time consuming. As a result, I pretty much copy-pasted the css on the custom.css file of our theme: as far as I know, the custom.css is the final file to be applied and overrides anything else on the other files, so the only trouble would be overriding some default liferay class for a default portlet. "Luckily", we don't use many of those, so problem solved, right?

Well, no. The input buttons should be blue as per design, and they're specified like that on the css. It made me go nuts, and I finally pinpointed a couple lines on the forms.css of the theme as responsible. By responsible I mean that, if I remove them, the buttons will (finally!) be blue. However, this means the custom.css was being overriden by forms.css, correct? I thought that wasn't supposed to happen. Wouldn't this mean that other areas of the custom css may be being overriden as well? Which would explain some other abnormal behaviour I've noticed on my test server.

Can someone please explain, or link to an explanation, of how this overriding actually works, and hopefully how I can avoid it? I'd rather avoid inheriting from the unstyled theme, but I'll do it if that's the only way.

Thanks in advance.

BTW, I'm using liferay 6.1, inheriting from _styled and the offending lines on forms.css are:

input[type="submit"], input[type="button"], input[type="reset"], button {
	@include button-default;

	&:hover {
		@include button-hover;
	}

	&:focus {
		@include button-focus;
	}
}

input[type="text"], input[type="password"], input[type="button"], input[type="reset"], select, textarea, .textarea, button, .aui-field-input-text {
	@include input-field-default;
}

[Piña Kanpokaldean, geändert vor 10 Jahren.]

That is very interesting to know, thanks. I had never heard of the !important.

However, in this case, the only css file I modified (as in, the only one I even put on _diffs folder) is custom. And now forms too, of course. The point is, main.css is left as per the inherited default, which leaves custom.css for last, so as far as I can tell this isn't the issue here.