Zrób ze mną szablon #2

Witam w drugiej części instruktażu! Jeśli nie zapoznałeś się z częścią pierwszą, to wróć do niej: instrukcje są przystosowane do zrobienia takiego szablonu jak ten, który robię sama. Może się to nie podobać, ale w szkole też na początek każdy uczy się literek ;).  Dziś przejdziemy już do projektanta szablonu, czyli czegoś, co pozwoli nam wykonać dla siebie wymarzonego bloga. Mam też dobre wieści: tym razem będziemy osiągać już jakieś konkretne efekty, a nie tylko przygotowywać bloga! Jesteście gotowi? No to lecimy.

1. Przejście go zaawansowanego trybu edycji szablonu.

Pierwszym, co teraz zrobimy, będzie wejście menadżera. Klikamy w lewym menu bloggera na „Motyw”, a następnie „Dstosuj” (jak na obrazkach). Widok się zmienił. To ten moment, w którym rodzi się w was szabloniarz :D.

Teraz ignorujemy wszelkiego rodzaju opcje i od razu przechodzimy do modułu „Zaawansowane”. W tym momencie zdradzę wam pewien trick, który pomoże wam ograniczyć pisanie kodu (długie kody są niefajne!). W pierwszej kolejności odnajdujemy w drugiej od lewej kolumnie opcje „Tło gadżetów” i wszystkie możliwe kolory zmieniamy tam na przezroczyste.

Gdy wykonamy ten krok, nie będziemy musieli później zwalczać kresek pod tytułami gadżetów ani innych niepotrzebnych głupot. Obramowanie i tło włączymy sobie za pomocą CSS'a, co jest o wiele ciekawsze (możemy np. ustawić obrazek w tle gadżetów lub gradientowe wypełnienia). Naszym kolejnym krokiem będzie teraz zjechanie na sam dół opcji z modułu „Zaawansowane”, a mianowicie: „Dodaj arkusz CSS”. Od teraz wszelkie nasze edycje odbywać się będą w tym nudnym, białym okienku.

2. Ustawianie tła.

Pierwszym co wypadałoby zrobić na naszym blogu jest ustawienie jakiegoś koloru tła. Najprostszym możliwym sposobem na zrobienie takiego czegoś jest wpisanie selektora całego bloga i nadanie mu atrybutu oraz wartości (nie mam pojęcia, czy tak to się nazywa, nie jestem informatykiem. Nazwy przyjęłam dla ułatwienia.).

Szybkie wytłumaczenie: kod składa się z wielu selektorów. Selektor to takie coś, co definiuje (określa) nam element, jaki chcemy zmienić. Selektory zwykle rozpoczynają się znakiem „.” lub „#”, jednak są wyjątki. Nauczycie się tego z czasem, jak na razie polecam zakładkę KS ze spisem selektorów. 

By selektor nam działał, musimy coś z nim zrobić. Otwieramy wąsy (nawias klamrowy) i tuż za nim wpisujemy parametr, jaki chcemy zmienić (mówię sobie na to atrybuty). Następnie wstawiamy dwukropek, a potem podajemy wartość (kolor, liczbę – zależy co robimy). Gdy wpiszemy wszystko, co chcemy, zamykamy nawias klamrowy.

Przykładowy kod:

Wracamy do naszego bloga. Selektor odpowiedzialny za cały blog to „body”. Chcemy ustawić kolor tła, zatem naszym atrybutem będzie tło: „background”. Przydałoby się jeszcze wybrać kolorek. Do tego posłużyć nam może nazwa angielska danego koloru, jego numerek z # lub wartości rgba (red, green, blue, alpha/przezroczystość). Najbardziej lubię ten ostatni wariant, gdyż pozwala na tworzenie półprzezroczystych elementów ;).  Do dobierania kolorów stosuję tę stronkę. Do nagłówka pasuje według mnie kolor bladofioletowy. Odnajduję na stronce do kolorów interesującą mnie barwę i spisuję jej parametry R, G i B. Moją barwę zapiszę jako: rgba(204, 183, 224, 1.0).

Przezroczystość na poziomie 1.0 to całkowicie nieprzezroczysty element, zaś 0.0 to element niewidzialny. W białym okienku do edycji CSS wpisujemy zatem:

body {background: rgba(204, 183, 224, 1.0)}

Widzicie? Działa!

3. Tła bloga i gadżetów.

Nasz blog ma teraz jednolite tło, dziwne, cieniste ramki i ogólnie wygląda jakoś tragicznie. Coś wypada z tym zrobić. Jako, że tło całego naszego bloga jest jasne, dobrze będzie wyglądać na nim ciemniejszy element z treścią. Jest to sprawa indywidualna, w późniejszym czasie pozwolicie ponieść się fantazji. Skoro ogólne tło jest gładkie, zaszalejemy z elementem właściwym bloga, ustawiając obrazkowe tło. WAŻNE! Nigdy nie umieszczaj pod tekstem wyrazistych tekstur! 

