O szablonach, ich projektowaniu i moich z tym zmaganiach...
wtorek, 12 marca 2013

Jeden z pierwszych moich szablonów a na pewno pierwszy w moim stylu, taki którego wygląd odpowiadał mi. W tamtym czasie rzadko używałam krojów szeryfowych ale tu pasował on idealnie. Szablon występował wtedy zarówno w wersji lewostronnej jak i prawostronnej. Po zeszłorocznych przeróbkach zostawiłam ten szablon tylko w wersji prawostronnej ale za to całość przeinterpretowałam na dwa różne projekty. Ten prezentowany dzisiaj zachowuje stary graficzny układ tła ale zmienia zupełnie kompozycję treści.


10 szablon elastyczny, zielony z liściem

Szablon 02 elastyczny, zielony z liściem,
na starym kodzie, dla blogów na blox.pl. -550px- 


Po latach okazało się, że szablony o takim horyzontalnym układzie nieco gorzej znoszą coraz to szersze ekrany. Nic im się złego nie dzieje ale jakoś tak za dużo pustego miejsca dookoła nich. Zmiana tego projektu uwzględnia właśnie tylko wypełnienie tej pustki. Całość podzieliłam na 3-4 kolumny i w miarę poszerzania się dostępnego miejsca kolejne kolumny zaczynają się wyświetlać obok zamiast pod spodem.

wtorek, 05 marca 2013

Swego czasu trzecia kolumna na bloksowym blogu była jakimś często irracjonalnym pragnieniem co drugiej osoby, która zadawała mi pytanie związane z wyglądem bloga. Najśmieszniej było gdy o trzeciej kolumnie wspominał ktoś kto w wąskiej szpalcie poza archiwum miał może ze cztery linki i jeden baner w dodatkach. Po co ta Trzecia? Za cholerę nie miałam pojęcia, zapewne przyszłościowo...


przeniesienie wąskiej szpalty do trzeciej kolumny

Szablon 09 - AMPLA zielony, z przeniesioną do trzeciej kolumny bloksową wąską szpaltą
na starym kodzie, dla blogów na blox.pl. -500px-


Z czasem zaczęłam inaczej patrzeć na takie pytania. Jest jednak kilka sposobów na zrobienie trzeciej szpalty i mówiąc szczerze dalej nie przepadam za pytaniami w stylu jak zrobić trzecią kolumnę? Wolę bardziej konkretne: jak przenieść zakładki do osobnej kolumny, jak sprawić aby dodatki wyświetlały się w trzeciej szpalcie, etc. Bo o to właśnie najczęściej chodzi więc dzisiaj wpis o najprostszej, samoistnej wręcz, symetrycznej trzeciej kolumnie. A o tym jak inaczej, ciekawiej czy po prostu praktyczniej zaaranżować układ trzykolumnowy na blogu napiszę przy innej okazji.

Do stworzenia samoistnej, symetrycznej trzeciej szpalty potrzebne będą:

  • Tylko odpowiednie stylowanie w CSS
    • poszerzenie całości przestrzeni bloga
      #BlogGlownyBox {
       padding-left:170px;
       position:relative;
      }
    • przeniesienie bloksowej treści wąskiej szpalty w inne miejsce
      #BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
       position:absolute;
       top:10px;
       left:0;
       width:160px;
      }

Na początek małe wyjaśnienie. Dzisiejsza dodatkowa kolumna powstawać będzie samoistnie czyli nie wymaga żadnej nadzwyczajnej ingerencji w polu na dodatkowy kod HTML. Kolumny stworzą symetryczny układ, gdzie w jednej z wąskich kolumn będą elementy dodatkowe (z pola na dodatki HTML) a w drugiej bloksowa treść poboczna (archiwum, zakładki, chmurka tagów, etc.). Taki podział treści i sposób ułożenia kolumn najlepiej uzyskać poprzez pozycjonowanie bezwzględne.

Jak to wszystko w rezultacie będzie wyglądać pokażę na przykładzie szablonu 09 AMPLA.

Dla kogo taka Trzecia?

Taki układ najlepiej sprawdzi się na blogach na których jest dużo dodatków ale którego autor gubi się w HTML. Wszystkie elementy z pola na kod HTML stworzą samodzielną kolumnę co zapewni dużą swobodę w dysponowaniu tą szpaltą.

Trzecia Szpalta: symetrzyczna, samoistna, z dodatkami, bezwzględna

Wadą tego rozwiązania może być długość bloksowej wąskiej szpalty (tej z zakładkami, tagami i cała resztą). Jeżeli jest w niej więcej rzeczy niż w którejkolwiek z dwóch pozostałych szpalt a tło dookoła bloga jest inne niż to bezpośrednio na blogu to ta przeniesiona wąska szpalta zacznie wystawać.

W przypadku gdy bloksowa wąska szpalta będzie krótsza niż szpalta z dodatkami polecam więc zastosować kilka sztuczek zmniejszających jej długość:

Nowa szerokość bloga

Aby dodać kolejną kolumnę trzeba przede wszystkim poszerzyć całego bloga, no bo gdzieś ta dodatkowa kolumna musi zostać umieszczona. Ostatnio lubię robić szablony o zmiennej szerokości, w takiej sytuacji nie muszę przejmować się tak bardzo ekranem na jakim szablon będzie wyświetlany. Tym razem jednak wszystko zrobimy bardziej tradycyjną metodą, łopatologicznie i po prostu.

Ze względu na wymiary ekranów uważam, że blog nie powinien być szerszy niż 995px. Mieści się wtedy w rozdzielczości 1024px. Siedząc przy dużym ekranie może ci się to wydawać niepotrzebnym ograniczeniem ale spora część urządzeń przenośnych większych niż telefon ale mniejszych niż tradycyjny laptop korzysta z takiej szerokości (tablety, netbooki). Statystyki mojego bloga pokazują, że aż 19,4% odwiedzających korzysta z ekranów mniejszych niż 1280px. Wszystko więc zależeć będzie od twoich czytelników.

Skoro szablon ma mieć układ symetryczny sprawdzamy dwie rzeczy. Po pierwsze jaką szerokość ma blog aktualnie. W przypadku szablonów na starym kodzie będzie to cecha width przy selektorze #BlogGlownyBox a jeżeli nie tam to przy #BlogBodyBox. Do całej szerokości elementu wliczamy też padding, margin i border. Teraz już wiemy ile miejsca zajmuje nasz blog i możemy odjąć tą wartość od maksymalnej szerokości. Wynik to liczba jaką możemy bez obaw dodać do naszego szablonu.

Ta liczba się nam przyda ale zaczynamy po prostu od wpisania nowej całkowitej szerokości bloga. W moim przykładowym szablonie (09 ampla zielony) jest to 940px bo 50 pikseli muszę przeznaczyć na zaplanowane wcześniej ramki i dopełnienie.

#BlogGlownyBox width:940px;

Nowy podział kolumn

#BlogBodyBoxKolejnym etapem jest sprawdzenie jakiej szerokości są istniejące na blogu dwie kolumny i sprawdzenie czy przy elemencie nadrzędnym dla kolumn a podrzędnym w stosunku do głównego kontenera nie są opisane margin, border, padding i width. Tym elementem w przypadku starego kodu zawsze będzie #BlogBodyBox.

