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

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
bailey87
Regular
Posts: 72
Joined: Sun Dec 04, 2005 12:26 pm

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

Post by bailey87 » Wed Dec 07, 2005 1:59 pm

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* :-)

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

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

Post by garvinhicking » Wed Dec 07, 2005 2:32 pm

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

bailey87
Regular
Posts: 72
Joined: Sun Dec 04, 2005 12:26 pm

Post by bailey87 » Wed Dec 07, 2005 3:01 pm

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

User avatar
garvinhicking
Core Developer
Posts: 30020
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post by garvinhicking » Wed Dec 07, 2005 3:09 pm

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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/

Guest

Post by Guest » Wed Dec 07, 2005 5:10 pm

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!

bailey87
Regular
Posts: 72
Joined: Sun Dec 04, 2005 12:26 pm

Post by bailey87 » Wed Dec 07, 2005 5:11 pm

i was the guest!

bailey87
Regular
Posts: 72
Joined: Sun Dec 04, 2005 12:26 pm

Post by bailey87 » Wed Dec 07, 2005 9:54 pm

can somebody else help me? garvinhicking is offline :(

Col. Kurtz
Regular
Posts: 450
Joined: Thu May 26, 2005 10:43 am
Location: Bonn, Germany
Contact:

Post by Col. Kurtz » Wed Dec 07, 2005 10:26 pm

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.
Marc

User avatar
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert » Wed Dec 07, 2005 10:33 pm

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.

Post Reply