[solved] Location of images called from a stylesheet

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
GaryF
New Member
New Member
Posts: 2
Joined: Mon Oct 31, 2011 1:44 am

[solved] Location of images called from a stylesheet

Post by GaryF »

Hi all,
I have been experimenting with CMSMS over past couple of days, and gradually working through converting an experimantal template.

Is there a specific location where the images are placed within the directory structure?
The original CSS calls the images as;
background: url(images/welcome.jpg) no-repeat;

And why is the location/path of the stylesheet (when looking at the HTML code) like this;
<link rel="stylesheet" type="text/css" href="http://xxxxxxxxxxxxxx.com.au/cmsms/tmp/ ... 3b62.css"/>

I can make the images display if I adjust the image paths within the CSS template to;
background: url(../../images/welcome.jpg) no-repeat;
But I don't want to go through the entire CSS and change the paths if I don't have to.

I have installed the current version 1.10

Regards,
Gary
Melbourne
uniqu3

Re: Location of images called from a stylesheet

Post by uniqu3 »

And why is the location/path of the stylesheet (when looking at the HTML code) like this;
<link rel="stylesheet" type="text/css" href="http://xxxxxxxxxxxxxx.com.au/cmsms/tmp/ ... 3b62.css"/>
Stylesheets are cached in a temporary file and saved to /tmp/cache, thats why path looks like that.
Is there a specific location where the images are placed within the directory structure?
No, it is up to you how you prefer it, just make sure your path in stylesheet is correct.
If you look at default themes you will see that /uploads/SomeFolder is used.
I usually prefer same structure to keep my Template files separated from everything else /uploads/SomeTemplateName.

In your stylesheet you can then use background: url #f00 ([[uploads_url]]/SomeTemplateName/some-image.gif);

To make it easier for you, you can also assign your path to a variable on top of stylesheet like

Code: Select all

[[capture assign='my_path']][[uploads_url]]/SomeFolder[[/capture]]

.... thne use it

#some-id {
  background: #f00 url([[$my_path]]/my-image.gif);
}
GaryF
New Member
New Member
Posts: 2
Joined: Mon Oct 31, 2011 1:44 am

Re: Location of images called from a stylesheet

Post by GaryF »

Is there a specific location where the images are placed within the directory structure?
uniqu3 wrote:No, it is up to you how you prefer it, just make sure your path in stylesheet is correct.
If you look at default themes you will see that /uploads/SomeFolder is used.
I usually prefer same structure to keep my Template files separated from everything else /uploads/SomeTemplateName.

In your stylesheet you can then use background: url #f00 ([[uploads_url]]/SomeTemplateName/some-image.gif);

To make it easier for you, you can also assign your path to a variable on top of stylesheet like

Code: Select all

[[capture assign='my_path']][[uploads_url]]/SomeFolder[[/capture]]

.... thne use it

#some-id {
  background: #f00 url([[$my_path]]/my-image.gif);
}
I didn't see reference to "[[capture assign]] [[/capture]]" within the docs which I read. Thanks, Works now.

Gary ;)
Post Reply

Return to “Layout and Design (CSS & HTML)”