Jak edytować wygląd komentarzy - Blogger

czwartek, 18 lutego 2016


Ostatnio zdałam sobie sprawę, że prawie każdy (główny) element bloga został przerobiony, niektóre nawet po kilka razy. Niestety, zabrakło jednego - komentarzy. Tak, komentarze również da się zmienić. Owszem, co raz więcej jest blogów, które mają wprowadzony system komentowania Disqus, ale jak wiadomo są zwolennicy tego systemu oraz przeciwnicy, którzy nadal są wierni systemowi komentowania Blogger i ten wpis jest skierowany do nich.

Tak jakby ktoś zapomniał o tym, jak wyglądają komentarze Bloggera przed modyfikacją:


Skoro już sobie przypomnieliśmy, to w takim razie nadszedł czas na to, aby powiedzieć sobie jakie selektory będą nam potrzebne. Oto one:

.comment-header - nagłówek komentarzy z nazwą komentującego, datą i godziną
.comments h4 - nagłówek komentarzy, nad wszystkimi komentarzami pod wpisem
.comment p - wszystkie komentarze
.comments .comment .comment-actions a, .comments .thread-toggle a - przyciski odpowiedz i usuń pod komentarzem
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover - przyciski odpowiedz i usuń pod komentarzami, po najechaniu na nie myszką
.avatar-image-container - avatar komentarzy (możemy ustalić obramowanie)
.comments .avatar-image-container,  .comments .avatar-image-container img - zdjęcie w avatarze

Wszystkie te selektory znajdziecie również TUTAJ

Skoro poznaliśmy selektory, jakie będą nam potrzebne do zmienienia wyglądu naszych komentarzy, to teraz możemy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS. Już wiemy jak dopisywać dany styl do selektora, więc zaczynamy naszą zabawę.

