Hej! W tej części weźmiemy się za to na co chyba troszkę czekaliście. W końcu zrobimy własny szablon. ^^ Z góry zaznaczam, że to jest mój sposób robienia szablonów, jeśli zobaczycie jak ktoś robi je inaczej to się nie przejmujcie, w końcu każdy ma swój sposób. Przejdźmy już do robienia szablonu.
Zajmiemy się najprostszym szablon ze zwykłym nagłówkiem, z dwoma głównymi akcentami, wybieramy do tego układ zamknięty, jednokolumnowy.
1. Przygotowanie
Uznałam to jako punkt, bo zawsze przed zrobieniem szablonu muszę ogarnąć jedne z ważniejszych rzeczy, a są to:
- nagłówek,
- paleta kolorów,
- układ (sketch),
- fonty,
- ile zmian chcę wprowadzić w kodzie HTML.
To są moje główne punkty w przygotowaniach. Więc wybierzmy sobie te rzeczy, żeby mieć wszystko z głowy i pod kontrolą.
» Nagłówek (podejrzyj tutaj)
Prosty nagłówek, z można powiedzieć, zamkniętą kompozycją i dwoma głównymi, kolorystycznymi akcentami, które wykorzystamy.
» Paleta kolorów
Tutaj mamy wybrane tylko te dwa akcenty kolorystyczne + kolor poboczny, ale te dobieram z czasem robienia szablonu.
Często też korzystam z innych odcieni głównych kolorów, ale to też dopiero przy robieniu szablonu.
» Układ
Przy tym nagłówku zdecydowanie wybieram układ zamknięty, jedno kolumnowy lewy. Zaraz po tym kiedy zdecyduję się na układ, wykonuję sobie sketch i, mniej więcej (ale to już w głowie), układam gadżety w kolumnie.
» Fonty
Do swoich szablonów zawsze biorę fonty z Google Fonts. Jest to najprostsze i najłatwiejsze rozwiązanie
Jestem znana z mieszania większej ilości fontów niż dwa, więc no tak jakoś już jest xd Jednakże teraz pójdziemy na łatwiznę i prostotą, więc do naszego szablonu weźmiemy jeden font, mianowicie Cormorant Garamond z kategorii serif.
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond&display=swap" rel="stylesheet">
Tak wygląda link, który musimy dodać do kodu HTML (więcej o tym w punkcie zmiany z kodzie HTML).
» Ile zmian chcę wprowadzić w kodzie HTML
Mówię tu głównie o zmianach, czy chcę mieć np. zmianę w:
- wyglądzie linków w stopce posta,
- wyglądzie pagerze bloga,
i tym podobne zmiany, które chcę wprowadzić, ale dziś nie będziemy praktycznie nic zmieniać.
Jedyne co do na pewno dodajemy font oraz swój podpis, ale o tym dosłownie zaraz, już w następnym punkcie.
2. Wstępne kody i ustawienia
W tym punkcie zazwyczaj wybieram bazowy motyw pod swój szablon - zawsze bez względu na wszystko jest to Rewelacja. Następnie wstawiam font do kodu HTML, piszę swój podpis (a gdy postanawiam zmieniać coś więcej, wpisuje też inne zmiany).
» Wstawianie fontu do szablonu
Jest na moim blogu poświęcony specjalnie do tego artykuł. ››przeczytaj artykuł‹‹
» Pisanie swoje podpisu
Do tego powstała instrukcja z gotowymi kodami, którą możecie przeczytaj ››tutaj‹‹
3. Kod CSS
Główny punkt naszego artykułu i pisania wyglądu szablonu. Do tego punktu potrzebne jest nam kilka innych artykułów:
⌊ układy
⌊ position
» Układ i podstawowe rzeczy
Osobiście korzystam w wcześniej napisanych przez siebie kodów gotowców. A następnie robię to co przedstawione na obrazku poniżej (w zależności od tego którą kolumnę chcę).
3. Pisanie właściwego kodu CSS
Teraz zaczynami pisać już ten prawdziwy kod CSS.
» Zawsze zaczynam od koloru body, wyglądu suwaka, linków: a:link, a:visited, a:hover oraz "usuwam" to czego nie chcę, żeby było widoczne (czyli nagłówek pisemny bloga, opis bloga, navbar, linki pod postem oraz stopka bloga).
!Przed napisaniem kodu, usuwam domyślnie ustawienia:
- tło motywu
- tło posta i gadżetów
I mój początek kodu wygląda tak:
body {
background-color: #fdfdfd;
}
::scrollbar {
height: 10px;
width: 6px;
background: #fdfdfd;
}
::scrollbar-thumb {
background-color: #e47602;
}
a:link {
color: #fff;
box-shadow: 0 2px 0 #e47602;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
a:visited {
color: #111;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
a:hover {
box-shadow: 0 2px 0 #318db2;
text-decoration: none !important;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
.header h1, .description, .navbar, .feed-links, footer {
display: none !important;
}Po zapisaniu kodu, nasz szablon powinien wyglądać tak:
» Następnie, wklejam kod wybranego układu. I po kolei zabieram się za dopasowywanie poszczególnych pozycji elementów. Wpisuje w kod kolory kolumny i postów, do tego zmieniam ustawienie gadżetu stron, przenoszę je w układzie do "Wszystkie kolumny", następnie za pomocą kodu css i selektora .tabs-outer ustawiam pozycję i szerokość gadżetu stron.
Więc nasz kod wygląda teraz tak:
body {
background-color: #fdfdfd;
}
::scrollbar {
height: 10px;
width: 6px;
background: #fdfdfd;
}
::scrollbar-thumb {
background-color: #e47602;
}
a:link {
color: #fff;
box-shadow: 0 2px 0 #e47602;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
a:visited {
color: #111;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
a:hover {
box-shadow: 0 2px 0 #318db2;
text-decoration: none !important;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
.header h1, .description, .navbar, .feed-links, footer{
display: none !important;
}
.header {
position:relative;
background: url(https://funkyimg.com/i/2UzD6.png);
width:800px;
height:500px;
left: 190px;
top: 120px;
}
.column-left-inner {
position:relative;
top:-480px;
left: -130px;
width:310px;
background: #318db2 !important;
}
#Blog1 {
width:800px;
position:relative;
top:105px;
left:-70px;
background: #318db2;
}
.tabs-outer {
position: absolute !important;
top: 60px;
left: 563px;
width: 61.6em;
}A nasz szablon wygląda tak:
» Teraz wybieram jeden z głównych trzech elementów jakie mamy w szablonie, a zawsze szablon dziele sobie tak:
- kolumna,
- posty,
- komentarze,
(i ew. strony - kiedy są oddzielone od kolumny).
Więc zawsze wybieram to co mam pierwsze w kodzie, czyli co wynika z tego kodu powyżej, najpierw napiszemy wygląd dla kolumny.
› kolumna
A tak wygląda kod dla kolumny:
.column-left-inner {
position:relative;
top:-480px;
left: -130px;
width:310px;
background: #318db2 !important;
}
.column-left-inner h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: normal;
text-align: center;
font-size: 20px;
letter-spacing: 1px;
border-bottom: .5px solid #fdfdfd !important;
box-shadow: 0 1px 0 #e47602 !important;
padding-bottom: 6px !important;
text-shadow: 1px 1px 0 #e47602 !important;
text-transform: lowercase;
}
#Text1 .widget-content, #Text2 .widget-content {
text-align: justify;
padding: 5px;
font-size: 13px;
letter-spacing: .5px;
word-spacing: 1px;
line-height: 1.3;
}
#LinkList1 a:link, #LinkList1 a:visited {
display: block;
text-align: center;
box-shadow: none !important;
background: #edf1f5;
margin: 5px 0 -18px 0;
padding: 2px 0;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
color: #318db2;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
#LinkList1 a:hover {
background: #e47602;
color: #edf1f5;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
#Label1 a:link, #Label1 a:visited {
display: block;
background: #389fc9;
box-shadow: inset 0 -3px 0 #2d83a5;
padding: 4px 0;
margin: 6px 0 -17px 0;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
color: #1e5e78;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
#Label1 a:hover {
background: #2d83a5;
box-shadow: inset 0 -3px 0 #389fc9;
color: #389fc9;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}› blog1 › komentarze, posty, itp.
/*BLOG > posty, komentarze, itp*/
#Blog1 {
width:800px;
position:relative;
top:105px;
left:-70px;
background: #318db2;
}
h3.post-title a, h3.post-title, .post-title, .comments h4 {
font-family: 'Cormorant Garamond', serif;
font-weight: normal;
text-align: center;
font-size: 36px;
box-shadow: none;
text-shadow: 6px 6px 0 #2d83a5, -6px -6px 0 #2d83a5;
margin-bottom: 25px;
}
.date-header span {
text-align: center;
font-size: 10px !important;
text-transform: uppercase;
letter-spacing: 4px;
background: #2d83a5;
color: #ddd;
}
i {
color: #b1d8e8;
}
b {
color: #ae570c;
}
strike {
color: #aaa;
}
u {
color: #eee;
background: #2d83a5;
text-decoration: none;
padding: 1px 6px;
}
.post-body {
text-align: justify;
}
.post blockquote, .comments p {
color: #eee;
background: #2d83a5;
padding: 10px 18px;
box-shadow: inset 0 -3px 0 #2d83a5, inset 0 -6px 0 #318db2, inset 3px 0 0 #2d83a5, inset 6px 0 0 #318db2;
}
.jump-link, .jump-link a {
text-align: center;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
color: #eee;
padding: 0 14px;
}
.post-footer {
text-align: center;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 2px;
color: #eee !important;
}
.post-footer a {
color: #eee !important;
}
.post-body img {
background: #2d83a5;
box-shadow: none !important;
}
.user, .user a {
color: #2d83a5 !important;
text-shadow: 1px 1px 4px rgb(255, 255, 255, .5) !important;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
box-shadow: none !important;
}
.comments .comments-content .datetime {
font-size:6pt;
text-transform:uppercase;
letter-spacing: 2px;
font-style: italic;
box-shadow: none !important;
}
.comments .comment .comment-actions a,.comments .thread-toggle a, a.comment-reply {
padding:2px 5px;
font-size:6pt;
margin-right:3px;
text-transform:uppercase;
letter-spacing: 1px;
}
.comments .comment .comment-actions a:hover,.comments .thread-toggle a:hover, a.comment-reply:hover {
color:#fff !important;
background:#e47602;
border-radius: 4px;
}
.comments .avatar-image-container, .avatar-image-container img{
max-width: 50px;
max-height: 36px;
padding: 0px !important;
border-radius: 100%;
}
.comments .avatar-image-container, .avatar-image-container img{
max-width: 50px;
max-height: 36px;
padding: 0px !important;
border-radius: 100%;
}
.blog-pager {
text-transform: uppercase;
letter-spacing: 3px;
font-style: italic;
font-size: 10px !important;
}› strony
A poniżej tak powinien wyglądać kodzik:
/*STRONY*/
.tabs-outer {
position: absolute !important;
top: 70px;
left: 633px;
height: 50px;
width: 61.6em;
padding: 0 !important;
}
#PageList1 .widget-content {
padding: 0 !important;
margin-left: -33px;
text-align: center;
}
#PageList1 a:link, #PageList1 a:visited {
display: inline-block;
background: #e47602;
margin: 3px 2px;
width: 125px;
border-radius: 20px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
font-weight: normal;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}
#PageList1 a:hover {
background: #c96902;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
}Więc tak wygląda moja praca z bardziej "rozbudowanymi" graficznie szablonami. Mam nadzieje, że artykuł jest napisany przejrzyście. Jeśli jednak macie jakieś pytania możecie je zadawać tutaj lub w zakładce "Pytania". Na wszystkie odpowiem.
Mam jeszcze dla was pytanko. Chcecie instrukcje na szablon minimalistyczny (w stylu tumblr) moim sposobem? ^^
Brak komentarzy:
Prześlij komentarz