Szablon "uniwersalny" - podmiana nagłówka

Dzisiaj w propozycjach zauważyłam taką: "(...) uniwersalne szablony z możliwością dodania własnego nagłówka" z przykładem tego szablonu - Alien in mir. Nie wiem, czemu dopiero teraz to zobaczyłam, bo propozycja była jeszcze z marca, ale lepiej później, niż wcale, prawda? Dlatego dzisiaj ta prosta, mam nadzieję, instrukcja - ode mnie.

UWAGA: Poniższe wskazówki zadziałają na pewno w szablonach, które dodaję tutaj ja. Tyler często ogranicza się do samego tekstu, który ustawia na stylach, css i htmlu, jako nagłówka. A gdy już doda obraz, to nie daję głowy, że się w jej htmlowskich wariacjach odnajdziecie (: Zawsze jednak warto próbować, c'nie?

Weźmy dziś na tapetę jednak nie Alien in mir, a Fairy tale, gdzie jest podobna sytuacja. Jak widzimy, każdy nagłówek ma swoją wysokość i szerokość, której na blogu, klikając w obrazek, raczej nie znajdziecie. Najwygodniej byłoby podmienić obrazek dokładnie z tymi samymi wymiarami, ale przecież można się pobawić. Ale od początku.

Po wczytaniu i zapisaniu szablonu na swojego bloga wędrujemy w kod HTML, szukając na samym początku cześci z <b:skin>. Klikamy i rozsuwa nam się wszyyystko.

Odszukujemy czegoś takiego [w przypadku tego szablonu, ofc.]:

#Header1 {

background-image: url(http://wanilijowa.strefa.pl/Graphical%20Thoughts/header%20-%20fairy%20tale.jpg);

width: 537px;

height: 269px;

border-top: solid 5px #ffffff;

border-bottom: solid 5px #ffffff;

margin-bottom: -30px;

}

Jeśli tylko w moich szablonach jest obraz, który dałoby się podmienić na swój własny, to zawsze wrzucam go w #Header1. Pod tym hasłem znajduje się raczej wszystko, co dotyczy nagłówka. Tutaj też znajdujemy dane o wymiarach. Jeżeli Twój nagłówek ma takie same wymiary (głównie chodzi o szerokość), to za czerwony link podstawiasz link do własnego nagłówka. Zapisujesz i cieszysz się swoim nagłówkiem.

Sprawa nieco się komplikuje, jeśli nowy obraz jest węższy lub szerszy. W tym wypadku musisz podmienić nie tylko czerwony link, ale również pomarańczowe wartości na te nowe, własne. Jeśli to zrobiłeś odnajdź w kodzie coś takiego: 

.main-inner .column-center-inner {
width: 537px;
padding: 0px;
background: #ffffff;
padding-bottom: 20px;
font: normal 10px Tahoma;
}

Widzimy, że ta wartość jest taka sama, jak tamta poprzednio i to jest jednocześnie szerokość naszej kolumny głównej, nad którą jest nagłówek. Pomarańczową wartość (width) zmieniamy na tę samą, jak poprzednio, czyli szerokość naszego nowego nagłówka. 

W ten sposób możemy podmienić nagłówek, w jak najmniejszym stopniu ingerując w ogólną budowę szablonu. Oczywiście, należy pamiętać, że w przypadku bocznych kolumn musimy dodatkowo uważać, żeby szablon za bardzo się nie rozjechał lub kolumny nie zaczęły nachodzić na siebie nawzajem. W razie pytań, piszcie :)

Buziaki!