Szeroką szpaltę zostawiamy w spokoju. Nie zmniejszamy marginesów czy dopełnień - odstępy są bardzo ważne. Jeżeli brakuje ci trochę pikseli albo uważasz, że szeroka szpalta jest za szeroka to oczywiście możesz odjąć nieco od wartości width. Nie polecam natomiast poszerzania szerokiej gdy chce się dodać trzecią kolumnę. Może się zrobić okropnie ciasno.

W moim przykładowym szablonie (09 ampla zielony) na razie mogę zostawić w spokoju zarówno #BlogBodyBox i #BlogSzerokaSzpalta. W związku z tym, że poszerzyłam blog o 190px a obecna na blogu wąska szpalta ma 200px to pojawiła się mała dysproporcja. Jeżeli jeszcze weźmiemy pod uwagę że nowa kolumna też musi mieć odpowiedni odstęp od szerokiej szpalty to dysproporcja się zwiększa. Zazwyczaj polecam asymetrię, nie jest tak krzykliwa jak symetria i pozwala lepiej skupić się na treści bloga. Dzisiaj jednak pokazuję jak zrobić symetryczny układ więc musimy policzyć boczne kolumny na nowo. Tak aby wyszły nam równej wielkości boczne szpalty.

Zaczynamy od zsumowania dostępnego dla bocznych szpalt miejsca. Dodajemy do siebie liczbę pikseli o którą zwiększyliśmy bloga i szerokość wąskiej szpalty. Odejmujemy od tego 40px na symetryczny odstęp (40px to aktualny odstęp pomiędzy wąską a szeroką, musimy zrobić z drugiej strony taki sam). Dzielimy teraz tą liczbę na pół, no bo w końcu potrzebujemy zrobić dwie kolumny.

#BlogWazkaSzpalta

Mamy już poszerzony blog i mamy nowe wielkości dla bocznych kolumn. Mamy też zaplanowany odstęp pomiędzy nową kolumną a szeroką szpaltą. Czyli wszystko jest - możemy zacząć wpisywać to do szablonu. Poza wpisaniem nowych szerokości dodamy jeszcze odstęp odsuwający szeroką od lewej krawędzi tak aby powstało miejsce na lewą kolumnę i poprzez pozycjonowanie absolutne umieścimy tam wąską szpaltę.

Ilustracja obok pokazuje poszczególne etapy zmian i może w takiej bardziej wizualne formie będzie ci łatwiej zrealizować plan dodania trzeciej kolumny.

wersja graficzna1. poszerzenie bloga

#BlogGlownyBox {
 width:940px; /* wcześniej było 750px */
}

2. zwężenie bloksowej treści wąskiej szpalty

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 width:175px; /* wcześniej było 200px */
}

3. odsunięcie szerokiej szpalty od lewej krawędzi

#BlogBodyBox {
 padding:0 0 0 175px; /* wpisałam tylko tyle ile ma przenoszona kolumna bo odstępy wpiszę gdzie indziej */
}

4. określenie względem czego będziemy pozycjonować

#BlogGlownyBox {
 position:relative; /* w moich szablonach niemal zawsze jest ale lepiej się upewnij */
}


5. ustalenie wysokości części tytułowej (nagłówka)

#BlogTytulBox {
 height:200px; /* tutaj to tylko wysokość w innym szablonie mogą też być ramki, marginesy i dopełnienia */
}

6. nowe określenie pozycji bloksowej wąskiej szpalty

#BlogWazkaSzpalta, #SkomentujWazkaSzpalta {
 position:absolute;
 top:200px; /* wysokość całości nagłówka */
 left:20px; /* dopełnienie głównego kontenera */
}


7. dodanie odstępu pomiędzy przeniesioną szpaltą a szeroką

#BlogSzerokaSzpalta {
 margin:0 40px 0 40px;
}

I gotowe.


Powyższe cechy dostosowałam do szablonu typu AMLPLA. Z pewnymi modyfikacjami można je wykorzystać jako bazę dla przeniesienia wąskiej szpalty w dowolnym szablonie. Najlepiej jeżeli cechy te będziesz opisywać tam gdzie już są wpisane te selektory, pozwoli ci to na bieżąco kontrolować wygląd szablonu. Jeżeli jest jo jednak jedyna zmiana jaką planujesz w szablonie i masz problem z odnalezieniem w kodzie tych wszystkich selektorów to wystarczy jak powyższe style wpiszesz na koniec arkusza.

UWAGA!!! Najlepiej będzie jeżeli wpiszesz te cechy własnoklawiszkowo, unikniesz wtedy przypadkowego skopiowania niewłaściwych znaków, które mogą zakłócić działanie kodu. Wszak nie wszystkie znaki są widoczne. Ewentualnie możesz skopiować ten fragment kodu z czystego dokumentu tekstowego.

-- kod przenoszący wąską szpaltę do trzeciej kolumny --


Notki na powiązane tematy:

poniedziałek, 25 lutego 2013

Dawno nie było tu wpisu o szablonie dedykowanym. Nie dlatego, że już takich nie robię, wprost przeciwnie z chęcią przyjmuję propozycje współpracy, szczególnie takie, które wymagają ode mnie więcej niż jestem przekonana że potrafię. To jednak wymaga zaufania - nie każdy zdecyduje się kupić kota w worku a i ja nie każdemu mojego kota będę gotowa powierzyć...

Blogerzy Dla Korczaka - blog prezentujący rezultaty konkursu

Nie o kotach w worku jednak dzisiaj. Dzisiejszy wpis jest o szablonie, który uporządkowałam dla Danusi z bloga Książki Zbójeckie. Danusia zorganizowała w zeszłym roku wspaniały konkurs: Blogerzy dla Korczaka. Udało jej się coś niesamowitego, coś co moim zdaniem trochę wykracza poza granice naszych przyzwyczajeń i oczekiwań. Zorganizowała konkurs, pozyskała sponsorów, wsparcie patronów honorowych, poświęciła temu projektowi sporo czasu i uwagi.

 

Chociaż nie brałam udziału w konkursie i nie reklamowałam go w trakcie trwania to chciałam wesprzeć jakoś pomysł. Gdy Danusia poprosiła mnie abym zerknęła na blog konkursowy i sprawdziła szablon bo po zmianach coś tam nie jest tak równo jak autorka by chciała to oczywiście zgodziłam się. Zerknęłam i przypomniał mi się plakat konkursu. Pomyślałam, że bardzo łatwo będzie powtórzyć wygląd z plakatu na blogu. A że miałam od Danusi zupełnie wolną rękę jeżeli chodzi o zmiany to dwa dni później szablon niewiele miał wspólnego z Kubrickiem.

szczegóły szablonu Blogerzy Dla Korczaka

Motyw przewodni

Zarówno zdjęcie Korczaka jak i tło dookoła bloga było już w szablonie. Etykiety laureatów również były już stworzone i dodane w notkach. Istniał też plakat w informujący o konkursie. Postanowiłam podążyć tym tropem i pozmieniać elementy szablonu tak aby wyglądały jak te na plakacie. Nie było to wcale trudne bo plakat wykorzystuje tylko kilka charakterystycznych rzeczy: afiszowy krój, pomarańczowo szara kolorystyka, ziarniste papierowe tło, duże zdjęcie...

Krój (czcionka/font)

