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

Cudzesy: nastrojowy szablon Betsyness

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. Betsyness od początku był moim ulubionym cudzesem, cieszył się też sporym powodzeniem. Był to drugi najchętniej pobierany szablon i pierwszy najczęściej odwiedzany, zarówno w czasie całego swojego istnienia jak i tylko w ostatnim roku. Betsyness był dobry więc zdecydowałam się go nie psuć i tylko uaktualnić.


top 02 - Betsyness

Szablon top 02 - Betsyness, fioletowy,
na starym kodzie, dla blogów na blox.pl. -540px-


Cień pod blogiem do tej pory był w postaci grafiki w tle. Od teraz jest on dziełem kodu CSS co pozwala bez problemu zmienić kolor tła dookoła bloga albo dodać tam jakiś wzorek. Będzie to szczególnie przydatne jeżeli postanowisz wymienić nagłówek czy kolory szablonu. Betsyness to bardzo ładny szablon i bardzo wygodny do przeprowadzenia zmian dostosowujących szablon do indywidualnych potrzeb.

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

fragmenty szablon top 02 - Betsyness

Uwagi o szablonie top 02 - Betsyness
szerokość szablonu 870px
szerokość części na notkę 550px
szerokość pobocznej szpalty 240px
kolor tła białe (#fff) a w body beżowe (#DFD8C2)
kolor tekstu ciemny (#555566)
kolor linków granatowy (#334488)
pozostałe kolory niebieski (#4444bb)
krój użyty w notce Trebuchet MS
wielkość tekstu notki 14px
interlinia w notce automatyczna
maksymalna wielość elementów graficznych w notce 540px
css-owe ramki przy grafikach tak
 border: 3px double #D6CDBC;
 padding: 2px;
wypunktowanie/numerowanie automatyczne
wzmocnienie/emfaza automatyczne
blok cytatu (blockquote) przesunięcie, kursywa i jaśniejszy kolor
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

Mój ulubiony szablon z cudzym topem więc polecam go już od czterech lat. Jest bardzo prosty, przejrzysty. Nie kombinowałam w nim żadnych nietypowych czy skomplikowanych rozwiązań: kolorowy top, cień pod blogiem, granatowe linki, kilka małych ozdobników - wszystko to bardzo proste i niezbyt wyróżniające się.

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.

Przez to, że jest taki prosty bardzo łatwo zmienić w nim każdą dowolną rzecz.

Chcesz inny top - nie ma problemu.

Możesz zrobić to prosto, poprzez nadpisanie plików w zasobach: plik nazywa się betsy.jpg i ma wymiary 850×200px - wystarczy przygotować podobny pamiętając jedynie, że na jego tel wyświetla się tytuł bloga.

Możesz też to zrobić grzebiąc w arkuszu stylów co pozwoli ci na dokonanie większych zmian. Swoją nową grafikę dla topu dodajesz do zasobów blogu. Następnie otwierasz arkusz stylów i odszukujesz fragment odpowiedzialny za wygląd części tytułowej.

#BlogTytulBox {
 background: url(/resource/betsy.jpg) no-repeat center top;
 height:200px;
 PADDING: 0px 20px 10px 20px;
 TEXT-ALIGN: left;
}

Background to tło, jako url podajesz adres swojego nowego pliku. Jeżeli ma inne wymiary niż ten mój betsyness to zmieniasz wysokość (height) elementu.

Jeżeli masz też problem z wyglądem słów tytułu to zmiany przeprowadzasz przy następnych selektorach:

#BlogTytulText {
 padding:110px 0 5px 0; /* odsunięcie tekstu w pionie */
 font-size:3em;         /* rozmiar tytułu */
}
#BlogTytulText a {
 color:#2C255B;         /* kolor linku tytułu */
}
#BlogTytulText a:hover {
 color:#4444bb;         /* kolor linku po najechaniu kursorem */
}
#BlogTytulOpis {
 color: #2C255B;        /* kolor tekstu opisu */
}

To też nie problem. Wymaga nieco bardziej indywidualnego podejścia ale o ile nie będzie to coś skomplikowanego to poniższa generalna rada zadziała.

#BlogTytulText {
 background: url(/resource/nazwa_pliku.jpg) left top no-repeat;
 padding:50px 0 5px 0; /* odsunięcie linku w pionie */
}
#BlogTytulText a {
display:block;  /* zmienia link w element blokowy, konieczne */
height:100px;   /* wysokość linku, konieczne */
text-indent:-9999px;  /* gigantyczne ujemne wcięcie tekstu sprawia, że słowa skrywają się poza krawędzią ekranu */
}


