poniedziałek, 21 kwietnia 2014

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!

5 komentarzy:

  1. Hahah, dzisiaj się z tym niesamowicie męczyłam, i akurat dodałaś notkę.
    Przypadek? Nie sądzę.
    Pobrałam szablon Walking Travesty i zmieniłam tam właśnie nagłówek ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. To całe szczęście, że wszystko zadziałało (:

      Usuń
  2. Niezmiernie mi miło, że moja propozycja do czegoś się przydała. :)

    OdpowiedzUsuń
  3. Hej :) Pobrałam szablon "Serenade ' na bloga http://konwencjonalna.blogspot.com/ Jest po prostu magiczny, wiosenny, przyjemny i posty. Czegoś takiego szukałam :) Dziękuje!

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler