poniedziałek, 6 maja 2013

Data, tytuł i post-header - efekty

Element: Data/tytuł/post-header
Stopień trudności: xxxx
Czas wykonywania: <10 minut
Dzisiaj przedstawię Wam pięć efektów dla daty, tytuły i post-headera razem wziętych, które - mam nadzieję - pomogą Wam opanować tę część bloga, a także być może przydadzą się przy Waszych własnych modyfikacjach.
Zacznijmy jednak od teorii, jak to już mam w zwyczaju; trochę anatomii, w tym przypadku, selektorów nikomu jeszcze nie zaszkodziło.
  • data - możliwe selektory, które pomogą nam w jej modyfikacji to .date-header lub h2 - przy czym ten drugi zadziała również na tytuły gadżetów;
  • tytuł - .post-title powinien zadziałać lub h3.post-title
  • post-header - pewnie będziecie zaskoczeni, ale po prostu .post-header
Jednak kto zrobił krótki spacerek po blogu od wewnątrz wie, że mamy dwie możliwości pokazywania daty. Jedna - standardowa - pojawia się nad tytułem posta, a druga jest elementem .post-header. Używanie dwóch na raz to może lekka przesada, dlatego o "włączeniu" lub "wyłączeniu" jeden z nich możemy zdecydować wchodząc w Układ, a następnie klikając posty na blogu.
W układzie również macie możliwość ustalenia pozycji dla elementów stopki posta lub jego headera. 
Jako, że dzisiaj o "górnej części" bloga, część elementów proponuję przerzucić do post-headera. Stopką zajmiemy się innym razem.

Oczywiście powyższe selektory można zamieniać ingerując w kod HTML naszego bloga, ale dzisiaj standardowo i z podstawowymi selektorami.

