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

Cudzesy: podniszczony szablon miejski

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. New Tech Earth był popularnym, często oglądanym szablonem. Zazwyczaj plasował się gdzieś w okolicach trzeciego miejsca więc zdecydowałam się go nie zmieniać. Oczywiście pewne uaktualnienia i dodatki było konieczne ale jeżeli nie będę liczyć dodatkowych elementów jak górne menu czy ikonki typu facebook to jedyną zmianą w w wyglądzie jest wzorek w tle. Zawsze był, zawsze był brązowy ale był słabo widoczny więc zrobiłam go na nowo. Reszta bez zmian.


top 07 - New Tech Earth

Szablon top 07 - New Tech Earth, miejski,
na starym kodzie, dla blogów na blox.pl. -510px-


Największy problem miałam z rozmieszczeniem tych wszystkich dodatkowych górnych menu. W tym szablonie kategorie udawały górne menu więc zagwostką było umieszczeni tam tego dodatkowego. Poza tym to bardzo prosty ale wyrazisty szablon.

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

fragmenty szablon top 07 - New Tech Earth

Uwagi o szablonie top 07 - New Tech Earth
szerokość szablonu 860px
szerokość części na notkę 560px
szerokość pobocznej szpalty 230px
kolor tła białe (#ffffee) a w body brązowe (#16120E)
kolor tekstu ciemny (#332211)
kolor linków czerwony (#bb0000)
pozostałe kolory żółty (#ffaa00), różowawy (#994433)
krój użyty w notce Arial (Helvetica)
wielkość tekstu notki 14px
interlinia w notce wartość względna 150%
maksymalna wielość elementów graficznych w notce 510px
css-owe ramki przy grafikach tak
 background:#16120E url(/resource/t07_wzorek.jpg) no-repeat center;
 border:1px solid #16120E;
 padding:9px;
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
h3, h4 - większy rozmiar
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

Szablon jest bardzo prosty i przejrzysty. Wygląda intensywnie bo w body umieściłam kontrastowe tło. Jest to radialny gradient, który ujawnia wzorek. Tło jest umieszczone nieruchomo a dookoła wypełnione jednolitym, ciemno brązowym kolorem. Kod w arkuszu wygląda dokładnie tak:

body {
 background: #16120E url(/resource/t07_wzorek.jpg) no-repeat fixed center top;
}

Można wymienić sobie kolor i wzorek i uzyskać zupełnie inny efekt. Równie łatwo można wymienić ilustrację w topie. Tytuł umieszczony jest poniżej niej więc nie trzeba się nawet przejmować tłem pod linkiem. Można to zrobić poprzez zmianę adresu w arkuszu albo po prostu poprzez nadpisanie pliku w zasobach. Plik z topem jest jeden, nazywa się: NewTechEarth_top.jpg a jego wymiary to: 860×205px. Wystarczy przygotować taki plik graficzny, nazwać go tak samo i zaznaczając uprzednio opcję nadpisz pliki dodać do zasobów bloga.

Plik przypisany jest jako tło elementowi #NadTytul, jeżeli ktoś nie boi się kodu css to może pogrzebać sobie i w arkuszu (dla zielonych pierwsza podpowiedź: Jak trafić do arkusza? i Jak znaleźć te selektory?).

Bez problemów można też wymienić kolor linków. Zawsze jest to czerwony (#bb0000) z żółtym (#ffaa00) w hover więc już wpisanie przy a innego koloru zaowocuje zmianą. Dla pewności można jeszcze przeszukać resztę szablonu aby sprawdzić czy czerwony nie pojawia się gdzieś jeszcze.

Poszerzanie szablonu czy dodawanie dodatkowej szpalty może być nieco utrudnione. Na krawędziach wyświetlają się grafika udająca podniszczony papier. Ma ona konkretną szerokość więc ewentualne zmiany w poziomie muszą się zacząć od pozbycia się tych papierków albo wykonania ich na nowo w odpowiedniej szerokości.

Ikonkowe górne menu

rssftZwykłe górne menu opisane jest w szablonie i wyświetla się pod ilustracją tytułową a nad linkiem tytułu bloga. Nie bardzo pasuje w tym miejscu wiele linków więc zdecydowałam się dodać także ikonkowe menu, które wyróżni linki do serwisów społecznościowych czy ewentualnie do maila. Nie jest ono w standardzie, to specjalny dodatek do tego szablonu.

W tym miejscu dobrze wyglądać będą trzy ikonki. Rss jest w standardzie, wyjęłam go z kategorii i przeniosłam do góry więc pojawi się tam na każdym blogu korzystającym z tego szablonu. Pozostałe elementy są jednak opcjonalne. Aby pojawiły się na blogu należy dodać odpowiedni kod html. W szablonie opis ewentualnego linku do Twittera i Facebooka. To dwa najpopularniejsze serwisy społecznościowe choć zapewne jeżeli ktoś używa któregoś do promocji bloga to jest to tylko jeden z nich. Dlatego kody są zupełnie niezależne. Można dodać Twittera a Facebooka sobie darować.

mTwit mFejs

Znacznikowi należy dodać opisany przeze mnie identyfikator a element pojawi się nad tytułem. 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).

Jasne fragmenty należy zastąpić własną treścią: adresem konta na twitterze, adresem fanpeage'a na facebooku. 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.

Samą ilustrację przypisałam cesze tło (background), zawartość tekstową linku przesunęłam poza granice ekranu a pole linkujące powiększyłam. Od strony kodu wygląda to tak:

#mTwit, #mFejs, #BlogRss {
 position:absolute;
 top:45px;
 width:30px;
 height:25px;
}
#mTwit {
 right:175px;
 background: url('/resource/t07_twitter.jpg') no-repeat top left;
}
#mFejs {
 right:135px;
 background: url('/resource/t07_facebook.jpg') no-repeat top left;
}
#BlogRss {
 right:95px;
 background: url('/resource/t07_rss.jpg') no-repeat top left;
}
#mTwit a, #mFejs a, #BlogRss a {
 text-indent:-9999px;
 display:block;
 width:30px;
 height:25px;
}

