szablony katemac

Audrey Hepburn w Śniadaniu u Tiffany'ego jest rewelacyjna. Jest w niej to coś. Z wielką chęcią ujęłabym to w szablon ale chyba nie potrafię. Poprzedni szablon mimo iż wykorzystywał zdjęcie Holly to nie bardzo był w klimacie Śniadania (no może przy sporej dozie wyobraźni był jak przyjęcie u Holly w mieszkaniu). Chciałabym zrobić dwa szablony z Audrey jako Holly: jeden bardziej glamur: okulary, mała czarna i śniadanie u Tiffany'ego; drugi mniej szykowny, eklektyczny, bardziej swobodny, w podróży. Taki szablon w którym od razu słychać Moon River. Dzisiaj prezentowany szablon nie bardzo kojarzy się z jakimś konkretnym filmem Audrey, ma bardziej przedstawiać ją samą niż którąś z jej ról. Powiedzmy, że to założenie udało mi się spełnić ale przede wszystkim dlatego, że jest niska zawartość szablonu w szablonie a siłą tego wyglądu jest zdjęcie.

filmowy 05 - Audrey Hepburn

Uwagi:

• Jak napisałam wcześniej, nie jest to skomplikowany szablon. Jedno zdjęcie i tekst pisany Georgią i Verdaną.
• Zestaw opisanych skryptów to oczywiście podstawowe bloksowe czarodziejstwa: zwijane zakładki, zwijane archiwum (s.z.y.m.o.n), zwijane archiwum (Eskey), ostatnie komentarze, awatary w komentarzach
• Wklejki, które sprawdziłam i może trochę zmieniłam to FotoForum, Flickr, Delicious
• oczywiście jest i uda(wa)na Stopka a także opis klas boks i tyt. Jeżeli chcielibyście coś dodać pod wąską szpaltą to spokojnie można z nich skorzystać.

Jeżeli kogoś zastanawia dlaczego umieściłam dwa zrzuty ekranowe tego samego szablonu to już wyjaśniam. Proszę przyjrzeć się uważniej to nie są dokładnie takie same szablony - różnią się kolorystyką. Zdjęcie jest dokładnie to samo, podobnie układ, jednak nie mogłam się zdecydować na kolorystykę: czerwona jak szminka Audrey czy komplementarna do niej cyjanowo-zielonkawa.

Jeżeli chcesz wypróbować wersję cyjanową to po skopiowaniu szablonu filmowego 05 z Audrey (czerwonego) sprawdź czy bazowy szablon to Spokojny (jeżeli nie to zmień na spokojny) i wymień arkusz w polu na kod css: wklej tam ten cyjanowy kod. Jeżeli jednak zielonkawa wersja nie przypadnie Ci do gustu to zawsze możesz wrócić co czerwonej, w polu na arkusz wklej czerwony kod.

Dzisiejszy zestwaw poprawionych szablonów zawiera szablony filmowe. Tymczasowo jest to zaledwie pięć szablonów ale lubię tą serię więc liczę na to, że zestaw się powiększy. Najbardziej oryginalny z tej serii jest The Kid ale podoba mi się bardzo pierwszy z Monroe i piąty z Hepburn, z całą pewnościa będzie ich więcej.

Dzisiejszym zmianom towarzyszy kolejna filiżanka. Tym razem jest to projekt autorstwa Fast Icon. Cały zestaw Coffee Break jest uroczy... taki trochę śniadaniowy.

W przypadku tego szablonu od początku wiedziałam, że jego głównym motywem będzie rysunek serca lecz nie tego walentynkowego ale prawdziwego: komory, przedsionki i te sprawy. Gdy zdecydowałam, że szablon powinien być prosty i sprawiać nowoczesne wrażenie od razu przyszedł mi do głowy Euro granatowy. Moim zdaniem jest to jeden z moich lepszych pomysłów i wielokrotnie zastanawiałam się, czy nie udostępnić go bez loga euro. Zazwyczaj dochodzę jednak do wniosku, że to niepotrzebne. Logo łatwo sobie można usunąć. Podobnie było tym razem. Skoro postanowiłam powrócić do tego szablonu to musiałam wprowadzić w nim kilka zmian – tym razem szablon jest bardziej czerwony ale w dalszym ciągu pozostaje tak samo uniwersalny i serca można się pozbyć równie łatwo jak poprzednio loga.

