Szablon elastyczny papierowy, na starym kodzie, dla blogów na blox.pl. -550px- -auto-
piątek, 31 sierpnia 2012

Szablony zrobione przez kate_mac oferują szereg atrakcyjnych stylów służących do podkreślenia treści twoich notek. Ten przykładowy wpis prezentuje wygląd niektórych z dostępnych stylów, w tym tytuły, śródtytuły i inne sposoby wyróżnienie treści.

Blog z szablonami na blox.plNa początek kilka zwykłych akapitów. Przy pierwszym z nich umieszczona jest niewielka ilustracja pływająca do prawej krawędzi. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl.

Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula.

Co widzisz? Śródtytuł h3

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.


Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Znacznie mniejszy tytuł (h4)

Tytułowanie poszczególnych części wpisu ułatwia czytanie. Pozwala szybko zapoznać się z treścią wpisu i przekonać się, czy jest ona czytelnikowi przydatna. Innym sposobem jest wypunktowanie. W przypadku lekkich tekstów czytelnicy chętnie zaglądają na strony, które oferują dziesięć sposobów na... czy prezentują pięć typowych zastosowań czegośtam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.

  1. Maecenas at nisl. 
  2. Mauris elit. | code (kod)
  3. Donec neque. | cite (źródło cytowania)

Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper.

  • Ut a mi.
  • Etiam nulla. | em (emfaza)
  • Mauris interdum. | strong (wzmocnienie)

Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula.

Blockquote to blok cytatu

Istnieją specjalne znaczniki służące do zaznaczania tekstu o określonym znaczeniu. Inaczej formatujemy kod inaczej wzmocnienie tekstu a inaczej emfazę. Każda z tych rzeczy ma określony cel i nie jest nim tylko wygląd. Pisząc ręcznie, długopisem po papierze do wzmocnienia fragmentu tekstu użylibyśmy podkreślenia. Na ekranie i w formach drukowanych taką funkcję pełni zazwyczaj pogrubienie.

Cytaty można wprowadzać w notce na wiele sposobów. Przycisk z cudzysłowem w edytorze notki służy do dodawania bloku cytatu. Nie jest to tylko wcięcie tekstu a nawet wcale nie musi być to wcięcie tekstu. Ostateczny efekt widoczny będzie dopiero w opublikowanej notce. Najczęściej blok cytatu wyróżniony jest poprzez różnego rodzaju ramki, wcięcia całego bloku tekstu, kursywę czy nawet zmianę kroju pisma.

Normalne wcięcie to nic innego jak przesunięty marginesem cały blok akapitu.

Cytaty można też wprowadzać wewnątrz akapitów. Istnieje specjalny znacznik q, który mówi przeglądarce że to wyjątkowe zdanie w środku akapitu jest właśnie cytatem. It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. O tym jak wygląda taki cytat w akapicie decyduje szablon a jeżeli szablon nie opisuje akurat tego elementu to przeglądarka sama zadba o to aby wyglądał on tak jak się tego można spodziewać.

GRAFIKI

Od końca 2012 roku moje szablony wzbogacam o skalowanie ilustracji w notce. Wszystkie grafiki dostępne na blogu powinny samoistnie dostosowywać się do dostępnej szerokości notki. W żaden sposób nie będzie to ingerować w ich rzeczywisty rozmiar i ograniczać się powinno do automatycznego i proporcjonalnego skalowania ilustracji. Małe ilustracje w dalszym ciągu pozostaną małe. Jedynie te które normalnie wystawałyby poza obszar notki zostaną proporcjonalnie pomniejszone.

szablony Zwykły obrazek

szablony Obrazek z linkiem

Aby mały obrazek otoczony został tekstem wystarczy przy pisaniu notki po zaznaczeniu ilustracji (kliknij na obrazek) wybrać sposób wyrównania tekstu do prawej albo do lewej krawędzi. Od tej pory obrazek będzie pływał w wybraną stronę. Więcej informacji o edycji ustawień zdjęć w notkach czy innych rzeczy związanych z pisaniem wpisów znajdziesz na moim głównym blogu.

