Using images in sidebar

[Branny]

Basically what I would like to do is change the headers of the sidebar (like Archives, Categories and Links) into images (barcode font) - I've been playing around with the serendipity_sidebar_items but I can't seem to make it work. Does anyone have any thoughts on how I can get it to work?

Thanks

Branny

http://www.gemstonedeva.com/serendipity/

[garvinhicking]

I have seen several s9y blogs which do that easily with CSS code.

One example is http://blog.temple-du-argh.net/ - look at his CSS to understand what he did. And you might want to browse the "Who is using" section on our wiki to see other s9y blogs; some surely have replaced the links with complete graphics!

Regards,
Garvin

[Martin]

<not really answering the question>

Well, I know that using the

Code: Select all

.serendipitySideBarTitle
background-image: url('templates/blogNew/img/sideBarHeader.png');

will give you a background image, so I'd imagine that what you'd have to do is somehow stop the same class from calling the text at all. and then make a class for each and every plugin you want to have a header.

Also I'm not sure how to make the plugin call the correct class...

Any CSS-wiz'es out there?

Edit: Oh, and Garvin: That link still has the text and most probably uses the same code as I do. (Referenced above) The text renders on top of the background image.

-m

[Branny]

I have seen several s9y blogs which do that easily with CSS code.

Hi Garvin,

That's not exactly what I'm looking for... I don't want to change the bg of the sidebar, I want to replace the title -- defined in serendipity_plugin_api.php as: <H3>$Title</H3> by an image...

I guess it would take some tweaking of the serendipity_plugin_api.php file, but I'm not quite sure where to start.

Thanks,
Branny

[garvinhicking]

You can use the background-image stuff. Just push the original text outside of the container:

Code: Select all

.serendipitySidebarItem h3 {
 display: none;
}

(Not tested, but this is basically the way. Just hide the h3 element and put the background images in the parent container.

Tweak youre template's "sidebar.tpl", if you want to make it in HTML.

Regards,
Garvin