Quick tip for those who want gradients in category headers

[Razz]

I have seen quite a few requests for users who want gradients in their category headers.

I have found a simple way of doing it without altering any templates.

Modify your styles and where it asks for the category background colour add this exactly as it is below, but substituting the #000000 for your current colour.

#000000" background="/images/bar.gif

Now make a gradient thats 1 pixel wide and 40 pixels tall and name it bar.gif, upload it to your images directory.

Every page that uses the category headers will now use the gradient also.

One more thing you might like to do is manually edit the Head Insert code and find the "SCROLLBAR-BASE-COLOR:" line, because it shares the category background colour, it will stop working. Just add the colour manually.

e.g.

SCROLLBAR-BASE-COLOR: #000000;

where #000000 is your category background colour.

Sorry if this is a bit vague but im no coder :)

So far i havent found any problems in doing it this way at all.

Hope this has helped someone.

PS. I have attached an example gradient, its not the best of colours but you can easily change it :)

[Razz]

Thought id better quickly mention, I used this method on v2.

Not sure if it would work on previous versions as I have never used any version before v2.

/end disclaimer :)

[Wayne Luke]

If you care at all about your end user and the resources your page uses, you will use a larger graphic. The small one pixel graphics that are repeated like that use a lot more memory.

A 20 X 40 gif will not be much larger and will use less resources on the end users machine.

[fastforward]

Originally posted by wluke
A 20 X 40 gif will not be much larger and will use less resources on the end users machine.
Nice tip wluke.

What about when you use the 1x1 space.gif and stretch it out acrossth while page? Is that safe or is a larger one better? I know that would be no good for gradients but I've got tons of them all over my pages :)

[Wayne Luke]

No.. Just when you use a graphic as a background. The computer has to use CPU cycles and memory to render the graphic over and over.

With the transparent gif you are just stretching it not loading multiple copies to fill an area.