Jeden z najpowszechniejszych afiszowych krojów: Impact. Jest to krój posiadający bardzo grube kreski, wąskie światła między literami i oczka samych liter, dużą wysokość-x, czyli wysokość małych liter (nie posiadających wydłużeń), sięga ona nawet 3/4 wysokości pisma. Wydłużenia górne i dolne są niewielkie a krój przeznaczony jest w zasadzie wyłącznie do nagłówków. I w takim właśnie celu pojawił się w szablonie bloga Blogerzy dla Korczaka.

#BlogTytulText,
#BlogKategorie, #SkomentujBoxEtykieta, #BlogWpisPoprzedniNastepnyBox,
#BlogKategorieWybranaTytul,
.BlogWpisItemTytul, .TytulKomentowanegoWpisu, #StatycznaTytul,
.BlogWpisTresc h3, .TrescKomentowanegoWpisu h3, .WstepKomentowanegoWpisu h3, #StatycznaZawartosc h3,
.BlogWpisTresc h4, .TrescKomentowanegoWpisu h4, .WstepKomentowanegoWpisu h4, #StatycznaZawartosc h4,
.IPTkategoria, .IPTkomentuj, #PolecWpisStrKom, .SkomentujDodajKomentarzLink, .SkomentujDodajKomentarzLinkPodLista,
#ArchiwumTytul, #BlogAutorzyTytul, #BlogTytulBoxaOstatnichWpisow, .TytulFolderaZakladek, #BlogChmuraTagowTytul,
#SkomentujTytListyKomentarzy, #SkomentujTytListyTrackBack,
#BlogStronicowanieBox {
 font-family:Impact, Corbel, Arial, sans-serif;
}

To są wszystkie miejsca w których krój Impact pojawia się w tym szablonie. To co kto uzna za etykietę tytułową jest trochę rzeczą względną i zależną od otoczenia w jakim się pojawi. W moim pomyśle to były właśnie etykiety wymagające solidnego wyróżnienia.

Kolorystyka

Pomarańczowy i pełna skala szarości pochodzą z plakatu. Bordowy pojawił się na etykietkach laureatów i w tle bloga. Z tła pochodzą też odcienie brązu.

paleta kolorów z bloga Blogerzy dla Korczaka

  • #ae1609 - bordowa czerwień została wykorzystana do wyróżnienia linków: tytuły notek, kategorie, linki w tekście, 'dodaj komentarze'...
  • #e57200 - pomarańczowy pojawia się jako tło etykiet w wąskiej szpalcie a także jako :hover linków (zmiana koloru po najechaniu na link kursorem); jest to także kolor separatora
  • #a65504 - jasny brąz pojawia się tylko raz, jako kolor tła w sytuacji gdy grafika nie zostanie wczytana
  • #8b4000 - brązowe są cytaty zarówno te blokowe jak i zagnieżdżone w tekście; także część śródtytułów (h4) ma kolor brązowy
  • #000000 - czarny pojawia się sporadycznie, jest pod zdjęciem Korczaka, wyróżnia wybraną kategorię wpisów a także metryczkę autora notki konkursowej (nazwę autora i bloga)
  • #333333 - ciemny szary to podstawowy kolor tekstu (czarny bywa czasem zbyt jaskrawy dla tekstu treści, w przeszłości było to szczególnie męczące)
  • #cccccc - jasny szary pojawia się w postaci kreseczki pod metryczką we wpisie a także nad i pod tagami na stronie z pojedynczym wpisem i w komentarzach
  • #ffffff - biały jest kolorem tła tekstu a także tekstów na pomarańczowym czy szarym tle (etykiety w wąskiej szpalcie, tytuł bloga)

Ilustracje użyte w tle

Jak już wspomniałam ilustracje na blogu już były. Zdjęcie Korczaka powiększyłam tylko o ziarniste tło aby tytuł bloga nie wylądował na brodzie Doktora. Tło w body natomiast jest jednym dużym, nieruchomym plikiem graficznym.

Szczegóły i drobiazgi

Chociaż o wyrazistości szablonu decydują właśnie wyżej wspomniane elementy: afiszowa czcionka, wyraziste kolory, konkretne grafiki to jest też w nim dużo szczegółów i drobiazgów, które sprawiają że całość się klei i gra.

Szczegóły związane są już bezpośrednio z blogiem i treściami na nim publikowanymi. Mogą pasować na wielu innych blogach ale trudno mi decydować się na takie rozwiązania w ogólnodostępnych szablonach.

Informacje pod notką (IPT)

W szablonach na starym kodzie informacje pod notką składają się z: czasu publikacji notki, loginu autora, który dodał notkę na blogu, nazwy kategorii będącej linkiem, słowa link przenoszącego do strony z pojedyncza notką i frazy dodaj komentarz przenoszącej odpowiednio na stronę komentowania albo stronę z komentarzami. Dodatkowo są jeszcze opcjonalne trzy elementy: lista tagów, link więcej gdy notka podzielona jest na wstęp i treść i link do części TrackBack jeżeli jest włączona i został dodany TrackBack.

Tego jak ukrywać niemile widziane elementy IPT nauczyła mnie lata temu Irytek i niewiele więcej w tej sprawie trzeba wiedzieć. Trzeba tylko mieć prosty pomysł.

IPT bloga Blogerzy dla korczaka

Wykonanie też jest całkiem proste tylko wymaga trochę więcej literek niż w słowie 'proste'.

.BlogWpisInfo {
 clear:both;
 margin:2em 0;
 text-align:center;
 color:#fff;
}
.BlogWpisInfo br, .IPTczas, .IPTautor, .IPTlinkuj , .infoTagi {
 display:none;
}
.IPTkategoria, .IPTkomentuj {
 padding:0 1em 0 0;
 font:1.4em Impact, sans-serif;
}
.facebook-like {
 margin:1em 0;
}

Najważniejsze jest display:none; które ukrywa niechciane elementy: godzinę, login, słowo link, tagi. Zostają teraz już tylko nazwa kategorii (jeżeli kategoria jest dodana),  link dodaj-komentarza i przecinki które rozdzielały schowane już elementy. Przecinki łatwo schować dodając całemu elementowi kolor tła. Nieschowane linki i tak będą widoczne bo linki mają kolor osobno opisany. Zostaje teraz już tylko zadbać o odpowiednie odstępy i wielkość linków.

To IPT (informacje pod tekstem, info) na stronie głównej. Na stronie z pojedynczą notką pojawiają się inne elementy i inaczej należy je opisywać. Porównaj część informacyjną na stronie głównej i stronie z pojedynczą notką: Jednolity wygląd wpisów (strony statycznie nie mają żadnego info).

Metryczka we wpisie

To jedna z tych bardzo specyficznych rzeczy. Po pierwsze trzeba znaleźć jakiś sposób na wyróżnienie kodu metryczki. Ze względu na treść metryczki i konieczną prostotę rozwiązania wybrałam nagłówek piątego stopnia (h5). Zazwyczaj w notce na blogu wystarczą dwa stopnie śródtytułów więc spokojnie mogę wykorzystać h5 do własnych celów. Śródtytuły łatwo dodawać bo w edytorze jest do tego celu specjalne menu. U siebie na blogu do takiego wyróżnienia zazwyczaj używam odpowiednich klas (nie zawsze informacje wyróżnione są ważniejsze niż treść a do tego przydatne są różne sposoby wyróżnienia).

