Zrób minimalistyczny szablon z wanilijową - krok po kroku!

Ostatnio zrobiłam ekstremalnie zminimalizowaną instrukcją na własny button - na jednym zdjęciu. Dzisiaj będzie to nieco bardziej rozbudowane. Pierwsze pytanie: co to za szablon? Tym razem podarujemy sobie jakąś wykwintną grafikę, która rozwala mózg (hm... czy jakieś tu takie były?), skupimy się na zabawie czcionkami, układem, kolorami. Oczywiście, będzie bardziej minimalistycznie. Powiedzmy, że szablon idealny na lifestylowy blog, blog ze zdjęciami (ewentualnie, zobaczymy, co nam wyjdzie z naszej ciężkiej pracy, no i kto, co potrzebuje). Skąd ta instrukcja? Po pierwsze - wiele osób prosiło o coś tego typu (choć może bardziej chodziło o szablon, po prostu?), a po drugie, po to, żeby pokazać, że kodowanie i tworzenie szablonów wcale nie jest trudne! Poza tym - zobaczycie, jaka jestem leniwa i jak bardzo nie lubię grzebać w html'u i jak zwykle wygląda tworzenie przeze mnie szablonu. Prawda w końcu wyjdzie na jaw, ehs.

Zaczynamy!

Krok 1: Szablon prosty.

Zapisujemy kopię roboczą naszego aktualnego szablonu (na zaś). Potem formatujemy szablon w wersji html, a potem w dostosowaniu wybieramy ponownie szablon - prosty. W układzie bloga zaznaczamy na lewokolumnowy. W szerokości bloga ustawiamy sobie szerokość całkowitą na 1100px, a szerokość kolumny bocznej - dowolnie, jak nam pasuje. Ja dałam 280px. 

Krok 2: Edycja html.

Wchodzimy w edycję kodu html. Usuwamy wszystko od do:

/* Variable definitions [...]
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>*/

