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

Cudzesy: przyjazny szablon z ozdobnikami

Szablony z cudzym topem robiłam z okazji pierwszych urodzin, zbliżają się piąte a ja zdecydowałam się na ich odświeżenie i uaktualnienie. Drawning Hands nie potrzebował wielu zmian. Poprawiłam jedynie położenie wyszukiwarki aby łatwiej było zmieniać tło. Kształt jest teraz prosty, cień niezależny od tła a tytuł który poprzednio wciśnięty był w prawy górny róg ma teraz tyle miejsca ile potrzebuje.


top 08 - Drawing Hands

Szablon top 08 - Drawing Hands, przyjazny,
na starym kodzie, dla blogów na blox.pl. -540px-


Nie zmieniałam wielkości, nie zmieniałam czcionki, nie zmieniałam kolorów, nie zmieniałam ozdobników. Tylko ten szukacz i tytuł bloga są w nieco innych miejscach aby było wygodniej korzystać z szablonu. Teraz można zmieniać kolory, top, czcionkę, wzorek w tle i w żaden sposób nie psuje to wyglądu.

Adres szablonu: http://top08katemac.blox.pl

fragmenty szablon top 08 - Drawing Hands

Uwagi o szablonie top 08 - Drawing Hands
szerokość szablonu 900px
szerokość części na notkę 540px
szerokość pobocznej szpalty 260px
kolor tła białe (#fff) a w body szare (#d3d3d3)
kolor tekstu szary (#554444)
kolor linków czerwony (#cc2222)
pozostałe kolory szary w odcieniu blado pąsowym (#887788)
krój użyty w notce Trebuchet MS
wielkość tekstu notki 1.2em z 12px (około 14px)
interlinia w notce wartość względna 1.4em
maksymalna wielość elementów graficznych w notce 540px
css-owe ramki przy grafikach tylko cień
 box-shadow:0 0 5px #333;
 margin:5px 0 0;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i jaśniejszy kolor, boczy pasek
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczne
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, zwinięte archiwum, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 570px)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

ikonkowe menu:
#mTwit ikonka z logo Twittera
#mFejs ikonka z logo Facebooka
#mMail ikonka ze znakiem @ (małpy)

Szablon jest całkiem prosty i przejrzysty. Nie kombinowałam w nim żadnych nietypowych czy skomplikowanych rozwiązań: kolorowy top, cień pod blogiem, czerwone linki, ozdobniki pomiędzy notkami.

Przez to, że jest taki prosty bardzo łatwo zmienić w nim dowolną rzecz. Opisując szablon Betsyness zaproponowałam kilka zmian i ogólnie wyjaśniłam jak je przeprowadzić. W notce znajdują się także odnośniki do bardziej szczegółowych instrukcji więc zamiast się powtarzać podam tylko linki do odpowiednich fragmentów tamtej notki:

W szablonie opisane też jest uniwersalne górne menu a także dodatkowe klasy, które używam do uporządkowania elementów wpisywanych w polu na dodatki.

Ikonkowe menu

W poprzednim szablonie sporo rozpisywałam się o zastępowaniu ikon innymi tak aby menu było idealnie wygodne i odpowiednie dla danego bloga. Tutaj są cztery obrazki, które zazwyczaj opisuję: Twitter, Facebook, Mail i RSS.

Kanał RSS (subskrybcja)

RSSRSS jest stałym elementem, który jest częścią bloga i normalnie pojawia się obok kategorii. Jeżeli skasujesz położenie absolutne (czyli trzy linijki w kodzie dotyczące nowej pozycji) to ikonka zacznie wyświetlać się tam gdzie link występuje naturalnie.

#BlogRss {
 position:absolute;
 top:60px;
 right:10px;
 background: url('/resource/socialinsiderssicon.png') no-repeat top left;
 width:30px;
 height:30px;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    filter:alpha(opacity=30);
    opacity: 0.3;
}
#BlogRss a {
 text-indent:-9999px;
 display:block;
 width:30px;
 height:30px;
}
#BlogRss:hover {
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    filter:alpha(opacity=90);
    opacity: 0.9;
}

Twitter, Facebook, Mail

MailFacebooktwitterAby pojawiły się na blogu należy dodać odpowiedni kod html. Znacznikowi należy dodać opisany przeze mnie identyfikator. Jako kontakt opisałam identyfikator mMail, facebookowi przypisałam mFejs a twitterowi mTwit. W znaczniku, który opiszemy tymi identyfikatorami należy umieścić link (czyli identyfikator nie powinien być przypisany bezpośrednio linkowi). Samą ilustrację przypisałam cesze tło (background), zawartość tekstową linku przesunęłam poza granice ekranu a pole linkujące powiększyłam.

Po tym przydługim opisie pora na część praktyczną. Kod wklejony w polu na dodatki powinien wyglądać mniej więcej tak:

mTwit mFejs mMail

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.

Jednocześnie można dodać tylko jeden element albo wszystkie trzy. Ich położenie jest zupełnie niezależne. Można dodać Fejsa i Maila a Twittera sobie darować. Można też zastąpić maila facebooka czy twittera innymi stronami. O tym pisałam przy poprzednim szablonie więc po dokładniejszą instrukcję tam odsyłam. W skrócie, przykładowo skasuj ikonkę fejsbuka z zasobów i na jej miejsce dodaj własną a w dodawanym kodzie obok mFejs wpisz linki i nazwy wybranej przez siebie strony.

W ikonkowym menu częściowo wykorzystałam ikonki stworzone przez IconTexto (Bruno Maia) i udostępnione na licencji CC Attribution-Noncommercial 3.0. Zazwyczaj tak proste jak te robię sama. Potrzebujesz tylko ciekawy kształt, trochę cienia i logo serwisu ale tym razem mi się nie chciało więc postanowiłam skorzystać z gotowców (i tak okazało się, że mailowe logo zrobić muszę sama, ot przewrotność).


poniedziałek, 18 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
Gość: Speed Test, 77.243.191.*
2018/07/25 12:46:02
Sat24, Sat 24
Pogoda, Prognoza pogody
National Forecast
Weather Forecast
Wetter, Wettervorhersage, Wetterbericht
Meteo, Previsioni Meteo Italia
Météo France
United Kingdom Weather
Clima de Espana
Väder
Australia Weather
Canada Weather
Vr
Vejr
Clima


Clima
Wetter
Weer
New Zealand Weather
Ireland Weather

Test prędkości internetu
Speedtest, Speed Test
DSL Geschwindigkeit testen
Test di velocit Internet
Test de velocidad
Test de vitesse Internet
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...