niedziela, 21 lutego 2010
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. Uwagi:
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.
środa, 17 lutego 2010
Dzisiejszym zmianom towarzyszy kolejna filiżanka. Tym razem jest to projekt autorstwa Fast Icon. Cały zestaw Coffee Break jest uroczy... taki trochę śniadaniowy.
sobota, 13 lutego 2010
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. Uwagi:
piątek, 12 lutego 2010
Ó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. Uwagi:
czwartek, 11 lutego 2010
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. Uwagi:
wtorek, 09 lutego 2010
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.
piątek, 05 lutego 2010
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
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 { 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ą.
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 {
#sBaner { 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 { I gotowe. |
Archiwum
Ostatnie wpisy
Zakładki:
O blogu i
![]() Polecane wpisy z blogu
![]() Pomocne
Przeglądarki
Katalogi szablonów
Polecane strony
Szablony z dedykacją
o CSS (notki z tego bloga i podobnych bloksowych)
o arkuszach stylów ogólnie (CSS) dla poczatkujących,
głównie zewnętrzne podręczniki o CSS (przydatne podpowiedzi) dla średniozaawansowanych
- specyficzne rozwiązania - jak reagują przeglądarki Historia polecanych
Kolory
Pismo
Polecane artykuły
ilustrowany przewodnik po bloksie dla początkujących,
dla zielonych jak szczypiorek na wiosnę, dla zaczynających bloksowanie Tagi
![]() ![]() ![]() |