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

Niebieskia powtórka

Miał bisować różowy szablon ale różowy to bardzo trudny kolor, niewiele jest odcieni różowego, które sprawiałby przyjemne wrażenie. Dlatego też dzisiaj pojawia się niebieski. Jest to typ AMPLA, znacznie jednak spokojniejszy niż toksycznie zielony pierwowzór.


18 szablon z AMPLA, niebieski

18 szablon ampla, niebieski
na starym kodzie, dla blogów na blox.pl. -500px- 


Szablon jest całkiem prosty, jego głównymi ozdobnikami są przerywane ramki i kolor niebieski, ampla wisząca jest już tylko dodatkiem i oświetla w nieco mniejszym stopniu niż ta zielona. Uaktualniając szablon w 2012 roku dodałam krój Segoe UI, który jest niemal równie czytelny jak Verdana (ma całkiem spore oczka) ale znacznie ładniejszy w dużym stopniu pisma (co jest problemem w przypadku Verdany).

Szablon został zaktualizowany w styczniu 2012 a ta notka znacznie zmieniona.

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

fragmenty szablon 18

Uwagi o szablonie
szerokość szablonu 810px
szerokość części na notkę 510px
szerokość pobocznej szpalty 200px (+2×20px)
kolor tła ciemne (#0a0a0a)
kolor tekstu jasno szary (#ccc)
kolor linków niebieski (#22bbcc)
pozostałe kolory biały (#fff)
krój użyty w notce Segoe UI lub arial/helvetica (w zależności od systemu)
wielkość tekstu notki 14px
interlinia w notce wartość względna: 1.4em
maksymalna wielość elementów graficznych w notce 500px
css-owe ramki przy grafikach tak
border: 2px #333 dashed;
padding:3px;
wypunktowanie/numerowanie automatyczne
pogrubienie/kursywa automatyczne
blok cytatu (blockquote) przesunięcie, kursywa, górna i dolna ramka
nagłówki w notce (h1, h2, h3, h4, h5, h6) automatyczna wielkość i odstęp
kursywa zamiast pogrubienia
wyróżnienie akapitów automatyczny odstęp
baza bloksowa stary kod: 0Etheme Spokojnystary kod, szablon Spokojny (0Etheme)
skrypty użytkowników, wklejki avatary w komentarzach, zwijane zakładki, zwinięte archiwum, Ostatnie komentarze, delicious, fotoforum (pionowy)

dodatkowe klasy i identyfikatory

#uStopka - dodawanie udawanej stopki
#menuTop - górne menu (długość 988px)
.boks i .tyt - dodatkowe kontenery w bocznej szpalcie

Ilustrację w topie, amplę w kolorze lekko cyjanowego niebieskiego łatwo można zastąpić czymś innym. Zasada jest zawsze ta sama. Można spróbować po swojemu, już zrobiłam stronę o selektorach opisujących tytuł. Polecam jednak najprostsze z rozwiązań: zastąpienie. W arkuszu istnieje opis ilustracji, można zastąpić jej adres w arkuszu adresem nowego pliku albo zastąpić plik w zasobach nadając nowemu tą samą nazwę, czyli: 18_tytul.jpg

Myślę o opisaniu jak do szablonu dodać trzecia kolumnę. Nie jestem jeszcze zdecydowana więc póki co linku podać nie mogę ale ewentualnego opisu proszę szukać w pierwszych miesiącach 2012 roku.


Notki na powiązane tematy:

niedziela, 06 stycznia 2008, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Trzecia kolumna na blogu z szablonem 09 AMPLA z szablony katemac
Swego czasu trzecia kolumna na bloksowym blogu była jakimś często irracjonalnym pragnieniem co drugiej osoby, która zadawała mi pytanie związane z wyglądem bloga. Najśmieszniej było gdy o trzeciej kolumnie wspominał ktoś kto w wąskiej szpalcie poza ... »
Wysłany 2013/03/05 12:21:12
Komentarze
kaarmen
2008/01/06 16:03:03
Bardzo pieknie dziekuje za pomoc:))) W IE dolne podswietlenie jest niewycentrowane, ale na szczescie uzywam FF:D Pomarudze jeszcze troszke;) Chcialabym zrobic pomaranczowy kolor Opisu, gdy najezdza sie nan myszka (tak jak w Tytule), oraz mysle, zeby szpalte z zakladkami nieco zwezic, ustawic wtedy zawijanie zakladek, na korzysc szpalty glownej. Na koniec chcialabym pozbyc sie dott-owanej linii i zamienic ja na zwykla prosta lub podwojna, prosta. To byloby na tyle w kwestii estetycznej;) Swoja droga wiedze to Ty masz ogromna:))) Zazdraszczam;) i podziwiam:)))
-
kate_mac
2008/01/06 19:25:14
Karmen
bardzo pięknie proszę ;)
nawet ciekawie wygląda to w IE; chyba bym tak nawet zostawiła bo mi się podoba (to, że Ty korzystasz z FF nie znaczy, że Twoi czytelnicy też znają się na przeglądarkach – pamiętaj, że na rynku IE odgrywa nadal ogromną rolę)
Dużym problemem jest to, że przeglądarki nie zawsze wyświetlają wszystko tak samo ale przy drobinie sprytu da się zmusić i IE do posłuszeństwa; w
#BlogTytulBox
wpisz
TEXT-ALIGN: left;
a w
#BlogTytulText
wyśrodkuj tekst wpisując
TEXT-ALIGN: center;
powinno zadziałać ale tu już nie gwarantuję; czasami i lisek zachowuje się gorzej od IE ;)