Zaczniemy od zmiany nagłówka z nazwą komentującego, datą i godziną, ja rozpisałam to sobie tak:
.comment-header {
font-family: Arial;
letter-spacing: 2px;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;}
.comment-header a:link {color: #c27ba0;}
.comment-header a:visited {color: #c27ba0;}
Jak widzicie dodatkowo dodałam kolor dla linków i dla linków odwiedzonych. Musimy pamiętać, że jeśli chcemy zmienić kolor nazwy użytkownika, daty i godziny to musimy dopisać .comment-header a:link i .comment-header a:visited

Efekt:

Kolejna rzecz to nagłówek komentarzy, nad wszystkimi komentarzami, czyli w moim przypadku "2 komentarze".  Kod rozpisałam sobie tak:
.comments h4 {background: #c27ba0;
text-align: center;
padding: 10px;
color: #fff;
text-transform: uppercase
font-size: 20px;
letter-sapcing: 2px;
font-family: Arial;
font-weight: 700;}
Efekt:

Teraz zajmiemy się selektorem .comment p, który odpowiada za wszystkie komentarze, ja rozpisałam go sobie tak:
.comment p {
color: #e06666;
font-size: 15px;
font-family: Arial;
}
Efekt:

Nadszedł czas na zmienienie wyglądu przycisków odpowiedz i usuń. Kody rozpisałam tak:
.comments .comment .comment-actions a, .comments .thread-toggle a {
background: #c27ba0;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;}
.comments .comment .comment-actions a:hover, .comments .thread-toggle a:hover {
background: #e06666;
font-size: 8px;
padding: 5px;
margin: 5px 5px;
font-family: arial;
color: #fff;
text-transform: uppercase;
border-radius: 10px;}

Efekt:

Przyszedł czas na avatary. Kod rozpisałam tak:
.avatar-image-container {margin-top: 20px;
margin-left: -20px;
border: 3px solid #e06666 !important;
shadow: 5px 5px 2px #FFFFFF;
}
.comments .avatar-image-container{
width: 55px;
max-height: 55px;
}
.comments .avatar-image-container img{
max-width: 55px;
height: 55px;
}


Jak widzicie, nie potrzeba nie wiadomo jak dużej znajomości CSSa, żeby uzyskać swój własny wygląd dla komentarzy. Mam nadzieję, że komuś ten wpis pomoże przy tworzeniu własnego szablonu :)
Udostępnij ten wpis:
Czytaj dalej »

Poznajemy Photoshopa część 1

niedziela, 14 lutego 2016


Jakiś czas temu na facebooku pytałam się Was, czy chcecie wpisy na temat Photoshopa i Illustratora, napisaliście, że chcecie, więc dziś pierwszy post z serii "poznajemy Photoshopa". Dlaczego postanowiłam zrobić wpisy o Photoshopie  w taki sposób, a nie tak jak to robię w przypadku GIMPa (same instrukcje na dany efekt)? Ponieważ, z GIMPem większość z nas miała styczność w podstawówce/gimnazjum/liceum i jakieś podstawy posiada. Photoshopa zazwyczaj musimy uczyć się sami i niektórzy się zniechęcają do niego przez to, że nie mają podstaw. Oczywiście zadbam o to, żeby były instrukcje na zrobienie różnych efektów w Photoshopie, ale to wszystko w swoim czasie - zaczynamy!

Tworzenie nowego pliku
Najprostsza rzecz na świecie, czyli tworzenie nowego pliku. Możemy zrobić to na dwa sposoby: wybierając plik - nowy lub używając skrótu klawiszowego ctrl + n (PC) lub cmd + n (Mac)


Obracanie obrazu 
Co zrobić jak chcemy mieć obraz w poziomie a mamy go w pionie? Kolejna prosta rzecz - musimy wybrać obraz - obracanie obrazu.


Okno narzędzi 
Musimy pamiętać o tym, że jeśli chcemy wysunąć więcej opcji, które ryją się pod danym narzędziem, musimy przytrzymać lewy przycisk myszy na narzędziu.



Okno warstw
Okno warstw jest nam wszystkim znane z GIMPa. To w Photoshopie, za wiele się od niego nie różni na pierwszy rzut oka.


Otwieranie innych okien 
Żeby otworzyć więcej okien, które mogą nam się przydać np. typografia lub historia należy wybrać okno.


Usuwanie naszych postępów 
Do tego możemy użyć skrótu klawiszowego alt+ctrl+z lub wybrać edycja - krok do tyłu.



Na początek chciałam Wam przedstawić najprostsze rzeczy. Nie chciałam dawać wszystkich informacji na raz, ponieważ mogłoby to Was zniechęcić. Jeśli jednak chcecie aby w następnej części pojawiło się więcej informacji, to dawajcie znać w komentarzu, piszcie co Was najbardziej interesuje, a ja się do Was dostosuje :)
Udostępnij ten wpis:
Czytaj dalej »

Szablon na Bloggera - Ms. mint brown do pobrania za darmo

wtorek, 9 lutego 2016


Wiem, że długo żadnego szablonu nie było, ale w końcu zebrałam się w sobie i zrobiłam :)

Szablon Ms. mint brown 

  • Kolorystyka: biel, mięta i brąz
  • Baza: Simple (prosty)
  • Układ: prawo/jedno kolumnowy - szablon na stronie głównej jest prawo-kolumnowy, po przejściu do wpisu, jest jedno-kolumnowy.
  • Na stronie głównej ukryta została data wpisu oraz stopka - pojawiają się dopiero po przejściu do wpisu. 
  • Najlepszy rozmiar nagłówka na tego bloga to: 400x136px 
Dodana jest instrukcja do tego szablonu, proszę ją przeczytać przed instalacją, aby uniknąć problemów. 



Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić graficzny pager bloga czyli zastępujemy strona główna/nowsze, starsze wpisy grafiką

poniedziałek, 8 lutego 2016


Wszyscy dobrze wiemy jak wygląda pager bloggera przed modyfikacją. Jest on bardzo tradycyjny i niczym nie zachwyca. Jednak można go zmienić i dodać mu tego czegoś na parę sposobów np. za pomocą font awesome lub możemy pobawić się trochę dłużej i zmienić w pager numeryczny (kiedyś o tym wspomnę). Dzisiaj chce Wam przedstawić jeden z tych sposobów, które pozwolą nam w prosty sposób odmienić nasz pager bloga. Będziemy zamieniać tradycyjny pager na graficzny.