Grafika wielkości 1000×618px - zobacz jak pięknie się skaluje

1000x618

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula.

środa, 28 listopada 2007

Free Vector Glass Header Designs ? Fancy Szablon w poprzedniej wersji należał do serii Glossy. Owszem, był zielony ale bardzo drobny i o dość oczywistym i prostym układzie. Po zmianach szablon dalej ma bardzo prosty wygląd (choć zupełnie inny od poprzedniego) natomiast układ jest bardziej skomplikowany i zależny od dostępnej szerokości ekranu (od jednej do czterech kolumn).

12 szablon zielony przed zmianami

Klimat starego szablonu narzucony przez gradientowy top. Ten glossy look to jedna z cech stylu nazywanego Web 2.0 całkiem popularnego w 2008 kiedy ten szablon powstawał po raz pierwszy. Zrobiłam ich kilka, w różnych kolorach. Głównie korzystałam z nagłówków udostępnionych m.in. na stronie www.bittbox.com. Najbardziej podobał mi się zawsze ten beżowy ale nigdy nie dotarłam do momentu w którym zrobiłabym z nim szablon. Co do pozostałych to choć mi się podobały to jednak gdy dotarłam do etapu wstawiania ich do szablonu zawsze coś pozmieniałam. 

Zostawiłam jeden projekt tego typu choć również zmieniłam jego układ na bardziej elastyczny. Szablon 08 Glossy, czerwony posłużył mi jako przestrzeń do testowania różnych nowych rozwiązań: media queries, gradientów, cieni, zaokrąglonych narożników. Napisałam też dwie dość chaotyczne notki o tym jak zmieniam ten szablon. Nie tyle po to aby komukolwiek cokolwiek wyjaśniać ale jeżeli ktoś jest zainteresowany rozwiązaniami z tego szablonu to w notkach tych znajdzie kilka sugestii:

Poprzednio szablony z serii Glossy wyglądały tak:

8 czerwony przed zmianami 17 szablon granatowy przed zmianami 28 szablon fioletowy przed zmianami 22 szablon magentowy przed zmianami serdeczny 03 szablon przed zmianami

szablony_katemacLink do strony głównej z moimi szablonami szablonykatemac połączony z linkiem do innej strony z szablonami - szablon_team i jeszcze może odnośnik do strony stylekatemac.blox.pl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit.

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop

Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.

Na koniec link do przykładowej strony statycznej zobacz»

wtorek, 27 listopada 2007

Pangram - Mężny bądź, chroń pułk twój i sześć flag.

Jak będzie wyglądał wpis podzielony na wstęp i treść

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.


15:18, szablonykatemac , działanie szablonu
Link
 
1 , 2
Spis treści, przykład
Trzecia szpalta

Jest to pływająca trzecia szpalta. Możliwe jest, że powstanie bez ingerencji w kod HTML (jeżeli dodatki są elementami liniowymi i nie są większe niż szerokość tej kolumny). Aby pojawiła się na pewno należy całą potencjalną treść zaplanowanej trzeciej kolumny objąć znacznikiem div o identyfikatorze Trzecia i umieścić na początku pola na kod HTML.


Follow Me on Pinterest
Tytuł boksu - przykład

Do uporządkowania elementów w bocznej szpalcie używam dwóch klas: boks i tyt. Boks to klasa pojedynczego pudełka do którego pakuję przeróżną zawartość. Jeżeli potrzebuję zatytułować element to dodaję pudełko opisane klasą tyt, którą opisałam w szablonie na wzór innych etykiet. Przykładowy kod będzie wyglądał mniej więcej tak:

Jeżeli potrzebujesz dokładniejszych informacji zapraszam do przejrzenia notek na blogu szablonykatemac.blox.pl

Szczególnie przydatne w dodawaniu takiego boksu mogą okazać się te notki:

Skopiuj CSS