w sprawie koloru opisu nic nie poradzę; to co sprawia, że tytuł zmienia kolor po najechaniu nań kursorem to pseudoklasa hover; nie wiem czy można ją wykorzystywać w innych przypadkach niż linki („a”); wydaje mi się, że tutaj celu nie osiągniesz
-
kate_mac
2008/01/06 19:41:36
Kaarmen

w sprawie szpalt
wydaje mi się, że tak jest ok.
zbyt szeroka "szeroka szpalta" może spowodować, że tekst, źle się będzie czytało (podobnie jak zbyt wąska "wąska szpalta" – zauważ, że w gazetach bez względu na to jak są szerokie tekst podzielony jest na kolumny; podobnie w książkach formatu A4); przemyśl to a jeżeli się zdecydujesz to wytłumaczę Ci jak to zrobić (i nie musisz zmniejszać wąskiej szpalty aby powiększyć szeroką)

w sprawie linii
któreś konkretnie ramki chcesz zmienić czy wszystkie?
musisz wyszukać selektory z właściwością BORDER; ja znalazłam dziesięć ale może ich być więcej więc najlepiej nie sugeruj się tymi które ja tu wypisałam tylko spokojnie przejrzyj CSS wyszukując border przy którym będzie napisane dotted (#BlogKategorieBox, .BlogWpisInfo, #PolecWpisStrKom,
#BlogKalendarzBox, #BlogZakladkiBox,
#BlogArchiwumBox, #SkomentujBoxEtykieta, #BlogPrzeszukiwanie, #SkomentujKomunikat,
#BlogTytulyOstatnichWpisow)

np. przy kategoriach będzie to
BORDER-BOTTOM: #330000 1px dotted;
czyli ramka dolna
jeżeli chcesz linię ciągłą pojedynczą zmieniasz dotted na solid
a jeżeli podwójną to na double i zamiast 1px piszesz 3px; czyli przykładowo
BORDER-BOTTOM: #330000 3px double;

a wiedzę mam raczej podstawową; bloguję od niespełna roku; tak bardziej poważnie od października i wiem tylko tyle ile się w tym okresie dowiedziałam i z chęcią podzielę się tym czego się dowiedziałam wiec pytaj śmiało ;)
pozdrawiam
-
kaarmen
2008/01/07 03:37:08
Ach i och! Jestem coraz bardziej zachwycona zmianami na blogu:)))

W IE wszystko teraz dziala jak trzeba:)

Co do szerokosci szpalty - chyba masz racje. Ale nie pasuje mi ta "dziura" pomiedzy szeroka szpalta a waska. Byc moze trzebaby wycentrowac tekst waskiej szpalty lub justowac do prawej? Albo zmienic marginesy obu? Albo wielkosc czcionki na waskiej szp.? No i mysle jeszcze nad zmiana kroju lub wielkosci czcionki waskiej szpalty, zeby lepiej zgrac ja z szeroka.

Ostatnia drazniaca sprawa jest najezdzanie mysza na zakladki itp. Podswietlenie ukazuje sie wraz z linia (podkresleniem). Mam chec to podkreslenie zlikwidowac:)

pozdrawiam serdecznie i z wdziecznoscia:) K.
-
kate_mac
2008/01/07 10:57:18
Kaarmen
Cieszę się, że wszystko idzie po Twojej myśli;

