O szablonach, ich projektowaniu i moich z tym zmaganiach...
niedziela, 28 października 2007

Wielu poszukiwaczy szablonów zastanawia się gdzie można znaleźć szablony podobne do szablonu np. Jana Turnau (kiedyś także był on u Bartosza Węglarczyka - Endgame). Szczególną uwagę szukających przyciąga cudzysłów którym zaczynane są notki. Odpowiedzi na to nie mam ale mam proste rozwiązanie. W szablonie tym obrazek umieszczony jest jako element tła treści notki czyli:

.BlogWpisTresc {
Padding-left: 70px;
BACKGROUND: url(/resource/nazwa_grafiki.gif) no-repeat;
}

Problem pojawi się gdy będziesz chciał inaczej zacząć wpis. W tym momencie wstawianie zdjęć na początku notki jest mało estetyczne. Dodatkowo grafika pojawi się tylko na początku wpisu.

Inne rozwiązanie zastosowano w bloxowym szablonie Connections. Korzystając niego możesz bez żadnego wysiłku ze swej strony używać w tekście ślicznego graficznego znaku cytatu. Wystarczy, że użyjesz przycisku „Zwiększ wcięcie” zwieksz_wciecie i tekst zostanie nieco odsunięty od krawędzi a pod nim pojawi się grafika ze znakiem cytatu.

Jak to jest zrobione?

W szablonie Connections wykorzystano właściwość blockquote, która opisuje tekst po przesunięciu.

blockquote {
margin: 15px 30px 15px 45px;
padding: 0 0 0 45px;
background: url(/themes/2themeD/images/blockquote.gif) no-repeat left top;
font-style:italic;}

W przypadku pozostałych trzech nowych bloxowych szablonów blockquote wygląda nieco inaczej:

  • Almost Spring – tekst jest przesunięty a po lewej pojawia się pionowa beżowa belka na całej długości wciętego tekstu;
  • Kubrick – tekst jest przesunięty a po lewej pojawia się pionowa szara belka na całej długości wciętego tekstu;
  • Rin – tekst jest przesunięty.

Dzięki wpisaniu grafiki w blockquote możemy w każdej chwili podjąć decyzję o tym czy chcemy alby taki element pojawił się w notce czy nie. Najczęściej blockquote używane jest w przypadku cytatu. Po zakończeniu cytowania należy nacisnąć przycisk „Zmniejsz wcięcie” zmniejsz_wciecie i od tej pory tekst będzie wyglądał normalnie.

Moje szablony

Najsześciej w przypadku własnych szablonów uzywam lewej ramki, bardo rzadko zdarzają się ramki do okoła całego elementu blockquote. Najciekawsze są jednak te z cudzysłowami:

pilka
b cytat  

 

Źródła i dodatkowe informacje:

 

sobota, 27 października 2007

Dzieląc notkę na wstęp i treść decydujesz się na wyświetlanie na stronie głównej jedynie fragmentu treści wpisu. Jest to bardzo wygodne rozwiązanie, szczególnie w odniesieniu do archiwalnych wpisów. Bardzo lubię takie rozwiązanie jeżeli wstęp napisany jest z sensem i skrótowo wyjaśnia co będzie w zawartości. Zamierzam zwiększyć liczbę wpisów na stronie głównej do maksymalnej (przez pięć lat było ich zawsze osiem) ale nie potrafię pisać skrótowo więc dwadzieścia pięć notek zajmie za wiele miejsca.

więcej link

Na razie nowe notki dodaję na stronę główną w całości a dopiero po pewnym czasie zmieniam na podzielone. Moje wstępy są w dalszym ciągu nieracjonalnie rozbudowane ale może kiedyś uda mi się zminimalizować je do rozmiarów jakie prezentują zajawki u Cebrity. Już kiedyś pisałam o dzieleniu wpisu na wstęp i treść, podałam subiektywny zestaw wad i zalet a także wyjaśniłam jak w łatwy sposób umieszczać we wstępie zdjęcia i linki.