Część linkująca pojawi się na całej szerokości, mniej więcej w połowie wysokości grafiki tytułowej.

Chcesz wzorek w tle, łatwo go dodać.

Aktualnie w tle jest tylko beżowy kolor. Można go zmienić na inny albo dodać wzorek korzystając z możliwości umieszczenia graficznego tła.

body {
 background: #DFD8C2;
}

Kolor tła proponuję dopasować do grafiki albo wybrać jakiś zupełnie odjechany. Jeżeli wstawiasz jakiś wzorek to najlepiej aby kolor był zbliżony do koloru grafiki (będzie widoczny jeżeli wzorek nie będzie możliwy do wczytania na stronę).

Skąd wziąć wzorek? Proste pikselowe można nawet zrobić samemu tylko ostrożnie z różnorodnością kolorów. Te bardziej naturalne są trudniejsze do zrobienia więc lepiej poszukać już gotowych.

Chcesz zmienić kolor linków.

Pisałam już całą instrukcję, krok po kroku, dla szablonu dashed. Tutaj jest dokładnie tak samo. Kolor linków to zawsze opis przy a i najczęściej dodatkowo a:hover. Dla pewności przeszukaj cały kod aby upewnć się czy kolory linków nie pojawiają się gdzieś jeszcze. Najlepiej szukaj po numerze koloru.

a {
 color: #334488;
 text-decoration: none;
}
a:hover {
 color: #4444bb;
}

Wolisz szablony lewostronne.

To niekoniecznie polecam. W przypadku szablonów na starym kodzie gdy układ jest lewostronny to najpierw ładuje się wąska szpalta a potem treść główna. Jeżeli jednak nie masz żadnych wklejek w polu na kod HTML a twoja wąska szpalta zawiera tylko kilka elementów to możesz sobie pozwolić i na szablon lewostronny. Dokładną instrukcję, krok po kroku pisałam na przykładnie szablonu Times. Mimo iż szablon wygląda zupełnie inaczej niż Betsyness to instrukcja będzie dokładnie taka sama:

  • pobierz szablon
  • dla bezpieczeństwa skopiuj kod css
  • zmień szablon bazowy na taki o pożądanym przez ciebie układzie
  • wklej z powrotem właściwy css
  • dopasuj marginesy i położenie niektórych elementów (jeżeli to konieczne)
    #BlogSzerokaSzpalta i ewentualnie #BlogWazkaSzpalta, #SkomentujWazkaSzpalta, #uStopka

Chcesz mieć szerszy szablon.

Potrzebujesz więcej miejsca w na notki, chcesz aby wąska szpalta była szersza bo zamierzasz umieścić w niej szersze dodatki (reklamy), nie ma problemu. Wystarczy poszerzyć szablon.

Tutaj instrukcja zależeć będzie od tego dla jakiego celu poszerzasz szablon. Czy chcesz poszerzyć część głowną aby było więcej miejsca w notce czy też zależy ci na szerszej wąskiej. Zawsze jednak zaczynasz od #BlogGlownyBox. W Betsyness elementy odpowiedzialne za całkowitą szerokość wyglądają tak:

#BlogGlownyBox {
 width: 850px;
 margin: 0px auto;
 padding: 10px;
}

Ze względu na szerokość ekranów użytkowników szerokość bloga nie powinna być większa niż 995px. Nie jest to arbitralna zasada ale polecam jednak ją przestrzegać. Jeżeli potrzebujesz szerszego szablonu to zdecyduj się na taki o zmiennej szerokości.

10px+850px+10px=870px | 995px-870px=125px

Czyli maksymalnie Betsyness można poszerzyć o 125px. Jeżeli zdecydujesz się na konkretną liczbę to musisz ją dodać najpierw w #BlogGlownyBox a następnie do wybranej poszerzanej szpalty:

  • #BlogSzerokaSzpalta - szeroka szpalta z treścią główną
  • #BlogWazkaSzpalta, #SkomentujWazkaSzpalta - wąska szpalta z elementami nawigacyjnymi i informacjami pobocznymi

Szerokość to width. Aby określić całkowitą szerokość elementu należy wziąć też pod uwagę ramkę (border), dopełnienie (padding) i ewentualny margines (margin). Poszerzając szablon możesz wygospodarować miejsce na dodatkową kolumnę ale 125px to trochę mało więc trzeba by jedną ze szpalt dodatkowo zmniejszyć. Ale da się to zrobić więc i trzecia kolumna jest możliwa.


czwartek, 07 czerwca 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...