Dostosowywanie szablonu - krok 2 - sidebar

Z tego miejsca stwierdzam i uprzedzam, że mój schemat robienia szablonu jest ten sam, jednak wszystko wykonuję w innej kolejności niż przedstawiam to w cyklu.

<BlogItemBody>

Sidebar, czyli nasza lewa lub prawa kolumna, zawarte w niej gadżety i najogólniej rzecz biorąc wszystko co tak naprawdę tego dotyczy. Post ten zawierać będzie 2 możliwości "poukładania" sidebaru, które są wykorzystywane przeze mnie namiętnie, a także wiele innych rzeczy, które jak sądzę w dosyć spontaniczny sposób się tam pojawią. 

Selektory dla sidebaru:

• .widget-content { gadżet bez tytułu, określa nam całą zawartość }
• .main-inner .widget { nie mogłam się tego dopatrzeć w kodzie za pomocą którego tworzyłam ten post, ale takie coś jest i mówi nam o efekcie dla pojedynczego gadżetu wraz z jego tytułem, użytego jednak na wszystkich na blogu :);}
• .sidebar .widget { efekt dla tego selektora pojawi się tylko w gadżetach w bocznych kolumnach;}
• .main-inner .column-right-inner, .main-inner .column-left-inner { dostosowywanie kolumn pobocznych bez wyróżniania oddzielnych gadżetów; }
• h2 { czyli tytuł naszego widgetu ( gadżetu ). Selektor może w tym przypadku może przyjmować również postacie : .sidebar .widget h2 - wówczas tytuł będzie przyjmować dany wygląd tylko w kolumnach bocznych lub .main-inner .widget h2 - efekt pojawi się wszędzie oprócz gadżetów w footerze ( stopce );}

Przeważnie w moich szablonach gadżety tworzone są na dwa sposoby. Pierwszy zawiera w sobie i zawartość gadżetu i jego tytuł, a drugi troszkę wyodrębnia nam tytuł od całości. Żeby było łatwiej zrozumieć pozwolę się posłużyć przykładami z życia wziętymi, czyli prościej szablonem Impossible i Walking Travesty.

W szablonie Impossible mamy tą ciut mniej skomplikowaną i, można by wręcz powiedzieć, pospolitą wersję, aczkolwiek ta wersja zakłada w sobie naprawdę dużą możliwość zmian.

Chodzi przede wszystkim o tytuł gadżetu. Nie dość, że mamy do użycia przeróżne obramowania ( w tym przypadku na dole ) , to także możemy dodać dowolne tło, czy to będzie po prostu kolor czy obrazek całość na pewno będzie wyglądać dobrze i estetycznie.

Kod w tym przypadku prezentuje się tak:

.main-inner .widget h2
{font: normal 7pt arial; color: #c83535; letter-spacing: 1px; text-transform:uppercase; border-bottom: 1px dotted #555; margin-bottom: 5px; margin-top:1px; cursor:pointer; margin-bottom:4px; -webkit-transition-duration: .50s }
.sidebar .widget {border:1px solid #111;background:#111;padding:5px;margin-top:-20px;opacity:0.8; }

Wspomniane obramowania to oczywiście nie tylko dolne kropkowane czy kreskowane. Często również lubię dodawać jednostronne prawe czy lewe.  
A teraz o selektorach, których użyłam .main-inner .widget h2, czyli każdy tytuł gadżetu na blogu + data w poście. .sidebar .widget - w tym przypadku odnosi się to tylko do gadżetów w lewej czy prawej kolumnie. Lubię ten selektor, bo dzięki niemu dla stopki bloga można zrobić inny, ciut bardziej odpowiadający właśnie temu miejscu wygląd. 

Drugi z przykładów do w pewien sposób "tytuł oddzielony od zawartości gadżetu".  W tym przypadku postępuję bardzo schematycznie. 

Używamy w tym przypadku tego samego selektora dla tytułu, czyli:

.main-inner .widget h2
{font: normal 6pt arial; color: #666666; text-align:left; display:inline-block; background:#d4d3e5; padding:3px; text-transform:uppercase;border:1px solid #f5f5f5; letter-spacing:1px; border-bottom:none;margin-bottom:0px;}

Jedyną różnicę odgrywa selektor dla zawartości gadżetu. Użyty poprzednim razem selektor .sidebar .widget zahacza swoim zasięgiem również o tytuł gadżetu, robią tak zresztą wszystkie selektory z wyjątkiem jednego.:

.widget-content {border:1px solid #f5f5f5; background:#fff;padding:8px;margin-bottom:-20px;}
.widget-content img { max-width:220px;}

Właśnie .widget-content odpowiada TYLKO za zawartość gadżetu, czyli idealnie pasuje nam do właśnie 

tego efektu. W powyższym przykładzie dodałam również maksymalną długość dla obrazka właśnie w gadżecie, aby mi nic specjalnie nie wyłaziło i nie psuło efektu w kolumnie. 

Na koniec jeszcze pragnę zwrócić jeszcze uwagę na jedną rzecz. Stosując padding wszechstronny, jeśli mogę się tak wyrazić, rozszerza nam się pole z każdej strony. W przypadku tytułu zdecydowanie proponuję stosować padding lewostronny lub prawo w zależności od strony gdzie macie tekst. Wówczas, nasze pole pod tytułem nie będzie niczym wielki klocek, a oddalimy od granicy tekst.

Hejże, jeszcze nie koniec. Taki skromny dodatek z mojej strony. Od czasu do czasu każdy ma ochotę dodać taką czy inną ikonkę przy tytule gadżetu. Że człowiek naściągał tego ostatnimi czasy całe foldery to przy takiej miłej okazji pragnie podzielić się tym z cały światem. Niestety nie mam pojęcia skąd je ściągnęłam, zaraz się tym zajmę, ale raczej ciężko będzie znaleźć autora. 

 

No cóż to by było na tyle ode mnie, jak widzicie nadzwyczajnie skomplikowane póki co to nie jest i nie będzie, chyba że komuś zachce się nowe ramki tworzyć, wtedy to się człowiek może narobić. Jednak powtórzę to po raz kolejny, że w tym przypadku to nie umiejętności graficzne czy znajomość css'a, tylko wyobraźnia, bo wiecie tego raczej się nie nauczyć, a stron i na temat CSS'a i grafiki jest dosyć sporo. :)

Czy Wy też macie wrażenie, że gadam niczym nauczyciel?