h5 z bloga Blogerzy dla Korczaka

Dysponując możliwością wskazania konkretnego tekstu (tutaj metryczki) mogę w szablonie zdecydować o jego wyglądzie. Ze względu na centrowanie tytułów stworzyłam wyśrodkowany element używający większego rozmiaru tekstu, ciemniejszego koloru, sporej pustej przestrzeni dookoła i jasnej kreseczki nawiązującej do innych rozdzielaczy na blogu.

.BlogWpisTresc h5, .TrescKomentowanegoWpisu h5, .WstepKomentowanegoWpisu h5, #StatycznaZawartosc h5 {
 margin:1em 2em;
 padding:1em 0;
 text-align:center;
 font-weight:normal;
 font-size:1.2em;
 color:#000;
 border-bottom:2px solid #ccc;
}

Ilustracje w notce

W miarę upływu czasu coraz mniej chętnie opisuję wygląd ilustracji w notce. O ile lubię jak mają jakąś ramkę, czy to faktycznie konkretny obrys czy też zalewie nieznaczny cień, o tyle wydaje mi się, że to powinno zależeć od charakteru bloga, jego tematyki i dopiero na końcu reszty elementów szablonu. Dodatkowo nie wszystkie ilustracje na blogu dobrze wpasują się w ramki.

Na blogu Blogerzy dla Korczaka w notkach są dwa rodzaje ilustracji:

  • typowe, ilustrujące treść notek; są różnego typu i wielkości, pochodząc z różnych blogów mają też często wymiary przekraczające przestrzeń przewidzianą na ilustracje w tym szablonie
  • unikalne etykiety wyróżniające nagrodzone wpisy, są bardziej częścią wyglądu, ozdobą niż rzeczywistą treścią notki; jednocześnie de facto są niczym innym jak ilustracją w notce.

Obie te grupy ilustracji w notkach wymagają specjalnego podejścia korygującego niemile widziane zmiany.

Maksymalna wielkość ilustracji w notce

Najprościej jest sprawić aby wszystkie ilustracje na blogu wpasowywały się w dostępne im miejsce. Małe ilustracje zachowają swoją wielkość. Te natomiast, które w normalnych okolicznościach wystawałyby poza przydzieloną im przestrzeń zostają przeskalowane. Najistotniejsze jest w tym przypadku aby nawet pomniejszone zachowały swoje proporcje.

img {
 max-width:100%;
 height:auto;
}

W żaden sposób taki opis w szablonie nie ingeruje w rzeczywistą wielkość ilustracji. Ona w dalszym ciągu ma swoje wymiary i rozmiar, została tylko przeskalowana przy wyświetlaniu.

Tyle jeżeli chodzi o wielkość. Do ozdoby i wyróżnienia ilustracji w tym szablonie użyłam nieznacznej wielkości cień. Pojawia się on tylko przy ilustracjach w notce.

.BlogWpisTresc img, .TrescKomentowanegoWpisu img, .WstepKomentowanegoWpisu img, #StatycznaZawartosc img {
 box-shadow:0 0 5px #666;
}

cień pod ilustracją

Brak cienia przy wybranych ilustracjach

Cień to całkiem delikatna ozdoba ilustracji ale są sytuacje gdy ilustracja lepiej wyglądać będzie gdy bez wyraźnych granic wtopi się w tło. Tak było w przypadku etykiet na blogu konkursowym.

etukieta wyróżnienia

W takiej sytuacji są dwie możliwości. Po pierwsze można usunąć formatowanie bezpośrednio przy ilustracji. Dodając grafikę do notki w oknie edycji wyświetla się także możliwość dodania specyficznych stylów. To dobre rozwiązanie w przypadku pojedynczego elementu i niezmiennej strony. Tutaj zapewne by się sprawdziło ale drugie rozwiązanie jest po prostu lepsze.

Dodając taką specjalną ilustrację, przechodzę do edycji kodu html i dodaję jej specjalnie wymyśloną klasę smll. W szablonie opisuję ją kasując typowy opis wyglądu ilustracji dla danego szablonu (tutaj jest tylko cień).

img.smll {
 box-shadow:none;
}

Dzięki temu że wpisałam to w szablonie a nie przy każdej ilustracji to nawet przy zmianie szablonu czy tylko zmianie wyglądu ilustracji zawsze mogę ten wygląd skasować dla tych właśnie grafik oznaczonych klasą smll.


I to już chyba wszystkie ciekawostki związane z szablonem na blogu Blogerzy dla Korczaka. Z omawianymi tu rzeczami związane są wpisy:

niedziela, 06 stycznia 2013

Cały tydzień zastanawiałam się jak napisać tą notkę. Nadal nie wiem czy to najwłaściwszy sposób... Zmarła jedna z bloksowych blogerek, szablonistka. Od dłuższego czasu nie robiła już szablonów ale wielu z was nadal korzysta ze zrobionych przez nią szablonów bo charakteryzują się dużym spokojem i prostą elegancją. W dalszym ciągu je polecam i będę dalej polecała bo to dobre rozwiązania.

Dziś chciałam się podzielić wspomnieniem o życzliwej osobie, która bardzo pomogła mi gdy zaczynałam robienie szablonów. Nie znałyśmy się z Irytkiem prawie wcale, jedyną wspólną rzeczą o której rozmawiałyśmy to bloksowe szablony co w żaden sposób nie wpływa na fakt, że jest mi bardzo przykro z powodu jej śmierci.

Wielokrotnie wspominałam, że szablonowanie zaczęłam od chęci wprowadzenia zmian we własnym szablonie. Potem była próba zrozumienia jak te strony internetowe działają i jak można pozmieniać swoją aby wyglądała tak jak ja chcę. Tak zaczął się ten blog. Dopóki nie odkryłam, że HTML powiązany jest z CSS poruszałam się nieco po omacku i nie wiem czy gdyby nie Irytek to nie zrezygnowałabym dość wcześnie.

To Irytek właśnie pierwsza zainteresowała się tym co tutaj robię na tyle by podsunąć mi kilka rad. To był dla mnie duży internetowy krok, zupełnie obca osoba jest na tyle zainteresowana tym samym co ja aby podzielić się swoim doświadczeniem i współdzielić proces uczenia się. To ona też, z bardzo dużą życzliwością namówiła mnie abym przestała marudzić że nie rozumiem wszystkiego i zaczęła po prostu robić. Zawsze uważałam, że bez niej nie zaczęłabym. Że skończyłoby się na słomianym zapale. Nie doszło do tego bo Irytek mnie kontrolowała i motywowała.

Wydaje mi się, że każdy kto tworzy coś aby się tym podzielić potrzebuje jakiejś formy rekompensaty. Ja lubię się uczyć więc to że coś potrafię, że robię coś coraz lepiej jest dla mnie dużą radością. Na początku jednak, gdy moje umiejętności w żaden sposób nie były w stanie dogonić zamierzeń potrzebowałam życzliwej osoby, która będzie zainteresowana tym samym co ja i tą osobą była dla mnie Irytek. Często zapętlam się w dążeniu do zrobienia czegoś najlepiej jak to możliwe i potrzebuję czasami kogoś kto przywróci mi właściwą perspektywę i tą osoba była dla mnie Irytek.

