Zrób ze mną szablon na bloga część 2
Pierwsza część tego wpisu przyjęła się bardzo dobrze, więc postanowiłam zrobić część drugą. Ta część od pierwsze będzie różniła się tym, że zrobimy sobie jeden szablon, a nie dwa. Na czym polega ta seria wpisów? Podaje Wam kody na zrobienie danego szablonu. Tak, podaje Wam najzwyczajniej w świecie gotowce. Dlaczego nie udostępniam tych szablonów do pobrania za darmo? Bo mimo wszystko jest to forma nauki, poznaje się kody, które dla niektórych mogły być nieznane i jednocześnie można je od razu zmodyfikować pod siebie, bez szukania CSSa w kodzie szablonu, tak jak to jest w przypadku szablonów do pobrania. Zaczynamy!
1. Na początek jako naszą bazę wybieramy sobie szablon Simple (prosty) biały. Od razu mówię, że od góry zakładam, że zdjęcia do wpisów będziemy wstawiać w oryginalnym rozmiarze. Na początek, mniej więcej nasz szablon będzie prezentował się tak:
1. Przechodzimy do układu - pasek nawigacyjny - edytuj - wyłączone - zapisz
2. Wracamy do szablon - układ - wybieramy sobie układ prawo lub lewo kolumnowy i rodzaj stopki. U mnie to wygląda tak:
3. Teraz musimy ustawić sobie szerokość naszego bloga. Przechodzimy więc do "Dostosuj ustawienia szerokości". Ja ustawiłam najbardziej optymalną czyli cały blog 1240px a kolumna boczna 330px
4. Wracamy do zaawansowane - dodaj arkusz CSS i wklejamy kody.
Pierwszy kod, jest na dopasowanie zdjęć do szpalty, bez ruszenia mniejszych zdjęć. Małe zdjęcia pozostaną małe.
.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;
}
Teraz, dodajemy kod na usunięcie ramek i cienia zdjęć we wpisie, które w szablonie Simple są narzucane odgórnie.
.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;
}
Teraz zajmiemy się naszymi stronami. Przechodzimy do "tło kart" i zaznaczamy wszystko na przezroczyste. Następnie przechodzimy do "akcenty" i tam również wszystko zaznaczamy na przezroczyste. Przechodzimy do arkusza CSS i wklejamy tam taki kod:
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none; display: inline;}
#PageList1 {border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 10px;
letter-spacing: 2px;
text-transform: uppercase;}
Oczywiście kolor i rodzaj fontu (czcionki) ustawiamy w zakładce "tekst kart". U mnie w menu, font to Times New Roman.
Przechodzimy dalej. Teraz zajmiemy się wpisami. Tutaj pracujemy głównie w CSSie. Dodajemy kod:
.column-center-inner {text-align: justify;}
.post {font-family: Open Sans;
color: #444;
font-size: 12px;}
h3.post-title {text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Times New Roman;
font-size: 18px;}
h3.post-title a {
color: #000;}
h3.post-title a:hover {
color: #76a5af;}
Przechodzimy do "nagłówek z datą". Tam zmieniamy kolor tła na przezroczyste, a kolor tekstu na czarny, ciemno szary czy jaki tam chcecie. Odznaczamy pogrubienie. Wracamy do CSSa i dodajemy kod:
h2.date-header {text-align: center;
font-family: Times New Roman;
font-size: 10px;}
Przechodzimy do "stopka posta" i kolor tekstu zmieniamy na dowolny kolor, a kolor tła i cienia na przezroczyste. Przechodzimy do CSSa i dodajemy kod:
.post-footer { text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: Open Sans;
font-size: 8px;
border-bottom: 1px solid #ddd;
padding: 10px;}
Przy okazji dodajemy efekt dla cytatów:
.post blockquote {
margin: 1em 20px;
}
.post-body blockquote {
line-height:21px;
background: #fff;
border: 1px solid #dadada;
padding:10px;
}
Oraz pozbywamy się tego co nam przeszkadza. Czyli kropek w pagerze bloga, "Subskrybuj: Posty (Atom)", "Technologia Blogger" i przerywanej linii w stopce bloga.
#blog-pager {background: transparent;}
.Attribution, .feed-links {display: none;}
.footer-outer {border: 1px solid transparent;}
Skoro już jesteśmy na dole naszego bloga, to dostosujemy sobie nasz Pager, wklejając kod:
#blog-pager a{display: inline-block;
color: #888;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
border: 1px solid #e5e5e5;
padding: 13px 15px;
font-weight: 700;
background-color:#ffffff;}
Skoro już mamy wszystko ogarnięte, to została nam kolumna boczna, a właściwie tytuły gadżetów. Tutaj również robimy wszystko za pomocą CSSa. Dodajemy kod:
.sidebar .widget h2, #Followers1 h2 {font-family: Times New Roman;
font-size: 15px;
letter-spacing: 2px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid #000;
padding: 2px;}
Pewnie zastanawiacie się, czemu zostało dopisane #Followers1 h2 - ten selektor odpowiada za nagłówek obserwatorów. Do niektórych gadżetów, trzeba dopisać selektor po przecinku, tak jak w kodzie powyżej np. #Text1 h2 - selektor dla tytułu gadżetu "Tekst".
Następnie dodajemy kod, na wyśrodkowanie nagłówka:
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}
Zapisujemy szablon. Przedstawiłam Wam ogólny zarys szablonu jaki możecie zrobić. Poniżej są linki do wpisów z których możecie skorzystać przy dalszej modyfikacji. Nie wstawiłam ich tutaj, ponieważ nie chce powielać tego co już jest na blogu :)
