How to change new icon from css box to image?

In your main css file, sub-section 10.1, change:

div.icon {
    float: left;
    margin-top: 0.1em;
    margin-left: 0.2em;
    display: block;
    border-width: 0.6em 0.6em 0.6em 0.6em;
    border-style: solid;
}

to:

div.icon {
    float: left;
    display: block;
    width:(width of icon in pixels);
    height:(height of icon in pixels);
}

In your imported sheet, foo_cs.css, sub-section 5, change:

div.icon {
    border-color: #e6e6e6 #dedede #dadada #e2e2e2;
}

to:

div.icon {
    background:transparent url(path_to_icon_image);
}

That should do the trick.

You can change the CSS generated images to a standard icon images (eg. a .gif) by making changes to both main.css and your specific CSS sheet but how/when those images change is buried in the PunBB scripts themselves.

Hi, ive done as suggested though my new post icon images are not being displayed (just a blank area where they should be), ive tested the url and that appears to work. Anyideas?

Cheers!

div.icon {
    background:transparent url(uksapa/post2.gif);
}

Is what ive used, all my bg images etc work fine in the css file? the folder with images in is located in styles/imports/uksapa/,  ive even tried displaying an image that I know works fine from css file. Strange.

Right, it appears to be the box perhaps? if I change it to:

div.icon {
    BACKGROUND-COLOR: #000000;
}

still does not work.