Szablon nagłówkowy, na starym kodzie, dla blogów na blox.pl. -500px- -540px-
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
niedziela, 13 maja 2012

O szablonie możesz poczytać sobie w notce: Glossy, osobliwie elastyczny trzyszpaltowiec. Jeżeli masz jakieś wątpliwości to tam możesz zadać swoje pytania. Tam znajdziesz też dodatkowe wyjaśnienia. Tutaj natomiast zostaw komentarz informujący mnie o pobraniu szablonu.

Warunki pobierania:

  • Pobieranie oraz użytkowanie szablonów jest bezpłatne.
  • Użytkownik zobowiązany jest do poinformowania o pobraniu szablonu komentarzem pod tym wpisem podając adres swojego bloga.
  • Nie zezwalam na usuwanie z kodu CSS informacji o autorze. Mile widziany jest link do strony szablonykatemac.blox.pl.
  • Szablon jest na licencji Creative Commons - uznanie autorstwa czyli możesz:
    1. kopiować i używać
    2. tworzyć i rozpowszechniać utwory zależne
    Na następujących warunkach:
    1. Uznanie autorstwa. Szablon należy oznaczyć w sposób przeze mnie określony.

skopiuj kod szablonuJeżeli podoba Ci się mój szablon i zgadzasz się powyższe warunki kliknij w znaczek „Ładny blox? Skopiuj mój CSS” i skopiuj na swój blog.

Miłego korzystania
szablonykatemac.blox.pl

piątek, 04 stycznia 2008

Free Vector Glass Header Designs ? Fancy Ten szablon zawsze był czerwony. I miał ten sam klimat 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ć zawsze mi się podobały to jednak gdy dotarłam do etapu wstawiania ich do szablonu zawsze coś pozmieniałam. 

Aby zrobić takie nagłówki z gradientem, rozjaśnieniem wewnętrznym, efektem glossy i ornamentami potrzebujesz programu graficznego. Te tutaj udostępnione są w kilku typach, między innymi w postaci wektorów które stosunkowo łatwo zmieniać bez żadnego uszczerbku na jakości ilustracji. W tym celu polecam darmowy program InkScape (z produktów Adobe do edycji grafik wektorowych używa się Ilustratora).

W 2012 roku zdecydowałam się zmienić szablony Glossy. Moda na Web 2.0 minęła, szablony przestały być popularne i przede wszystkim przestały mi się podobać więc zupełnie nie miałam ochoty grzebać w nich i wprowadzać poprawki i uaktualnienia. Dlatego też czerwony będzie jedynym szablonem, który pozostał z serii Glossy.

Aby uatrakcyjnić sobie ponowne prace nad nim zdecydowałam się wykorzystać kilka oryginalnych cech pochodzących z CSS3. Przede wszystkim nagłówek zrobiony jest przy użyciu cieni (box-shadow). Myślałam o zastosowaniu gradientów CSS ale zdaje się, że cień jest lepiej zaimplementowany w przeglądarkach a jego możliwości wystarczały mi. Drugą istotną i specjalną cechą jaką tu zastosowałam jest zmienna szerokość bloga w zależności od szerokości okna w którym blog się wyświetla. Początkowo miałam szerokość zostawić dość luźną, określając jedynie jej maksimum i minimum ale w ostateczności zdecydowałam się na określenie szerokości dla medium ekran o wielkości minimalnej i maksymalnej. Wybrałam cztery ekrany:

  • @media screen and (max-width:320px) - wąska szpalta w ogóle się nie wyświetla
  • @media screen and (min-width:768px)
  • @media screen and (min-width:1024px)
  • @media screen and (min-width:1280px)

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 12 szablon zielony przed zmianami 17 szablon granatowy przed zmianami 28 szablon fioletowy przed zmianami 22 szablon magentowy przed zmianami serdeczny 03 szablon przed zmianami

czwartek, 03 stycznia 2008

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

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»

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.


12:22, szablonykatemac , działanie szablonu
Link

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.

Z cytatem umieszczonym jako zwarty blok tekstu:

Amerigo Bonasera sat in New York Criminal Court Number 3 and waited for justice; vengeance on the men who had so cruelly hurt his daughter, who had tried to dishonor her.

The judge, a formidably heavy-featured man, rolled up the sleeves of his black robe as if to physically chastise the two young men standing before the bench. His face was cold with majestic contempt. But there was something false in all this that Amerigo Bonasera sensed but did not yet understand.

A także porównanie pomiędzy blokiem cytatu a zwykłym wcięciem tekstu:

“You acted like the worst kind of degenerates,” the judge said harshly. Yes, yes, thought Amerigo Bonasera. Animals. Animals. The two young men, glossy hair crew cut, scrubbed clean-cut faces composed into humble contrition, bowed their heads in submission.

The judge went on. “You acted like wild beasts in a jungle and you are fortunate you did not sexually molest that poor girl or I’d put you behind bars for twenty years.” The judge paused, his eyes beneath impressively thick brows flickered slyly toward the sallow-faced Amerigo Bonasera, then lowered to a stack of probation reports before him. He frowned and shrugged as if convinced against his own natural desire. He spoke again. 

Na koniec cytat wprowadzony w środku akapitu za pomocą znacznika q. 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. Nie można mówić „nie” ludziom, których się kocha, nie za często. To cały sekret. A poza tym, kiedy to mówisz, musi brzmieć jak „tak”. Albo trzeba ich samych skłonić do powiedzenia „nie”. Trzeba poświęcić na to sporo czasu i trudu. Ale ja jestem staroświecki, ty jesteś z nowego, dzisiejszego pokolenia, nie słuchaj mnie. 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.

 
1 , 2