Trick z "kwadracikiem"
Zastanawiało Was kiedyś jak takie coś zrobić? Jeśli tak, to dzisiaj otrzymacie odpowiedź.
W tym przypadku możecie działać na każdym selektorze, niezależnie od jego miejsca. Można użyć tego kodu nawet na tytułach gadżetów.
Dzień dobry, Pan Kwadracik jestem.
.post-header {font: normal 7pt arial;color: #666666; letter-spacing: 1px; text-transform:uppercase; border-right: 8px solid #FF9090; ;padding:4px; padding-left:15px; padding-right:-5px; width:471px; background:#f5f5f5;  margin-bottom: 5px; margin-right:1px; text-align:right;margin-top:3px; }
  • border-right: kwadracik 
  • width:  szerokość naszego post-headera; należy ją dobrać dla swojego bloga. Niestety metodą prób i błędów.
Jest to przepis na kwadracik po prawej stronie, co niejako pomaga nam pozbyć się paru problemów po drodze. Wystarczy odpowiednio ustawić długość i nasz element niejako sam przemieści się ku prawej stronie.
Chcąc uzyskać ten efekt po lewej stronie to nie dość, że będziemy musieli ustawić długość elementu, ale także przemieścić go odrobinkę w lewą stronę, jeśli chcemy, aby jego część wychodziła poza pole środkowej kolumny. W tym wypadku pomoże na margin-left. Wartość dla niego to padding użyty dla posta. 


znowu znosi mnie na prawo
Dzień dobry, cześć i czołem
Ten efekt jest tworzony  za pomocą właściwości margin. To ona nam "przewozi" post-header na jedną czy drugą stronę, jednak może rozjaśnię Wam umysły, gdy popatrzycie na kod. Może być zastosowany dla wielu selektorów.
.date-header {background: #ffffff; font: normal 6pt arial; color: #94cbc9; text-align:left; margin-left:396px; padding-right:30px; background:#f3f9f9; width:100px; border-right:5px solid #a3cbcb; padding-left:10px; text-transform:uppercase;padding-bottom:7px; }
U mnie efekt jest z prawej strony, dlatego dla margin-left jest spora wartość. Po ustawieniu długości ( width ) i obramowania z prawej strony,  całość nadal trzymała się prawej strony. Aby zmienić jej pozycję użyłam margin-left w celu wymuszenia na niej przemieszczenia lub - inny pomysł - możecie użyć float:right. 

Wszystkie efekty przedstawione poniżej ustawiane są po całkowitym "resecie" kodu CSS szablonu Simple. 

Efekt 1

Wtorek, 31.12.2014
Przykładowy tytuł postu
Napisane przez Tyler // 3 komentarze
.post-title {border-left:15px solid #bdc4c9;;color:#aaa;font-family:times;font-size:12px;letter-spacing:2px;text-shadow:1px 1px 0px #ddd;padding-left:3px;margin-bottom:5px;font-style:italic;font-weight:400;}
.post-header {font-family:calibri; border-top:1px solid #bdc4c9; text-transform: uppercase; padding: 5px;color: #ccc; font-size: 10px; margin-bottom: 6px; line-height: 100%; letter-spacing: 1px; margin-top:-5px;color:#555;}
.date-header {border-left:15px solid #aaa;padding:1px;font-size:9px;text-transform:uppercase;letter-spacing:2px;line-height:14px;font-weight:400;font-family:calibri;padding-left:3px;font-size:10px;}
*** 
Efekt 2
Wtorek, 31.12.2014
Przykładowy tytuł postu
Napisane przez Tyler // 3 komentarze
.post-title {background:#f5f5f5;color:#aaa;font-family:Open Sans Condensed;font-size:18px;letter-spacing:2px;text-transform:uppercase;padding:3px;margin-bottom:5px;padding:10px;margin-top:16px;font-weight:400;margin-left:-10px;margin-right:-10px;}
.post-header {font-family:calibri; background-color:#696b73; text-transform: uppercase; padding: 5px;color: #ccc; font-size: 10px; margin-bottom: 6px; line-height: 100%; letter-spacing: 1px; margin-top:-5px;margin-left:-10px;margin-right:-10px;}
.date-header {text-align:right;display:inline;float:right;padding:1px;font-size:9px;text-transform:uppercase;letter-spacing:2px;line-height:14px;font-weight:400;font-family:calibri;padding-left:3px;padding-right:3px;}

Efekt 3

Wtorek, 31.12.2014
Przykładowy tytuł postu
Napisane przez Tyler
3 komentarze
.date-header {border:1px solid #eee;font-weight:400;font-size:10px;letter-spacing:3px;text-transform:uppercase;padding:11px;font-family:arial;letter-spacing:3px;background:#fbfbfb;}
.post-title {text-align:right;font-family:Arial;font-weight:400;font-size:10px;font-style:italic;padding:5px;letter-spacing:3px;}
.post-header {background:#b59a9e;font-family:calibri;font-size:10px;padding:3px;text-transform:uppercase;width:140px;float:right;margin-top:-62px;line-height:10px;padding:9px;color:#eee;}
Wszystkie efekty przedstawione powyżej ustawiane są po całkowitym "resecie" kodu CSS szablonu Simple. 
Proszę Państwa, kawał drogi za nami, ale ta ścieżka niestety na tą chwilę się kończy. Zostawiam Was na osobności z powyższymi efektami i mam nadzieję, że okażą się pomocne w tworzeniu Waszego wymarzonego szablonu, jak i przyczynią się do lepszego zrozumienia tych funkcji.

7 komentarzy:

  1. Wiesz, że ratujesz życie człowiekowi tymi swoimi kodzikami?
    Teraz tak sobie myślę... Jak musi być ciężko nowym bloggerom/grafikom, którzy byli przyzwyczajeni do onetu i chcąc wrócić, zostali wepchnięci w wir CSS'a i HTML'a. Współczuję. Czasem po prostu chciałabym wrócić do czasów, kiedy szablon był prostu, bez jakiś udziwnień... Możliwe, że moda na nie wróci po części, ale szczerze w to wątpię. Zresztą, teraz już jestem ciekawa, czy po 5 latach ktoś jeszcze będzie pamiętał o starym onecie. Chyba jedynie garstka.
    Miło, że próbujesz nam przybliżyć się do CSS'a. Nawet jeśli nie piszę komentarzy, gdzieś tam cichaczem jestem i Cię oglądam. ;)
    Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja nadal pamiętam o onecie! Tam zaczynałam ;)

      Usuń
  2. Witam, mam pytanie, ponieważ staram się przenieść datę pod tytuł posta już od miesiąca:( Robię dokładnie tak jak napisałaś. Odnajduję dany kod dotyczący daty wycinam go i wklejam pod drugi kod. Data jednak całkowicie mi znika zamiast się przenieść niżej:( bardzo proszę o pomoc.

    OdpowiedzUsuń
  3. A ja coś kurcze nie mogę podnieść tytułu postu, została "dziura" ponieważ data jest w formie ozdobnej z boku, brzydko wygląda taka przerwa, co by załatwiło sprawę? Nie wiem jeszcze od czego to zalezy, ale nie mogę zmienić czcionki linku "komentarz", mimo, że wklejałam kod. Nie wiem czy Blogger świruje czy co...

    OdpowiedzUsuń
  4. Pozwoliłam sobie wykorzystać efekt 1, ale chyba coś robię źle, bo "kwadraciki" przy dacie i tytule postu się nie stykają.
    Jakbyś mogła zerknąć i coś poradzić, byłabym bardzo wdzięczna :)
    capturing-the-beauty.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Być może jest to kwestia ustawienia czcionki, jej wielkości itp. Niestety nie mam dostępu do Twojego kodu i nie wiem co tam się dzieje. Może po prostu najprościej dodać margines dolny dla daty lub górny dla tytułu posta na minusie.
      U Ciebie czcionki są większe, więc prawdopodobnie po prostu niektóre wartości trzeba także powiększyć.

      Mam nadzieję, że jakoś to się uda załatwić.
      Jak coś to pisz jeszcze. ;)

      Usuń
    2. Rzeczywiście. Dodałam ujemny margines dolny dla daty, rozszerzyłam trochę kwadracik (teraz już prostokącik) dla tytułu i jest ok.
      Dziękuję bardzo :)

      Usuń

- +
Szablon wykonany przez Tyler