eMaupie figle z szablonami
Blog > Komentarze do wpisu

Ikony na Bloxa (Update)

Update: Dodałem nowy, czarny zestaw. Pozostałe zostały uzupełnione o ikonkę dla linka TrackBack!

Dziś przygotowałem zestaw ikon do wykorzystania w szablonach bloxowych. Jest pięć zestawów w różnych kolorach. W każdym zestawie znajdują się ikony w trzech rozmiarach 16x16 px, 24x24 px oraz 32x32 px. Przykład użycia zestawu brązowego można zobaczyć na tym blogu.

Ikony na Bloxa

Aby użyć ikon w swoim szablonie należy ściągnąć wybrany zestaw kolorystyczny stąd. Po rozpakowaniu można wybrać ikony o pożądanych rozmiarach i wgrać je do zasobów swojego bloxa. Jak wstawić obrazek zamiast przycisku wyszukiwania pisałem w poprzednim wpisie, natomiast poniżej pokażę jak dodać ikonę do linków pod notką.

Za wygląd tych linków odpowiadają w CSS klasy .IPTlinkuj oraz .IPTkomentuj. Aby obrazek wyświetlić z lewej strony linka, należy do definicji klasy dodać właściwość padding-left i ustawić jej wartość na szerokość wybranej ikony, powiększoną o np. 2 piksele, by tekst nie wchodził na obrazek. Teraz wystarczy tylko ustawić ikonę jako tło we właściwości background i gotowe. Poniżej przykładowa definicja klasy .IPTlinkuj, której ja używam:

.IPTlinkuj{
    background: url(../resource/link.gif) left top no-repeat;
    padding:0px 2px 2px 18px;
}

Pozostałe obrazki można podpiąć w analogiczny sposób. Miłej zabawy ;)

Pliki do pobrania:

W następnej notce pokażę jak samemu wykonać takie ikony za pomocą programu Inkscape.
piątek, 18 stycznia 2008, e-maupa

Polecane wpisy

  • Podstawy layoutu CSS - część III

    Trzy to dobra liczba, jeśli chodzi o ilość notek w blogowym cyklu. Nie za dużo, nie za mało, lecz w sam raz by nakreślić "zarys wstępu do podstaw" tem

  • Darmowe grafiki do szablonów

    Przygotowując szablon na bloga, najczęściej zaczynam od znalezienia jakiejś grafiki do nagłówka, która zdefiniuje charakter bloga oraz kolorystykę pozostałych e

  • Głębia ostrości w GIMPie

    Po dłuższej przerwie spowodowanej świątecznym urlopem, pora na pierwszą notkę w kategorii grafika. Przygotowałem mały samouczek pokazujący jak uzyskać efekt głę

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2008/01/18 22:34:20
nareszcie coś się dzieje, powinieneś robić częściej wpisy :)
-
kate_mac
2008/01/19 13:16:55
widzę, że strzałki używasz jaku ikonki do link; masz może pomysł jak powinna wyglądać ikonka obok TrackBack? kiedyś zrobiłam sobie komplet ikonek do jednego z szablonów ale bez TB bo nie bardzo wiem jak powinna wyglądać
-
2008/01/19 15:34:00
dr_chaos: Postaram się :)

kate_mac: Przyznam szczerze, że nie pomyślałem o ikonce do TrackBacka. Chwilę pogooglałem i najczęściej spotyka się strzałkę wstecz, lub dwie strzałki w przeciwnych kierunkach. Postaram się przygotować coś w ten deseń i jak będzie gotowe to wrzucę na bloga.
-
kate_mac
2008/01/20 09:27:40
głosuję za pomysłem z dwiema strzałkami :)

podobają mi się Twoje ikony; świetnie pasują do mojej serii Glossy i zastanawiam się jak to teraz wykorzystać ;)
-
2008/01/25 22:10:49
A można poprosić w kolorze czarnym? Tylko nie każ samej mi robić:)
-
2008/01/26 17:10:03
irytek05:
Jak robiłem, to się zastanawiałem nad czarnym, ale pomyślałem: "komu potrzebne czarne ikony?" Widzę, że się ktoś znalazł, więc dodam do TODO :)
-
2008/01/27 02:38:34
Bardzo dziękuję:) Sporo jest czarnobiałych szablonów, w odcieniach popieli i szarości. Wyobraź sobie taką popielatą ikonkę a w srodku, to co teraz białe np. czarne:) chyba fantazja mnie ponosi:)
-
kasica_k
2008/01/27 03:32:54
Pozwoliłam sobie pobrać czerwone i przerobić na różowe :) Dzięki.
-
2008/01/27 09:09:41
irytek05:
Daj upust fantazji, skorzystaj z samouczka i zmień kolor - to naprawdę jest proste ;)
-
2008/01/27 09:11:01
kasica_k:
Fajnie wyglądają. Jeśli chciałabyś je udostępnić innym bloxowiczom, to podeślij na maila - dorzucę do notki.

Swoją drogą, nad różowymi też się zastanawiałem przy robieniu. Jednak odpadły, ze względu na moje męskie ego ;)
-
kasica_k
2008/01/27 11:56:42
Zrobiłam tylko trzy, na szybko, tzn. manipulując kolorami w photoshopie :) Właściwie można zrobić sobie w ten sposób dowolny kolor. Obawiam się tylko, że każda wyszła odrobinę inaczej...
-
Gość: Granna, *.astra-net.com
2008/04/19 23:11:38
Próbowałam skorzystać z ikon. Udało mi się je wstawić na głównej stronie lecz mam problem z nimi na stronie komentarze do wpisu - ikonka wyszukiwanie nie wyświetla się tak jakby miała błędny adres.
Proszę o pomoc.
-
2008/04/20 09:21:24
Podaj adres bloga, to zerknę co jest nie tak
-
Gość: pestka, *.acn.waw.pl
2009/02/14 10:05:46
Wzięłam prawie wszystkie... jedne wykorzystam na 100% bo sa świetne!
-
pingumedia.pl
2017/02/10 17:08:36
Przydają się takie rzeczy. Naprawdę.