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

Times New Roman, już sześć szablonów w temacie

Rzadko robię szablony w których krojem do pisania notek jest czcionka szeryfowa. Z tego powodu m.in. postanowiłam wykorzystać całkiem dobry wzór jakim jest szablon Times New Roman i powielić go w kilku wersjach kolorystycznych. Już w pierwszej notce są dwa ale w gruncie rzeczy dość podobne do siebie: intensywne, kolorowe.


42 szablon granatowy
Szablon 42 Times, granatowo-beżowy,
na starym kodzie, dla blogów na blox.pl. -550px-



43 szablon granatowy
Szablon 43 Times, czarno-turkusowy,
na starym kodzie, dla blogów na blox.pl. -550px-



44 szablon granatowy
Szablon 44 Times, żółto-fioletowy,
na starym kodzie, dla blogów na blox.pl. -550px-



45 szablon granatowy
Szablon 45 Times, bordowo-beżowy,
na starym kodzie, dla blogów na blox.pl. -550px-



Szablony pasują do różnych tematów. W 2012 zmieniłam im nieco kod pozbywając się zbędnych grafik ale zachowując niemal identyczny wygląd. Jedyna zmiana to dodatkowe, nieco bardziej ozdobne tło dla wyszukiwarki.

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

fragmenty

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

fragmenty

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

fragmenty

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

fragmenty

