Trendy Theme Banner

[Jax]

I'm using the trendy theme and would like to add a top banner. Should I edit my template style.css and if so, how?

I'm not new at Serendipity, I just don't have great coding skills.

Thanks

[yellowled]

I'm using the trendy theme and would like to add a top banner. Should I edit my template style.css and if so, how?

I assume you already have a banner image in mind. Upload it to /templates/mt-trendy/img/. Let's assume you called it 'banner.jpg'. Edit /templates/mt-trendy/style.css:

Code: Select all

#serendipity_banner {
   [...]
   background: url(img/banner.jpg) top left no-repeat;
}

If that already works for you, great.

If it doesn't, you can tweak the position of the banner. Take a look at the statements after the image in brackets. The first one is the horizontal alignment of the image (possible values: left, center, right), the second is vertical (top, center, bottom), and the last one is repetition (useful for seamless wallpapers; possible values: repeat, repeat-x, repeat-y, no-repeat). Since you seem to want to use a 'real' banner (i.e. not a seamless wallpaper), you probably want to leave this at 'no-repeat'.

YL

[Jax]

Thanks for the repsonse. I'm still not able to get it working. Perhaps it's my poor coding skills. Does something need to be in the brackets I.E. [...]?

[judebert]

Yes. That meant to find the entry that looks like #serendipity_banner, if it exists, and add the "background {blah blah blah}" line at the bottom. The brackets "[...]" were meant to indicate the existing contents.

This should get you an image. It might not be the size you want. You can also add "height: 60px;" and "width: 100%;" or similar values, if they don't already exist.

If you'd like an introduction to CSS, I recommend Google, as there are lots of them out there. If you prefer to experiment, that's fine too, and we'll help out as much as we can; but you might want to find a CSS forum where they can answer your CSS-related questions better than we can.

[yellowled]

That meant to find the entry that looks like #serendipity_banner, if it exists, and add the "background {blah blah blah}" line at the bottom. The brackets "[...]" were meant to indicate the existing contents.

Right. It does already exist, just for the record.

I really have to remind myself to be more verbose on stuff like that, sorry. Until I manage to do so, I'll just rely on Jude to be my personal reminder

If this is really just about adding a header image to mt-trendy, we can probably coach you through that here, but some information on the image (dimensions) you have in mind could be useful.

YL

[Timbalu]

Thanks for the repsonse. I'm still not able to get it working. Perhaps it's my poor coding skills. Does something need to be in the brackets I.E. [...]?

no, but here:

Code: Select all

	background: url({TEMPLATE_PATH}img/banner.jpg) top left no-repeat;

[yellowled]

no, but here:

Code: Select all

	background: url({TEMPLATE_PATH}img/banner.jpg) top left no-repeat;

You're right, that does the trick (at least in my test blog). Which is pretty confusing, since sometime this works, sometimes it doesn't. Hmhm.

YL

[Timbalu]

well, it depends where you uploaded you image exactly ...
and try the default template image path too....

Ian

[yellowled]

No, that's not my point. I think I recall having to use the method without the {TEMPLATE_PATH}, and as far as I remember, it was in case the style had an extra stylesheet besides style.css.

YL