1. Zrób kopię zapasową szablonu, ponieważ będziemy pracowali na kodzie HTML i istnieje ryzyko, że coś nam nie wyjdzie. Kopia pozwoli nam na wgranie ponownie nieuszkodzonego szablonu. Szablon - utwórz/przywróć kopię zapasową - pobierz pełny szablon.

2. Wybieramy szablon - edytuj kod HTML 
3. Klikamy kursorem obojętnie w jakie miejsce w kodzie i wybieramy ctrl + f lub cmd + f (Mac). Powinno pojawić nam się takie okienko:

4. Wyszukujemy <div class='blog-pager' id='blog-pager'> . W kodzie są dwa takie elementy, interesuje nas drugi, czyli musimy enter kliknąć dwa razy. Pod wyszukanym fragmentem pojawi nam się taka część kodu:


5. Teraz, musimy przygotować sobie grafiki, które będą widniały na naszym pagerze bloga i przesłać je na Tinypic lub Photobucket, aby uzyskać link do grafiki.
6. Teraz będziemy podmieniać kod, na link z ikonkami.

Przykład: 

<data:newerPageTitle/> - nowsze posty. Usuwamy tą część kodu, a zamiast niej wstawiamy: <img src="LINK OBRAZKA" />


Wszystko ma wyglądać tak:



Zapisujemy szablon. Efekt końcowy:



Na koniec mam dla Was 4 zestawy przycisków do pagera, które są do pobrania za darmo.



Grafiki są mojego autorstwa, więc proszę o pobieranie ich na użytek własny i o nieudostępnianie im osobom 3. Jeśli chcecie podać dalej dane grafiki, to proszę o odsyłanie osób 3 do tego wpisu.
Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić datę w kółku za pomocą CSS

czwartek, 4 lutego 2016


Jak zapewne wiecie, wygląd oraz położenie daty możemy modyfikować dowolnie za pomocą kodów CSS oraz HTML lub za pomocą samego CSS. Jakiś czas temu robiłam wpis o tym, jak zrobić datę wpisu w chorągiewce, więc teraz nadszedł czas na wpis, w którym dowiecie się jak zrobić datę wpisu w kółku za pomocą CSS i nie tylko w szablonie Awesome inc. (rewelacja), ale również w szablonie Simple (prostym) (Kody z jakimi miałam styczność na zrobienie daty w kółku, działały tylko na szablonie Rewelacja, w szablonie Prostym był z danym kodem problem i dużo osób zgłaszało błąd).

1. Wybieramy: Szablon - dostosuj - zaawansowane - dodaj arkusz CSS
2. Wklejamy poniższy kod: (dla szablonu Simple (prosty))
.date-header span {
background-color: #ddd;
text-transform: uppercase;
text-align:center;
color: #ffffff;height:47px;
width:47px;
padding-top: 10px;padding-bottom: 2px;padding-right: 5px;padding-left: 5px;margin-right: 10px;margin-top: 10px;font-weight: 700;
float:left;
font-family: Arial;
font-size:17px;
letter-spacing: 1px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

2a. Wklejamy poniższy kod: (dla szablonu Awesome inc. (rewelacja))
.date-header span {
background-color: #000;
text-transform: uppercase;
text-align:center;
color: #ffffff;
height:47px;
width:47px;
margin: -30px 10px 10px -60px;font-weight: 700;
float:left;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;}

Czcionkę i wielkość daty w szablonie Awesome inc. ustawiamy w zakładce "Nagłówek z datą" 

Wszystkie wartości pogrubione i zaznaczone na kolorowo są zmienne. Analiza kodów:

Kolor tła daty
Kolor czcionki 
Wysokość 
Szerokość 
Górny margines wewnętrzny 
Dolny margines wewnętrzny 
Prawy margines wewnętrzny 
Lewy margines wewnętrzny 
Margines prawy
Margines górny
Marginesy 
Rodzaj czcionki 
Wielkość czcionki
Odstęp między literami/cyframi 

Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life