Uwagi o szablonie Clean (typ A):
granatowym (42, czarnym (43), żółtym (44), bordowym (45)
szerokość szablonu 880px
szerokość części na notkę 560px
szerokość pobocznej szpalty 240px (2×10px)
kolor tła białe (#fff)
kolor tekstu grafitowy (#333)
kolor linków 42 granatowy granatowe (#23516B)
43 czarny turkusowy (#3AB5FF)
44 żółty fioletowy (#7f4458)
45 bordowy bordowy (#902008)
pozostałe kolory 42 granatowy zielony (#517B10), ciemnozielony (#344F0A)
43 czarny czarny (#000)
44 żółty liliowy (#9d6278), żółty (#fbde80)
45 bordowy morelowy (#A65043)
krój użyty w notce Times New Roman (i Verdana przy IPT)
wielkość tekstu notki medium (około 16px)
interlinia w notce wartość względna: 130%
maksymalna wielość elementów graficznych w notce 550px
css-owe ramki przy grafikach 42 granatowy tak
  background: #decea4;
 padding:4px;
 border:1px solid #AEA281;
43 czarny tak
 padding:4px;
 background: #e5e5e5;
 border: #ccc 1px solid;
44 żółty tak
  background: #E2E2CF;
 padding:4px;
 border:1px solid #999;
45 bordowy tak
  background: #b2a497 url(/resource/45_bbg.jpg) repeat top center;
 padding:4px;
 border:1px solid #c9c1b6;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie i dwukolorowa ramka o różnej grubości
nagłówki w notce
(h1, h2, h3, h4, h5, h6)
h3: powiększenie tekstu
wyróżnienie akapitów automatyczny odstęp
baza bloksowa 42 granatowy stary kod: 0Ethemestary kod: 0Etheme Spokojny
43 czarny stary kod: 0Bbialystary kod: 0Bbialy Biały
44 żółty stary kod: 0Ethemestary kod: 0Etheme Spokojny
45 bordowy stary kod: 0Bbialystary kod: 0Bbialy Biały
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 - górne menu (w układzie poziomym)
#uStopka - udawana stopka
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Szablony są szerokie, wyglądają w zasadzie jakby nie miał granic ale zapewniam, że one istnieją i proszę o nich pamiętać. Świetnie nadadzą się na galerię a jeżeli potrzebne by było więcej miejsca w notkach na zdjęcia to stosunkowo łatwo go powiększyć (instrukcja dla szablonu 19 Light sprawdzi się i tutaj).

W 2012 aktualizowałam szablony i notki o nich. W zasadzie zostawiłam je niezmienione poza dodaniem wzorków. Wyjątkiem jest fioletowo-żółty, któremu zamieniłam kolory, jest teraz bardziej żółty niż fioletowy.

Tworząc szablon przygotowałam dla niego cztery grafiki, dwie do topu i dwie do dołu. Wystarczy sprawdzić w zasobach blogu ich nazwy i wymiary i przygotować własne alternatywy o tych samych nazwach (i rozszerzeniach). Teraz wystarczy tylko nadpisać pliki w zasobach bloga i zmiana zrobiona.


Dla eksperymentujących mam jeszcze jedną propozycję: zamienić pliki miejscami. Nie tyle dół z górą co ozdobę z tłem podstawowym. Jednolita górna część opisana jest przy body, a ozdobna przy szukaczu. Dolny pasek natomiast jednolitą wersję tła ma opisana dla html a ozdobną przy udawanej stopce. Wystarczy teraz adresy wywołania tła zamienić miejscami aby uzyskać bardziej ozdobny szablon.


niedziela, 22 lutego 2009, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
xdevx
2009/02/23 14:30:18
Hej,

Przepraszam, że trochę nie na temat, ale zadałem podobne pytanie już na forum CSSowym bloksa, ale chyba dawno nikt go nie odwiedzał i nie mogę doczekać się odpowiedzi :)

Chodzi mianowicie o "klikalny" tytuł w formie pliku graficznego - czy mogłabyś powiedzieć jak coś takiego zrobić? (Oczywiście, o ile nie jest jakiś "opatentowany" trik, którego nie możesz zdradzić :) ). Z góry dzięki!

Pozdrawiam,
Artur
-
irytek05
2009/02/26 15:17:26
Kate, podpowiedz upiornej pamięci, co i gdzie się wpisuje, aby komentarze były ponumerowane? Te z awatarem:)
-
2009/02/26 21:46:21
Hey ;) Ja też troszkę nie na temat tej noci powyżej jednak chciałem o coś zapytać. Otóż swojego bloga opieram na szablonie muzycznym pochądzącym z tej strony. I takie mam pytanie czy można nad pierwszą notką odrazu pod nagłówkiem i pod kategoriamy a nad notką dać taki obrazek który bedzie przenosił na inną strone albo poprostu do mojej innej kategorii taki jak jest tu na stronie a pod nim jeszcze takie 4 małe. Tylko że mi chodzi o jeden taki długi jak długość tej notki. Jeżeli jest to możliwe chciałbym zapytać jak to zrobić? i co wstawić itd? Za pomoc wielkie dzięki ;) Pozdro... oto ten szablon - muzyczny03szablonkatemac.blox.pl/html
-
irytek05
2009/02/27 01:08:32
Kate, już sobie przypomniałam:)
-
kate_mac
2009/03/01 14:12:49
@xdevx
oczywiście, że to niej jest żaden tajny trik
to coś w rodzaju techniki FIR - nie mam dostępu do html tytułu ale na ile rozumiem zasady to wydaje mi się, że waśnie technika FIR pozwala zastąpić tytuł grafiką zachowując dostępność szablonu; ale po kolei, ja robię to tak:
- określam wyświetlanie linku tytułu bloga jako blokowe (czyli przy elemencie #BlogTytulText a dodaję cechę display o wartości block)
- nadaję temu selektorowi określony rozmiar (poprzez cechy width i height ale padding powinien posłużyć tak samo dobrze)
- umiejscawiam go we właściwym miejscu korzystając z margin i padding elementów nadrzędnych dla linku (w zasadzie może być chyba margin tego konkretnego elementu ale ja przyzwyczaiłam sie korzystać z cechy padding dla elementu #BlogTytulText)
- ukrywam tekst tytułu korzystając z minusowego wcięcia akapitowego przy linku tytułu - powinno być bardzo duże, że względu na różne rozdzielczości ekranów (czyli przy elemencie #BlogTytulText a dodaję cechę text-indent o wartości powiedzmy -9999px)

@irytek05
nie taka straszna ta pamięć skoro sobie przypomniałaś ;)
dla innych zainteresowanych numerowanie komentarzy zostało opisane na BloxWiki - CSS - Numerowanie komentarzy

@piottrek2
można, skorzystaj z pozycjonowania względnie bezwzględnego (przykładowo opisał to e-maupa jako [a="cssmonkey.blox.pl/2008/02/Podstawy-layoutu-CSS-czesc-I.html]absolutnie/relatywnie[/a]) a same elementy oczywiście musisz utworzyć korzystając z tagów html
w analogiczny sposób robię zazwyczaj Trzecia szpaltę więc i te wpisy mogą Ci co nieco podpowiedzieć:
Tworzenie elementu
Opisywanie elementu

pmcna mże się też okazać notka Taishy o menu - zasada w dalszym ciągu jest ta sama: tworzysz element i pozycjonujesz go względnie bezwzględnie na stronie
-
xdevx
2009/03/03 12:11:04
@KateMac: Dzięki :) Na razie jeszcze nie udało mi się przebrnąć przez to wszystko: przeczytałem, spróbowałem, i na razie nie wyszło, ale mam nadzieję, że w końcu się uda. Zastanawiam się tylko, czy nie ma możliwości stworzenia mapy obrazka, zdefiniowania jej parametrów w polu na HTML i nałożeniu obrazka, jako kolejnej warstwy, nad tytuł...

Pozdrawiam,
Artur
-
2009/03/08 12:09:23
Bardzo Ci dziękuje za pomoc ale się chyba i tak nie połapie ;) Już prubowałem obniżyłem notki i zakładki a następnie obrazek dałem na to czarne tło przed notką jednak zaczął mi przeszkadzać napis Rss i było to mało funkcyjne bo mogłem tylko do jednej kategorii przejść przez obrazek po dodanu drugiego schodził niżej a wtedy powstawał nieładny wygląd ;( No cóż... pOzdro...
-
kate_mac
2009/03/08 13:24:12
@Artur
nie jestem pewna czy rozumiem co do mnie piszesz ;) ale Twój sposób może być równie dobry jak mój - niestety nie znam odpowiedzi
jednak unikałabym umieszczania dwóch linków w dokładnie tym samym miejscu...

@piottrek2
szczerze to uważam że w winiecie masz sporo rzeczy i radziłabym Ci najpierw wprowadzić tam jakąś regularną kompozycję, która nada winiecie więcej harmonii
puste miejsca nie są złe i trochę przestrzeni porządkuje i podkreśla rzeczy znajdujące się dookoła
-
xdevx
2009/03/16 16:38:10
Hej, starałem się zrobić dokładnie tak, jak napisałaś, ale nadal coś nie chce mi ten sposób zadziałać... Poszukałem nieco o technice FIR, ale - choć robię wszystko zgodnie z Twoimi (i nie tylko) instrukcjami - dotychczas nie udało mi się osiągnąć zamierzonego rezultatu. Jestem w stanie nałożyć na istniejący obraz-nagłówek nowy, także będący obrazkiem - ale nie staje się on linkiem. Jest nim u mnie tytuł wyświetlany "normalnie", który gdy cofnę za pomocą text-indent, to w ogóle przestaje się wyświetlać... Próbowałem przypisać tą wartość do linku-tytułu, ale ciągle jest to samo...

Mogłabyś rzucić okiem na poniższy fragment kodu (efekt - probny21.blox.pl/html) ?

#BlogTytulBox {
background:#c3bfbe url(/resource/Top.jpg) no-repeat bottom;
height: 232px;
width:900px;
}
#BlogTytulText {
background:#c3bfbe url(/resource/Tyt.jpg) no-repeat;
display: block;
height: 67px;
width: 617px;
margin-top: 93px;
margin-left: 25px;
position: absolute;
}
#BlogTytulText h1 {text-indent: -10000px; height: 67px;
width: 617px;
}
#BlogTytulOpis {
}

Z góry dziękuję za wszelką pomoc :)

Pozdrawiam,
Artur

PS. "Mój" sposób jest tylko i wyłącznie teoretyczny - chodziło mi o wykorzystanie pola na HTML do stworzenia kolejnej "warstwy" z obrazkiem jako standardowym linkiem. Za słaby jestem jednak w te klocki, aby próbować coś w tym stylu.
-
kate_mac
2009/03/17 17:04:07
@xdevx
powiedziałabym, ze nie zwróciłeś uwagi na najważniejsze czyli na link; podałeś mi tu kod opisujący wygląd poszczególnych kontenerów ale zapomniałeś o ostatnim, najbliższym samym słowom czyli o linku

zobacz sobie jak w źródle strony wygląda html Tytułu Twojego bloga; mniej więcej tak:
(div id="BlogTytulBox")
(div id="BlogTytulText")
(h1)
(a href="/html")
Rzut oka na świat EXP3
(/a)
(/h1)
(/div)
(/div)

o tym jak będzie wyglądał tytuł bloga będący linkiem decyduje element "najbliższy ciału" czyli #BlogTytulText a
linki (a) są elementami liniowymi i dlatego dodaję cechę display:block; dzięki czemu link powinien się zachowywać jak większość divów

w zasadzie wszystko zrobiłeś dobrze za wyjątkiem najważniejszego: zrobiłeś to w złym miejscu; chodzi nam o link więc musisz opisywać link - dodaj do swojego kodu ten fragment:

#BlogTytulText a {
display: block;
height: 67px;
width: 617px;
text-indent:-9999em;
}
#BlogTytulText a:hover {
background: none;
}

