O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

stopień wyższy, uniwersalny (szablony dashed)

2 urodziny szablony kate_macWczoraj był lewostronny szablon ZERO, dzisiaj coś bardziej wypełnionego choć w dalszym ciągu projekt jest prosty. Na chwilę obecną to ten właśnie projekt uznałabym za uniwersalny i najlżejszy - mój prawie-ideał. Dodatkowo ma kilka fajnych rozwiązań. Poza zwyczajowym górnym menu dodałam też specjalne ikonkowe.


szablon 4
Szablon 04 dashed - niebieski,
na starym kodzie, dla blogów na blox.pl. -500px-


szablon 5
Szablon 05 dashed - zielony,
na starym kodzie, dla blogów na blox.pl. -500px-


szablon 6
Szablon 06 dashed - malinowy,
na starym kodzie, dla blogów na blox.pl. -500px-


Szablon pasuje na każdy blog. Wyraźne brązowe ikonki w prawym górnym to jego osobliwość ale pojawi się ona dopiero jak wpisze się do pola na kod html odpowiednie identyfikatory. Jeżeli nie odpowiadają Ci one to bez obaw, nic nie jest na stałe. Jeżeli zaś chcesz je to zapraszam do dalszej części notki, wszystko wyjaśnię.

Adres szablonu: http://04szablonkatemac.blox.pl

fragmenty

Adres szablonu: http://05szablonkatemac.blox.pl

fragmenty

Adres szablonu: http://06szablonkatemac.blox.pl

fragmenty

