O szablonach, ich projektowaniu i moich z tym zmaganiach...
wtorek, 25 października 2011

Pisałam o krojach, pokazywałam jak wyglądają, pokusiłam się nawet o dłuższy tekst o tym jak Microsoft nie chciał płacić za Helvaticę i zakupił tańszego Ariala. Dzisiaj mało tekstu za to sporo do oglądania. Wypisałam wszystkie kroje, które przychodzą mi do głowy, są w miarę dostępne (czyli zainstalowane na Windowsie, nie oszukujmy się; statystyki mówią, że użytkownicy wchodzący na polskie strony w 97% korzystają z systemów tej marki) i mają polskie litery.

Oczywiście fonty wypisałam w stosie a więc starałam się znaleźć alternatywę dla innych systemów. Nie dodawałam natomiast na koniec właściwej rodziny. Chciałam aby osoby które nie mają zainstalowanego danego kroju widziały wyraźnie różniącą się czcionkę typu monospace czyli o stałej szerokości znaku (jak na starej maszynie, Courier New). Na koniec poproszę więc o recenzję. Czy wszystkie te czcionki są dostępne na waszych komputerach?

przykłady s

Numery od 1 do 5 zapewne tak. To są kroje które zawsze polecam wpisywać. Są ładne, dobrze zaprojektowane i zainstalowane na niemal każdym komputerze. Nad krojami od 6 do 11 należałoby się zastanowić. Z różnych powodów: za ciężkie, zbyt wyraziste, afiszowe (nadają się tylko na nagłówki). Comic Sans i Monotype Corsiva to delikatny temat. Są całkiem dobrze zrobione ale ich wybór wydaje się być bardzo infantylny; Comic to czcionka dla komiksów, raczej niepoważna, komiczna i trochę dziecinna; Corsiva zaś jest ozdobna, brakuje jej jednak trochę uroku jak na ozdobny typ. Została zaprojektowania dla inicjałów bardziej niż tekstu. Od 14 do końca dodałam kroje, które nie są tak powszechne (51% użytkowników polskich stron posiada zainstalowany system Windows XP).

szablony Kate Mac - monospace - 16px
Takim fontem wyświetlać się będą nie zainstalowane u was kroje. - 12px

  1. szablony Kate Mac - Trebuchet MS - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  2. szablony Kate Mac - Verdana - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  3. szablony Kate Mac - Arial - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  4. szablony Kate Mac - Times New Roman - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  5. szablony Kate Mac - Georgia - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  6. szablony Kate Mac - Tahoma - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px (Mac: Geneva)
  7. szablony Kate Mac - Century Gothic - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px (Ubuntu: URW Gothic L)
  8. szablony Kate Mac - Impact - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  9. szablony Kate Mac - Garamond - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  10. szablony Kate Mac - Palatino Linotype - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px (Mac: Palatino, Ubuntu: URW Palladio L)
  11. szablony Kate Mac - Bookman Old Style -16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px (Mac: Hoefler Text, Ubuntu:URW Bookman L)
  12. szablony Kate Mac - Comic Sans MS - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  13. szablony Kate Mac - Monotype Corsiva - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px (Mac: Apple Chancery, Ubuntu: URW Chancery L)
  14. szablony Kate Mac - Arial Narrow - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px (Helvetica Condensed)
  15. szablony Kate Mac - Calibri - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  16. szablony Kate Mac - Cambria - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  17. szablony Kate Mac - Gabriola - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  18. szablony Kate Mac - Segoe UI - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px
  19. szablony Kate Mac - Segoe Print - 16px
    Mężny bądź, chroń pułk twój i sześć flag. - 12px

 

Jeżeli macie jeszcze jakieś propozycje do dodania to tej listy to zapraszam do komentarzy. Które najbardziej lubicie? Z których najchętniej korzystacie?

wtorek, 18 października 2011

Opisałam już jak stworzyć sobie górne menu gdy korzysta się z jednego z szablonów sportowych (temat szablonu łatwo można zmienić, dla większości szablonów sportowych przygotowałam też niesportowe nagłówki). Menu zaczęłam dodawać do innych moich szablonów ale to potrwa. Nie każdy też korzysta z szablonu zrobionego przeze mnie. Dlatego dzisiaj opiszę jak najszybciej i najprościej umieścić takie menu nad tytułem własnego bloga bez względu na to z jakiego szablonu się korzysta.

Instrukcja w wersji skrótowej:

1. Stworzony uprzednio kod menu dodajemy w polu na kod html (USTAWIENIA -> BOCZNA SZPALTA)