Była otwartą, serdeczną osobą, ciekawą świata i zainteresowaną różnymi rzeczami. Nie krępowała się sama zadawać pytania i z życzliwością sama udzielała odpowiedzi.

Rodzinie i bliskim składam najszczersze wyrazy współczucia i kondolencje.

piątek, 21 grudnia 2012

Ostatnio piszę, że poprawiam szablony. Najczęściej niewiele się to różni od robienia ich zupełnie na nowo. Staram się jednak na starym kodzie nie robić zupełnie nowych projektów a jedynie uaktualniać kod, usuwać nieatrakcyjne szablony i zastępować je inną wersją kolorystyczną jakiegoś popularnego projektu. Zdarzają się jednak radykalne wyjątki i szablony świąteczne takimi są. Jedyna rzecz jaka w dzisiejszym szablonie została to koncepcja renifera i kolor czerwony.

szablon świąteczny 02, czerwony

Szablon świąteczny 02 - Czerwony z Reniferem,
na starym kodzie, dla blogów na blox.pl. -550px- 


Poprzednia wersja szablonu była intensywnie czerwona, pełna jasnych, cienkich kreseczek i po pięciu latach zupełnie nieatrakcyjna. Renifera już na początku postanowiłam zostawić i tylko nie wiedziałam jak to zrobić. Przypomniał mi się pomysł z reniferem, który w porożu ma zaplątane światełka, niestety nic ciekawego i darmowego znaleźć nie mogłam więc zostałam skazana na własne wątłe umiejętności. Renifer się chowa za blogiem po pierwsze dlatego, że krępują go te wszystkie świąteczne ozdoby na głowie a po drugie dlatego, że rogi były absolutnie wszystkim na co mnie stać w dziedzinie rysowania.

Pierwszy szablon świąteczny z choinką też poprawiłam. Zapraszam do pobierania.

poniedziałek, 26 listopada 2012

Różnych szerokości w szablonie blogowym jest bardzo dużo. Do najważniejszych moim zdaniem należą: szerokość tła części tytułowej, szerokość całego bloga i szerokość dostępnego miejsca w treści notki (np na ilustracje). Każda z nich jest oczywiście inna ale także każda z nich uwzględniać musi nieco inne cechy. Na koniec notki postaram się przybliżyć bardziej szczegółowo te trzy konkretne przypadki ale zacząć muszę od bardziej ogólnych informacji.

Na szerokość składają się wszystkie wartości cech związanych z szerokością i ustawieniami bocznych fragmentów szablonu. Generalnie cała szerokość to CAŁA szerokość a nie tylko wartość width.

CAŁA SZEROKOŚĆ = margin + border + padding + width

zależności między margin border padding i width

Mam nadzieję, że ta ilustracja pomoże zrozumieć zależności. Jak widać na obrazku width to tylko i aż szerokość przeznaczona na zawartość. Zawartością może być nie tylko zwykły tekst ale także ilustracje czy inne elementy i te elementy też mogą mieć opisane marginesy, dopełnienia i ramki.

Po co to wszystko? Ano po to aby ładnie wyglądało. Aby tekst nie dotykał ramki, aby elementy miały łady odstęp, etc. Pamiętaj jednak, że elementów na blogu jest dużo i nie ma potrzeby utrudniać sobie życia aż nadto. Dlatego też opisuj te cechy tylko wtedy gdy to konieczne.

#BlogGlownyBox

Wpisz width przy szerokości całego bloga, pozwoli ci to wygodniej układać elementy jeżeli zechcesz je pozycjonować absolutnie.

Margin jest niekonieczny, szczególnie jeżeli chodzi o wartości w poziomie. Zostawiając go jako auto pozwalasz aby cały blog wyświetlał się na środku okna przeglądarki. Określając jakąś wartość sprawiasz, że staje się odpowiednio przyklejony do bocznej krawędzi okna przeglądarki.

Wpisując padding musisz natomiast pamiętać, że dopełnienie przy tym elemencie dotyczyć będzie nie tylko treści bloga ale i jego części tytułowej. Jeżeli chcesz aby ilustracja umieszczona jako tło tytułu wyświetlała się dokładnie od krawędzi do krawędzi po powinnaś unikać w tym miejscu dopełnienia.

Border jest już elementem bardziej dekoracyjnym więc czy jest czy go nie ma to kwesta estetyki.

całkowita szerokość bloga

Wszystkie powyższe cechy wpisane przy selektorze #BlogGlownyBox stanowią o całkowitej szerokości bloga. Generalnie ma to średnie znaczenie jeżeli blog jest mniejszy niż okno przeglądarki. Gorzej jest w drugą stronę.

To, że okno twojej przeglądarki wyświetla się na ekranie rozdzielczości 1366px nie znaczy, że wszyscy tak mają. A nawet jeżeli mają zazwyczaj to nie znaczy, że zawsze. Ja przykładowo bardzo lubię małe mobilne komputery: netbooki i tablety. Uważam, że to tanie i całkiem praktyczne rozwiązanie dla kogoś kto nie jest permanentnie przyklejony do komputera ale chce mieć go tylko dla siebie. Takie maleństwa często korzystają z rozdzielczości 1024px.

Szerokość ekranu (tzw. rozdzielczość) musi zostać pomniejszona o ewentualny suwak z boku. Jego szerokość zależna jest od przeglądarki czy systemu trudno więc określić z absolutną pewnością ile miejsca zajmie. Bezpiecznie będzie zarezerwować na suwak 20-30 pikseli.

Dlatego chociaż szerokość szablonu zależna jest od projektu to staram się nie robić szablonów szerszych niż 995px - chyba że korzystam z media queries (m.in. szablon zależny od szerokości okna przeglądarki). Nie jest to jednak imperatyw czy jakaś wiedza tajemna, którą przekazano mi w wąskim kręgu zainteresowanych. Ot moja logika.

#BlogTytulBox

Określanie szerokości nie jest tu niezbędne jeżeli jest ona określona w #BlogGlownyBox albo innym elemencie nadrzędnym dla tytułu. W zależności od szablonu bazowego może to być właśnie #BlogGlownyBox albo #BlogSzerokaSzpalta. Aby to określić musisz zerknąć do źródła strony (Ctrl+U) albo sprawdzić z jakiego szablonu podstawowego korzysta twój projekt.

Brzmi to może trochę skomplikowanie ale wcale takie nie jest. Część tytułowa bloga umieszczona jest albo nad całością treści bloga albo tylko nad jedną ze szpalt. W moich szablonach najczęściej korzystam z szablonów podstawowych bloksa które mają tytuł bloga nad całością.

szerokość elementu tytułowego

Jeżeli nie chce Ci się liczyć to spróbuj na oko. Albo zrób sobie zrzut ekranowy (PrtSc) i przytnij go do wielkości jaka się spodziewasz, że tytuł ma. Jeżeli wcześniej zmienisz kolor tła tytułu na czerwony to już w ogóle będziesz mieć pewność, że to są faktyczne wymiary.