Link do kontaktu

mailJeżeli nawet skorzystasz z tego ikonkowego menu to użyjesz zapewne linku do tylko jednego z serwisów. Warto więc zastąpić ten drugi linkiem do strony kontaktowej albo czegoś innego w tym stylu (newsletter, inny zewnętrzny serwis). Przygotowałam kilka gotowców a także pusty biały element na którym możesz sobie umieścić dowolne logo - wszystkie są dostępne na stronie z szablonem. Tutaj wyjaśnię jak zamienić element na link kontaktowy.

  1. Zapisz sobie wybrany obrazek.
  2. Następnie zmień jego nazwę na t07_twitter.jpg bądź t07_facebook.jpg w zależności, którą z ikonek chcesz zastąpić.
  3. Kod przygotuj tak jak jest to w oryginale, ujmij w div o identyfikatorze mFejs albo mTwit, w zależności, który element zastępujesz.
  4. Nazwę, adres czy tytuł linku wpisz tak jak trzeba czyli po swojemu
    • Jeżeli dodajemy link kontaktowy z adresem mailowym i chcemy aby po jego kliknięciu otworzyło się okno programu pocztowego użytkownika to wpisujemy zamiast protokołu http:// polecenie mailto:.
      href="mailto:szablonykatemac@gmail.com"
    • Tytuł jest o tyle istotny, że treść linku zostaje zastąpiona obrazkiem a te nie zawsze są jednoznaczne. Przykładowy opis linku kontaktowego:
      title="strona kontaktowa"

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


czwartek, 14 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
avo_lusion
2012/06/14 15:39:30
Wow! Szablon jest przepiękny!!
-
kate_mac
2012/06/18 12:33:56
@avo_lusion
Oczywiście, że ci się podoba :D Jest ciemny, nieco ozdobny i podniszczony... bardzo w Twoim klimacie - ja jednak zawsze bardziej identyfikuje z Twoim blogiem kolor podniszczonej, wypłowiałej zieleni a nie czerwień i brązy; no ale to tylko ja :>
-
noirdesir2
2012/07/13 09:01:33
pobrałam do nowego bloga, który stworzyłam wczoraj i jeszcze jest w powijakach. Ale będzie rósł w siłę.
pozdro.
-
Gość: Speed Test, 77.243.191.*
2018/07/25 12:46:09
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...