Tematem dzisiejszej notki jest sam sposób oznaczenia i wyróżnienia wpisów, które są podzielone od tych, które nie są.

Jeżeli notka jest podzielona, wówczas na głównej stronie bloga pokazuje się tylko wstęp z linkiem do strony z pełną treścią notki.

Standardowo link wygląda mniej więcej tak: Więcej »

W zasadzie można zmienić niemal wszystko co z nim związane: treść, wygląd, miejsce wyświetlania... Wystarczy wiedzieć gdzie i czego szukać i jak to zmieniać.

 

Treść linku do dalszej części notki

To wcale nie musi być „Więcej »” (choć przyznać się muszę, że podoba mi się to słowo - tak zatytułowałam mojego prywatnego bloga)

Możliwości, sugestie i propozycje:

  • czytaj dalej »
  • Czytaj więcej »
  • Czytaj całość »
  • ZOBACZ WIĘCEJ
  • Przeczytaj resztę tego wpisu »
  • tu kliknij aby przeczytać resztę
  • to jeszcze nie koniec!!!
  • dalej…
  • więcej…
  • ciąg dalszy »

Link więcej » (Ilustrowany przewodnik po bloksie)

Ale jak to zmienić? Ta część akurat nie ma nic wspólnego z szablonem. Oczywiście można zastąpić tekst jakąś ilustracja i w tym pomoże szablon ale samą treść linka zmieniamy w innym miejscu. Mapa dla tych, którzy nie wiedzą gdzie szukać:

USTAWIENIA -> WPISY -> Treść linka dzielącego wstęp i treść:

Treść linka dzielącego wstęp i treść:  Jeśli pozostawisz powyższe pole niewypełnione, link do treści wpisu będzie brzmiał

Nie jestem pewna o co chodzi z tym wcześniejszym pytaniem - Podział wpisu na Wstęp / Treść: Tak/Nie. Nie robi to większej różnicy jeżeli chodzi o dodawanie wstępu (może w dziedzinie nie-dodawania jakąś robi). Wcale więc nie musisz zaznaczać tu Tak aby dodać sobie wstęp i podzielić notkę. 

Natomiast okienko niżej jest już ciekawsze. Tutaj właśnie wpisujesz sobie treść linku podziału. Jeżeli nic nie wpiszesz to będzie to Więcej ». Wpisać możesz natomiast co tylko chcesz.

Wygląd linku do dalszej części notki

Możliwości jest wiele. W miarę upływu czasu link więcej staje się coraz mniej niezbędny. Jeżeli wstęp ma ze dwa zdania to wyraźnie widoczne jest, że dalsza część notki znajduje się na osobnej stronie. W większości przypadków tytuł notki jest linkiem i chcąc przejść do jej treści w tytuł właśnie klikamy więc szczególne wyróżnienie linku więcej nie jest niezbędne.

Sam link jest natomiast o tyle konieczny, że gdy wstęp ma więcej niż dwa zdania przestaje być takie oczywiste czy to tylko wstęp czy cała treść i dlatego istotne jest dodanie informacji o dalszej treści, choć niekoniecznie bardzo wyróżnionej.

Sposobów na wyróżnienie jest wiele, począwszy od bardzo prostych jak pogrubienie tekstu a skończywszy na bardziej skomplikowanych jak naśladowanie wyglądu przycisków systemowych czy różne graficzne ozdobniki. Jeżeli chcesz zabrać się za edytowanie wyglądu linku więcej » odszukaj w arkuszu selektor nazywający się: .IPTwiecej. Pamiętaj, że klasa przypisana jest elementowi blokowemu (div) więc jeżeli chcesz zmienić kolor to musisz użyć kombinatora wskazującego na link: .IPTwiecej a.

Czerwony kolor i podkreślenie

Wygląd jest całkiem prosty. Pamiętaj aby kod wstawić zamiast tego, który jest w arkuszu.Samo dodanie go na końcu szablonu może nie zadziałać w pełni tak jak oczekiwałbyś. Jeżeli twoje liki są pogrubione albo podkreślone to możliwe, że trzeba będzie zneutralizować te cechy: text-decoration:none; font-weight:normal; Jeżeli to są cechy przypisane linkom to neutralizować je też trzeba przy selektorach linków.

