Page 1 of 1

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

Posted: Wed Dec 07, 2005 1:59 pm
by 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* :-)

Re: How can i replace text into an image (the titles of plug

Posted: Wed Dec 07, 2005 2:32 pm
by 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

Posted: Wed Dec 07, 2005 3:01 pm
by 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

Posted: Wed Dec 07, 2005 3:09 pm
by 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

Posted: Wed Dec 07, 2005 5:10 pm
by Guest
garvinhicking wrote: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!

Posted: Wed Dec 07, 2005 5:11 pm
by bailey87
i was the guest!

Posted: Wed Dec 07, 2005 9:54 pm
by bailey87
can somebody else help me? garvinhicking is offline :(

Posted: Wed Dec 07, 2005 10:26 pm
by 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.

Posted: Wed Dec 07, 2005 10:33 pm
by 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.