i dopiero teraz powinno zadziałać

Co do Twojego sposobu to ja bym się zastanawiała która warstwa będzie 'na wierzchu' - niestety za słaba jestem w te klocki aby to stwierdzić ;)
Może zadziała... jednak ze względu na dostępność polecam mój sposób.
-
xdevx
2009/03/18 20:29:40
I voila ;) Wszystko pięknie działa - bardzo, bardzo Ci dziękuję za pomoc z tym wszystkim! Z tego co wiem, było to nieco upierdliwe dla części użytkowników - wchodząc np. ze strony Gazeta.pl Świat (gdzie z boku strony promowane są blogi o tematyce takiej jak ta "moja"), nie wiedzieli jak wejść z danego wpisu, do którego odsyłała ta strona, na stronę główną blogu. Teraz już nie powinno być z tym problemu :)

Jeszcze raz wielkie dzięki!!!

Pozdrawiam,
Artur
-
kate_mac
2009/03/19 18:01:04
@xdevx
akurat w przypadku zwykłych chronologicznych notek nie jest jeszcze tak strasznie - istnieje tam coś co nazwałabym menu zagłębienia a co na bloksie w css nazywa się chyba SkomentujBoxEtykieta - gorzej jest ze stronami statycznymi, tam czegoś takiego nie ma i ukrywając link tytułu bloga można nieźle sobie skomplikować 'płynność ruchu' na blogu