Serdeczny 09 - organiczny

Uwagi:

• Zestaw opisanych skryptów to oczywiście podstawowe bloksowe czarodziejstwa: zwijane zakładki, zwijane archiwum (s.z.y.m.o.n), zwijane archiwum (Eskey), ostatnie komentarze, awatary w komentarzach
• Wklejki, które sprawdziłam i może trochę zmieniłam to FotoForum, Flickr, Delicious
• Jest i udawana stopka oraz opisałam klasę boks i tyt. Jeżeli chcielibyście coś dodać pod wąską szpaltą to spokojnie można z nich skorzystać.
• Organiczny najdłużej nie miał swojego typu-kształtu.
• na deser polecam rytm serca Roisin Murphy

Ósmy szablon serdeczny w ogóle nie przypomina tego czym był w lutym zeszłego roku. Nawet nie wykorzystuje tych samych pomysłów. Na początku była tu dama kier w dość staroświeckim stylu, potem serca i motyw Rising Sun, serca przebite strzałą, mieczem, otczone cierniami, płonące itd. Motywów miałam całkiem sporo ale trudniej było o konkretny pomysł. W którymś momencie coś przestawało grać i koniec z szablonem. W końcu natrafiłam na stary rysunek pary na tle granatowego gwieździstego nieba. Świetnie pasowała do szablonu który nazwałam retro i była na tyle oryginalna aby mnie zainteresować.

Przedstawiam więc ósmy szablon serdeczny, trzeci szablon retro: Para.

Serdeczny 08 - retro Para

Uwagi:

• Zestaw opisanych skryptów to oczywiście podstawowe bloksowe czarodziejstwa: zwijane zakładki, zwijane archiwum (s.z.y.m.o.n), zwijane archiwum (Eskey), ostatnie komentarze, awatary w komentarzach
• Wklejki, które sprawdziłam i może trochę zmieniłam to FotoForum, Flickr, Delicious
• Jest i udawana stopka oraz opisałam klasę boks i tyt. Jeżeli chcielibyście coś dodać pod wąską szpaltą to spokojnie można z nich skorzystać.
• Retro początkowo miał być bardziej dirty, jak muzyczny zniszczony ale jak widać gdy wymyśliłam typ retro to i tutaj go zastosowałam.

Ten szablon powstał w lipcu i trochę to w nim widać. Intensywne, nasycone kolory, błękit nieba, różowe kwiaty w kształcie serc... Zaletą tego szablonu jest właśnie kolorystyka. Kolory są intensywne, wyraźne ale nie jaskrawe. Grafika: fragmenty zdjęcia i postarzone krawędzie bloga odgrywają tu drugorzędną rolę. Podobają się? To super. Nie? Można się ich bez problemu pozbyć i w tle tytułu umieścić własna ilustrację tak jak to miało miejsce w przypadku szablonów z serii blokowej. Ten w odróżnieniu do tamtych ma lżejszy opis elementów. Nie są one ustawione w bloki tylko zachowują zwyczajny układ listy, wers pod wersem.

Serdeczny 07 - flowers

Uwagi:

• Zestaw opisanych skryptów to oczywiście podstawowe bloksowe czarodziejstwa: zwijane zakładki, zwijane archiwum (s.z.y.m.o.n), zwijane archiwum (Eskey), ostatnie komentarze, awatary w komentarzach
• Wklejki, które sprawdziłam i może trochę zmieniłam to FotoForum, Flickr, Delicious
• Jest i udawana stopka oraz opisałam klasę boks i tyt. Jeżeli chcielibyście coś dodać pod wąską szpaltą to spokojnie można z nich skorzystać.
• Flower początkowo miał być wzorowany na szablonie top ale jak widać w rezultacie skończył jako handmade.

Szablony z serii serdecznej zaczęłam robić przed zeszłorocznymi walentynkami. I choć początkowo planowałam zrobić je wszystkie od razu to doszłam do wniosku, że nie chcę aby te szablony były w użyciu tylko w walentynki i przesunęłam publikację następnych na późniejszy okres. W rezultacie pojawiło się ich tylko sześć a pozostałe trzy wielokrotnie zmieniały wygląd i chociaż zrobione były już dawno to dostępne są dopiero od kilku dni.

