O szablonach, ich projektowaniu i moich z tym zmaganiach...
czwartek, 28 maja 2009

Dla mnie dobry projekt znaczy tak mało projektowania jak to tylko możliwe

Dieter Rams

sobota, 23 maja 2009

UWAGA: Szablon wspomniany w notce przeszedł bardzo duże zmiany więc ta notka jest już nieaktualna i z czasem na jej miejscu pojawi się inna zaktualizowana treść. Dodatkowo brakuje w niej odpowiednich kodów więc jest mocno wybrakowana.


Zrobiłam sobie małą przerwę i teraz wracając przyglądam się poprzedniemu wpisowi...
Przyszło mi więc do głowy, że w żółtym szablonie można całkiem wyraźnie wyróżnić RSS. Aktualnie link znajduje się zaraz obok kategorii czyli w tradycyjnymbloksowym miejscu. Postanowiłam przenieść go na lewą stronę mniej więcej na wysokość opisu bloga. Jest tam przyzwoity kawałek jednolitego tła i RSS będzie tam dobrze widoczny (może nawet zbyt dobrze widoczny - ale generalnie chodzi o zasadę, chcę pokazać, że można; gdzie umieścicie swój RSS to już inna bajka).

Przygotowałam dwie wersje: lista z nagłówkiem i lista obok ikonki.

Wykorzystam ogólną zasadę pozycjonowania względnie bezwzględnego - dokładnie tą samą z której skorzystałam przy pozycjonowaniu TrzeciejSzpalty. W szablonie serdecznym pomarańczowym trzecia kolumna nie jest nowym elementem więc nie trzeba było jej tworzyć (wykorzystałam istniejące na blogu zakładki) ale umiejscowić je w wybranym miejscu już musiałam i zrobiłam to korzystając z pozycjonowania względnie bezwzględnego. Dzisiaj w ten sam sposób dodam nowy element - menu z linakimi do kanałów RSS.

Lista z nagłówkiem

W pierwszym przypadku można spokojnie zmienić sobie tytuł elementu albo w ogóle z niego zrezygnować. Ważne jest aby tytuł, jeżeli ma być, znalazł się w elemencie który będzie miał przypisaną klasę tyt (oczywiście możesz sobie nazwać klasę jak chcesz - ja lubię krótkie 3-4 literowe nazwy, które można zrozumieć i powiązać z elementem). Przykładowo jeżeli element zatytułujemy menu (albo może meta menu) to będzie całkiem sensowne miejsce w którym można wyświetlać linki do kanałów RSS, newslettera czy wpisać e-mail kontaktowy. Ja w mojej liście umieściłam na razie tylko linki do RSS więc zatytułowałam ją subskrypcja. Kanał RSS z wpisami z twojego bloga wyglądać będzie mniej więcej tak: http://nazwa_bloga.blox.pl/rss2 kanał dla komentarzy to http://nazwa_bloga.blox.pl/komentarze.rss Wydaje mi się, że spokojnie można skorzystać ze skróconego zapisu tak więc fragment kodu poniżej będzie pasował do każdego bloksa i zadziała na każdym - wystarczy wkleić do pola na kod html.

Ewentualny link do newsletera czy kontaktu należy dodać jako kolejny element listy - korzystając z tagów listy (li) i liku (a). Newesletter musi być włączony w panelu administracyjnym bloga w części wygląd. Gdy na blogu wyświetli się button newslettera skopiuj link i wklej do przygotowywanego kodu.

Kontakt możesz dodać w postaci adresu bez linku - w takim przypadku najlepiej zastąp znak @ jakimś opisem tego symbolu. Możesz też wpisać po prostu "kontakt" czy "napisz to mnie" a adres wpisać jako link - w takim wypadku korzystasz z zapisu mailto:adres@mailowy. Czyli fragment który należałoby dodać do powyższego kodu wyglądałby mniej więcej tak (linki należy dodać własne):

 


 

rss

