CSS and icons

[Ferdinand Soethe <sa...@soethe.net>]

I'm trying to implement custom bullets in my Forrest site with the
following CSS-style.

  p.instruction {}
    display: list-item;  // makes a simple p display like a list
    list-style: url(checkmark.png) circle;
  }

Now my problem is that I'm not sure where to place the image so that
it gets copied and to referenced properly.

Other images I see in the style seem to come from the skin
configuration (which is not what I want).

Is there a place in the content-branch of my forrest-tree that is
meant to take images that are to be copied and referenced from
style-sheets?

--
Ferdinand Soethe

Re[3]: CSS and icons

[Ferdinand Soethe <sa...@soethe.net>]

I finally got my CSS-Icons to work:

0. I'm using Forrest 0.6

1. I placed my icon as suggested in \src\documentation\resources\images
   and found that Forrest will not copy that file to the build
   directory.

   Neither will placing it in xdocs\images get me a copy.

   Only placing my icon-file in content\images will get me the file
   into the build-branch where the style can find it.

2. Then I played with EditCSS long enough to have my faq-instructions
   show as a bulleted list item with my checkmark as a bullet with this
   instruction places in the <extra-css>-element in skinconf.xml:

> p.instruction {
>   display: list-item;
>   list-style-image: url('../images/checkmark.png');
>   list-style-position: outside;
>   margin-left: 2em;
> }

The addressing here needs to step up one directory from where the
CSS-stylesheets are (..) and then go down into the images-directory.

This way it seems to work with pages anywhere and for local browsing
as well as using jetty.

I'd appreciate your comments if this is good practice or did I miss a
much easier way to accomplish this?

--
Ferdinand Soethe