Szerokość łatwo jest policzyć. To prosta arytmetyka tylko trzeba sprawdzić odpowiednie selektory. Wysokość tytułu natomiast jest trudniejsza do określenia. Jeżeli jest wpisana (height) to fajnie, dodasz do tego tylko dopełnienie górne i dolne jeżeli są wpisane i po sprawie. Jeżeli element nie ma wpisane height to masz problem, który w zasadzie można rozwiązać tylko na oko bo zależny jest od wielkości kroju tytułu a ten może być różny w zależności od wyświetlanego fontu.

Aby policzyć szerokość zobacz co wpisane jest przy width elementu nadrzędnego dla boksu tytułowego (jak wspomniałam wcześniej najczęściej będzie to #BlogGlownyBox ale zdarzyć się też mogą projekty z innym szablonem podstawowym i wtedy elementem nadrzędnym może być jedna ze szpalt). Zacznij teraz odejmować od tej wielkości wszystkie wielkości, które napotykasz po drodze do elementu tytułowego.

  • Jeżeli tytuł bloga umieszczony jest nad całością treści to sprawa ułatwiona bo w grę wchodzi tylko margines części tytułowej. 
  • Jeżeli tytuł bloga umieszczony jest w którejś ze szpalt liczenia może być nieco więcej ale jeżeli opisana jest szerokość szpalty w której umieszczony jest tytuł to tutaj zaczynasz (szeroka to oczywiście #BlogSzerokaSzpalta a wąska to #BlogWazkaSzpalta) i jak wyżej odejmujesz tylko margines części tytułowej.

Jeżeli w #BlogTytulBox wpisany jest width to wystarczy, że dodasz to tego padding tego elementu i już wiesz ile miejsca zajmować mógł będzie obrazek w tle.

wizualizacja wizualizacja

#BlogBodyBox

Ten element nieco trudniej określić bo zależny jest od szablonu. Ja najczęściej używam jako bazy szablonu Spokojnego albo Białego. One oba mają część tytułową bloga umieszczoną nad wszystkimi elementami treści zarówno głównej jak i pobocznej. Nie wszystkie jednak szablony tak mają. Część tych na starym kodzie tytuł bloga ma umieszczony w szerokiej szpalcie a więc i w elemencie #BlogBodyBox. O ile nie zaznaczę inaczej moje opisy dotyczą szablonów bazowych, które część tytułową mają umieszczoną poza elementem #BlogBodyBox (czyli nad całością treści).

Proponuję nie wpisywać width przy tym elemencie. Jeżeli jest już przy #BlogGlownyBox to o ile nie ma konkretnego powodu to lepiej nie utrudniać sobie życia i zostawić element #BlogBodyBox w spokoju.

W zależności od projektu graficznego użycie padding albo margin będzie bardzo przydatne.

#BlogSzerokaSzpalta

Jeżeli szablon jest bardzo prosty graficznie to wystarczy opisać tutaj width. O ile następne, zawierające się w szerokiej, elementy nie będą miały opisanych żadnych cech związanych z szerokością to width wpisane tutaj będzie jednocześnie szerokością dostępną dla treści wpisów (czyli także maksymalną szerokością ilustracji w notce).

Bardzo często opisuję przy tym selektorze margin. Szpalty nie powinny się stykać zarówno z sobą jak i z krawędziami bloga (jeżeli krawędzie są widoczne). Odstęp dodaje oddechu, uspokaja całość i sprawia, że ze strony przyjemniej się korzysta.

To czy do zapewnienia odpowiedniego odstępu pomiędzy elementami użyję marginesu (margin) czy dopełnienia (padding) zależne będzie od projektu, od tego w jaki sposób zamierzam operować tłem.

Określenie szerokości i odstępów jest istotne w przypadku tego elementu. Teoretycznie określenie szerokości całego bloga zapewnia, że bez względu na szerokość ekranu blog będzie zachowywał określoną stałą szerokość. Wpisanie width przy szerokiej szpalcie zapewnia natomiast właściwe proporcje pomiędzy wąską a szeroką szpaltą. Bez tego ich szerokość ustala przeglądarka w zależności od zawartości.

szerokość miejsca na treść w notce

To chyba najtrudniejszy element do wyjaśnienia. Nie dlatego, że jest w tm coś skomplikowanego ale dlatego, że wyjaśnienia nie da się zamknąć w jednym zdaniu.

Trzeba znaleźć najbliższy element nadrzędny który ma jasno zdefiniowaną szerokość i od tego momentu odejmować wszystkie piksele, które trafiają się po drodze. Tyle jeżeli chodzi o jednozdaniowe wyjaśnienie.

Bardzo często będzie tak, że szerokość szerokiej szpalty (width) będzie jednocześnie szerokością dostępnego miejsca na treść w notce a więc i na ilustracje czy filmiki. Jeżeli jakieś wartości trzeba będzie odjąć to najczęściej będą to dopełnienia i ramki przypisane bezpośrednio ilustracji. W arkuszu szablonu wszystkie te rzeczy mogą być opisane w różnych miejscach więc trzeba się nieco porozglądać.

szerokość miejsca na treść w notceAby wiedzieć czego szukać przedstawiam ilustrację prezentującą zagłębienie treści notki (w sumie to nie mam pojęcia jak to nazwać, mam nadzieję, że słowo zagłębienie wam tutaj pasuje i jest zrozumiałe). Bez względu na szablon bazowy (na starym kodzie) treść notki wgląda z grubsza tak samo.

Wygląda jakby tego było bardzo dużo ale tak nie jest. Zazwyczaj szeroka szpalta ma określona cechę width. Czasami cały boks wpisu może mieć jakiś margines czy dopełnienie ale wcale nie musi. Jeżeli ilustracje we wpisie mają widoczną ramkę to zapewne jest ona w jakiś sposób opisana w szablonie więc jeżeli jest to dopełnienie czy ramka to liczymy te piksele. Jeżeli jest to natomiast cień to nie musimy się nim przejmować - ona nam miejsca nie zabiera.


I to by było na tyle ogólnych informacji o określaniu szerokości bloga i jego poszczególnych części. O wspomnianych cechach CSS napiszę jeszcze przy innej okazji, o selektorach przy których warto opisywać szerokość piszę stronę statyczną, jak będzie gotowa to się nią podzielę. Tymczasem polecam inne powiązane z tematem szerokości wpisy i strony z tego bloga:

sobota, 10 listopada 2012

Co chwilę dodaję jakąś duperelę do moich szablonów i już nawet mnie samej trudno ogarnąć co w którym szablonie już jest a co trzeba dodać. Dzisiejsza duperela to całkiem przydatne górne menu z obrazkami. Ostatnio często dodaję je do szablonów i choć zawsze staram się umieszczać stronę z dokładną instrukcją to myślę, że przyda się i taka notka jak ta dzisiejsza, która wyjaśni jak to zrobić w najprostszej formie.

#menuIkon

Moje ikonkowe menu często są specjalnie stylowane: wtapiają się w tło, powoli zaokrąglają albo zmieniają kolory. Każda z tych rzeczy wymaga innego opisu CSS. Dzisiaj daruję sobie taką szczegółowość i opiszę tylko jak sprawić aby ikonki pojawiły się w wybranym miejscu.

UWAGA! Jeżeli na blogu z którego pobrałaś szablon ikonkowe menu jest widoczne to wystarczy, że w polu na dodatki wpiszesz odpowiedni kod HTML. Skoro ikonki są na blogu z szablonem oznacza to, że ich położenie jest już opisane.

Do stworzenia ikonkowego menu potrzebne będą:

  1. Niewielkie obrazki
    wybrane ikonki dodaj do zasobów bloga
  2. Fragment kodu HTML
    wystarczy prosty kod ilustracji z linkiem otoczony divem o identyfikatorze menuIkon
  3. Odpowiednie stylowanie (CSS)
    trzeba zmienić położeni elementu poprzez cechę position:absolute; i określić nowe położenie względem wybranych krawędzi (top:10px; right:10px;)

Przede wszystkim musisz podjąć decyzję do czego będą linkować elementy z nowego menu i poszukać albo samemu przygotować odpowiednie obrazki. Proponuję zapoznać się z zawartością strony IconArchive, można znaleźć tam prawdziwe skarby, trzeba tylko się upewnić czy licencja pozwala nam je użyć.

Ustal sobie jakiego rozmiaru będą obrazki w tym menu. Niech będzie stały, jednakowy dla wszystkich elementów. Rytm to jedna z cech piękna. Wydaje mi się, że w większości przypadków całkiem odpowiednim rozmiarem będzie 32×32px. Rozmiar dopasuj do stylu szablonu i liczby elementów w menu. Nie przesadzaj z wielkością: to ma być drobne pomocnicze menu a nie logo strony.

Na początek dla przykładu wybrałam bardzo obszerną (436) kolekcję ikon autorstwa dAKirby309 udostępnionych na licencji CC BY 3.0. Są to bardzo proste dwukolorowe wzory prezentujące loga wielu aplikacji, przeglądarek, systemów. W zależności od pomysłu na menu poszukaj sobie odpowiednich dla Twojego bloga ikon. Ja zamierzam stworzyć menu kontaktowo-subskrypcyjne więc potrzebuję podstawowych symboli kontaktu i subskrypcji (via różne serwisy).

Wybrane ilustracje dodajemy do zasobów bloga:

Edycja blogu -> WPISY -> PLIKI -> Nowy plik

Tym razem kod będzie bardzo porosty. Każdy obrazek należy przedstawić w postaci kodu linku. Przy ilustracji konieczny jest atrybut alt a do linku można dodać atrybut title, który dodatkowo wyjaśniał będzie przeznaczenie ikonki. Przykładowo link kontaktowy może mieć w title wpisane zachęcające napisz do mnie.

kod ilustracji z linkiem

Czerwone fragmenty na powyższym przykładnie są niezmienne, każda kreseczka się liczy. Beżowe należy uzupełnić własnymi danymi: adresem strony do której chcesz zalinkować i adresem ilustracji (ikonki) w zasobach twojego bloga.

Gdy przygotujesz taki kod, dla każdej ikonki osobno, całość ubierz w div o identyfikatorze menuIkon. Pozwoli nam to dowolnie dysonować tym elementem. Bez identyfikatora nie mamy jak powiedzieć przeglądarce o co nam chodzi. Teraz gdy nazwaliśmy element (daliśmy mu unikalny identyfikator) możemy go w szablonie wołać po imieniu i ustalić jak ma wyglądać i gdzie ma być położony.

przykładowy kod dla menuIkon

Na powyższym przykładzie czerwone elementy to te kluczowe, które zadecydują o tym, czy będziemy mogli coś zrobić z elementem czy nie. Dowolna zawartość to miejsce na kody poszczególnych ikonek. Całość powinna wyglądać mniej więcej tak: zobacz tekstową wersję przykładowego kodu.

Nowo stworzony kompletny kod wklejamy w polu na dodatki:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Dodatki

Jeżeli w polu na dodatki masz jakiś kod to nie ma większego znaczenia gdzie wkleisz ten nowy (na początku czy na końcu) o ile nie zrobisz tego w środku jakiegoś innego kodu. Pilnuj aby w polu na dodatki nie było zamieszania. Aby lepiej wszystko widzieć możesz sobie powiększyć pole - kliknij na jego prawy dolny róg i przeciągnij nieco w dół.

Dysponując elementem, który ma konkretną nazwę (identyfikator) możemy z nim zrobić w szablonie wiele różnych magicznych rzeczy. Dla tak prostego elementu jak górne menu wystarczy nam określić położenie.

a. Ustal element względem którego będziesz określać położenie.

Sprawdź jakie są zapisy przy elementach #BlogGlownyBox i #BlogBodyBox, to są dwa nadrzędne dla pola na dodatki elementy. Jeżeli menu dodajesz w szablonie który ja zrobiłam ale w którym nie ma jeszcze opisu takiego menu to jest bardzo duże prawdopodobieństwo, że przy którymś ze wspomnianych elementów będzie wpisane position:relative; Taki zapis określa właśnie nasz element względem którego będziemy opisywać położenie. Sprawdź też czy któryś z tych elementów ma też określoną szerokość. Jeżeli jest to jeden z moich szablonów to zapewne ma.

Jeżeli żaden z wspomnianych dwóch elementów nie ma width to potrzebujesz nieco trudniejszego pozycjonowania względem środka strony. O tym napiszę przy innej okazji. Jeżeli widthwystępuje choćby przy jednym  z wspomnianych selektorów to ok, masz ułatwione zadanie.

Jeżeli, żaden ze wspomnianych dwóch elementów nie ma wpisane position:relative; to dodaj taki zapis do #BlogGlownyBox, zapisz zmiany w arkuszu i sprawdź czy nie spowodowało to jakiś niemile widzianych zmian na twoim blogu. Jeżeli wszystko ok to świetnie. Jeżeli coś nieoczekiwanie zmieniło położenie to skasuj dodany zapis i skorzystaj z nieco trudniejszego opisu określenia położenia względem środka strony.

b. Określ nowe położenie elementu

Jeżeli wszystko jest ok to wystarczy, że na koniec arkusza szablonu wpiszesz kod odpowiedzialny za zmianę położenia elementu:

#menuIkon {
position:absolute;
top:10px;
right:10px;
width:180px;
}

I gotowe. Twój szablon od teraz ma ikonkowe menu.

Położenie ustal biorąc pod uwagę wygląd własnego szablonu. Dla przykładu proponuję przyjrzeć się szablonowi 07 czerwony i czarny. Jest to stary szablon, któremu nie zamierzam dodawać ikonkowego menu. Nad archiwum, w wąskiej kolumnie wyświetla się tam duża ikonka RSS. Jest to świetne miejsce ta takie subskrybcyjne menu więc zamiast jednej dużej ikonki umieszczę tam kilka mniejszych.

Sprawdziłam, zarówno width jak i position:relative; są już wpisane w tym szablonie przy elemencie #BlogBodyBox. Może tak zostać, to bardzo dobre rozwiązanie dla tego szablonu.

Na koniec arkusza dodaję uprzednio przygotowany przykładowy kod i sprawdzam co się stało z moim menu.

Nie jest źle ale kilka rzeczy przydałoby się poprawić nieco. Z szerokością całkiem nieźle się wpasowałam. położenie też jest ok, tylko trochę przesunę całość aby była lepiej ustawiona względem obu krawędzi. Linki w tym szablonie są podkreślone więc to muszę usunąć i na koniec dodam bardzo prosty efekt wtapiania w tło po najechaniu kursorem.

#menuIkon {
 position:absolute;
 top:10px;
 right:0;
 width:177px;
}
#menuIkon a {
 text-decoration:none;
}
#menuIkon a:hover {
 opacity:0.5;
}