chyba rady jakie napisałam Tobie przekształcę w notkę ;) tyle razy już to tłumaczyłam że starczyłoby na kilka notek :D będę musiała przejrzeć maile i zorientować się jakie są najczęstsze błędy - zobaczymy czy uda mi się napisać instrukcje idealną heh
-
xdevx
2009/03/21 20:20:19
Ja zauważyłem spory spadek ruchu "wgłąb" strony, gdy brakowało tego tytułu w formie odsyłacza. Miałem sporo odsłon, ale bardziej powierzchownych, niż wcześniej - być może to zbieg okoliczności, ale lepiej dmuchać na zimne.

Co do notki - to cieszę się, że moje "problemy" są tak inspirujące ;) Myślę, że to świetny pomysł, ponieważ wiele osób może mieć z tym problem.

Jeszcze raz - wielkie dzięki za pomoc!

Pozdrawiam,
Artur
-
2009/03/25 12:59:42
Bardzo mi się podoba układ szablonów Times, ale mam problem z dobraniem kolorystyki. Wybrałam bordowo-beżowy, ale na niektórych komputerach wyświetlał się jako całkiem biały i nie było widać tytułu. Przeniosłam się na turkusowo-czarny, ale ten turkus jest za jasny i już sama nie wiem co zrobić. Podoba mi się granat z granatowo-beżowego, ale to szablon lewostronny a te w ogóle mi nie odpowiadają. Czy jest jakiś prosty sposób, żeby w turkus zamienić na inny odcień?
Pozdrawiam
-
kate_mac
2009/03/28 18:43:20
@xdevx
potwierdzam - to chyba jest rzecz która najczęściej tłumaczę ;)

