Zmiana wyglądu tytułów gadżetów za pomocą kodu CSS

CSS Tutorial

Zmiana wyglądu tytułów gadżetów za pomocą kodu CSS

CSS jest wspaniały. Serio. Czasem może irytować, ale to zazwyczaj przez jakiś nasz błąd, którego nie dostrzegamy, ale bluzgać zaczniemy - jakże by inaczej. Dziś przedstawię wam prosty tutorial, mianowicie jak w prosty sposób za pomocą kodów CSS można zmienić wygląd tytułów gadżetów.
Kiedyś pojawił się post o tym jak dodać własne, graficzne tytuły gadżetów. Jednak potem zrobiłam się leniwa, a może określenie "bardziej wygodnicka" będzie tu trafne.
Oczywiście aby nasze tytuły gadżetów się zmieniły to potrzebujemy kodu, składającego się z selektoru i stylów. Tak naprawdę aby taki kod sobie stworzyć to za wiele nie potrzeba.

Musimy wiedzieć jak oznaczyć nasze kolumny boczne, albo chociaż jedną z nich. Do tego posłuży nam selektor .sidebar, pewnie każdy się zastanawia czym on się różni od selektora .column-right-inner lub .column-left-inner już wyjaśniam poniżej.

.sidebar - odpowiada za wszystkie kolumny, zarówno za lewą jak i prawą
.column-right-inner - jak sama nazwa wskazuje odpowiada  tylko za prawą kolumnę.
.column-left-inner - odpowiada tylko za lewą kolumnę

Nie ma dużej filozofii prawda? Kolejną rzeczą jaką musimy wiedzieć to to jaki selektor mają gadżety. Większość z was posiada smartphony, więc będzie wam łatwo skojarzyć jaki selektor mają gadżety czyli .widget, ale to jeszcze nie koniec. Niestety nie wystarczy nam znajomość .sidebar i .widget, musimy jeszcze wiedzieć jak oznaczyć nagłówki gadżetów. Wiecie, że każdy nagłówek ma jakieś h z cyferką jak np. h3 .post-title, nagłówki gadżetów mają h2 np. h2 .date-header. Nasze kody dotyczące nagłówków w kolumnach bocznych będą wyglądać następująco:

.sidebar .widget h2 - odpowiada za wszystkie nagłówki gadżetów, we wszystkich kolumnach bocznych.
.column-right-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej prawej.
.column-left-inner .widget h2 - odpowiada za wszystkie nagłówki gadżetów, tylko w kolumnie bocznej lewej.

Tak na marginesie to selektor .sidebar .widget h2 widnieje w spisie selektorów CSS na moim blogu.

Skoro mamy już selektor dla naszych tytułów gadżetów, to wypadałoby teraz dopisać kawałek jakiegoś stylu, żeby wyglądało to jakoś przyzwoicie. Tutaj mamy duże pole do popisu, a wiecie dlaczego? Bo możemy dopisać sobie wszystko co chcemy. Poniżej trzy przykłady jak to może wyglądać:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background-image: url (LINK DO TŁA);
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
background: #4eacfa; - kolor tła
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:

.sidebar .widget h2 {
padding: 10px; - marginesy wewnętrzne, tego warto użyć
border-style: solid; - rodzaj ramki 
border-width: 2px; - grubość ramki
border-color: #4eacfa; - kolor ramki
color: #000; - kolor tekstu
font-family: Lobster; - rodzaj czcionki 
font-size: 20px; - wielkość czcionki
text-align: center; - położenie tytułu gadżetu
}

W moim przypadku to wygląda mniej więcej tak:

Czytaj dalej

Jak przenieść stopkę wpisu na bok

CSS Tutorial

Jak przenieść stopkę wpisu na bok

W poniedziałek przedstawiłam Wam proste DIY, a dziś zaprezentuje jak w prosty sposób możemy przenieść stopkę naszego wpisu (pole, na którym znajduje się autor, komentarze itd.) na bok - obojętnie lewy czy prawy. Nie musimy grzebać w HTML, a jedyne co musimy zrobić to pobawić się trochę CSSem. 

Przechodzimy: szablon - dostosuj - zaawansowane - dodaj arkusz CSS. teraz zaczyna się nasza zabawa. Musimy stworzyć sobie kod, a do tego będą potrzebne nam selektory, która znajdziecie tutaj. Ja stwierdziłam, że całej stopki nie będę przenosić. Przenosić będę tylko autora i komentarze.