Na koniec pozostaje mi tylko ukryć oryginalny przycisk RSS.

#BlogRss { display:none; }

Wybrałam ten szablon jako przykład bo ma wygospodarowane miejsce nad wąską szpaltą. Wystarczy więc ukryć element tam wyświetlający się i już mam miejsce na moje ikonkowe menu. Jeżeli w twoim szablonie brak takiego miejsca to do elementów #BlogWazkaSzpalta, #SkomentujWazkaSzpalta dodaj większy górny margines albo odstęp.


Polecane notki:



sobota, 27 października 2012

Maile szablonowe

Dzisiejsze pytanie się zdarza. Nie jest ono bardzo częste ale wystarczająco bym mogła powiedzieć, że się powtarza. Odpowiedz nie ma nic wspólnego z szablonem, a w każdym bądź razie z jakimkolwiek szablonem użytkowników. Jeżeli coś nie jest linkiem to nie mogę poprzez CSS sprawić, że się nim stanie.

Witam, korzystam z szablonu Times New Roman i mam takie pytanie: jak sprawić, żeby tytuł notki wyświetlanej na gównej stronie bloga można było kliknąć i znaleźć się na stronie poświęconej wyłącznie tej notce (tak jak to jest u Ciebie i chyba na wszystkich blogach)??

