poniedziałek, 26 maja 2014

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

17 komentarzy:

  1. Dziękuje bardzo za instrukcję :) na pewno spróbuję sama coś zmajstrować z pomocą twojej instrukcji :D

    OdpowiedzUsuń
    Odpowiedzi
    1. W razie pytań - pisz! :)

      Usuń
    2. Witam!
      Gdy chcę zapisać zmieniony kod html wyskakuje mi jakiś błąd... Co robić? :)

      Usuń
  2. Bardzo ciekawa notka. Kiedyś całkiem sporo używałam html (choć teraz pamiętam już piąte przez dziesiąte ;)), ale praktycznie nigdy nie korzystałam z css - dlatego tym bardziej ciekawie było o tym poczytać - może nawet sama spróbuję pobawić się z blogspotem i szablonami.

    OdpowiedzUsuń
    Odpowiedzi
    1. CSS jest bardzo pomocny dla takich leniuszków jak ja :) Jasne, jak muszę, to grzebię w html, po to, żeby dodać podpis czy jakieś inne zmiany. Ale idzie mi to opornie, bo raz się nieco zraziłam :D W tej notce nie objaśniałam wszystkich komend, bo konkretne selektory pojawiły się już w wielu notkach, w tym jednej Tyler, gdy przedstawiała anatomię szablonu :)

      Usuń
    2. Ja zawsze grzebałam się w html, ale jako straszny leniuch zawsze w połowie grzebania się - miałam już serdecznie tego dosyć. I powiem Ci, że na początku nienawidziłam html, którym nas katowano na informatyce - potem odkryłam takie cudowne narzędzie pakietu office - FrontPage i nagle się okazało, że html to całkiem fajna i przyjazna rzecz.
      Właśnie widziałam już niektóre notki o selektorach, ale brakowało mi czegoś takiego jak w tym poście - jak się tak najprościej, krok po kroku zabrać do tego css bez grzebania się w całym kodzie szablonu :)
      Na pewno skorzystam z waszych porad i się pobawię.

      Usuń
  3. rewelacyjna instrukcja, bardzo ci za nią dziękuję :)
    pokombinowałam i już jest na moim blogu. czy powinnam umieścić gdzieś źródło tego szablonu mnie?

    anecia & roses ♥ blog 

    OdpowiedzUsuń
  4. Dzię - ku - je - my!
    Super, nareszcie skleciłam coś porządnego :)

    OdpowiedzUsuń
  5. Mam pytanie, jeżeli chciałabym zmienić kolor tytułu gadżetu, to jak mam to zrobić? Przez kody css i html?

    OdpowiedzUsuń
    Odpowiedzi
    1. Do odpowiedniego selektora gadżetu, na przykład obserwatorów, czyli:
      #Followers1
      musisz dopisać po spacji "h2", który oznacza tytuł. I w własnościach dopisujesz właściwość "color" i kod koloru, jaki chcesz uzyskać. W tym przypadku wyglądałby ten cały kod tak:

      #Followers1 h2{
      color: #fff;
      }

      Oczywiście, w miejsce "#fff" wpisujesz sobie kolor, jaki ty chcesz, a na miejsce "#Followers1" selektor gadżetu, który chcesz edytować. ;)

      Pozdrawiam.

      Usuń
  6. Cholera nic nie potrafię,wciąż próbuję ,może masz ocgotę zrobić coś dla mnie :)

    OdpowiedzUsuń
  7. Mam problem. Kiedy usiłuję usunąć ten kod wskazany na początku, a następnie zapisać zmiany, wyświetla mi się jakiś długi, czerwony napis, a te zmiany się nie zapisują. Próbowałam kilka razy, a cały czas efekt jest ten sam. Nie wiesz może, dlaczego tak się robi i jak temu zapobiec?

    OdpowiedzUsuń
  8. Próbuję, próbuję i nic nie rozumiem.. A tak bardzo podoba mi się ten szablon:(
    Czy ktoś chciałby mi pomóc? :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Z chęcią pomogę, wyjaśnię i posłużę radą, tylko muszę wiedzieć co dokładnie nie wychodzi i czego nie rozumiesz. :)
      A tak jakbyś jednak wolała chwilowo zrezygnować z kombinacji, to szablon Simply Clever jest ogólnodostępny do pobrania. Można go pobrać tutaj. :)

      Usuń
  9. Niestety, wkleiłam wszystko tak, jak napisałaś i nic nie zmieniałam, ale w sidebarze nic się nie zadziało tak, jak powinno, a link do komentarzy zamiast być u góry, jak u Ciebie, jest na dole :(

    OdpowiedzUsuń
  10. Mam problem z wyglądem "ołówka" po załadowaniu szablonu powyżej:
    http://funkyimg.com/i/2bpGR.png
    Da się z tym coś zrobić, czy lepiej tego w żaden sposób "nie ruszać"?

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler