Set different images for each category in the node list

[Dodgeboard]

Thank you Dodge. You're probably right but you see you're code clever and I'm not.
So how would I do that?

Not really that code clever...But I'm learning a lot here. To make the graphics have a transparent background, you have to open them in an editor like photoshop or paintshop and delete the background out of it. Paint.net is a program that will do it too and it's free. Ill try and do it for you after a bit if you want me to. Then I'll post them here in a reply.

 

[Dodgeboard]

Morgain,
Here you go.

Just so you know how to do this...

1. Download Paint.net.
2. Open the graphic
3. In Tools, select Magic Wand
4. Click on the white background you wish to delete
5. hit the delete key
6. Gray/white checkered background indicates transparant
7. Repeat until you have all the white background deleted.
8. Play with the Tolerance setting to adjust how color variances are selected

To use these, just reupload them and overwrite your existing pics. The green one, I did not do because it is such a low quality pic that it was difficult to select the background.

 

[Brandon Sheley]

Thanks for this, worked exactly as described
Here are some nice icons I found for free
http://www.instantshift.com/2009/08/19/75-free-useful-icon-sets-for-web-designers-and-developers/
or google "free stock web icons"

 

[Morgain]

Dodge you're a gentleman. Amazing to actually do the images for me - the green one is an ancient favourite going back to 1994!
Wish I could "follow" you as you obviously know a lot but your Profile is barred.

Thank you for excellent advice and when I've slept I'll check out Paint.net

 

[Shelley]

Dodge you're a gentleman. Amazing to actually do the images for me - the green one is an ancient favourite going back to 1994!
Wish I could "follow" you as you obviously know a lot but your Profile is barred.

Thank you for excellent advice and when I've slept I'll check out Paint.net

I'm liking your style. Thought i'd ask if your going to modify the border-bottom/border-top colours for each category so they blend in with the different coloured category's?

 

[Morgain]

Shelley coming from you that was a shock of pleasure as a compliment. Thank you.
I'm not sure on the border colour - the gold colour looks quite good right now with the pale yellow background.
However I would like to try your suggestion to see how it looks and also find out how to do it.
Do I put something in EXTRA.css ?

Dodge the paint.net program doesn't offer me a choice on where to install it and doesn't show up on add/remove or in C:\ Program files. Will try again on a new computer I'm setting up later. Maybe it dislikes my beloved Win2K!

I have got beautiful results with two of the images you did for me - I downloaded them and r- esaved them as .png files in my editor.
But no 3 and 4 didn't react well to this so they display black backgrounds. Have fiddled for hours trying to correct it. They work fine if I use them as jpg but having 2 out of the set of 5 in a different format is going to cause headaches later on to keep remembering as I reuse these images in other places.
Appealing to your generosity, could you possibly convert the yinyang/ purple one, and the quartered circle/ yellow black one into png for me. My apologies for my lack of skill.

 

[Dodgeboard]

Hmmm.let me try again...

 

[Dodgeboard]

Try these...

 

[Dodgeboard]

Here's the green one. I sharpened it up a bit.

NOTE: Don't use right click to save these. Click on the file NAME first to bring it up in a new window, then save them so they save as PNG's. If you right-click directly from the post, they will save as jpg's.


EDIT: Hold off on this green one- I'm going to try and fix it up a bit....

 

[Dodgeboard]

Try this for the green one...

 

[Morgain]

Finally finally thank you lots.
Dunno WHAT was going on. Even after I used your advice and used the links rather than the image direct it still didnt work. I kept clearing the cache but that didnt fix it. In the end I only made it work by deleting the existing file off the server and uploading it again - it was like overwrite wasn't working just for those two files.

By the way I love your "Forget warm and fuzzy, Xenforo's got me hot and hairy!"

Hot and hairy is how I like men to be ... I just don't get the fashion for smooth men. I have a gorgeous male with hair flowing all down his back, a grand beard like a biblical prophet and all sorts of fuzzy bits elsewhere! After 24 years he is still as hot and fascinating as ever although brushing him out is really hard work. He orders his cowboy boots from somewhere near you off ebay.British boots are crud compared to yours apparently.
Our son is coming along well though at 20 his hairiness is not all here yet.
Roll on albums so we can see more sweet sexy pics of you on your horse.

 

[Morgain]

Jake (or anyone) I have finally got my real active site started but the category icons and title colours are not working.

# I copied over the code from EXTRA.css I used on my test site successfully;

.catImage46
{
    background-image: url('@imagePath/cat-web2.png');
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

# I changed the node number on catImage (code line 1 here)
# imagepath on this site is styles/default
# so I uploaded the graphic cat-web2.png to mysite\xf\styles\default\




Andrej your categories look lovely!

 

[Morgain]

Hmmm think this is an image path problem. Will ask elsewhere about that to see if that fixes it.

 

[Morgain]

(Later) checks so far have not fixed this.

Since transferring my designs to a new install on 1.1 my category bar images don't show up.
I have exactly the same code in EXTRA.css as before (see below)
I have re-uploaded in binary.
Image path is correct.

Here is a sample image - which does display in the browser. Also the mini versions in the same directory all display OK in the sidebar.
Sample:
http://housemorgain.co.uk/circle/styles/default/cat-web2.png

Code in EXTRA.css as used before to make this image show up on the left side of the category gradient bar - this is the blue bar on my site.

.catImage46
{
    background-image: url('@imagePath/cat-web2.png');
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

Only thing I can think of is I moved stuff around in EXTRA.css to make things easier to find. Maybe there's a line at the top there went missing?