How can i replace text into an image (the titles of plugins?

[bailey87]

the titles of plugins (like Calendar, Search, Archives) are fonts but i would like to replace them with images ( because i want to use a special font)


sorry for bad english but i am from germany*g*

[garvinhicking]

You can do that via CSS. All the sidebar plugins extensively use classes:

.serendipitySideBarItem
.container_serendipity_archives_plugin
.serendipitySideBarTitle
.serendipity_archives_plugin
.serendipitySideBarContent

Those can all be used to assign CSS properties like "background-image" and all for use of images. You can look through the "Who's using" section of www.s9y.org, several sites make that. http://blog.temple-du-argh.net/ for example customizes much of that.

For more information on this, you might want to look at a CSS/HTML forum, since this is nothing specific to Serendipity.

HTH,
Garvin

[bailey87]

no evenly not ... i can´t find these classes in the style.css except these:

.serendipitySideBarItem
.serendipitySideBarTitle
.serendipitySideBarContent


but i need particularly the classes for:

search
archives
categories
blog abonnement

[garvinhicking]

You must look in the HTML code of your blog, not within the style.css

There are many CSS classes that are not defined in the default stylesheet. But for your own customization you can add those.

EVERY sidebar plugin has it's own unique container. At least in the default serendipity Theme. Kubrick might not have that, for that you'll need to edit the sidebar.tpl file and make it look like the one from the default template.

Hope that helps.

Best regards,
Garvin

[Guest]

You must look in the HTML code of your blog, not within the style.css

There are many CSS classes that are not defined in the default stylesheet. But for your own customization you can add those.

EVERY sidebar plugin has it's own unique container. At least in the default serendipity Theme. Kubrick might not have that, for that you'll need to edit the sidebar.tpl file and make it look like the one from the default template.

Hope that helps.

Best regards,
Garvin

i have seen you are from germany , remagen hey cool , i am from ahrweiler:)

in german:
du bist ja aus remagen cool ich bin von ahrweiler:) ich meld mich mal per icq bei dir...hoffe du kannst mir weiterhelfen! brauche nämlich dringend hilfe!

[bailey87]

i was the guest!

[bailey87]

can somebody else help me? garvinhicking is offline

[Col. Kurtz]

garvin is online most of the day. at least from time to time. send him a message over this board and youll get the reply tomorrow.

[judebert]

This technique is called "image replacement". A Google search on the term will yield several results, including:
http://www.kryogenix.org/code/browser/lir/
http://www.stopdesign.com/articles/replace_text/

Notice that the examples use a div ID, not a div CLASS. This is to distinguish a particular chunk of text from any other. Each text item must be individually distinguishable, or you'll wind up using the same image for all of them. Your sidebars may not be individually distinguishable. Examine your HTML. If this is the case, you'll need to modify your template's sidebar.tpl file to more closely match the default's sidebar.tpl, which allows each sidebar to have a unique class.

Then you'll need to modify your template's styles.css to use one of the image replacement techniques on each of the sidebar IDs (or uniquely identifiable classes). Then the text should be replaced as expected.