tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

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ń