Teraz gdy mamy już kod możemy zająć się częścią dotycząca wyglądu. Po pierwsze umiejscawiamy element. #BlogGlownyBox jest już określony jako position:relative, jeżeli korzystasz z innego szablonu niż serdeczny pomarańczowy to sprawdź czy ta właściwość jest przypisana selektorowi #BlogGlownyBox jeżeli nie to ją dopisz, koniecznie. Nasz nowy element wypozycjonujemy absolutnie podając konkretne położenie względem lewej i górnej krawędzi. Od góry to powinno być około 300-320px w zależności od tego z jak wielu elementów składa się lista. Odsunęłam element od lewej o 20px bo o tyle odsunięte są zakładki. Bez względu na to z jakiego szablonu korzystasz odsuń nieco element od krawędzi. Określiłam też szerokość elementu - w tym konkretnym przypadku precyzja nie jest niezbędna, w zasadzie ten element nie wchodzi w relacje z innymi (w każdym bądź razie nie powinien). Określ mniej więcej szerokość nowego elementu tak aby w razie gdy tekst w nim zawarty był za długi mógł zostać złamany.
Korzystając z połączenia głównego selektora naszego nowego elementu z ogólnym znacznikiem listy możemy opisać wygląd tej konkretnej listy. Przede wszystkim zrezygnujmy z ogólnych ustawień listy czyli rodzaju wypunktowania (list-style-type) marginesu (margin) i dopełnienia (padding). Następnie dla każdego konkretnego elementu listy określimy własne parametry. W tym przypadku zmieniłam tylko wielkość czcionki i dolny odstęp pomiędzy poszczególnymi elementami listy. W przypadku tego szablonu to mi wystarczy. Jeżeli u siebie będziecie chcieli zmienić kolor to pamiętajcie, że elementy listy są linkami i kolor trzeba określać w osobnym selektorze (#subs li a).

I na koniec zajmijmy się samym tytułem. Ma określona klasę więc możemy skorzystać z selektora klasy tyt. Aby całość była zgodna z klimatem szablonu proponuję skopiować wygląd z jednego z już istniejących elementów: może to być tytuł Ostatnie notki (#BlogTytulBoxaOstatnichWpisow), zakładki (#ZakladkiTytul) albo po prostu tytuł pojedynczego folderu z zakładkami (.TytulFolderaZakladek). Proponuje nie zmieniać wielkości czy rodzaju czcionki, może jedynie kolor jeżeli ze względu na tło jest za mało bądź też za bardzo widoczny. Ja początkowo planowałam biały ale był bardziej widoczny niż tytuł bloga tak wiec zmieniłam na szary który wykorzystywany jest też przy kategoriach. I gotowe. Wystarczy wkleić do arkusza.

#subs {
    position:absolute;
    top: 320px;
    left:20px;
    WIDTH: 190px;
}
#subs ul {
    margin: 0px;
    LIST-STYLE-TYPE: none;
    padding: 0px;
}
#subs li {
    FONT-SIZE: 1.1em;
    padding: 0px 0px 5px 0px;
}
.tyt {
    color: #888;
    FONT-SIZE: 2.2em;
    FONT-FAMILY: 'Trebuchet MS', Verdana, sans-serif;
    padding: 5px 0px;
}

Lista obok ikonki

Tutaj będzie prościej ale będę też bardziej restrykcyjna. Przede wszystkim element składać się będzie tylko z listy, zrezygnujemy z tytułu. Jeżeli mimo wszystko chcecie zachować tytuł to bez problemu można go dodać korzystając z wcześniejszego opisu. Nasz nowy element tworzymy podobnie jak w poprzednim przypadku. W zasadzie moglibyśmy zrezygnować z diva i identyfikator przypisać bezpośrednio liście ale, że chcemy zachować możliwość dodania tego tytułu (możliwość, bez konkretów) to niech zostanie już tak jak jest. Kod będzie wyglądał tak:

