Zrób ze mną szablon na bloga część 3

środa, 15 listopada 2017

Po ostatniej ankiecie, wszystko stało się jasne - chcecie kolejną część z serii "Zrób ze mną szablon na bloga" i o to jest część 3! Ta część będzie się różnić trochę od poprzednich, ponieważ pokażę Wam jak zrobić nasz szablon za pomocą kodów, które są już dostępne na blogu. Mam nadzieję, że część 3 przyjmie się tak samo dobrze, jak część 1 i 2 :) 

część 1 część 2
Paleta kolorów, z której korzystałam przy tej instrukcji:

https://www.design-seeds.com/studio-hues/collage/color-create-7/

#798340 #B1B85F #D1D183 #CADED8 #D7E7DD #F5EFE8

Zapamiętaj!

Przed każdą edycją szablonu, zrób jego kopię zapasową, aby w razie pomyłki, nie utracić cennych dla Ciebie informacji :)

1. Za bazę naszego szablonu wybieramy szablon Simple (prosty) biały. Najlepiej się na nim pracuje :)

2. Motyw - dostosuj - układ (będziemy pracować na prawo kolumnowym układzie z pojedynczą kolumną w stopce bloga)

3. Teraz przechodzimy do dostosuj ustawienia szerokości i szerokość bloga ustawiamy na optymalną czyli 1240, a szerokość kolumny bocznej - dowolnie, u mnie jest to 340

4. Wybieramy "Zastosuj do bloga"
5. Teraz musimy jakoś doprowadzić do porządku nasze zdjęcia we wpisach i same wpisy, aby zaczęły się jakoś prezentować :) W tym celu przechodzimy do zaawansowane - dodaj arkusz CSS

Usuwanie ramek i cieni spod zdjęć we wpisie

W tym celu będziemy korzystać z tego wpisu Kilka przydatnych, podstawowych kodów
Wklejamy taki kod:

.post-body img {border: 0 !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; padding: 0px !important; background: none !important; }

Automatyczne dopasowanie zdjęć do szpalty bloga, bez ruszania tych mniejszych

Bardzo przydatny kod - dzięki niemu możecie wrzucać zdjęcia w oryginalnym rozmiarze i nie przejmować się ich zmniejszaniem przed wrzuceniem na bloga. Ten kod pojawił się w drugiej częśći "Zrób ze mną szablon na bloga"

.post-body img { max-width:100%; height: auto;} .post-body .tr-caption-container { padding: 0;} .post-body .tr-caption-container img { max-width: 100%; height: auto; margin-left: 0; padding: 0; display: block; }

Tekst strony i wpisów 

Przechodzimy do "Tekst strony", wybieramy sobie font (taki, który obsługuje polskie znaki, bo wiadomo, nie chcemy, aby nasz wpis brzydko wyglądał z rozwalonym fontem), kolor oraz jego wielkość. W moim przypadku jest to font o nazwie Open Sans, kolor #444444 oraz wielkość 13px.

Wyśrodkowanie tytułu wpisu i daty

Te kody również znajdują się w 1 i 2 części "Zrób ze mną szablon na bloga" ;)

Wyśrodkowanie tytułu wpisu

h3.post-title {text-align: center;}

Wyśrodkowanie daty

h2.date-header {text-align: center;}

Zmiana wyglądu tytułu wpisu

Teraz musimy jakoś doprowadzić nasz tytuł wpisu do ładu i składu. W tym celu posłużymy się również kodami z 2 części wpisu "Zrób ze mną szablon na bloga". Jedyna zmiana będzie taka, że ustawienia naszych wartości się zmienią :)