.IPTwiecej {
 text-align:left;
 text-transform:capitalize;
 padding-top:2em;
}
.IPTwiecej a {
 color:#ea0000;
 border-bottom:1px solid #ea0000;
}
.IPTwiecej a:hover {
 border-bottom:1px solid #000;
}

Niebieski przycisk

W przypadku przycisku należy pamiętać, że sam element więcej jest blokowy a więc zajmuje całą szerokość a link w nim umieszczony jest zaś elementem liniowym czyli jest tak szeroki jak jego zawartość ale nie bardzo można zwiększyć jego wysokość. Dlatego przede wszystkim warto skorzystać z właściwości display:inline-block;, która łączy w sobie blokowy i śródliniowy sposób wyświetlania.

.IPTwiecej {
 margin-top:2em;
 text-align:left;
}
.IPTwiecej a {
 display:inline-block;
 padding:0.35em 0.65em;
 background:#41b7d8;
 border-radius:5px;
 border:1px solid #3aa4c2;
 color:#fff;
}

Strzałka, kursywa i podkreślenie

Strzałkę można dodać na dwa sposoby. Prostszy to wpisać ją w okienku, polecam bo jeżeli strzałka jest na początku to ostre nawiasy udające strzałkę na końcu są niepotrzebne.

→ Kontynuuj czytanie...

Drugi sposób to skorzystanie z możliwości dodanie treści poprzesz arkusz. Nie jest to prawdziwa treść, ona tylko tak wygląda.

.IPTwiecej:before {
 content:'\002192 ';
 color:#000;
}


Reszta opisu jest już niezależna od treści. Dodaj strzałkę w ten czy inny sposób a wygląd opisz w arkuszu stylów. Link jest czarny a po najechaniu zmienia kolor na pomarańczowy.

.IPTwiecej {
 text-align:left;
 margin:0.7em 0;
 padding:1.4em 0;
 border-bottom:1px solid #000;
}
.IPTwiecej a {
 text-decoration:underline;
 font-style:italic;
 color:#000;
}
.IPTwiecej a:hover {
 color:#d63c00;
}

Magentowy, pogrubiony tekst i kropkowane podkreślenie

Pogrubiony tekst ze ściśniętymi literami to nie zawsze jest najlepszy pomysł. Pogrubienie fajnie podkreśla dwuelementowość kroju więc więc polecam w przypadki czcionek szeryfowych. Mam wrażenie, że taka gruba strzałka powinna być gdzieś dostępna ale jeżeli tak jest to nie potrafię jej znaleźć. W takiej sytuacji najlepiej skorzystać z właściwości tła i brakujące elementy dodać w ten właśnie sposób. Do tego przykładu potrzebna jest magentowa strzałka więc zanim skorzystasz z kodu dodają ją do zasobów bloga.

magentowa strzałka.IPTwiecej a {
 display:inline-block;
 padding:2px 15px 2px 0;
 background:url(/resource/more_magenta_arrow.png) no-repeat right center;
 border-bottom:1px dotted #ff0054;
 color:#ff0054;
 font-size:1.4em;
 font-weight:bold;
 text-decoration:none;
 letter-spacing:-.1em;
}
.IPTwiecej a:hover {
 color:#a20035;
 border-bottom:1px solid #a20035;
}

Duże litery i długa strzałka

Jedno z moich ulubionych rozwiązań ostatnio. Prosty pomysł będący jednocześnie zakończeniem notki jak i wskazaniem na rozwinięcie wpisu. Pomysł łatwy do realizacji, wystarczy przygotować grafikę z odpowiednio długą strzałką. Tym razem przykład pochodzi z bloga craftowego więc strzałkę zrobiła dokładnie na wzór tamtejszej, imitując jednocześnie niedoskonałość ręcznej roboty. Moim zdaniem ta strzałka ma być elegantszą i bardziej stylową wersją strzałki którą narysowaliście w paincie gdy pierwszy raz odpaliliście komputer.