Mamy więc kod, teraz potrzebować będziemy ikonki. Najlepiej niech to będzie coś pasującego do szablonu - wybór jest na prawdę ogromny więc nie powinno być problemu ze znalezieniem właściwego rysunku. Dla szablonu serdecznego polecam klasyczną pomarańczową ikonkę, najlepiej kwadratową ale okrągła też powinna prezentować się przyzwoicie. Ja wybrałam tradycyjną ikonkę o lekko szklanym wyglądzie autorstwa Jay'a Hilgerta. Proponuję wielkość 32 piksele -  tak aby była duża i wyraźna ale nie za duża. Jak znajdziecie odpowiednią ikonkę należy ja dodać do zasobów bloga przykładowo pod nazwą ikona_rss.

RSS

Mamy kod, mamy ikonkę więc możemy zająć się wyglądem. Element pozycjonujemy tak samo jak w poprzednim przypadku. Jedyna zmiana którą wprowadziłam to położenie względem górnej krawędzi - tym razem element jest nieco mniejszy i można go pozycjonować nieco niżej. Podobnie jak poprzednio pozbywamy się typowych ustawień listy. Tym razem dodatkowo przy selektorze #subs ul dodamy nasz obrazek jako tło i odsuniemy linki zapewniając mu dobrą ekspozycję.

#subs {
    position:absolute;
    top: 350px;
    left: 20px;
    WIDTH: 190px;
}
#subs ul {
    margin: 0px;
    LIST-STYLE-TYPE: none;
    padding: 1px 0px 2px 40px;
    background: url(/resource/ikona_rss.png) no-repeat;
}
#subs li {
    FONT-SIZE: 1.2em;
    padding: 0px 0px 2px 0px;
}

Jeżeli wybierzemy inny kolor ikonki prawdopodobnie warto też będzie zmienić kolor linków. W tym celu korzystam z selektorów #subs li a i #subs li a:hover. Przykładowo:

#subs li a {
    color: #888;
}
#subs li a:hover {
    color: #ccc;
}

I gotowe. Teraz pozostaje tylko ukryć napis RSS wyświetlający się obok kategrii. Wystarczy odnaleźć w arkuszu fragnent dotyczący tego linku o wpisać tam dispaly:none;

#BlogRss {
    display:none;
}

Na koniec jeszcze dodam że, linki do RSS wraz z czarną ikonką całkiem fajnie wyglądałyby zapewne pod wyszukiwarką. Jeżeli powyższą notkę uznamy za lekcję to na zadanie domowe byłoby napisaniecss dla elementu umiejscowionego pod wyszukiwarką.
Powodzenia.

niedziela, 03 maja 2009

Planując w lutym 2009 serię serdeczną bardzo mi zleżało na tym aby szablony różniły się charakterem. Chyba nawet za bardzo. Gdy natrafiłam na grafikę OTH: Show Me The Way To Your Heart która ma zupełnie inny charakter niż moje szablony zdecydowałam, że będzie ona podstawą szóstego projektu. Szablon wyszedł intensywny i ciekawy i długo spełniał swoje zadanie. W 2013 roku zdecydowałam się zmienić go, nie dlatego, że był zły, brzydki czy przestarzały. Zmieniłam go bo miałam pomysł na szablon, który będzie mi się bardziej podobał.

szablon serdeczny 06, bliskość rzeczy

Szablon serdeczny 06, Bliskość rzeczy,
na starym kodzie, dla blogów na blox.pl. -500px- 


W pierwotnej wersji szablon powstał w maju 2009 roku jednak z tej oryginalnej wersji nic poza ogólnym tematem nie zostało. Jest to teraz jasny szablon z zarówno kobiecymi jak i męskimi akcesoriami. Jest bardzo w moim guście. Wielokolumnowość jest tu rozwiązana naturalnie: jak będzie wystarczająco dużo miejsca to poszczególne kolumny pojawią się we właściwych miejscach.

 

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

fragmenty szablonu serdecznego06