2. Przechodzimy do arkusza stylów (WYGLĄD -> EDYCJA CSS) i przy selektorze #BlogGlowyBox dopisujemy position:relative;

3. Na końcu arkusza dodajemy opis wyglądu i umiejscowienia naszego menu:

#menuTop {
position:absolute;
top:5px; /* odległość od górnej krawędzi */
left:20px; /* odległość od lewej krawędzi */
width:600px; /* szerokość elementu, ma być mniej pikseli niż szerokość bloga */
height:25px;
list-style-type:none; /* likwiduje wypunktowanie */
padding:0; /* likwiduje automatyczne dopełnienie wypunktowania */
margin:0; /* likwiduje przeglądarkowy margines wypunktowania */
}

#menuTop li {
display:inline; /* układa elementy listy obok siebie */
padding: 0 3px; /* odsuwa elementy od siebie w poziomie */
border-left: 1px solid grey; /* dodaje po lewej szare kreseczki rozdzielające elementy menu */
}

W powyższej instrukcji jest wszystko co konieczne i niezbędne. Jeżeli jednak potrzebujesz dokładniejszych instrukcji, zależy Ci na nieco innym wyglądzie albo coś w twojej zmianie poszło nie tak jak się spodziewałeś to zapraszam do przeczytania rozszerzonej wersji wyjaśnień. A na koniec fragmenty css z szablonów sportowych opisujące wygląd tamtejszych górnych menu, jednym słowem gotowce.

niedziela, 16 października 2011

DeBergerac kiedyś, bardzo dawno temu, stworzył rewelacyjne animowane samouczki dla początkujących. W większości gdy piszę o jakiejś zmianie któryś raz z kolei, zapominam, że ktoś może czytać ten właśnie wpis na blogu jako pierwszy, że nie wie zupełnie co mam na myśli pisząc przejdź do arkusza stylów, albo wklej kod w polu na kod HTML.

Dodatku

Wracając do tych animowanych samouczków to od dawna nie są już dostępne. DeBergerac napisał:

Żeby ułatwić osobom początkujacym instalowanie u siebie na blogu różnorakich gadżetów, z tych co je tu publikuję, tudzież (nie będę ukrywał) by raz na zawsze odpowiedzieć na wszelkie pytania typu "a co to znaczy wrzucić do zasobów" ;) postanowiłem zrobić animowane instrukcje tłumaczące jak takie bardziej zaawansowane czynności się wykonuje. W myśl przysłowia, że obraz jest wart tysiąca słów a film - miliona (dolarow zazwyczaj).

Ja filmu nie zrobię ale mam dla was Ilustrowany przewodnik po bloksie. Najdokładniej jak potrafię przedstawiam najbardziej oczywiste posunięcia. Zacznę od dodawania dodatków do bloga. Wielokrotnie pisałam o dodatkach, zarówno tych stworzonych przez inne osoby czy udostępnione przez różne serwisy. Nawet ostatnio pokazywałam przykładowy kod utworzony dla górnego menu. Teraz pokażę bardzo dosłownie jak odnaleźć część gdzie dodajemy dodatki w postaci kodu HTML.

W skrócie to oczywiście:

Edycja bloga -> USTAWIENIA -> BOCZNA SZPALTA -> Dodatki

zapraszam jednak do rozwinięcia.

poniedziałek, 03 października 2011

Aktualnie nie korzystam na moim blogu z szablonami z górnego poziomego menu. To chyba poważnie niedopatrzenie z mojej strony bo właśnie w takim menu najwygodniej umieścić linki do spraw generalnych jak informacje o blogu, kontakcie, księdze gości czy innych przydatnych rzeczach, które zawsze powinny być pod ręką choć bardzo rzadko się z nich korzysta.

W szablonach sportowych, które poprawiałam ostatnio, zrobiłam dodatkowe górne menu. Wykorzystałam w tym celu listę nieuporządkowaną, którą zamieniłam przy użyciu css w listę poziomą. Efekt jest łatwy do zobaczenia w każdym z tych sportowych szablonów a często, w związku z tym, że takie menu umieszczone jest w okolicach winiety tytułowej, stanowi ono istotny element wizualny szablonu.

górne poziome menu szablonów sportowych

Menu jest przydatne, w szablonach sportowych ma opisany estetyczny, dopasowany do reszty wygląd ale jak je dodać u siebie? Jak sprawić, że pojawi się na własnym blogu? Aby ułatwić wszystko stworzyłam stronę z szybką i prostą instrukcją, którą będę systematycznie uaktualniała. Tutaj natomiast nieco dokładniej, tak dla nawet bardzo zielonych opiszę jak dodać u siebie odpowiedni kod.

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