Adding a Banner to MT3 - Independence?

Roaster · Post by **Roaster** » Fri Mar 04, 2005 6:57 pm

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

reion · Post by **reion** » Fri Mar 04, 2005 7:34 pm

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

Roaster · Post by **Roaster** » Fri Mar 04, 2005 7:51 pm

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

Roaster · Post by **Roaster** » Fri Mar 04, 2005 11:05 pm

Never mind - I've found a solution!

reion · Post by **reion** » Sat Mar 05, 2005 12:38 am

may you post it ... just for other one's, who maybe have the same question ...

tadpole · Post by **tadpole** » Sat Mar 05, 2005 7:50 am

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;
}

2tails · Post by **2tails** » Wed Mar 09, 2005 11:20 pm

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.

Guest · Post by **Guest** » Wed Mar 09, 2005 11:22 pm

well... nevermind, I guess. At least the url is showing in the browser.