@goscha
bordowo-beżowy wyświetlał się w ogóle bez grafik czy tylko brakowało tła w części tytułowej? jeżeli chodzi o te komputery to w jakich przeglądarkach? dopóki nie wiem na czym polega błąd nie jestem w stanie go poprawić; ja widzę wszystko ok

prosty sposób na zmianę turkusowego na inny odcień
kolor należałoby zmienić w dwóch miejscach w tekście i w grafikach tła; to drugie wymaga więcej zachodu ale to pierwsze wydaje mi się, ze można w prosty sposób zrealizować korzystając z funkcji znajdź i zastąp w dowolnym w miarę konkretnym edytorze tekstu
turkusowy w tym szablonie to: #3AB5FF
-
kalarepa86
2010/03/20 11:20:04
Pożyczyłam szablon 41 Times - niebiesko-różowy dla bloga molksiazkowyy.blox.pl/html :) Dziękuję. Nie wiem tylko dlaczego to, co miało być różowe (linki) zmienia mi się w każdym szablonie na kolor niebieski.
-
czarownie
2012/03/20 07:43:41
Witam, korzystam z szablonu Times New Roman i mam takie pytanie: jak sprawić, żeby tytuł notki wyświetlanej na gównej stronie bloga można było kliknąć i znaleźć się na stronie poświęconej wyłącznie tej notce (tak jak to jest u Ciebie i chyba na wszystkich blogach)??
Próbowałam zrobic tytuł wpisu w formie odsyłacza <a herf =>itd, i wprawdzie faktycznie odsyłacz wówczas działa, ale na stronie na która odsyła nad szablonem pojawia się jakiś wycinek tekstu w html.. (nie wiem czy to jasno opisałam) i nie wiem czy jest może jakis sposób żeby wszystkie tytuły zrobić w ten sposób za jednym razem...
-
czarownie
2012/03/20 07:59:12
Oups, to chyba u mnie było cos z szablonem, korzystam z niego juz dłuższy czas i dopiero teraz sie zorientowałam ze to nie działa, ale już jest w porządku... Z tym, że nie wiem jak to zrobiłam, w tyle miejsc powchodziłam i tyle rzeczy ponaciskałam, że widac cos zadziałało:) Pozdrawiam serdecznie i przepraszam za zawracanie głowy:)
-
kate_mac
2012/03/20 18:11:09
@czarownie
Tytuł wpisu na stronie głównej jest odsyłaczem do notki tylko wtedy gdy na blogu włączona jest optymalizacja pod wyszukiwarki (WYGLĄD -> POZOSTAŁE) Nie ma to nic wspólnego z szablonem. Na bloksie szablonem są style (CSS) a one generalnie nie tworzą elementów czy działań a jedynie opisują wygląd istniejących elementów. Jeżeli coś nie jest linkiem to szablon nie sprawi, że nagle się nim stanie (tak mi się w każdym bądź razie wydaje).
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...