O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 20 grudnia 2009

Christmas lights Icon by Aha-SoftPamiętacie wpis o świątecznych RSSach sprzed 2 lat? Jak zapowiedziałam przyszła pora na wyjaśnienie tych czarów, które dwa lata temu dużym łutem szczęścia udało mi się zrobić (przy wydatnej pomocy w postaci zerknięcia do szymonowego szablonu z szablnowni). Niestety dwa lata temu nie potrafiłam wyjaśnić jak to się stało, że moja ikonka RSS jest linkiem. Tym razem postaram się wyjaśnić wszystko w miarę dokładnie i zrozumiale.

Na początek ikonka

Skoro mamy święta to oczywiście odsyłam do zbioru świątecznych ikonek RSS sprzed 2 lat. Jest nadal aktualny i można w nim znaleźć coś co pasuje do wielu blogów.

The Real Christmas RSS Icons by Denis Sudilkovsky

Można też wybrać sobie zwykłą ikonkę RSS i nałożyć jej świąteczną mikołajową czapeczkę.

Można też odwrotnie: wybrać świąteczną ikonkę, bez znaczka RSS i albo dodać do niej znaczek w programie graficznym, albo z niego zrezygnować a dla jasności informacji pozostawić obok ikonki napis RSS.

Jak zastąpić znaczek RSS obrazkiem - instrukcja

A. Oczywiście na początku umieszczamy wybrany przez nas obrazek-ikonkę w zasobach bloga.

B. przechodzimy do edycji arkusza stylów:

Edycja blogu -> Wygląd -> Edycja CSS

W arkuszu odnajdujemy fragment odpowiedzialny za wygląd elementu RSS. Będzie to selektor #BlogRss i w większości wypadków znajdować się powinien w początkowej części arkusza.

1. wybrana ikonkę przypisujemy jako tło w postaci obrazka do elementu #BlogRss

#BlogRss {
background: url(/resource/rss.jpg) left top no-repeat;
}

W zasadzie wystarczy nam w tym elemencie tylko opisać to, jeżeli jednak planujesz pozostawić napis RSS to dodaj jeszcze opis odstępu i musi to być dopełnienie nie margines.

#BlogRss {
padding: 10px 0px 10px 35px;
}

Tym dopełnieniem odsuniesz napis od ikonki.

2. zamieniamy obrazek w link korzystając z selektora #BlogRss a

Linki są elementami liniowymi czyli automatycznie, jeżeli jest miejsce, ustawiają się obok siebie. Można je odsuwać od innych elementów marginesem ale trudniej już przypisać im dopełnienie czy określoną wielkość. W tym celu musimy zmienić liniowy element linku RSS w blokowy

#BlogRss a {
display:block;
}

Teraz już bez większych problemów możemy określić wielkość naszego linku RSS.

#BlogRss a {
width:32px;
height:32px;
}

Uwaga, przypisując konkretną wielkość elementowi rss sprawdź czy przypadkiem element wyświetlany obok czyli kategorie nie ma opisanej szerokości. W niektórych szablonach możesz znaleźć podobny do poniższego zapis:

#BlogKategorie {
width: 480px;
}

Jeżeli jest to musisz go zmniejszyć o piksele które wykorzystasz przy RSS. Albo po prostu skasuj opis szerokości kategorii.

Wszystko już prawie gotowe, pozostało nam jeszcze zrobić coś z napisem. Metod jest wiele, można przykładowo ukryć napis nadając mu kolor tła. W takim przypadku wygodniej jednak będzie jak element linku będzie większy nić obrazek w tle. Ja tym razem wybrałam inną metodę ale wcale nie twierdzę, że jest ona najlepsza. Zamierzam pozbyć się napisu RSS poprzez użycie minusowego wcięcia w tekście

#BlogRss a {
text-indent: -9999em;
}

Wcięcie musi być na tyle duże aby tekst 'uciekł' daleko poza obszar ekranu tak aby przy różnych rozdzielczościach nie był widoczny.

Gotowe. Cały fragment powinien wyglądać mniej więcej tak (na szaro zaznaczyłam elementy, które należy zmienić na własne wartości):