Uwagi o szablonie dashed:
niebieskim (04), zielonym (05), czerwonym (06)
szerokość szablonu 770px
szerokość części na notkę 510px
szerokość pobocznej szpalty 190px (+2×15px)
kolor tła 04 niebieski jasne (#dddcd4)
05 zielony jasne (#deddc4)
06 czerwony jasne (#e9e5e0)
kolor tekstu szary (#444)
kolor linków 04 niebieski niebieski (#5769aa)
05 zielony niebieski (#669900)
06 czerwony szary (#ff0022)
pozostałe kolory szary (#96968a), beżowy (#c1c0b5)
krój użyty w notce Trebuchet MS i Georgia (w nagłówkach)
wielkość tekstu notki small
interlinia w notce wartość względna: 150%
maksymalna wielość elementów graficznych w notce 500px
css-owe ramki przy grafikach brak
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3 - powiększenie, szeryfowy krój, brak pogrubienia
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Ethemestary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki zwijane archiwum, avatary w komentarzach, zwijane zakładki, Ostatnie komentarze, delicious, wklejka fotoforum na bloga

dodatkowe klasy i identyfikatory

#menuTop - specjalne menu (nie jest górne tylko wyświetla się w bocznej szpalcie)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

#menuIkon - górne menu z małymi obrazkami

Szablon jest jasny i w gruncie rzeczy prosty. Jego głównym wyróżnikiem jest kolor linków a to bardzo łatwo zmienić. Owszem tło każdego z szablonów jest nieznacznie inne (czerwony ma najjaśniejsze a zielony najcieplejsze) ale poza tym jedyna różnica polega na kolorze linków więc wystarczy zdecydować się na nowy kolor odnośników, wprowadzić w szablonie drobną zmianę i po sprawie.

Ikonkowe górne menu

@ftrssnewsletterNajbardziej rzucające się w oczy jest ikonkowe menu w prawym górnym rogu. Nie jest ono w standardzie, to specjalny dodatek do tego szablonu. Szablon był już kilkukrotnie poprawiany i choć jego wygląd zasadniczo się nie zmieniał to w obrębie tych ikonek zaszły drobne zmiany. Aktualnie, w pobieranych szablonach dashed jest pięć elementów: twitter, facebook, kontakt, rss i newsletter. Wszystkie ikonki to tylko opcje. Aby pojawiły się na blogu należy dodać odpowiedni kod html.

Kod podzieliłam na dwie części (położenie i wygląd) dzięki czemu jeżeli nie chcesz takich ikon możesz poszukać sobie innych i tylko obejmując kod swoich ikon divem o identyfikatorze menuIkon sprawisz, że znajdzie się nad tytułem.

Położenie

Planuję zrobić tak, że w każdym szablonie, w którym umieszczę takie ikony ten konkretny identyfikator (menuIkon) będzie odpowiedzialny za położenie ikon. Div z takim identyfikatorem sprawia, że dowolna zawartość zmienia swoje położenie.

Wygląd ikon

Możesz skorzystać z własnych ikon, mogą linkować one do dowolnego miejsca. Wystarczy, że do zasobów bloga dodasz własne obrazki i w polu na kod HTML, w ramach identyfikatora określającego położenie (tego wspomnianego wyżej) wpiszesz ich kod (prosty kod linkującego obrazku).

Możesz też skorzystać z moich ikon, skopiowały się razem z szablonem. Tym razem zrobiłam tylko pięć: kontakt, facebook, twitter, rss i newsletter. Jeżeli css nie jest dla ciebie czarną magią to przygotowałam też pustą ikonkę - możesz zrobić własne obrazki. W arkuszu trzeba te własne dodatkowe ikonki opisać analogicznie do tych istniejących więc wystarczy bardzo elementarna wiedza o CSS.

Jeżeli jednak wystarczy ci te pięć które już przygotowałam to ich dodanie jest banalnie proste. Kolejność jest zupełnie dowolna i zależna od ciebie. Liczba także więc jeżeli chcesz tylko kontakt i facebooka to nie ma najmniejszego problemu. Kody wybranych ikonek wstaw w ramach divu o identyfikatorze menuIkon (czyli wklej je tam gdzie pisze dowolna zawartości. Oczywiście w kodach ikonek wpisz własne adresy.

mMail kod dla kontaktu

Ikonka kontaktu - identyfikator mMail. Polecam adres mailowy ale w gruncie rzeczy jakakolwiek możliwości zostawienia wiadomości dla właściciela bloga będzie mile widziana. Jeżeli nie chcesz udostępniać swojego adresu mailowego to może wpisz tutaj adres strony w serwisie z którego często korzystasz. Jeżeli chodzi o adres mailowy to polecam stworzenie strony kontaktowej (jako jednej ze stron statycznych na blogu) i tam umieszczenie adresu wraz z zasadami kontaktu.

Istnieje też możliwość wpisania polecenia automatycznego otwierania systemu pocztowego użytkownika. Wtedy po kliknięciu w link użytkownik będzie mógł od razu przejść do pisania maila. W takim przypadku zamiast adresu zaczynającego się od protokołu http:// należy wpisać polecenie mailto:adres@mailowy - gdzie oczywiście zamiast adres@mailowy wpisujesz wybrany przez siebie adres. Pamiętaj że pomiędzy mailto, dwukropkiem a adresem nie ma żadnej spacji.

mFejs kod dla facebookowego fanpege'u

Ikonka facebookowego fanpege'u - identyfikator mFejs. Facebook to jeden z najpopularniejszych serwisów społecznościowych. Wcale nie trzeba być jego wielkim miłośnikiem aby móc wykorzystać jego możliwości. Fanpage na facebooku może ułatwić też komunikację z czytelnikami. Najczęściej jednak służy do promowania bloga i wpisów na nim umieszczonych.

mTwit kod dla twittera

Ikonka mikrobloga w serwisie twitter - identyfikator mTwit. Twitter to serwis społecznościowy oferujący możliwość mikroblogowania (140 znaków) i śledzenia wpisów ciekawych osób. Serwis można wykorzystać zarówno do promowania własnych wpisów jak i do utrzymywania kontaktu z czytelnikami.

mRSS kod dla kanału RSS

Ikonka subskrypcji RSS - identyfikator mRSS. Kanał RSS jest dostępny na każdym bloksie. Normalnie link do RSS wpisów wyświetlany jest w starym kodzie obok kategorii i stamtąd można go skopiować. Jeżeli menu ikon ma zawierać odnośniki do opcji subskrypcji to RSS będzie tu najlepiej pasował.

Jeżeli zdecydujesz się na adres RSS wszystkich wpisów to możesz ukryć tek, który wyświetla się obok kategorii:

#BlogRss {display:none;}

mNews kod dla newslettera

Ikonka newslettera - identyfikator mNews. Oczywiście adres służący do zapisywania się na newsletter to nie będzie blox.pl Aby poznać adres newslettera trzeba go najpierw włączyć w edycji bloga w części:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Włączyć newslettery na blogu? - Link

Na starym kodzie działa tylko opcja link albo nie. Po włączeniu funkcji można przejść na bloga i na końcu kolumny z treścią poboczną znajdzie się opcja zapisania się na newsletter. Wystarczy skopiować adres znajdującego się tam linku i wstawić go w odpowiednim miejscu w kodzie HTML.


Mam nadzieję, że powyższy zapis jest zrozumiały. Jasne fragmenty należy zastąpić własną treścią: adresem konta na twitterze, adresem fanpeage'a na facebooku i własnym adresem mailowym do kontaktu. Wpisując kod należy pamiętać o wszystkich znacznikach, nawiasach i cudzysłowach. Każdy znak, za wyjątkiem tych zaznaczonych na jasno powinien znaleźć się w kodzie w dokładnie takiej samej formie.


niedziela, 26 lipca 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Zmiana wyglądu: kolor linków na przykładzie szablonu dashed z szablony katemac
Niektóre zmiany są trudne do przeprowadzenia. Ciężko jest zmienić klimat szablonu na którego charakter składają się głównie grafiki w tle, jest on dosłownie zszyty na wymiar i tyle chociaż CSS 3 daje aktualnie dodatkowe możliwości, które eliminują ... »
Wysłany 2012/02/12 14:52:58
Komentarze
madamfanaberia
2009/08/08 06:22:55
Pobrałam ten z odcieniami różu. Bardzo ciekawy i nowoczesny szablon. Wszystko takie dopracowane w najmniejszym szczególe. Dziękuję, Emi
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...