Where do I link images to in CSS? Confused

70 Posts

silverman63 Reply #1, 19 years ago

Hi guys, I’m just wondering what my URLs should be in my CSS for my images. I’ve tried the images folder, and the folder where I’m keeping the CSS, but I think I’m just not writing the right code in. I don’t know exactly where the base path is, nor do I really understand that.

All help appreciated!

4,205 Posts

dev_cw Reply #2, 19 years ago

The images are relative in reference to the actual css file not the modx document.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

☆ A M B ☆
721 Posts

rx2 Reply #3, 19 years ago

I make all my paths site root relative by starting each path with a forward slash such as:

background: #000 url(/assets/images/backgrounds/butterfly.jpg) no-repeat center -15px;

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 19 years ago

That is one way to do it, although it is not a relative path and can cause problems if the site is moved for any reason.

I prefer to have all template-specific images in a folder in my template’s folder (assets/templates/templatename/images). Then, if my .css file is in that template’s folder as well, any image links in the .css file would simply be url(images/image.jpg), or if the .css file is in a folder itself such as assets/templates/templatename/css, url(../images/image.jpg), relative to the .css file itself.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

☆ A M B ☆
721 Posts

rx2 Reply #5, 19 years ago

Quote from: sottwell at Oct 13, 2007, 12:31 AM

That is one way to do it, although it is not a relative path and can cause problems if the site is moved for any reason.

It’s relative to the site root actually so if you move the site, just maintain the folder structure, but this is true of either solution of course.

70 Posts

silverman63 Reply #6, 19 years ago

Hey guys, thanks for all the replies! I’ve fixed it, but now I’ve gotten to another problem.

Now, my menu is really strange. How do I get my wayfinder to use no css (or basically just use css I had in the css class/div for my menu before)?

☆ A M B ☆
721 Posts

rx2 Reply #7, 19 years ago

Quote from: latedude32 at Oct 13, 2007, 08:12 PM

Hey guys, thanks for all the replies! I’ve fixed it, but now I’ve gotten to another problem.

Now, my menu is really strange. How do I get my wayfinder to use no css (or basically just use css I had in the css class/div for my menu before)?

You can look at the source code that is generated and reshape you CSS accordingly or you can link to an external file or chunk to dictate how the code built by the Wayfinder is created. See the MuddyDogPaws.com or the Wiki for examples. It really depends on how you code and style, because we all have our preferences. For my latest site I use the default active class that the Wayfinder automatically creates to style the appearance of a menu item that is currently selected but I also need to remove a background image from the first item in the list.

I use this as my Wayfinder call:

[!Wayfinder?&config=`sitemainmenu`&startId=`[*Parent*]!]

The sitemainmenu code is some php code you can place in assets/snippets/wayfinder/configs (there are some other configuration files you can look at there.)

<?php

	$firstClass = 'first';
	$lastClass = '';
	$hereTpl = '';
        $level = '1';
	
	$outerTpl = '@CODE:<ul id="mainnav">[+wf.wrapper+]</ul>';
	
	$rowTpl = '@CODE:<li [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>';

?>

In my CSS, I style ul#mainav of course, using also the first class and the active class. There is a lot of flexibility and of course, far more options depending on how you want to style your menu. I’m just beginning to understand it myself.