Page 1 of 1

Adding a Banner to MT3 - Independence?

Posted: Fri Mar 04, 2005 6:57 pm
by Roaster
Hi,

I'm quite new on designing/changing themes and would like to start with a ready made theme and change it a little bit.

Using MT3 - Independence I would like to add a banner graphics on the top instead of the static text. This means both captions should be disabled and exchanged by a gif banner.

Where can I start? The style.css seems not to be the one and only place where to make changes, right?
I know CSS (at least a little bit) and how to add a background graphics, but the very first try did show the banner not centered on the page but on the left side.

Perhaps some could point me into the correct direction?

Thx,
Roaster

Posted: Fri Mar 04, 2005 7:34 pm
by reion
hmm ... if you want to change the way, the weblog looks, you need an index.tpl in your template-dir ... like in /templates/mt3-independence/ ... the only thing is, that mt3 is only skinned by css ...


so .. take the index.tpl from /templates/default/ and add the header - save this file in the mt3-independence dir ... i think this should work for you

Posted: Fri Mar 04, 2005 7:51 pm
by Roaster
Hi,
take the index.tpl from /templates/default/ and add the header - save this file in the mt3-independence dir ... i think this should work for you
Not quite - I've tried that already! Do not remember what did not work!

cu,
Roaster

Posted: Fri Mar 04, 2005 11:05 pm
by Roaster
Never mind - I've found a solution! :lol:

Posted: Sat Mar 05, 2005 12:38 am
by reion
may you post it ... just for other one's, who maybe have the same question ...

Posted: Sat Mar 05, 2005 7:50 am
by tadpole
No no no! Odds are pretty good that you should be using CSS for this, as it is presentational. Apply a background image to #serendipity_banner--you'll probably want to use no-repeat for that (background: url(image.png) no-repeat top left;)

Then, to get rid of the h1 and h2 elements, do

Code: Select all

h1, h2 { position: absolute; left: -9999px; }
. Some people prefer a large negative text-indent, but IIRC absolute positioning is better supported.

Using this technique will, of course, make your site more accessible (screen readers, lynx, etc. will work properly) and give you better search engine results.

Code: Select all

#serendipity_banner {
  background: url(image.png) top left no-repeat;
  height: 100px;
}

#serendipity_banner > h1,
#serendipity_banner > h2 {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

Posted: Wed Mar 09, 2005 11:20 pm
by 2tails
But where can we edit the title in the header. When I take away the title text, there is not title in the browser bar.

Posted: Wed Mar 09, 2005 11:22 pm
by Guest
well... nevermind, I guess. At least the url is showing in the browser.