Setting images within CSS

Hyperdelicious · #1 11-24-2002, 10:16 AM

===============================================

How do you set images in CSS... for instance I created a gif for bulleted
lists and I would like to use CSS to replace the bullet with the gif...

Code:

LI {
	list-style-image : url({$ImagesDir}/li_bullet.gif);
	vertical-align : middle;
	color : #40445E;
	font-weight : bold;
}

However this does not appear to work with x-cart... I'm thinking it has
something to do with these{ }... any ideas?

--------------------------------------------------------THANKS-------------------

HYPERDELICIOUS
===============================================
===============================================

tmx · #2 11-24-2002, 10:57 AM

Are you putting it into the tpl your using it in or did you put it in the CSS file that x-cart already has? If your using it in the tpl you could also try putting {literl} {/literal} in the beginning and end.

Hyperdelicious · #3 11-24-2002, 11:04 AM

===============================================

I placed the following code into skin1.css... therefore I am editing the
Style Sheet x-cart came with...

Code:

LI { 
   list-style-image : url({$ImagesDir}/li_bullet.gif); 
   vertical-align : middle; 
   color : #40445E; 
   font-weight : bold; 
}

any ideas... how to get this to work?

--------------------------------------------------------THANKS-------------------

HYPERDELICIOUS
===============================================
===============================================

shan · #4 11-24-2002, 11:14 AM

I would imagine that you would have to use the full url to the bullet image.

Quote:

LI {
list-style-image : url(http://www.yoursite.com/xcart/skin1/images/li_bullet.gif);
vertical-align : middle;
color : #40445E;
font-weight : bold;
}

See if that works

tmx · #5 11-24-2002, 11:16 AM

Try this, Put this into your CSS File...

Code:

ul { list-style-image: url("li_bullet.gif"); }

And then to list set it up like so...

Code:

<ul>[*]Your text[/list]

Hyperdelicious · #6 11-24-2002, 11:32 AM

===============================================

Thanks Shan, I had tried the absolute URL and it did not work... but
checking your code against mine I realized I forgot a '/ '

... my
code actually looked like this...

Code:

http://www.mysite.com/xcart/skin1/imagesil_bullet.gif

Human error... anyway do you think it will screw with the SSL key since
the image is being pulled from http:// rather than https://? If so do you
think I should change the URL of the image to https://?

-------------------------------------------------------THANKS--------------------

HYPERDELICIOUS
===============================================
===============================================

shan · #7 11-24-2002, 12:45 PM

yeh, just set it from hte https sever and it will be fine for both then

Hyperdelicious · #8 11-24-2002, 12:51 PM

===============================================

Thanks again Shan... I appreciate your help/advice.

--------------------------------------------------------------THANKS-------------

HYPERDELICIOUS
===============================================
===============================================
[/b]

funkydunk · #9 11-28-2002, 10:34 PM

If you set the url as relative to the skin1.css file this will work.

ie.

LI {
list-style-image : url(images/li_bullet.gif);
vertical-align : middle;
color : #40445E;
font-weight : bold;
}