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.