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
Adding a Banner to MT3 - Independence?
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
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
-
- Regular
- Posts: 88
- Joined: Fri Oct 08, 2004 6:20 am
- Location: 33°6'4.079" North, 117°3'6.563" West
- Contact:
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. 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.
Then, to get rid of the h1 and h2 elements, do
Code: Select all
h1, h2 { position: absolute; left: -9999px; }
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;
}