#BlogRss {
background: url(/resource/nazwa_pliku.rozszerzenie) left top no-repeat;
padding: górny prawy dolny lewy;
}
#BlogRss a {
display:block;
width: szerokość;
height: wysokość;
text-indent: -9999em;
}

sobota, 19 grudnia 2009

Christmas lights Icon by Aha-SoftOstatni z tegorocznych szablonów też jest dość nietypowy. W poprzednich latach trzeci świąteczny szablon był bardziej zimowy niż świąteczny. Tym razem pozostałam przy temacie świątecznym ale ujęłam go w mniej typowy sposób a na pewno podobnie jak pierwszy tegoroczny szablon w mniej typowe kolory. Widziałam kiedyś kremową kartkę świąteczną z choinką w postaci ornamentów, motyw spodobał mi się bardzo i dlatego w tym roku postanowiłam spróbować ze stylowym beżowym szablonem z choinką. Jak mi wyszło możecie ocenić sami.

świąteczny 09 - arabeska
świąteczny 09 - arabeska

Uwagi:

piątek, 18 grudnia 2009

Christmas lights Icon by Aha-Soft Drugi szablon świąteczny jest już bardziej typowy. Szablon jest jasny i prosty, nie ma w nim większych udziwnień. Jedyne nad czym się zastanawiałam to tło tytułu: tu umieszczone jest w body bloga a więc przyglądając się dokładniej szablonowi należałoby to uznać za błąd bo po wyłączeniu obrazków jasny tytuł znajdzie się na jasnym tle. Poza tym jest całkiem przyzwoicie, wielkość czcionki zostawiłam relatywną więc powinna się skalować nawet w IE choć nie gwarantuje, że wszędzie opisałam ją względnie. Główny motyw graficzny szablonu określiłam jako vintage ale w zasadzie nie jest to bardzo wyczuwalne. Dopiero po przyjrzeniu się pani na zdjęciu można zwrócić uwagę na jej XIX-wieczny ubiór. Jeśli ktoś chciałby zrobić sobie coś bardziej vintage świątecznego to zapraszam do sięgnięcia po Vintage Holiday Crafts.

świąteczny 08 - vintage
świąteczny 08 - vintage

Uwagi:

poniedziałek, 14 grudnia 2009

Christmas lights Icon by Aha-SoftW tym roku świąteczne szablony postanowiłam zacząć od czegoś zupełnie nowego. Szablon z bombką chodził mi po głowie już od zeszłego roku ale dopiero ten sezon świąteczny przyniósł mi pomysł na wygląd reszty elementów. Przyznam się, że odpowiednie dostosowanie tła w tym szablonie było sporym zadaniem. Strona główna bloga to nie był problem, bez większych problemów poradziłam sobie też ze stronami statycznymi: wprowadziłam tam drobną zmianę ale technicznie nie była ona konieczna. Najgorzej mi poszło ze strona z pojedynczym wpisem. O ile możemy przyjąć, że pierwszym elementem na stronie z komentarzami jest etykieta: Blog  > Komentarze do wpisu to nie ma szans na określenie ostatniego. W zasadzie powinny to być komentarze ale co w sytuacji, gdy tych komentarzy nie ma... Wydaje się, że najprostszym rozwiązaniem byłoby ograniczyć jasne tło jedynie do wpisu. Zaczynałby się on etykietą Blog  > Komentarze do wpisu a kończył linkami poleć/śledź. Możliwe, że następnym razem zdecyduję się na właśnie takie rozwiązanie. W tym roku mocno pokombinowałam więc zobaczymy jak szablon sprawdzi się w praniu. Polecam skorzystać i wszelkimi uwagami podzielić się ze mną.

świąteczny 07 - z zielona bombką
świąteczny 07 - z zielona bombką

Uwagi:

niedziela, 13 grudnia 2009