W sprawie szpalt
Ja zmieniłabym marginesy (zarówno margin jak i padding); nie masz ich bardzo dużych więc kilka px więcej im nie zaszkodzi;
krój czcionki? czemu nie? jeśli tylko chcesz ;) ale raczej nie rozmiar (w każdym bądź razie nie o dużo) w wąskiej szpalcie masz linki UPPERCASE czyli dużymi literami więc czcionka powinna być mniejsza niż przy normalnej wielkości liter
co do centrowania tekstu nie jestem pewna (choć sama u centruję wąską szpaltę;)) wyrównanie do prawej krawędzi też może fajnie wyglądać (przy zachowaniu odpowiedniego marginesu) np. 10szablonkatemac.blox.pl

podkreślenie to text-decoration:underline;
aby go nie było trzeba wpisać
text-decoration:none;
pytanie: chcesz usunąć podkreślenie tylko z linków w zakładkach, całej wąskiej szpalcie czy może na całym blogu?
-
shi-ann
2008/01/07 17:40:59
A ja znowu do Ciebie z pytaniem przybiegłam. Jak na blogu napisać notkę w dwóch kolumnach? Ty osiągnęłaś takie kolumny np: pod szablonami w notce: "świątecznie się bałamucę"...
Próbowałam w każdym edytorze i próbowałam tez wklejać gotowy tekst z Worlda, ale nic z tego :-(
-
kaarmen
2008/01/07 21:21:29
Kate - chwilowa przerwa w dalszych zmianach na blogu - koniec urlopu, trzeba pracowac:] Odezwe sie za pare dni:) Dziekuje za kolejne podpowiedzi:) Dopytam szczegolowo jak juz zabiore sie za modyfikacje:))) pozdr. K.
-
shi-ann
2008/01/08 08:56:09
Już wiem, że te kolumny to za pomocą tabeli powstały :-) Teraz próbuję je rozgryźć bo bez względu na wielkość bardzo rozsuwają mi szablon :/
Pozdrawiam
Ania
-
kate_mac
2008/01/08 10:04:14
shi-ann
masz rację to była tabela
co do rozsuwania szablony to żeby dać radę "100% pewności" to musiałabym wiedzieć z którego edytora korzystasz
ale
ja zrobiłam tabelę w Tiny (pierwszy guzik w ostatnim rzędzie)
trzeba określić szerokość tabeli (jeżeli nadal korzystasz z szablonu szymona to prawdopodobnie może być nawet szeroka na 500px ale najlepiej sprawdź to i ustal sobie bezpieczną szerokość którą będziesz wpisywała do każdej tabli
proponuję jeszcze zrobić odstępy miedzy kolumnami (aby nie było wątpliwości, że to są kolumny a nie jednolity tekst)
użyj albo "Margines wewnątrz komórek" albo "Odstępy między komórkami" wpisując w te pola kilka lub kilkanaście px
najprościej do optymalnych rozwiązań dojść metodą prób i błędów ;)
Pozdrawiam
-
kate_mac
2008/01/08 10:06:28
ok kaarmen
jak podejmiesz decyzję co dalej to powiem jak ;)
pozdrawiam i przyjemnej pracy życzę
-
shi-ann
2008/01/08 15:42:32
Szerokość wpisywałam, nawet dużo mniej bo 420 (czyli tyle ile mają zdjęcia na moim blogu). Nie wiem tylko czy obok liczby szerokości wpisywać jednostkę tzn. px?
-
kaarmen
2008/01/09 00:29:29
Kate - planuje juz powolutku, po skonczeniu ulepszania mojego bloga - takze zmiany na DogBlogu:))) Dogblog - mimo dosc fajnego szablonu, niestety jest skopany duzo bardziej:( A to szablon sie nie centruje w MF, a to czegos mu brak. Pozawracam Ci jeszcze glowe... pozawracam;) Tymczasem probuje sie odkopac spod pracy... "tfurczej" i nie mam weny na tworczosc blogowa;) do napisania! K.
-
Gość: , *.neoplus.adsl.tpnet.pl
2008/01/15 17:37:46
hej hej super blog i szablony tez ... bardzo podoba mi sie 17 niebieski wiec go porzyczam 17 szablon niebieski ciemny
-
hsm-hsm
2008/01/15 17:44:12
hej hej super blog i szablony tez ... bardzo podoba mi sie 17 niebieski wiec go porzyczam 17 szablon niebieski ciemny na www.mmoojjbblloogg.blox.pl
-
2009/07/01 20:15:47
Dodaj 18 do swojego bloogu:)
omnieiograc.blox.pl/html
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...