Ja przygotowałam bardzo długą strzałkę bo nie wiem w jakim szablonie będzie wykorzystana. Trzeba by ją sobie odpowiednio przyciąć tak aby kreseczka strzałki nie pojawiała się pod tekstem. Można to oczywiście całkiem łatwo obejść ale w takim przypadku tylko teksy będzie linkiem a strzałka nie. Dlatego polecam strzałkę przyciąć i skorzystać z drugiego rozwiązania. To pierwsze, poniżej, nie wymaga żadnego przycinania, wystarczy grafikę dodać do zasobów a kod wkleić w arkuszu na miejsce div.IPTwiecej.

strzałka długa szara.IPTwiecej {
 margin-top:2em;
 background:#fff url(/resource/more_grey_arrow.gif) right center;
 text-align:left;
 text-transform:uppercase;
}
.IPTwiecej a {
 display:inline-block;
 height:18px;
 padding:0 10px 0 0;
 background:#fff;
 color:#2d211c;
 font-size:17px;
}
.IPTwiecej a:hover {
 color:#d34e53;
}

Ja przygotowałam bardzo długą strzałkę bo nie wiem w jakim szablonie będzie wykorzystana. Dlatego trzeba ją sobie odpowiednio przyciąć tak aby kreseczka strzałki zaczynała się jakieś 10 pikseli za napisem. Napis powinien być własny bo końcowe » niespecjalnie pasuje do strzałki.

strzałka długa szara.IPTwiecej {
  margin-top:2em;
 text-align:left;
 text-transform:uppercase;
}
.IPTwiecej a {
 display:block;
 width:100%;
 height:18px;
 background:#fff url(/resource/more_grey_arrow.gif) no-repeat right center;
 color: #2d211c;
 font-size: 17px;
}
.IPTwiecej a:hover {
 color:#d34e53;
}

Brązowy tekst na papierowym pasku z kropkowaną strzałką

Bez problemu można papierowy pasek umieścić jako tło pod całym elementem informacji pod notką ale w typowym ułożeniu jest to jednak dość wysoki element i umieszczenie papierowego tła pod całym elementem nie zawsze będzie pasować więc najlepiej zaprojektować to indywidualnie. Dlatego chociaż w przykładzie pasek obejmuje cały element informacyjny to ja podaję kod dla mniejszego rozwiązania.

Odcień papieru najlepiej dopasować sobie do szablonu. Ja przygotowałam neutralny beżowy z oderwanym fragmentem. Kropkowaną strzałkę umieściłam w osobnym pliku aby można było zastąpić tło a strzałkę zostawić.

tłoarrow.IPTwiecej {
 float:right;
 width:177px;
 height:25px;
 padding:12px 10px 12px 0;
 background:url(/resource/more_bg.png) no-repeat right center;
 text-transform:capitalize;
 font-size:1.6em;
}
.IPTwiecej a {
 display:inline-block;
 width:142px;
 height:25px;
 padding:0 35px 0 0;
 background:url(/resource/more_dot_arrow.png) no-repeat 145px center;
 color:#8c3b3a;
 text-align:right;
 text-shadow:1px 0 0 #f4e7d4;
}
.IPTwiecej a:hover {
 background-position:147px center;
 color:#b85b5a;
 text-shadow:1px 0 1px #f4e7d4;
}

Przygotowałam też papierek w kratkę. Zanim dodasz do zasobów bloga albo zmień nazwę pliku z papierkiem w kratkę, albo jego adres w powyższym kodzie (more_bg.png).


Polecane wpisy na podobne tematy:

piątek, 26 października 2007

Nadeszła wreszcie ta chwila – pierwszy szablon by kate_mac. Dotyczy piłki więc zapraszam do gry. Początkowo w tej notce były trzy szablony, jeden niemal od razu skasowałam, dwa następne wielokrotnie poprawiałam (łącznie ze zmianą adresu). Został tutaj ten popularniejszy, zielony piłkarski. Ten który ja preferuję przeniosłam w 2011 do nowej notki.


