1. Home
  2. Development
  3. Import css inside custom.css

Import css inside custom.css

thumbnail
1570221, modified 17 Years ago.
Import css inside custom.css
Junior Member Posts: 57 Join Date: 11/12/08 Recent Posts
Hello again

Is there a way to import css files in the custom.css?

I know that the existance of custom.css is to help to have the overides organized and clean but its somekind hard to move between open documents and firebug in order to copy paste the things u need to overide.

So i thought why not to import the already named and grouped css the classic theme has and just make the changes on them.

I created a custom.css in _diffs folder with a subfolder in it with the name customCSS and duplicated all the default css files. I imported em in the custom.css file and started to making changes. Although in the html file (from the viewdesigner plugin) I can c all my changes when i deploy the war its like there r is no css at all.

I've checked the links etc. and everything is ok.

I've typed a rule after the imports for test and it worked (I was just changing the color of the body but it did work) but it keeps ignoring the imports.

Does anyone knows if I have to create a particulare structure for the folders?
Do I have to put a specific order in the imports? (I've imported the css file the same way the main.css imports the defaults).
And finally is it possible or I am trying for no reason? emoticon

Thanx for any help or suggestion.

P.S. If there is already a same post like mine and I didn't c it pls just point me there and I'll read it.
thumbnail
1395288, modified 17 Years ago.
RE: Import css inside custom.css
Liferay Legend Posts: 2047 Join Date: 10/7/08 Recent Posts
Your import statement should look like:

@import url(customCSS/file.css);


There was an issue with relative URLs (LPS-1800). What version of Liferay are you running?
thumbnail
1570221, modified 17 Years ago.
RE: Import css inside custom.css
Junior Member Posts: 57 Join Date: 11/12/08 Recent Posts
Thanx for the reply

I am using 5.2.1 and yes the import statement looks the same like the one u wrote.
Chris Simmons, modified 14 Years ago.
RE: Import css inside custom.css
New Member Post: 1 Join Date: 12/8/11 Recent Posts
Using 6.0.1 -

I'm having the same issue. I've put my CSS imports everywhere thinking maybe it was just a IDE issue but no dice. It is showing some very weird results when I deploy my theme also. Just a quick download of what i'm doing... 4 custom color schemes for my theme. Purpose is so that the user can associated each page with a specific color. I have a small bit of override CSS in the following files (just as the documentation for custom color schemes instructs).
@import url(color_schemes/blue.css);
@import url(color_schemes/purple.css);
@import url(color_schemes/orange.css);
@import url(color_schemes/green.css);

When i deploy, I either get default theme only or for some reason one of the color-scheme files (usually green.css) overrides all others.

I have tried putting the imports and actual CSS right into the _diffs/css/custom.css file, right into the css/custom.css file, I made a _diffs/css/main.css file and even put directly into the css/main. Frustrating. Please assist.
thumbnail
Kravchenko Dmitry, modified 12 Years ago.
RE: Import css inside custom.css
Regular Member Posts: 139 Join Date: 10/4/10 Recent Posts
Have anybody solve the problem?

My CSS imports also just do not work.

The beginning of my `custom.css` file looks following:

@import "compass";

@import url(fonts.css);

@import url(custom_common.css);

@import url(journal-content-article.css);

@import url(color_schemes/green.css);

@import url(color_schemes/orange.css);

Unfortuantely, I see no signs of (for example) `fonts.css` in Chrome Developer tools.
Richard Lee, modified 12 Years ago.
RE: Import css inside custom.css
Junior Member Posts: 28 Join Date: 1/19/11 Recent Posts
Kravchenko Dmitry:
Have anybody solve the problem?

My CSS imports also just do not work.

The beginning of my `custom.css` file looks following:

@import "compass";

@import url(fonts.css);

@import url(custom_common.css);

@import url(journal-content-article.css);

@import url(color_schemes/green.css);

@import url(color_schemes/orange.css);

Unfortuantely, I see no signs of (for example) `fonts.css` in Chrome Developer tools.


Is color_shemes folder within the _diff/css/ folder or at same level? The above *should* work if color_schemes is within css folder along with custom.css
thumbnail
Kravchenko Dmitry, modified 12 Years ago.
RE: Import css inside custom.css
Regular Member Posts: 139 Join Date: 10/4/10 Recent Posts
What is "customCSS" in your code? A folder name or what?