Jak znaleźć tło, które będzie dobrze wyglądało w naszym poście? Można skorzystać z wyszukiwarki google lub z jakiejś stronki (korzystam z tej) albo samemu zrobić i wrzucić sobie na jakąś stronę (używam pinteresta, działa). Po odnalezieniu interesującej nas tekstury tła, kopiujemy jej adres (samej grafiki! Prawy przycisk myszy → kopiuj adres obrazu).

Wybrałam tę grafikę (klik).

Teraz używamy selektora odpowiedzialnego za cały element naszego bloga (datę, etykiety, treść, itd.) „.date-outer”, wpisując w nim atrybut tła obrazkowego „background-image” oraz określając je „ulr(link)”.

W przypadku tego bloga wygląda to tak: 

.date-outer{background-image: url(https://i.pinimg.com/564x/81/a6/3e/81a63e0bc22cf450a34e0c35e2a05302.jpg)}

Mamy ustawione tło elementu.

W ten sam sposób ustawimy tło dla elementów kolumny bocznej, choć tym razem może postawimy na jednolite tło. Wybrałam kolor miodowy. Tym razem ustalimy go dla odmiany przy pomocy krzyżyka ;).

.column-right-inner .widget {background: #E6C43B}

Ostatnim elementem, który mógłby mieć przyjazne tło, jest pager bloga. Ustawmy takie samo tło jak do gadżetów.

#blog-pager {background: #E6C43B}

Oto nasz efekt:

4. Jak usunąć te cienie?!

Pewnie zauważyliście, że dookoła elementów mamy cień. Przy mojej wizji jest on kompletnie niepotrzebny, więc usuwam go. Jak to się robi? Otóż do każdego elementu, jaki wpisaliśmy w arkuszu CSS (wyłączając body) dopisujemy po średniku: box-shadow: none (cień elementu: nie).

Nasz kod i blog wyglądają teraz w ten sposób:

5. Ustawiamy ramki!

Szablon, który robimy w ramach instruktażu jest szablonem o nagłówku zamkniętym, wobec tego ładnie wyglądać będą w nim ramki. Przypomnijmy, że kolorystyka elementów to żółć i ciemnoszary. Teraz dodamy ramki wokół każdego z elementów. Wybrałam ciemnoniebieski kolor, choć nie uważam tego za najtrafniejszy wybór. Dobrze kontrastuje on z poszczególnymi elementami, wobec czego wyraźnie będziecie widzieć, co dokładnie zmienia się w szablonie.

Mój kolor to: #051832.

Jak ustawić obramowanie dla pojedynczego elementu?

Wróćmy do ustawienia pagera bloga, jako przykład:

#blog-pager{border:  5px #051832 solid}

Dzięki temu zabiegowi wokół naszego elementu pojawiła się ramka.  Border informuje bloggera, jaki element pagera chcemy edytować, 5px to grubość ramki, jaką ustawiamy, #051832 to kolor, zaś solid to informacja o stylu ramki (więcej o ramkach: klik). 

Szybszym sposobem dla nasz będzie określenie kilku elementów. Sposobem „pojedynczym” musimy wpisać te same komendy dla nagłówka, widżetów kolumny prawej, obszaru posta i pagera. Można załatwić to jedną linijką kodu, wypisując selektory oddzielone przecinkiem przed wąsami. Wygląda to tak:

.header, .column-right-inner .widget, .date-outer, #blog-pager{border: 5px #051832 solid}

Dzięki temu zabiegowi uzyskaliśmy taki efekt:

Teraz pojawia się kolejny problem: nasz nagłówek jest obramowany strasznie – widać po jego prawej stronie tło, obramowanie jest niedokładne... Można temu zaradzić w prosty sposób: zamiast selektora 

.header 

wpisujemy 

.header img

co informuje bloggera, że chcemy obramować właśnie grafikę nagłówka a nie również jego niewypełniony obszar. 

Nasz właściwy kod dla obramowania do tego bloga to zatem:

.header img, .column-right-inner .widget, .date-outer, #blog-pager{border: 5px #051832 solid}

By nasz szablon wyglądał estetyczniej i łatwiej było zbudować z jego elementów całość, dodamy jeszcze tło w kolorze obramowania dla kolumny bocznej. Posłużymy się teraz selektorem, odpowiadającym za to, co na zewnątrz widżetów prawej kolumny, czyli .column-right-outer. Pamiętacie, w jaki sposób ustawialiśmy tło? Powtórzę dla przypomnienia: by edytować tło elementu wpisujemy atrybut background i po dwukropku podajemy kolor.

W naszym przypadku kod wygląda tak:

.column-right-outer{background: #051832}

Dzięki naszym zabiegom osiągnęliśmy rozrzucone elementy bloga, ale za to w kolorach, jakie wybraliśmy! Spokojnie, to jeszcze nie koniec. W następnym instruktażu poukładamy to jak należy. 

Do następnego!