Selektor dla autora to .post-author, a komentarzy to .comment-link. Musimy pamiętać o tym, że każdy element naszej stopki musimy zakodować oddzielnie, jeśli zrobimy wszystko na raz, to wszystkie pozycje będą jedna na drugiej. Kiedy mamy już nasze selektory to trzeba coś z nimi zrobić - no niestety sam selektor nie wystarczy więc najprościej jest zacząć od pozycjonowania 

.post-author {

position: absolute; - nie wpisujcie tu fixed czy innej pozycji, bo one się wam najzwyczajniej w świecie nie sprawdzą - nie będzie oczekiwanego efektu, a po mailach, które do mnie wysyłacie "bo kod mi nie działa" widzę, że duża część osób zmienia to, dlatego kod nie działa. 

Następnie pod spodem możemy (ale nie musimy) ustawić sobie szerokość, ja zawsze wolę tą szerokość dodać aby lepiej sobie wszystko dopasować. 

szerokość to width: 0px; - 0px jest wartością zmienną. Czyli nasz kod obecnie prezentuje się tak: 

.post-author {

position: absolute;

width: 0px;

Na razie nic się nie dzieje, oprócz tego, że autor nam się trochę w stopce przesuną, ale spokojnie, zaraz do wszystkiego dojdziemy. Następnie pod width możemy dodać top - odpowiada nam to za dany element w pionie, jest to przydatne, bo dzięki temu możemy ustalić sobie położenie danego elementu - nie musi on być np. na wysokości tytułu wpisu, możemy ustawić go na wysokości daty wpisu. 

Kod prezentuje się obecnie tak: 

.post-author {

position: absolute;

width: 100px;

top: 10px;

Pamiętajmy o tym, że przy top, również mamy wartość zmienną. Tutaj akurat poruszyło nam się znacznie więcej, bo nasz autor poszedł w górę i jest w okolicach tytułu wpisu, ale to nadal nie jest to o co nam chodziło, bo nasz autor znajduje się gdzieś na środku po między wpisem a tytułem wpisu, lub zlewa się z tekstem. Następnie co musimy zrobić to ustalić, z której strony ma nasz autor być z lewej czy prawej. Ja sobie wybrałam lewą stronę, a więc pod top: 10px; dopisuje left: -100px; Oczywiście pamiętamy o tym, że wartość jest zmienna. Kod prezentuje się tak: 

.post-author {

position: absolute;

width: 100px;

top: 10px;

left: -100px;

Już jesteśmy blisko końca, nasz autor powinien być już po lewej stronie, ale żeby to jeszcze jakoś lepiej wyglądało to możemy dodać sobie wyśrodkowanie tekstu. Pod left -100px; wpisujemy text-align: center; Kod prezentuje się tak: 

.post-author {

position: absolute;

width: 100px;

top: 10px;

left: -100px;

text-align: center;

Kolejny element jaki jest dla nas istotny to wielkość czcionki w tym celu pod text-align: center; piszemy font-size: 7px - wartość zmienna. Nasz kod prezentuje się tak: 

.post-author {

position: absolute;

width: 100px;

top: 10px;

left: -100px;

text-align: center;

font-size: 7px;

W tym momencie możemy zakończyć nasz kod, ale żeby nie było nudno, to pobawimy się jeszcze trochę. Do naszego kodu dodamy rodzaj czcionki czyli pod font-size: 7px; dopiszemy sobie font-family: Verdana; - oczywiście rodzaj czcionki możemy zmienić. Nasz kod będzie wyglądał teraz tak: 

.post-author {

position: absolute;

width: 100px;

top: 10px;

left: -100px;

text-align: center;

font-size: 7px;

font-family: Verdana;

Do tego kodu dodałam jeszcze kolor czcionki color: #000 !important; - kolor oczywiście też możemy zmienić, następnie dodałam ozdobny paseczek z lewej strony za pomocą border-left: solid 4px #3a717d; - możemy ustawić ten paseczek również z prawej, zamieniając border-left na border-right oraz dodałam położenie dla tego ozdobnego paseczka padding-left: -10px; Teraz mój kod wygląda tak: 

.post-author {position: absolute;

width: 100px; 

top: 10px;

left: -100px;

text-align: center;

font-size:10px; 

font-family: Verdana;

color: #000 !important;  

border-left: solid 4px #3a717d; 

padding-left: -10px;}

A wygląda to tak: 

Pomyliłam się jeśli chodzi o podanie wyników dotyczących konkursu. Wyniki pojawią się nie 16.04 (jutro) tylko 17.04 (piątek) Przypominam również o ankiecie, którą znajdziecie w kolumnie bocznej. 

Czytaj dalej