Kombinierte Ansicht Flache Ansicht Baumansicht
Threads [ Zurück | Nächste ]
toggle
Piña Kanpokaldean
Do liferay internal CSS overwrite custom.css?
23. Mai 2013 11:53
Antwort

Piña Kanpokaldean

Rang: Junior Member

Nachrichten: 34

Eintrittsdatum: 14. April 2012

Neue Beiträge

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:

 1input[type="submit"], input[type="button"], input[type="reset"], button {
 2    @include button-default;
 3
 4    &:hover {
 5        @include button-hover;
 6    }
 7
 8    &:focus {
 9        @include button-focus;
10    }
11}
12
13input[type="text"], input[type="password"], input[type="button"], input[type="reset"], select, textarea, .textarea, button, .aui-field-input-text {
14    @include input-field-default;
15}
Anonym
RE: Do liferay internal CSS overwrite custom.css?
23. Mai 2013 11:59
Antwort

Anonym

a file to look at is the main.css

 1
 2/* This is the main CSS that includes other CSS files. */
 3
 4@import url(base.css);
 5
 6@import url(application.css);
 7
 8@import url(layout.css);
 9
10@import url(dockbar.css);
11
12@import url(navigation.css);
13
14@import url(portlet.css);
15
16@import url(forms.css);
17
18@import url(custom.css);


this shows the order of the css files being imported. custom.css css should overwrite all prior css unless there is an !important added to the field.
Piña Kanpokaldean
RE: Do liferay internal CSS overwrite custom.css?
23. Mai 2013 12:08
Antwort

Piña Kanpokaldean

Rang: Junior Member

Nachrichten: 34

Eintrittsdatum: 14. April 2012

Neue Beiträge

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.