Poprawkom w szablonach serdecznych towarzyszy ikonka którą zaprojektował Milosz Wlazlo.

Nie chciałam was dręczyć walentynkami, nie mam nic przeciwko romantyzmowi, czy traktowaniu 14 lutego jako okazji do powiedzenia ludziom w otoczeniu że znaczą dla nas wiele ale nie każdy lubi celebrować sympatię właśnie 14 lutego... Dlatego ostrzegam, że do niedzieli będę pisać o pozostałych trzech serdecznych szablonach bo mimo iż są już dostępne to nie są jeszcze opisane.

Kilkukrotnie zetknęłam się z zapotrzebowaniem na możliwość umieszczenia jakiegoś banerku w dobrze widocznym miejscu nad kategoriami. Najprostsza instrukcja: zrób miejsce i umieść tam baner korzystając z pozycjonowania względnie bezwzględnego. Jestem przekonana, że spora część z was nie cierpi gdy wyjaśniam coś odsyłając do pozycjonowania względnie bezwzględnego. Wydaje się to zbyt skomplikowane i może rzeczywiście nie jest to zabawa dla zielonych ale nie jest też trudna. Gdy raz zrozumie się o co chodzi bez problemu można wykorzystać pozycjonowanie na wiele różnych sposobów. Dzisiaj dzięki niemu umieścimy banerek pod tytułem a nad kategoriami.

Potrzebne będą:

• 1 banerek
• niewielki kod html
• arkusz stylów

Dla przykładu pozioma belka wisi sobie na blogu laboratorium.blox.pl i dla wygody na jej przykładzie dzisiaj pracować będziemy. Nowy banerek umieszczę natomiast na moim blogu towarzyszącym.

1. Baner, 470x50px

Przygotuj sobie banerek. Powinien być w postaci poziomej belki (nad kategoriami taki najprawdopodobniej najlepiej będzie wyglądać).

Wysokość takiego banerka w zasadzie może być dowolna – możemy później się dostosować do tej wysokości. Szerokość jest już większym problemem. Jeżeli banerek ma być umieszczony tylko nad kategoriami to nie powinien być od nich sporo szerszy. Musimy sprawdzić ile miejsca potencjalnie mamy w tym miejscu. Upraszczając, jeżeli oprzemy się na maksymalnej szerokości ilustracji w notkach to nie będzie to zła liczba.

Ja zdecydowałam się na niewielki banerek, który zmieści się niemal we wszystkich szablonach. Jego wymiary to 470x50px i do tych wymiarów dostosowałam opis w arkuszu. Jeżeli zdecydujesz się na obrazek o innych parametrach pamiętaj aby uwzględnić zmiany w css.

Gotowy banerek umieść w zasobach bloga.

2. Kod HTML

Umieszczając często takie małe obrazki-banerki zazwyczaj pamiętam co mam zapisać i kiedy jakich znakó użyć ale dla pewności zawsze warto mieć pod ręką małą ściągawkę w postaci kursu html dla zielonych.

Obrazek w html zapisujemy w następującej postaci:

<img src="/resource/przykladowy_baner.png" alt="Przykład" />

Do tego musimy dodać jeszcze link. Otaczamy więc nasz obrazek linkiem:

<a href="http://szablonykatemac.blox.pl/html"><img src="/resource/przykladowy_baner.png" alt="Przykład" /></a>

Należy pamiętać, że obrazek musi być otoczony linkiem. Przed kodem ilustracji powinien być tag otwierający z adresem i innymi informacjami a po kodzie obrazka koniecznie musi być tag zamykający link. Jedną z najczęstszych poprawek jakie u kogoś robię to właśnie porządek w polu na kod html: sprawdzam czy wszystkie otwarte tagi mają zamknięcia bo bez tego blog często się sypie i nie ma to nic wspólnego z szablonem.

Mamy już obrazek z linkiem ale aby móc nim swobodnie dysponować będziemy musieli jeszcze go nazwać. Tutaj też jest kilka różnych sposobów, począwszy od dodania identyfikatora bezpośrednio do linku. Najprostsze wydaje mi się umieszczenie naszego kodu w elemencie blokowym o konkretnym identyfikatorze. Znów więc otaczamy to co do tej pory napisaliśmy dodatkowym kodem:

<div id="sBaner"><a href="http://szablonykatemac.blox.pl/html"><img src="/resource/przykladowy_baner.png" alt="Przykład" /></a></div>

Znów pamiętamy, że skoro coś otworzyliśmy to musimy to także zamknąć. Naszemu elementowi dodaliśmy identyfikator. Będziemy go pozycjonować absolutnie więc chodzi nam o pojedynczy element i dlatego użyłam identyfikatora. Jeżeli dany kod będziemy chcieli dodać na stronie kilkukrotnie to należy pamiętać aby zamiast identyfikatora użyć klasy.

Pogrubione fragmenty kodu html to elementy które należy zmienić. Jeżeli banerek ma się wyświetlać w innym miejscu niż blog w zasobach którego jest obrazek to konieczne jest podanie poełnego adresu grafiki.

3. Pozycjonowanie elementu przy pomocy CSS

• najpierw musimy zrobić miejsce na banerek

Ta część instrukcji zależna jest od html szablonu jaki używasz. Jeżeli interesuje cię dlaczego to zachęcam do zapoznania się z notką dotyczącą układów. Tym razem interesuje nas czy kategorie sa pierwszym elementem umieszczonym w szerokiej szpalcie.

Ja najczęściej korzystam z szablonu Spokojnego, ale nie zawsze więc proponuję zerknąć w edycję bloga i dowiedzieć się który html jest tam wybrany. Jeżeli jest to Niebieski, Klasyczny, ThemeE, ThemeF, ThemeG, ThemeH czy też ThemeI to miejsca na banerek szukać musisz przy kilku selektorach. Zmiany będziesz wprowadzać w selektorach #BlogKategorieBox, #SkomentujBoxEtykieta i #StatycznaBox.

Jeżeli nie wymieniłam Twojego szablonu powyżej to wszystko jest ok. i możesz korzystać z tej instrukcji dosłownie.

Miejsce na banerek wygospodarujemy przesuwając nieco szeroką szpaltę (we wspomnianym wcześniej przypadku przesuwać będziemy trzy elementy a nie jeden). Powiedziałabym, że to nie ma znaczenia czy użyjemy w tym celu marginesu czy dopełnienia i to będzie w większości przypadków prawda. Nie zawsze jednak więc pamiętaj, że dla Twojego szablonu może być lepszy margines niż dopełnienie. Ja użyję dopełnienia. Wielkość dopełnienia zależeć będzie od wysokości banerku.

#BlogSzerokaSzpalta {
padding-top: 70px;
}

I voila mamy miejsce. Teraz musimy tylko przenieść banerek bo na chwile obecną to powinien się jeszcze wyświetlać wśród elementów pod wąską szpaltą.

• przenosimy banerek

Najpierw upewnij się, że wśród cech przy selektorze #BlogGlownyBox znajduje się właściwość position o wartości relative. Jeżeli nie to oczywiście zadbaj o to aby była.

#BlogGlownyBox {
position: relative;
}

Teraz wykorzystamy nasz nowy banerek umieszczony w divie o identyfikatorze sBaner. Musimy określić sposób jego pozycjonowania (bezwzględnie) położenie (względem górnej i lewej krawędzi). Wielkość tych liczb zależeć będzie od wysokości twojego pola tytułowego i lewego odstępu od krawędzi bloga. To w zasadzie wystarczy, będziemy mieli określone minimum. Przyda się jeszcze określenie wielkości (width i height).

#sBaner {
position:absolute;
top:300px;
left:20px;
}

Przeglądarka chcąc wyróżnić linki spośród innych elementów nadaje im pewne nietypowe cechy. W przypadku linku w postaci tekstu jest to kolor niebieski i podkreślenie. To są cechy, które w większości szablonów są opisane inaczej. Linki w postaci ilustracji mają 2px ramkę. Proponuję to zmienić. Możemy to zrobić na dwa sposoby: tylko w odniesieniu do banerku lub też bardziej uniwersalnie w odniesieniu do wszystkich obrazków-linków na blogu.

#sBaner a img {
border:none;
}

a img {
border:none;
}

I gotowe.