Twórczy notatnik: Jak przenieść stopkę wpisu na bok

środa, 15 kwietnia 2015

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.