Podpowiem, że to cała część aż do /* Content. Zapisujemy nasz aktualny szablon. Przerażający efekt. Teraz przechodzimy do tej zbawiennej części - dostosowywania szablonu w CSS. Nie zdziwcie się, jeśli w zaawansowanych jest jedynie pole dla niestandardowego arkusza CSS. Nasze usunięcie Variable definitions pozbawiło nas możliwości edytowania czcionek w ten sposób.

Krok 3: Niestandardowy arkusz CSS.

Teraz postaram się, żeby wszystko szło jak po maśle, jasno i wyraźnie. Robiąc szablon, idę zawsze wg zasady od góry do dołu i od ogółu do szczegółu. Zasada przydatna we wszystkich sferach życia. Zaczniemy od czcionek, których nie ma w systemie bloggera tak od razu. Udajemy się na google.com/fonts i szukamy swoich wymarzonych czcionek. Ja skorzystam na początek z Great Vibes, z czasem jakieś jeszcze dodamy. Jeśli nie wiesz, jak załadować czcionkę, odezwij się do mnie na ask.fm. 

  @font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  src: local('Great Vibes'), local('GreatVibes-Regular'), url(http://themes.googleusercontent.com/static/fonts/greatvibes/v2/6q1c0ofG6NKsEhAc2eh-3YbN6UDyHWBl620a-IRfuBk.woff) format('woff');}

W szablonie, który robimy, górna nawigacja to nieporozumienie (zauważyliście, że zawsze ją wywalam?). Do tego teraz przejdziemy.

#navbar-iframe {display: none}

Nasze tło już samo w sobie jest białe, ale zróbmy z nim jednak porządek od A do Z. W naszym szablonie mamy dwie kolumny, lewą i środkową. Zaczniemy od lewej i potraktujemy ją selektorem .sidebar. Ustawimy tak, żeby się on nie ruszał i ciągle tkwił w jednym miejscu. Ma to swoje plusy i minusy - wygląda całkiem profesjonalnie, ale ogranicza nam to nieco miejsce, jakie możemy wykorzystać na wysokości bloga, dlatego uważajmy. W sidebarze dajmy więc najpotrzebniejsze rzeczy: nawigację bloga, nagłówek, coś, co musi być na widoku cały czas. Obserwatorów i inne badziewia wyrzucimy gdzie indziej. Tło czarne, by uzyskać fajny kontrast, czcionka zwykła. Nie zapominamy o paddingu.

.sidebar {position: fixed; left: -10px; top: 0px; background:#000; color:#fff; width: 280px; padding: 10px; z-index: 2; padding-top: 125px;  height: 100% }

Position: fixed; left: -10px; top: 0px - pozycjonuje nam to nasz sidebar. Jeśli -10px zmniejszymy do -15, to lewa granica będzie na równi z lewą stroną bloga (przynajmniej powinna). Możemy pokombinować. z-index ma zabezpieczyć nas, żeby w razie czego nic nie najechało nam na menu i nie zasłoniło go. Do obecnej klamry sidebaru możemy dołożyć informacje o czcionkach, ale uwaga: jeśli w tym miejscu wpiszemy konkretne dane, będą one dotyczyć wszystkich gadżetów, dlatego z tym radziłabym się póki co wstrzymać.

Teraz stworzyłam nagłówek o wymiarach 260x120px. Załadujemy go w selektor #Header1. 

#Header1 {background: url(http://wanilijowa.strefa.pl/Graphical%20Thoughts/header%20-%20simply%20clever.png); width: 260px; height: 120px; z-index: 3; position: fixed; left: 20px; top: 0px;}

Decydując się na obraz w nagłówku, zawsze musimy podać jego width i height, w przeciwnym razie skafelkuje się on nam. Jeśli używamy komendy z-index ogólnie w siderze, to tutaj musimy zwiększyć jego wartość. Stąd najpierw było z-index:2, a teraz jest z-index:3. W ten sposób dany element jest silniejszy i jest na górze. 

aktualnie nasz szablon wygląda tak

Żeby skusić się na wręcz ekstremalny minimalizm, postanowiłam wywalić z sidebara wszystko za wyjątkiem stron bloga (na powyższym zdjęciu jeszcze tego nie widać). Oczywiście, możecie dodać statystykę, jakąś ramkę z informacjami, jakiś button - droga wolna, ale nie za dużo, bo to nie zdrowo! Teraz więc dopieszczam widżet ze stronami. 

#PageList1 {color: transparent; font-family: 'Times New Roman'; font-size: 17px; margin-right: 10px; margin-top: 40px;}
#PageList1 a:link, #PageList1 a:visited { color: #fff; text-transform: lowercase; letter-spacing: 2px; text-align: center; display: block; padding: 2px; margin-bottom: -3px; background-color: #579594;}
#PageList1 a:hover {color: #579594; background: #000; padding: 2px; transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s; -o-transition:all 0.5s}

Czary-mary, hokus-pokus, strony gotowe. Co zrobiłam? Skoro u mnie strony to jedyny element w sidebarze, postanowiłam je nieco wyeksponować, żeby nie zginęły, stąd większe litery, aż 17px Times New Romana, która jest dość wyraźną czcionką. #PageList1 - ogół widżetu. Color:transparent pozwala nam pozbyć się tam kółeczek. Jeśli zwiększymy wartość w margin-top, to zwiększymy odległość między stronami a nagłówkiem. #PageList1 a:link, to po prostu wygląd samych linków do stron, a:visited - odwiedzone; a:hover - to, co stanie się, gdy najedziemy na daną stronę. 

koniec mojej zabawy z siderem

Skończyłam sidebar. Jeśli chcecie więcej rzeczy, zaglądnijcie do instrukcji Tyler o dostosowywaniu sidebaru. Czas posty i tak dalej. Uwaga - jeśli pozostałe gadżety (poza postami), są w tej samej kolumnie, wystarczy nam selektor: .main-inner .column-center-inner i to z niego będę korzystać. Jeśli zaś chcemy, by nasze wariacje odnosiły się też do wszystkiego wokół nich - wtedy samo .main-inner. 

.main-inner .column-center-inner {width: 830px; margin-left: -60px;}

Przechodzimy do postów, a w tym też i zdjęcia (jeśli to ma być blog z fotografiami o dużych wymiarach). Idziemy kolejno tytuł, data, stopka, etykiety, post jako post, zdjęcie w poście.

h3.post-title, h4 {font-family: 'Yellowtail'; text-align: center; font-size: 27px; letter-spacing: 1px; padding-bottom: 25px;}

h3.post-title a:link, h4 a:link {color: #000; text-decoration: none}

h3.post-title a:hover, h4 a:hover {color: #579594; text-decoration: none}

h2.date-header {font-family: Tahoma;  font-style: normal; font-weight: 400; font-size: 9px; text-decoration: none; text-transform: uppercase; text-align: center; margin-bottom: -20px; margin-top: 30px;  }

.post-footer {font-family: arial;  font-style: normal; font-weight: 400; font-size: 9px; text-decoration: none; float: right; background: #579594; padding: 5px; text-transform: lowercase; color: #fff; margin-top: -20px; width: 100px; height: 30px;text-align: center;   }

.post-labels a:link {font-family: arial;  font-style: normal; font-weight: 400; font-size: 9px; text-decoration: none; float: right; background: #579594; padding: 5px; text-transform: lowercase; color: #fff; width: 100px; height: 100%; text-align: center; margin-right: -5px; margin-top: -20px}

.post-labels {color: transparent}

.post-outer img {width: 700px; box-shadow: 0px 0px 10px 1px #000000}

.post-body {font-family: Arial; font-size: 13px; text-align: justify; padding-bottom: 40px  }

.post {padding-bottom: 40px; border-bottom: solid 1px #f0f0f0 }

tak wygląda aktualnie szablon

Na razie mamy zrobiony sidebar, a teraz również kolumnę z postami. Jeśli chodzi o komentarze, skorzystałam z instrukcji Tyler i poratowałam się ofiarowanym przez nią kodem, jako że chciałam uzyskać podobny efekt, jaki tam dała. Zmieniłam więc parę rzeczy i gotowe.

.comments p {text-align: justify; font-family: Tahoma; font-size: 11px; color: #5d5d5d}

.comments .comments-content .user{font-family: Arial; text-transform:uppercase; font-size:10px; color:#2472c1;}

.comments .comments-content .datetime {font-family: Arial; font-size:9px; text-transform:uppercase; }

.comment-header { border-bottom:1px dotted #ddd;}

.comments .comment .comment-actions a,.comments .thread-toggle a { background:#f1f1f1; padding:2px 5px; font-family: Tahoma; font-size: 10px;margin-right:3px;text-transform:uppercase; }

.comments .comment .comment-actions a:hover,.comments .thread-toggle a:hover {color:#fff; background:#579594; text-decoration: none}

.comments .avatar-image-container {border-radius:50px;}

.comment-replies { background:#fbfbfb;border-radius:3px;}

efekt dla komentarzy

Na koniec dodamy komendy dla linków na całej stronie.

a:link, a:visited {color: #000; text-decoration: none; -webkit-transition-duration: .50s;}

a:hover{color: #3a4646;}

a:active {color: #095554;} 

Okej, szablon skończony. Nie wiem, ile zeszło, ale chyba około 3 godzin. Peszek. To, co idziemy spać? Jutro ten szablon pojawi się w galerii do pobrania ; ) W razie pytań do poszczególnych komend, selektorów, wartości - śmiało. Jeśli chcecie dodać inne gadżety w innych miejscach i Wam to nie idzie, pisać śmiało.

efekt