3 szablon piłkarski

Szablon sportowy 03 - piłkarski zielony,
na starym kodzie, dla blogów na blox.pl. -500px- 


Ewentualne uwagi krytyczne mile widziane. W szablonach chodzi przede wszystkim o to żeby dobrze służyły użytkownikom. Drodzy użytkownicy, jeżeli macie jakieś propozycje zmian to obiecuję, że wezmę je pod uwagę.

sobota, 20 października 2007

Poprzednio opisywałam poszczególne elementy wąskiej szpalty. Starałam się je opisać w miarę dokładnie ale w przypadku zakładek ograniczyłam się tylko do wskazania miejsca gdzie się je dodaje. Podobnie we wpisie, w którym opisywałam do czego mogą służyć różne elementy o zakładkach napisałam tylko, że ich zastosowanie jest nie do przecenienia. Dzisiaj zajmę się nieco dokładniejszym opisem tego elementu i możliwości jego wykorzystania.

zakładki szablonykatemac

Jak dodać w zakładkach ilustracje albo link kontaktowy, jak je szeregować bez konieczności wykorzystania cyfr, jak sprawić aby zakładki pojawiły się także na stronie z pojedynczym wpisem i w końcu jak je zwinąć aby nie zajmowały tyle miejsca? Na te i kilka innych pytań odpowiedzi są w rozwinięciu notki. Zapraszam.

A tych co nie lubią mojego gadulstwa odsyłam do BloxWiki: zarządzanie linkami.

piątek, 19 października 2007

Standardowo blox oferuje w wąskiej szpalcie umieszczenie informacji w pięciu grupach.*

  • odnośniki do archiwum w formie kalendarza bądź listy miesięcy
  • odnośnik do informacji o autorze/autorach strony prowadzący do bloksowego profilu
  • wykaz dziesięciu najnowszych notek
  • dowolnie skomponowane przez użytkownika bloga zakładki
  • chmurka tagów (słów-kluczy opisujących notki).

Użyteczność i przydatność poszczególnych elementów może być różna. Ogólnie rzecz ujmując wszystkie mogą służyć do nawigacji po blogu a zakładki dodatkowo mogą pełnić rolę reklamową.

Pod wąską szpaltą, dalej w bocznej kolumnie wyświetlają się jeszcze inne elementy: dodatki, wyszukiwarka, opcje bloksa, kopiowanie css.

zawartość bocznej szpalty - ustawienia

Dzisiejsza notka dotyczy tylko elementów związanych z edycją bloga. Jak trafić do miejsca w którym archiwum można zmienić na kalendarz, gdzie ustala się liczbę wyświetlanych w chmurce tagów, skąd się wzięły Ostatnie komentarze i jeszcze kilka równie przydatnych informacji.

niedziela, 14 października 2007

Dziś nic w temacie CSS nie będzie. Od wczoraj na stronie króluje nowy szablon. Zachęcam do komentowania go. W zasadzie jest skończony ale nie wykluczam drobnych poprawek.

Uwagi ogólne:

  • szablon wykonany na podstawie CSS szablonu Connections
  • kategorie podejrzałam w CSS szablonowni i starałam się osiągnąć podobny efekt (nie całkiem mi się to udało ale na początek wystarczy)
  • poszerzyłam wąską szpaltę przez co automatycznie musiałam poszerzyć całość bloga teraz wymiary wyglądają tak:
    • #BlogBodyBox {width:834px;}
    • #BlogWazkaSzpalta {width:260px;}
  • aby tytuły notek stały się odnośnikami do strony z komentarzami wykorzystałam jeden ze skryptów z testblog

I to w zasadzie tyle

piątek, 12 października 2007

Dzisiaj trochę ogólniej o wąskiej szpalcie. Co tam możemy znaleźć, co dodatkowo możemy umieścić a czego możemy się pozbyć.