Zacznijmy od odpowiedzi. Jeszcze raz powtórzę: to nie o szablon chodzi tylko o ustawienia własne. Przejdź do edycji bloga, wybierz zakładkę WYGLĄD, następnie przejdź do ostatniej części: POZOSTAŁE i zaznacz Tak przy zdaniu Optymalizuj szablon pod wyszukiwarki.

edycja blogu -> WYGLĄD -> POZOSTAŁE -> Optymalizuj szablon pod wyszukiwarki

Teraz małe wyjaśnienia. Kiedyś bloksy nie miały linkujących tytułów notek. Żaden z blogów nie miał. Dopiero przy okazji nieco większych zmian w kodach HTML dodano do tytułów notek linki. Ta partia zmian nazywana była zmianami SEO. Jej głównym elementem było dodanie znaczników nagłówków tak aby treść bloga zyskała czytelną hierarchię.

Pozostałe ustawienia - optymalizacja - dodatkowe wyjaśnienia

Problem polega na tym, że jest to rzecz istotna dla kogoś, kto interesuje się tym, jak jego blog jest zbudowany i dlaczego właśnie tak. Dla większości laików liczy się tylko to co widać gołym okiem czyli de facto linkujący tytuł notek. Dlatego niewielki opis, wyświetlający się po najechaniu kursorem na pytajnik obok zdania Optymalizuj szablon wyszukiwarki trudno nazwać wystarczającą wskazówką.

Lepiej już chyba sprawdziłoby się zatytułowanie tego elementu: Czy tytuł notki ma być linkiem (i inne)? Bo powiedzcie mi, kto z was specjalnie szukałby opcji dodania lepiej indeksowanych tagów html do własnego bloga? Już nawet hasło pod wyszukiwarki, niby trochę lepsze ale jednak grożące zmianą w wyglądzie szablonu będzie wręcz zakrywało swoją siłą fragment o linkujących tytułach wpisów.

PS. Na nowym kodzie oczywiście żadnych zmian SEO nie było po powstał później


Notki na podobne bądź powiązane tematy:

środa, 29 sierpnia 2012

Jedną z zalet bloksowych szablonów na nowym kodzie (new_age) jest brak tabel układających treść. Od strony HTML blogi z szablonami na nowym kodzie mają jedną kolumnę gdzie najpierw jest tytuł, następnie treść a na końcu dodatki. Tak to wygląda od strony kodu i w tej kolejności ładuje się na bloga. Jak to będzie wyglądało w praktyce jest już rzeczą drugorzędną i zależną od opisu w szablonie. Jest to o tyle istotne, że w przypadku starego kodu jeżeli chciałeś mieć szablon z wąską kolumną po lewej musiałeś się liczyć z tym, że treść poboczna spowolni załadowanie się na bloga treści głównej. W nowym kodzie lewostronność nie jest obarczona takimi konsekwencjami.


10 słoneczny z szukaczem

Szablon 10 z wyróżnionym szukaczem, słoneczny,
na nowym kodzie, dla blogów na blox.pl. -600px- 


11 szary z szukaczem

Szablon 11 z wyróżnionym szukaczem, szary,
na nowym kodzie, dla blogów na blox.pl. -600px- 


12 z szukaczem zniszczony

Szablon 12 z wyróżnionym szukaczem, czerwony,
na nowym kodzie, dla blogów na blox.pl. -600px- 


Wszystkie one są na nowym kodzie, mają wszystkie elementy wąskiej szpalty zarówno na stronie głównej jak i stronach z pojedynczymi wpisami.

Nie przygotowałam żadnych wersji alternatywnych. Prawostronna wersja tego projektu nie ma sensu bo umieszczenie tytułu w prawym górnym rogu jest bardzo rzadko spotykane a więc użytkownicy się go tam nie spodziewają. Jednokolumnowa wersja byłaby możliwa ale efekt nie będzie warty pracy. Jak ktoś chce spróbować to cały proces dokładnie opisałam na przykładzie subtelnego.

Szablony w zasadzie nie nadają się do większych modyfikacji ale zmiany w postaci zastąpienia plików graficznych umieszczonych jako tło własnymi czy zmiana koloru linków czy rodzaju czcionki zawsze jest możliwa. Jeżeli zmiana ma być niewielka to i ten szablon się nada jeżeli natomiast to ma być zupełnie nowy projekt to radziłabym zabrać się za zmiany w nieco prostszym szablonie.

Kod do górnego menu mają opisany ale w szablonach na nowym kodzie dodaję mu nieco inny identyfikator (#menu-top). 

środa, 22 sierpnia 2012

To był bardzo popularny szablon. Wśród wszystkich, które udostępniłam zajmował chyba siódme miejsce. Ciekawe czy to się teraz zmieni bo szablon zmienił się znacznie choć moim zdaniem zachował swe najistotniejsze cechy. To, co przede wszystkim się zmieniło to część tytułowa. Poprzednio tytuł był umieszczony na tle środkowej ramki co nie było najwygodniejszym rozwiązaniem bo w nietypowy sposób ograniczało jego wielkość. Miejsca na tytuł nie ma wcale więcej ale dużo wygodniej zastąpić teraz można te trzy ilustracje w ramkach.


szablon serdeczny 02, purpurowy

Szablon serdeczny 02 - purpurowy,
na starym kodzie, dla blogów na blox.pl. -550px- 


Poprzednio część tytułowa była pocięta na trzy części. Miało to usprawnić ładowanie się topu ale było raczej głupim pomysłem, którego nigdy nie naprawiłam. Jednocześnie jeżeli ktoś pytał się o możliwość zastąpienia ilustracji umieszczonych w ramkach musiałam odpowiadać zawsze, że to jednak większy problem. Teraz nie tylko on nie istnieje ale także przygotowałam alternatywne topy, w tym wersję z pustymi ramkami, w które łatwo wstawić własne ilustracje.

 
1 , 2 , 3 , 4 , 5 ... 30
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...