Uwagi o szablonie
szerokość szablonu auto (740px/960px/1160px)
szerokość kolumny z główną treścią 740px
szerokość pobocznej szpalty auto (170px)
dodatkowe kolumny 1. kategorie
2. treść główna
3. treść poboczna, która automatycznie dzieli się na dwie kolumny
kolor tła jasne (#f0e3c2) w body kremowa grafika
kolor tekstu czarny (#000)
kolor linków malinowy (#f20d34)
pozostałe kolory niebieski (#464370)
krój użyty w notce Trebuchet MS; dodatkowo Amatic SC dla etykiet
wielkość tekstu notki small (ok 14px)
interlinia w notce 1.6em
maksymalna wielość elementów graficznych w notce 500px (ilustracje się skalują)
css-owe ramki przy grafikach nie
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, częściowa transparentność i kursywa
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
automatyczne
h3, h4 - powiększenie i zmiana fontu na Amatic SC
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod: 0Etheme Spokojny
skrypty użytkowników, wklejki zwijane zakładki, zwijane archiwum, wyróżnienie komentarzy autora, Ostatnie komentarze, delicious

dodatkowe klasy i identyfikatory

#menuTop - górne menu (długość 100%)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie
#menuIkon - górne menu z małymi obrazkami

Gdy stworzyłam zimą 2012 roku szablon z choinką spodobał mi się nowy pomysł, jest trochę bałaganiarski i nadmiernie wykorzystuje przestrzeń ale co tam... idealnie pasuje do związków damsko-męskich. Czcionki, połączenie kolorów, różnorodność tekstur, wszystko to bardzo mi odpowiada. Połączenie elementów słodkich i nieco szorstkich jest dla mnie idealne.

Jedyną rzeczą jaką bym zmieniła sobie po skopiowaniu to serduszkowe czekoladki - nie jestem serduszkową osobą i wystarczyłyby mi te na butach ale czekoladki te idealnie pasują do tematu tego szablonu więc się na nie zdecydowałam. Jeżeli ktoś będzie szukał serdecznego szablonu to takie rozwiązanie będzie dla niego odpowiednie.

Wymiana tła dookoła bloga

wzorek z szablonu serdecznego 06Takie tło dookoła blogu jest rzeczą, którą najłatwiej można zmienić. Zawsze jednak proponuję zmieniać na coś podobnego kolorystycznie. Generalnie większość elementów ma własne tła więc jasność tego wzorku nie jest najistotniejsza ale jeżeli chcesz aby dalej można było odczytać datę wpisu to zdecyduj się na jasne tło.

W tle dookoła bloga wyświetla się zwykły wzorek udający jasne deski. Tradycyjnie są dwa sposoby wymiany tła: przez nadpisanie (plik nazywa się ser06_bg.jpg; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo poprzez wymianę adresu wywołania w arkuszu CSS (grafika przypisana jest do elementu body).

Usunięcie kolekcji rzeczy

Sam tytuł bloga i karteczki pod nim tworzy odpowiedni kod CSS. Elementy maja przypisane własne tło graficzne i są odpowiednio przekręcone. O tym elemencie będzie jeszcze niżej.

Część graficzna tytułu czyli buty, klucze, cała masa damsko-męskich drobiozgów to jeden plik przypisany jako tło selektorowi odpowiedzialnemu za całość bloga. Tradycyjnie możesz usunąć ten plik albo go zastąpić własnym. Aby zastąpić w szablonie plik z butami musisz go albo nadpisać w zasobach bloga (plik nazywa się ser06_top_01.png; jeżeli kopiowałeś szablon wielokrotnie to upewnij się co do nazwy sprawdzając zasoby własnego bloga) albo wymienić adres wywołania w arkuszu CSS (grafika przypisana jest do elementu #BlogGlownyBox).

top z 6 szablonu serdecznego

Szablon bez tych elementów wygląda równie dobrze więc wystarczy jak je usuniesz ale równie dobrze możesz skomponować własne biurko pamiętając aby zostawić przezroczyste tło (plik typu png).

Miejsce na tytuł bloga

Tytuł bloga jest w tradycyjnej postaci - tekst z linkiem. Jasne wzorkowe karteczki pod nim to nic innego jak obrócone elementy - takie transformacje to kolejna z nowości z CSS3. Karteczka na wierzchu to nic innego jak jasna, delikatna tekstura. Jeżeli chcesz to możesz przygotować własną karteczkę i jakimś ozdobnym fontem napisać tytuł bloga.

Karteczka ma wymiary 400×247px więc swoją przygotuj też takiej wielkości. Może mieć transparentne tło - w takim przypadku na blogu będzie wyświetlać się na białym. Dodaj swój plik do zasobów bloga.

Teraz wystarczy, że przejdziesz do arkusza stylów (edycja CSS) i odszukasz miejsce w którym opisany jest link tytułu bloga.

#BlogTytulText a {
 width:300px;
 height:177px;
 padding:70px 50px 0;
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
 transform: rotate(3deg);
 box-shadow: 0px 1px 6px #666, 50px 50px 100px hsla(0,0%,100%,.7) inset;
 background: #fff url(/resource/ser06_bg_1.jpg) repeat center center;
 display:inline-block;
 color:#000;
 font-size:4em;
 line-height:1em;
 word-spacing:0.1em;
}

Pierwszy podkreślony fragment to adres ilustracji w tle. Wstaw tam adres własnego pliku. Pozostałe linijki opisują inne cechy tego elementu: cień, wielkość, transformację a także zmianę elementu liniowego w blokowy. To ostatnie jest o tyle istotne, że jeżeli zechcesz ukryć linkujący tytuł bloga to możesz to zrobić bez obaw. Ukryjesz tylko słowa, przestrzeń linkująca pozostanie.

Na koniec tego kodu jest opis wielkości czcionki. Jednym ze sposobów ukrycia tekstu tytułu bloga jest zmniejszenie rozmiaru kroju do zera i dla bezpieczeństwa nadanie mu koloru tła. Dla tego konkretnego szablonu będą to takie wartości:

 color:#fff;
 font-size:0px;

ikonkiObrazeczki obok tytułów notek

Obrazki na początku każdej z notek to nic innego jak ikonki zaprojektowane przez Double-J Design i należące do zestawu: Chocolate Hearts Icons. W szablonie zdecydowałam się użyć kilka i korzystając z możliwości jakie daje CSS3 poprzypisywałam tych kilka obrazków do kolejnych tytułów notek. Jaka ikonka wyświetli się przy jakim wpisie zależeć będzie od tego który to wpis na stronie i czy jest to jedyny wpis danego dnia.

Jeżeli nie chcesz tych ikonek na swoim blogu albo z jakiegoś powodu nie możesz z nich korzystać (łamiesz zasady licencji) to po prostu usuń te zdjęcia z zasobów swojego blogu (skopiowały się tam razem z pozostałymi plikami szablonu). To najprostsze rozwiązanie.

Jeżeli chcesz mieć w tych miejscach inne obrazki to najlepiej nadpisz pliki w zasobach. Ikonki powinny nazywać się tak: ser06_c1.png, ser06_c2.png, ser06_c3.png, ser06_c4.png, ser06_c5.png, ser06_c6.png, ser06_c7.png, ser06_c8.png, ser06_c9.png. Jeżeli jednak kopiowałeś szablon kilka razy to ich nazwy wzbogacone zostaną o kolejne cyfry więc najlepiej sprawdź w zasobach blogu (PLIKI).

Menu z ikonkami społecznościowymi

I na koniec wspomniane w tabelce ikonkowe menu - dodatek z małymi obrazkami linkującymi do różnych serwisów. Wkrótce zapewne pojawi się tutaj bardzo dokładna instrukcja ale póki co odsyłam na stronę z szablonem. Tam w jednej z notek opisałam ikonki, których serwisów są już w szablonie, jak z nich skorzystać i co zrobić aby dodać jakąś inną.

Co chwilę przybywa nowych serwisów więc próba opisania ich wszystkich czy choćby tylko najpopularniejszych jest z góry skazana na porażkę. W zależności od czasu poprawek opisane przeze mnie ikonki będą nawiązywały do określonych serwisów. Dlatego zawsze najlepiej sprawdzić to w pobieranym szablonie. Zawsze też można w analogiczny sposób dodać opisy nowych ikonek/serwisów.

stylekatemacblox.plsoup.iogooglewordpresspinteresttwitterYouTubefacebookblog.plRSSnewsletter

W tym konkretnym szablonie umieściłam bardzo specyficzne ikonki zawsze jednak możesz wstawić własne.


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...