W wąskiej szpalcie najwyżej jest archiwum (w formie listy miesięcy lub kalendarza), potem ostatnie notki i najniżej zakładki. Taki jest układ i zasadniczo jeżeli chcesz dokonać jakiś większych zmian to możesz mieć spory problem. Zmiana kolejności wyświetlania elementów jest możliwa ale równocześnie jest to zadanie dość skomplikowane i nie ma tutaj prostej rady jak np. sprawić by archiwum wyświetlało się na samym dole wąskiej szpalty albo co zrobić aby kategorie z szerokiej szpalty wyświetlały się w wąskiej. Zapewnetak zasadniczych zmian należałoby dokonać jakimś sprytnym skryptem.

Istnieje natomiast możliwość drobnych zmian. W zasadzie ograniczona do decyzji o niewyświetlaniu pewnych elementów.

Co możemy ukryć?

Generalnie wszystko, począwszy od całej wąskiej szpalty. Tego rozwiązania bym jednak nie polecała. Bardzo często jest tak, że nie chcemy aby wyświetlało nam się archiwum. Z różnych powodów (najczęściej wtedy gdy archiwum zbyt się „rozrośnie”). Nie chcemy też by występowało postaci kalendarza. Usunąć go nie można ale można sprawić by się nie wyświetlało. Można też przekształcić je w ZWIJANE ARCHIWUM.

WARTOŚĆ: display, WŁAŚCIWOŚĆ: none

  • Wąska Szpalta
    #BlogWazkaSzpalta {display: none;}
  • Kalendarz
    #BlogKalendarzBox {display: none;}
  • Archiwum
    #BlogArchiwumBox {display: none;}
  • Napis Zakładki
    #ZakladkiTytul {display: none;}

Jak zrobić ZWIJANE ARCHIWUM bądź ZWIJANE ZAKŁADKI tłumaczą m.in. s.z.y.m.o.n czy sgk/eskey. (Kiedyś zapewne popróbuję ale na razie jestem zupełnie nie w temacie.)

piątek, 05 października 2007

Czasami zdarza się, że pobrany szablon nie wygląda tak jak powinien. Powodem tych nieścisłości z reguły jest niewłaściwy html. Na Blox.pl wygląd swojego bloga opisujesz korzystając z CSS co nie zmienia faktu, że posiada on również html, który decyduje o tym co będziesz opisywać w CSS. O ile rozwiązaniem problemu za złym skopiowaniem się szablonu jest najczęściej ponowne kliknięcie w znaczek Ładny Blox? Skopiuj mój CSS o tyle warto wiedzieć z czym związany jest taki błąd. Taka wiedza przyda się gdy samemu zechcesz pozmieniać coś w wyglądzie swojego bloga.

wybierz szablon

Bloksowe szablony dzielą się na te na starym kodzie i te na nowym (new_age). W ramach jednego rodzaju kodu szablony będą jakoś wyglądały bez względu na to na jakiej wersji kodu zostają nałożone. Próba nałożenia szablonu napisanego dla nowego kodu na stary skończy się jednak wyglądem bliskim przeglądarkowego. Tym razem zależność HTML-CSS porównam do ciała i ubrań. HTML to ciało a CSS ubranie, szablonem można coś tam poprawić ale podstawowy kształt nadaje HTML (kształt niekoniecznie w znaczeniu układu bo nowy kod nie decyduje o układzie w takim samym stopniu jak stary ale wracając do porównania do ciała to czy są ręce i nogi to już sprawa HTML). Przy czym nowy i stary kod to zupełnie różne dwa typy ciał, jak słoń i żyrafa albo wąż i wiewiórka.

Na tym blogu zajmuję się głównie starym kodem i wszelkie opisy zmian dotyczą właśnie jego więc i ta notka zawierać będzie tylko podział starych szablonów podstawowych. Po informacje o nowym kodzie zapraszam na stylowy blog.

Jeżeli zaś nie masz ochoty zagłębiać się w tą notkę i wystarczy ci tabelka podsumowująca to i taką sporządziłam.

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