Using images in sidebar

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Branny

Using images in sidebar

Post by Branny » Thu Aug 25, 2005 3:43 pm

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/

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

Re: Using images in sidebar

Post by garvinhicking » Thu Aug 25, 2005 7:34 pm

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
# 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/

User avatar
Martin
Regular
Posts: 90
Joined: Mon Sep 27, 2004 1:30 am
Location: Oslo
Contact:

Post by Martin » Thu Aug 25, 2005 9:42 pm

<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

Re: Using images in sidebar

Post by Branny » Thu Aug 25, 2005 9:55 pm

garvinhicking wrote: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

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

Re: Using images in sidebar

Post by garvinhicking » Fri Aug 26, 2005 3:04 pm

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
# 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/

User avatar
RobA
Regular
Posts: 317
Joined: Wed Apr 27, 2005 5:11 pm
Contact:

Post by RobA » Mon Aug 29, 2005 7:57 pm

Another option would be to use PHP and generate them dynamically.

I give the code to do this in this post:

http://www.s9y.org/forums/viewtopic.php?t=2417

It relies on having GD.

This would require an edit of the sidebar.tpl in your theme...

Change the line:

Code: Select all

        {if $item.title != ""}<h3 class="serendipitySideBarTitle {$item.class}">{$item.title}</h3>{/if}


to something like (untested):

Code: Select all

        {if $item.title != ""}<h3 class="serendipitySideBarTitle {$item.class}"><img src="http://path/to/my/file/image.php?text={$item.title}&px=12" alt="{$item.title}" border="0"></h3>{/if}



and some playing with the style.css definition of serendipitySideBarTitle.

Drop me a line if you need assistance.

-Rob A>

Post Reply