style kate mac

Blog o stylowaniu bloksowych szablonów, tych na nowym kodzie. Szablony udostępnione bez ograniczeń i za darmo, porady, instrukcje i trochę lania wody z innej beczki. Zapraszam.

Wpisy

  • środa, 20 marca 2013
    • Biurkowy 17, zielony

      Jak pisałam poprzednio zielony jest trudnym dla mnie kolorem, nie potrafię znaleźć takich odcieni zielonego które zachwycałby mnie na różni z odcieniami czerwieni. Elegancka, spokojna ciemna zieleń wydaje mi się zazwyczaj ponura, jasna trawiasta zdaje się być za mało kontrastowa w stosunku do jasnego tła. Dlatego najczęściej używam oliwkowych odcieni zielonego: spokojnych i szarawych dla szablonów klasycznych i jaskrawych, wręcz toksycznych dla szablonów z ciemnym tłem.


      17 biurkowy, zielony

      17 szablon biurkowy, zielony,
      na nowym kodzie, dla blogów na blox.pl. -540px- (-auto-)


      Ten szablon biurkowy jest zupełnie inny od poprzedniego: deskowane tło i papierowe fragmenty pozostały ale sam szablon jest jakby bardziej chłopakowaty: ciemne tło, jaskrawa zieleń i szarawy papier, bardzo wyraźny podział na dwie kolumny i rozdzielacz pomiędzy wpisami udający kółka z segregatora.

       

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

      fragmenty szablon 17 biurkowy

      Uwagi o szablonie
      szerokość szablonu 890px
      szerokość głównej szpalty 580px
      szerokość bocznej szpalty 220px
      kolor tła białe (#fff)
      kolor tekstu ciemny (#333)
      kolor linków zielony (#928601)
      pozostałe kolory zielony (#a89b01)
      krój użyty w notce PT Sans (Corbel, Arial), dla etykiet Kaushan Script (GoogleWebFonts)
      wielkość tekstu notki wartość względna: medium (ok. 16px)
      interlinia w notce auto
      maksymalna wielość elementów graficznych w notce 540px (przy większych ilustracje będą się skalowały automatycznie)
      css-owe ramki przy grafikach cień
       box-shadow:0 0 3px #8b7a6a;
      wypunktowanie/numerowanie automatyczne
      pogrubienie/kursywa automatyczne
      blok cytatu (blockquote) specjalny krój (Kaushan Script)
      nagłówki w notce (h1, h2, h3, h4, h5, h6) specjalny krój (Kaushan Script)
      wyróżnienie akapitów automatyczne
      baza bloksowa nowy kod: new_template7nowy kod, szablon new_template7
      skrypty użytkowników, wklejki Ostatnie komentarze,

      dodatkowe klasy i identyfikatory

      #menu-top - górne menu (długość 560px)

      .kont - kontener z treścią w bocznej szpalcie
      h2 - etykieta tytułowa boksów w bocznej szpalcie

      #menu-ikon - obrazkowe menu z linkami do różnych serwisów

      Szablon jest całkiem spory ale ma tylko dwie kolumny. Pozostałe piksele zostały wykorzystane na odstępy pomiędzy elementami - gdy poszczególne elementy mają inne tło potrzebne jest znacznie więcej odstępu niż w sytuacji gdy tło jest jednolite. Poszczególne elementy tła zawsze można usunąć bądź zastąpić czymś innym należy tylko pamiętać, że czasami tła są ze sobą powiązane. Przykładowo w tym szablonie tło w wąskiej kolumnie jest całkiem proste i łatwe do zastąpienia ale należy pamiętać też o fragmentach podartych na początku i końcu tej szpalty.

      Dodatkowo specyficzną ozdobą szablonu jest font. Tym razem jest to również jeden z GoogleWebFonts, oryginalny pisankowy krój Kaushan Script, który nieoczekiwanie dodał trochę ninja stylu szablonowi.

      opcja: wymiana tła (tego dookoła bloga)

      Jeżeli tylko istnieje jakie graficzne tło dookoła, choćby sam kolor, to zawsze można coś z nim zrobić. Czasami nie jest to idealnie proste bo tło bloga w jakiś sposób powiązane jest z tłem dookoła bloga ale zawsze się da.

      Sposoby wymiany jakiejkolwiek grafiki są zawsze tylko dwa:

      1. możesz ustalić dokładną nazwę plików graficznych służących za tła (zerknij do zasobów bloga i odszukaj pliki szablonu) i poprzez nadpisanie zastąpić go własnym
      2. albo zerknij do arkusza CSS i odszukaj miejsce opisania wyglądu tła dla body i przy background podaj adres URL nowych plików

      Aby było jeszcze łatwiej przygotowałam alternatywne grafiki do tła. Wybrałam kilka wzorków o różnym charakterze możesz też oczywiście dodać własne ale pamiętaj, że powinny być raczej ciemne i w miarę jednolite bo na ich tle wyświetla się zarówno tytuł bloga jak i jego opis a oba są jasne.

      alternatywne topy dla szablonu na blox.pl

       


      Zmiana stronności szablonu jest nieco trudniejszą sprawą bo wizualnie częścią wąskiej kolumny jest także tytuł więc i przy tym elemencie należałoby dokonać zmian. W związku z tym, że umieszczenie tytułu bloga po prawej stronie jest mało popularne nie polecam takiego rozwiązania (oczywiście w określonej sytuacji i taki układ się sprawdzi ale to już indywidualna sprawa). Zmieniając więc stronność należałoby tytuł bloga umieścić nad szeroką szpaltą a to oznacza kolejne zmiany.

      Może kiedyś je opiszę ale to raczej mało prawdopodobne.


      Biurkowy może też być szablonem jednokolumnowym ale to wymaga jeszcze więcej zmian choć tym razem nieco łatwiej to wyjaśnić: musisz poszerzyć obie szpalty i nagłówek.

      Najbardziej problematyczna jak zwykle okaże się  treść poboczna. Należałoby nieco pokombinować i poukładać elementy jeden obok drugiego więc i tutaj modyfikacji jest sporo i jest równie mało prawdopodobne, że je kiedyś opiszę.


      Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

      Szczegóły wpisu

      Komentarze:
      (0)
      Tagi:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      środa, 20 marca 2013 19:06
  • wtorek, 05 marca 2013
    • Biurkowy 16, czerwony

      Lubię czerwony kolor, łatwo mi się go używa. Jest wiele bardzo różnych odcieni, od gorąco-ognistych po te elegantsze, chłodniejsze a mimo to zawsze wydaje mi się, że znalazłam ten właściwy, zachwycający kolor czerwony. W przypadku barw cyjanowo-niebieskich czy odcieni zielonego nie mam takiej pewności. Niebieski jeszcze czasem wybieram dobrze (o czym przekonać się będzie można w następnym-następnym wpisie) ale cyjanowy czy zielony to coś co zawsze sprawia mi duży problem.


      16 biurkowy, czerwony

      16 szablon biurkowy, czerwony,
      na nowym kodzie, dla blogów na blox.pl. -540px- (-auto-)


      Jestem zachwycona tym szablonem. Byłam zaraz po stworzeniu go i teraz kilka miesięcy później dalej jestem. Nie jest doskonały, daleko mu do tego ale to nie zmienia faktu, że lubię ten szablon, że podoba mi się w nim wiele rzeczy i że z przyjemnością od kilku miesięcy sama z niego korzystam. Jasne, ma swoje wady ale co z tego...

       

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

      fragmenty szablon 16 biurkowy

      Uwagi o szablonie
      szerokość szablonu 890px (730px)
      szerokość głównej szpalty 540px
      szerokość bocznej szpalty 180px
      kolor tła białe (#fff)
      kolor tekstu ciemny (#333)
      kolor linków czerwony (#e31a22)
      pozostałe kolory beżowy (#8b7a6a)
      krój użyty w notce PT Sans (Corbel, Arial), dla etykiet Shadows Into Light Two (GoogleWebFonts)
      wielkość tekstu notki wartość względna: medium (ok. 16px)
      interlinia w notce auto
      maksymalna wielość elementów graficznych w notce 540px (przy większych ilustracje będą się skalowały automatycznie)
      css-owe ramki przy grafikach cień
       box-shadow:0 0 3px #8b7a6a;
      wypunktowanie/numerowanie automatyczne
      pogrubienie/kursywa automatyczne
      blok cytatu (blockquote) specjalny krój (Shadows Into Light Two)
      nagłówki w notce (h1, h2, h3, h4, h5, h6) specjalny krój (Shadows Into Light Two), automatyczny rozmiar
      wyróżnienie akapitów automatyczne
      baza bloksowa nowy kod: new_template7nowy kod, szablon new_template7
      skrypty użytkowników, wklejki Ostatnie komentarze,

      dodatkowe klasy i identyfikatory

      #menu-top - górne menu (długość 740px)

      .kont - kontener z treścią w bocznej szpalcie
      h2 - etykieta tytułowa boksów w bocznej szpalcie

      #menu-ikon - obrazkowe menu z linkami do różnych serwisów

      Szablon nie jest duży i do tego ma dość prosty wygląd. Cały jego urok opiera się na ładnym drewnianym tle (które łatwo można wymienić na coś innego), wyrazistym, czerwonym kolorze linków i oryginalnym pisankowym kroju (Shadows Into Light Two).

      opcja: wymiana tła (tego dookoła bloga)

      Jeżeli tylko istnieje jakie graficzne tło dookoła, choćby sam kolor, to zawsze można coś z nim zrobić. Czasami nie jest to idealnie proste bo tło bloga w jakiś sposób powiązane jest z tłem dookoła bloga ale zawsze się ta.

      Ten nieidealnie prosty przypadek ma miejsce w odniesieniu do tego szablonu. Chociaż początkowo dziurki w kartce rzeczywiście zostawiłam puste i tło prześwitywało przez nie to okazało się to trochę irytującym rozwiązaniem gdy przeglądarka po aktualizacji zaczęła nieco inaczej wczytywać tło (nie wiem na czym polega różnica ale po zmianach tło stało się nieco kłopotliwym elementem). Z tego też powodu zmieniłam tło bloga wypełniając otworki wzorkiem. Teraz zmieniając tło dookoła trzeba zmienić też to kartkowe białe tło.

      Sposoby wymiany jakiejkolwiek grafiki są tylko dwa:

      1. możesz ustalić dokładną nazwę plików graficznych służących za tła (zerknij do zasobów bloga i odszukaj pliki szablonu) i poprzez nadpisanie zastąpić go własnym
      2. albo zerknij do arkusza CSS i odszukaj miejsce opisania wyglądu tła dla body i dla treści bloga (tutaj jest to identyfikator #wrapper) i przy background podaj adres URL nowych plików

      Aby było jeszcze łatwiej przygotowałam alternatywne grafiki do tła. Udostępniłam też kartkowe tło bez wypełnionego otworku tak więc możesz zmontować własny zestaw wzorków do tła.

      Wybrałam kilka wzorków o różnym charakterze, jednak w zasadzie w tym szablonie każdy będzie pasował.

      alternatywne topy dla szablonu na blox.pl

       


      wizualizacjaMożna też bardzo łatwo zmienić stronność szablonu. Jak umieścić wąską szpaltę po lewej pisałam w przypadku szablonów subtelnych. Zasada jest bardzo prosta: przy elementach #tresc-glowna i #tresc-poboczna float:left; zmieniamy na float right; a float right; na float:left; i z grubsza gotowe.

      Nie podoba mi się  jednak taki szablon, wydaje się być nieporęczny i dlatego nie przygotowałam wersji gotowej do użycia. Zapewniam jednak, że tylko te dwie drobne zmiany wystarczą aby zmienić stronność tego szablonu. W żadnym razie jednak nie polecam takiego rozwiązania tutaj.


      wizualizacjaBiurkowy może też być szablonem jednokolumnowym i taki się sprawdzi lepiej niż lewostronny. W najprostszym ujęciu wystarczy poszerzyć szpalty główną i poboczną do niemal pełnej szerokości. Zmiana jest do pewnego stopnia podobna jak w przypadku szablonów subtelnych więc samodzielnym może wystarczyć instrukcja z subtelnego.

      Najbardziej problematyczna może okazać się właśnie ta treść poboczna. Można ją zostawić tak jak jest czyli jeden element pod drugim na całej szerokości. Można też nieco pokombinować i poukładać elementy jeden obok drugiego (.boks { display:inline-block; width:180px; })

      Na przykładzie szablonów subtelnych opisywałam jak poustawiać sobie elementy treści pobocznych (ukryć archiwum, przenieść szukacza, poszerzyć tagi, zakładki albo miejsce na dodatki) i ta instrukcja jest jak najbardziej aktualna. Jeżeli jednak potrzebujesz gotowca to musisz poczekać na którąś-z-kolei aktualizację tego szablonu. Zmiana jest prosta więc póki co nie chce mi się po raz kolejny tłumaczyć tego samego.


      Na koniec podsumowanie z najbardziej przydatnymi dla tego szablonu linkami:

      Szczegóły wpisu

      Komentarze:
      (5) Pokaż komentarze do wpisu „Biurkowy 16, czerwony”
      Tagi:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      wtorek, 05 marca 2013 15:46
  • poniedziałek, 25 lutego 2013
  • wtorek, 27 listopada 2012
  • wtorek, 20 listopada 2012
  • środa, 14 listopada 2012
    • Alfabet

      Alfabet to zestaw liter i innych, uzupełniających znaków pisma, używany dla danego języka lub narodu, ułożony w tradycyjnym, ustalonym porządku. Współczesny alfabet łaciński składa się z 52 wielkich i małych liter, 10 cyfr oraz różnorodnych symboli, znaków interpunkcyjnych i akcentów, stosowanych przez różne języki.

      Łaciński

      ! " # $ % & ' ( ) * + , - / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~

      Łaciński rozszerzony A

      Ā ā Ă ă Ą ą Ć ć Ĉ ĉ Ċ ċ Č č Ď ď Đ đ Ē ē Ĕ ĕ Ė ė Ę ę Ě ě Ĝ ĝ Ğ ğ Ġ ġ Ģ ģ Ĥ ĥ Ħ ħ Ĩ ĩ Ī ī Ĭ ĭ Į į İ ı IJ ij Ĵ ĵ Ķ ķ ĸ Ĺ ĺ Ļ ļ Ľ ľ Ŀ ŀ Ł ł Ń ń Ņ ņ Ň ň ʼn Ŋ ŋ Ō ō Ŏ ŏ Ő ő Œ œ Ŕ ŕ Ŗ ŗ Ř ř Ś ś Ŝ ŝ Ş ş Š š Ţ ţ Ť ť Ŧ ŧ Ũ ũ Ū ū Ŭ ŭ Ů ů Ű ű Ų ų Ŵ ŵ Ŷ ŷ Ÿ Ź ź Ż ż Ž ž ſ

      Alfabety nie są takie same.

      Chociaż większość europejskich alfabetów opartych jest na łacinie, to nie są one jednakowe, ponieważ niektóre maja więcej liter niż pozostałe. Alfabet polski różni się od alfabetu niemieckiego, gdyż (zasadniczo) nie używa liter v i q, oraz wcale nie używa liter ä, ö i ß, a za to używa liter ą, ł i ź, których nie używa alfabet niemiecki. Angielski ma zasadniczo 26 liter co oznacza że nie różni się od poklasycznego alfabetu łacińskiego. Tradycyjny hiszpański ma 30 liter wraz z dodatkowymi ñ, ch, ll, rr (obecne słowniki traktują ch, ll i rr jako dwuznaki, a nie jako oddzielne litery). We współczesnym alfabecie włoskim brak takich liter jak j, k, w, x, y.


      Alfabet polski (abecadło) oparty jest na alfabecie łacińskim i składa się obecnie z 32 liter:

      Aa Ąą Bb Cc Ćć Dd Ee Ęę Ff Gg Hh Ii Jj Kk Ll Łł Mm Nn Ńń Oo Óó Pp Rr Ss Śś Tt Uu Ww Yy Zz Źź Żż

      Dlaczego to takie ważne

      Wybierając font dla swojej strony pamiętaj aby sprawdzić czy ma on zaprojektowane wszystkie polskie litery. Niewiele jest rzeczy gorszych czy bardziej rozpraszających przy czytaniu niż krzaczący się tekst. Wszelkie ą, ę a nawet ź czy ń muszą być poprawnie opisane. Nawet jeżeli brakuje tylko jednej literki (i zastąpiona jest ona zwykłym Timesem) nie wybieraj takiego kroju. Brak tej jednej litery zawsze będzie rzucał się w oczy w pierwszej kolejności.

      abcdefghijklłmnoprstuwyz

      Szczegóły wpisu

      Komentarze:
      (0)
      Tagi:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      środa, 14 listopada 2012 15:28
  • środa, 07 listopada 2012
    • Advent font autorstwa Andreas Kalpakides

      adventKrój pisma w znacznym stopniu tworzy klimat strony. Oczywiście podstawowym zadaniem pisma jest komunikowanie treści więc wybierając krój tekstu czytelność jest pierwszą rzeczą na jaką należy zwrócić uwagę. Istotny jest także własny charakter kroju - warto aby nie był sprzeczny z komunikatem, który chcemy zapisać. Użycie adventu w bardzo formalnym, tradycyjnym liście będzie mylące i śmieszne. Najważniejszy jest komunikat.

      Krój advent ma bardzo charakterystyczny i łatwy do rozpoznania wygląd. Jest prosty i całkiem nowoczesny ale to wcale nie znaczy, że nadaje się do dużych bloków tekstu. Polecam do wszelkiego rodzaju nagłówków i etykiet na blogach związanych z bardzo szeroko pojętą rozrywką (to zdecydowanie nie jest urzędowy czy historyzujący krój).

      Autor kroju: Andreas Kalpakides

      License: Free for non-commercial use.
      Commercial usage: wymaga pisemnej zgody autora (written approval by the author Andreas Kalpakidis)

      Advent Font by INDE


      advent font candyMoja miłość do kroju advent trwa od lat. Zaczęłam używać go w 2008 roku gdy małe p wyglądało jeszcze nieco inaczej. Polecam go każdemu choć użyłam tylko w jednym niekomercyjnym projekcie. Jest bardzo charakterystyczny i nie wszędzie pasuje ale to także jego zaleta - w końcu to nie jest krój do dużych bloków tekstu. Bardzo podoba mi się, że w zestawie dołączone są wersje Light bo swego czasu zachwycałam się cienkimi kreseczkami. Szkoda, że nie ma ładnej kursywy, co najwyżej wersja pochyła, która nigdy mnie nie satysfakcjonuje w pełni.

       

      Szczegóły wpisu

      Komentarze:
      (0)
      Tagi:
      Kategoria:
      Autor(ka):
      kate_mac
      Czas publikacji:
      środa, 07 listopada 2012 09:15
  • wtorek, 30 października 2012

Wyszukiwarka

Zakładki

Kanał informacyjny

Opcje Bloxa