images in CSS

Aries-Belgium

New member
Joined
Jul 11, 2012
Messages
4
I'm trying to create a custom DirectAdmin skin - using the default Enhanced skin for the structure - based on an general admin template bought from ThemeForest. The structure of the template looks a bit like this:
Code:
css/
css/style.css
css/tables.css
css/...
images/
images/bg.jpg
images/image1.png
images/...

I've changed the CSS_STYLE token in files_user.conf to point to css/style.css and linked my CSS in the header like this:
Code:
<link href="CSS_STYLE" rel="stylesheet" type="text/css" />

Main style features like font sizes seem to be working but images aren't. The template references the image using a relative path. Like this for instance:
Code:
body { background-image: url(../images/bg.jpg);

In normal conditions this should work as that's the correct relative path to the image starting from the stylesheet. But it isn't working on DirectAdmin for some reason.

Also, in the main stylesheet it imports other stylesheets using the @import statement. Like this:
Code:
@import "tables.css";
@import "other_style.css";
@import "and_another_style.css";

The other stylesheets are in the same directory as the main stylesheets where they are imported. This also works in normal conditions but doesn't seem to work on DirectAdmin either?
 
You can not use bg.jpg and other images and CSS file in usual way, you should add them into files_custom.conf as

Code:
CSS_CUSTOM_FILE1=css/tables.css
CSS_CUSTOM_FILE2=css/other_style.css
CSS_CUSTOM_FILE3=css/and_another_style.css
IMG_CUSTOM_FILE1=images/bg.jpg

and refer to them as

HTML:
body { background-image: url(/IMG_CUSTOM_FILE1);

and

HTML:
@import "/CSS_CUSTOM_FILE1";
@import "/CSS_CUSTOM_FILE2";
@import "/CSS_CUSTOM_FILE3";

or host them on your company site and refer to them as usually with absolute links:
HTML:
body { background-image: url("http://mycompany.com/images/bg.jpg");

HTML:
<link rel='stylesheet' type='text/css' href='http://mycompany.com/css/tables.css'>
<link rel='stylesheet' type='text/css' href='http://mycompany.com/css/other_style.css'>
<link rel='stylesheet' type='text/css' href='http://mycompany.com/css/and_another_style.css'>
 
Thanks, zEitEr!

The CSS has hundreds of images so defining them in the config would be a pain in the ***. Using an external host seems to work fine without needing to change the paths of the images in the CSS. Thanks!
 
Back
Top