Grudzień zaczął się już dawno więc z czystym sumieniem mogę rozpocząć okres przedświąteczny. Christmas lights Icon by Aha-SoftW sklepach elementy związane ze świętami pojawiają się coraz szybciej, często już pod koniec października. To bywa mocno wkurzające. Mamy jednak już grudzień więc z czystym sumieniem można myśleć o świętach. Dzisiaj wpis bardziej ogólny, nic nowego na razie nie pokażę ale tradycyjnie przygotowałam trzy nowe świąteczne szablony.

Świąteczne szablony

Szablony z poprzednich lat są dostępne. Te z 2007 roku średnio mi się podobają ale w zeszłym roku je poprawiałam, uaktualniałam itd. więc wszystko jest z nimi jak najbardziej w porządku. Zielony z choinką jest bardzo prosty, niewiele w nim ozdobników i pierdułek. Czerwony z reniferem jest bardzo intensywny, ma ciekawie opisany wygląd notek. Niebieski nie ma charakteru świątecznego, jest po prostu zimowy.

świąteczny 01 - zielony z choinką świąteczny 02 - czerwony z reniferem świąteczny 03 - niebieski śnieżynkowy

W 2008 roku szablony świąteczne przygotowałam nieco szybciej i mówiąc szczerze jestem z nich bardzo zadowolona. Żółty szablon betlejemski odwołuje się do tradycyjnych chrześcijańskich wątków związanych ze świętami: Dzieciątko w żłobku, magowie ze wschodu. Lubię ten szablon i jego piaskowo-pustynną żółta kolorystykę. Drugi szablon miał być mniej 'chrześcijański', jego plastikowość była zamierzona. Jest fajny, zabawny, intensywny... najbardziej podobają mi się biało-czerwone paski. Ostatni beżowy szablon w ogóle nie odwołuje się do świąt, zima też jest w nim umowna: rozmazane płatki śniegu, plamki światła, tło w kolorze kakao... plus do tego paski i tekstura papieru w tytule.

świąteczny 04 - żółty betlejemski świąteczny 05 - czerwono-zielony, pasiasty świąteczny 06 - zimowy szary

Szablony na rok 2009 są już gotowe. Dzisiaj planuję je sprawdzić i otworzyć więc dla tych co sie na nie natkną w mniej lub bardziej przypadkowy sposób będą dostępne od dzisiaj a w nadchodzącym tygodniu linki do nich pojawią się tutaj i na szablon_team.

Świąteczne bałamucenie

Black peter Icon by Zeus Box (Kuswanto)Dwa lata temu robiłam świąteczno-zimowy przegląd szablon_teamowych szablonów. Nie pamiętam czy w zeszłym roku go aktualizowałam, w tym jak na razie nie choć oczywiście to planuję. Dopóki jednak tego nie zrobię odsyłam do Irytka, ona  cała pewnością ma nowe zimowe szablony. Cała lista zostanie w najbliższym czasie uaktualniona a lista the best of pozostanie w takim kształcie w jakim ją sporządziłam dwa lata temu.

Tworząc pierwszy raz świąteczne szablony przejrzałam listę ikon na www.iconarchive.com i udostępniłam linki do nich na blogu dodatkowym. Lista nie była uaktualniana przez te dwa lata bo w zasadzie nie jest to potrzebne. Jeżeli ktoś poszukuje świątecznych ikonek łatwo może sobie wybrać kategorię Christmas i wszystko jest od razu widoczne. W tym roku jednak szukałam sobie świątecznych ikonek dla siebie i pomyślałam, że przy okazji zaktualizuję listę.

Wyszukane na stronie www.iconarchive.com świąteczne ikony.

Był też kiedyś wpis o świątecznym RSS. Oczywiście wpis jest nadal aktualny choć w gruncie rzeczy mało konkretny. Gift Icon by IconDrawer (Eugen Buzuk)Umieszczając ikonkę RSS w świątecznym przybraniu nie bardzo wiedziałam co robię i dlaczego to zadziałało. Teraz dwa lata później chyba pora na wyjaśnienie jak to zrobić więc w nadchodzącymtygodniu pojawi się też notka o świątecznych ikonach RSS.

Zakładki:
O blogu i RSSsubskrybcja
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
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...