h3.post-title {text-align: center; text-transform: uppercase; letter-spacing: 3px; font-family: Open Sans; font-size: 26px;} h3.post-title a { color: #000;}

Przy tym elemencie przyda nam się również kod, na zmianę koloru tytułu wpisów, po najechaniu na niego myszą.

h3.post-title a:hover {color: #D1D183;}

Zmiana wyglądu daty

Pierwsze co zrobimy to usuniemy szare tło, zmienimy kolor i font. W tym celu przechodzimy do nagłówek z datą, zmieniamy kolor tekstu i dajemy tło na przezroczyste. Font ustawiłam taki sam jak tekst i w tytule wpisu czyli Open Sans. Możemy ustawić również wielkość fontu, pogrubić lub pochylić.

Przechodzimy do dodaj arkusz CSS i w tym przypadku również użyjemy kodu z 2 części "Zrób ze mną szablon na bloga". Tylko zmienimy trochę wartości.

h2.date-header {text-align: center; text-transform: uppercase;}

Wyjustowanie tekstu we wpisie

Jak możecie zauważyć cały czas pozostajemy przy sekcji z wpisami, teraz zajmiemy się wyjustowaniem tekstu we wpisie. W tym celu pozostajemy cały czas w "dodaj arkusz CSS", wklejamy taki kod:

.column-center-inner {text-align: justify;}

Stopka posta

Teraz będziemy doprowadzać do porządku stopkę posta. przechodzimy do stopka posta. Tam możemy zmienić kolor tekstu, usuwamy kolor tła (robimy przezroczyste) oraz kolor cienia (również ustawimy na przezroczyste). Następnie przechodzimy do dodaj arkusz CSS i dodajemy kod, który umożliwi nam dostosowanie fontu, wielkość etc.

.post-footer {text-align: center; font: 10px Open Sans; letter-spacing: 1.5px; text-transform:uppercase;}

Wygląd cytatów

Jeśli chodzi o edytowanie wpisu, to został nam jeszcze wygląd cytatów. Pozostajemy cały czas w zakładce dodaj arkusz CSS i wklejamy kod:

blockquote { background: #eee; color: #444; position:relative; font-size:90%; padding:20px; border-top: solid 10px #798340;}

W tym celu korzystałam z tego wpisu STYLE DLA CYTATÓW WE WPISIE znajdziesz tam jeszcze więcej stylów dla cytatów.

Pager bloga

Zostając cały czas w arkuszu CSS możemy uporządkować nasz pager. Zaczniemy od usunięcia tła/kropeczek z pagera. Wpis do tego znajdziecie tutaj ZMIANA WYGLĄDU STOPKI BLOGA I PAGERA

#blog-pager {background: transparent;}

Teraz trochę ulepszymy nasz pager, aby nie był taki tradycyjny. W tym celu wykonujemy pierwsze 3 punkty z tej instrukcji: TROCHĘ O FONT AWESOME

Jeśli wykonaliśmy już nasza powyższą instrukcję, to przechodzimy znowu do dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy taki kod:

#blog-pager { margin:60px 0 0 0; text-align:center; } #blog-pager-older-link { letter-spacing: 1px; } #blog-pager-newer-link { letter-spacing: 1px; } .home-link { letter-spacing: 1px; } .blog-pager span,.home-link { display:inline-block; } .blog-pager span a,.home-link { text-transform:uppercase; display: inline-block; font:normal bold 12px 'Open Sans', sans-serif; color: #4e4d4c; letter-spacing:1px; } .blog-pager span a:hover,.home-link:hover { text-decoration:none; color: #fbe2dd; } #blog-pager-older-link a:after { content:'\f101'; font-family:'FontAwesome'; padding-left:5px; } #blog-pager-newer-link a:before { content:'\f100'; font-family:'FontAwesome'; padding-right:5px; } .home-link:before { content: '\f015'; font-family:'FontAwesome'; padding-right:5px; }

Separator stopki bloga i stopka bloga

Separator stopki bloga w szablonie Simple, jest przerywaną, szarą linią. Będzie nam on przeszkadzał, więc po prostu go usuniemy za pomocą kodu, który już raz użyliśmy we wpisie ZMIANA WYGLĄDU STOPKI BLOGA I PAGERA

.footer-outer {border-top: transparent;}

W tym samym wpisie, mamy kody na usunięcie niepotrzebnych elementów, jak napis "Obsługiwane przez technologię Blogger" oraz "Subskrybuj: posty (Atom)"

.Attribution, .feed-links {display: none;}

U mnie w stopce bloga znajduje się formularz kontaktowy, zmienimy teraz jego wygląd, a instrukcję na zmianę wyglądu formularza kontaktowego możecie znaleźć tutaj: JAK ZMIENIĆ WYGLĄD FORMULARZA KONTAKTOWEGO

.contact-form-widget {max-width:100%; width:auto;} .contact-form-email, .contact-form-name, .contact-form-email-message, .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover, .contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {background: #fff; border-style: solid; border-color: #ddd; box-shadow: none; width: 100%; height:45px; font-size:14px; vertical-align:middle; padding:8px;} .contact-form-button-submit {background: #798340; border: none; float: none; height: 35px; margin: 5px 0 0 0; width: 1100px; cursor: pointer; line-height:45px; font-size: 14px; text-transform: uppercase; font: normal normal 17px Open Sans; border-radius: 0px;} .contact-form-button-submit:hover {background: #d1d183; border: none;} .contact-form-name, .contact-form-email, .contact-form-email-message {max-width:none;} .contact-form-email, .contact-form-name {margin-bottom:10px;}

Teraz usuniemy tytuł wpisu dla gadżetu w stopce, wklejamy taki kod:

.footer-outer h2 {display:none;}

Kolumna boczna

Teraz zajmiemy się naszą kolumną boczną, wyglądem gadżetów oraz ich tytułami. To będzie jeden z dwóch elementów w tym wpisie, gdzie pojawi się nowy kod, który jeszcze nie był publikowany w żadnym wpisie.

.sidebar .widget h2, #BlogSearch1 h2, #FollowByEmail1 h2{ color: #444; text-transform: uppercase; margin: 10px 0 20px 0; padding: 10px 0; position: relative; font-family: Open Sans; font-size: 15px; line-height: 1.52em; font-weight: 400; letter-spacing: 2px; border-bottom: 2px solid #f2f2f2; } .sidebar .widget h2:after { content: " "; width:80px; height: 0px; position: absolute; left: 0; bottom: -2px; border-bottom: 2px solid #798340; } .sidebar .widget { margin: 0 0 3px; background: #fff; padding: 20px 25px; text-align: justify; } .sidebar ul, .sidebar ol { list-style-type:none; margin:0 0 0 0; padding:0 0 0 0; }

Teraz zmienimy wygląd naszego gadżetu "obserwuj przez e-mail", skorzystamy z drugiej części instrukcji na ten gadżet. JAK ZMIENIĆ WYGLĄD GADŻETU OBSERWUJ PRZEZ E-MAIL
.FollowByEmail .follow-by-email-inner .follow-by-email-address { height: 30px; font: 10px Open Sans; text-transform: uppercase; color: #000 !important; width: 210px; margin: 30px 10px 10px; text-align:center; border: 1px solid #f5f5f5; letter-spacing: 1px; } .FollowByEmail .follow-by-email-inner .follow-by-email-submit { width: 53px; color:#ffffff; background-color:#798340; font: 10px Open Sans; text-transform: uppercase; letter-spacing: 2px; height: 32px; margin: 0 10px 30px; width: 210px; } .follow-by-email-inner .follow-by-email-submit:hover { background: #d1d183; color:#ffffff; } .follow-by-email-inner td{ display: block; width: 100%; } .follow-by-email-inner tr{ background-color:#FAFAFA; }

Teraz zajmiemy się gadżetem "szukaj" wpis, w którym pojawiła się ta instrukcja znajduje się tutaj JAK ZMIENIĆ WYGLĄD GADŻETU SZUKAJ
#CustomSearch1_form { margin: 10px -2px -25px -5px; } input.gsc-search-button { background:#798340; border-width: 1px; letter-spacing:1px; border-radius: 3px; border-color: #798340; border-style: solid; color: #fff; text-transform: uppercase; width: 85px !important; font-family: Open Sans; font-size: 11px; height: 35px !important; } input.gsc-search-button:hover { background: #d1d183; border-color: #d1d183; color: #fff; cursor: pointer; } input.gsc-input { height: 33px !important; padding: 0 !important; max-width: 500px !important; } td.gsc-search-button { width: 25% !important; } table.gsc-search-box td.gsc-input { padding: 0px !important; width: 75% !important; } table.gsc-search-box { margin: 0 0 10px 0 !important; }

Teraz zajmiemy się etykietami, wpis na ten temat jest już na blogu, ale w tym wpisie wrzucę Wam nowszy kod ;)

.cloud-label-widget-content span {opacity:1;display:inline-block;float:none;margin: 0 5px 5px 0;} .cloud-label-widget-content span span {margin:0;} .cloud-label-widget-content a,.cloud-label-widget-content span span {font:normal normal 11px 'Open Sans', sans-serif; color:#444;float:left;padding:8px 10px;border:1px solid #e5e5e5;margin-left:1px;} .cloud-label-widget-content a:hover {color: #798340!important;border: 1px solid #798340;} .Label .widget-item-control {display:none;height:0;}

Teraz zmienimy nasze archiwum, w tym celu skorzystamy z tego wpisu: JAK EDYTOWAĆ WYGLĄD ARCHIWUM - STYL HIERARCHIA
.post-count, .post-count-link { font-weight: 700; font-family: Open Sans; letter-spacing: 1px; font-size: 14px; color: #444;} .archivedate {text-transform: uppercase;} .archivedate a:link {color: #b1b85f;} .widget .zippy { color: #b1b85f; text-shadow: none; }

Edycja menu bloggera

Zakończyliśmy już zmieniać naszą kolumnę boczną i gadżety, teraz przejdziemy do edycji menu Bloggera.
Przechodzimy do akcenty i kolor obramowania kart zaznaczamy na "przezroczysty". Teraz przechodzimy do "tło kart" i tam również zaznaczamy wszystko na przezroczystość. Przechodzimy znowu do arkusza CSS i wklejamy kod (to jest właśnie ten drugi nowy kod).

.tabs-inner .widget ul { text-align:center; padding-bottom: 13px; padding-top:11px; margin: 0 auto; } .tabs-inner .widget li { float:none; display:inline-block; zoom:1; } .tabs-inner .widget li:after{ content: "/"; color: #444; } .tabs-inner .widget li:last-child:after{ content: ""; } .tabs-inner .widget li a { display: inline-block; padding: .2em 4em; font: 12px 'Open Sans', sans-serif; color: #798340; text-transform: uppercase; letter-spacing: 3px; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color:#d1d183; background-color: transparent; text-decoration: none; }

Wyśrodkowanie nagłówka i usunięcia paska nawigacji 

Pozostał ostatni element w edycji naszego szablonu, Wyśrodkowanie nagłówka i usunięcie paska nawigacji. Kod na wyśrodkowanie nagłówka przypomnimy sobie z poprzednich edycji "Zrób ze mną szablon na bloga".

.header-inner .widget div, .header-inner img { margin-left:auto; margin-right:auto; padding: 10px; top: -20px; }

Zapisujemy i przechodzimy do układ - pasek nawigacyjny (edytuj) - wyłączone - zapisz - zapisz rozmieszczenie

Efekt: 

Jeśli spodobał Ci się wpis, przekaż go dalej :)