O szablonach, ich projektowaniu i moich z tym zmaganiach...

DIY czyli zrób to sam

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:

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:



środa, 11 kwietnia 2012

Stronność szablonu to mocno niejednoznaczna sprawa. W przypadku starego kodu zawsze polecam prawostronne. To nie tyle kwestia wizualnego układu co praktycznych rozwiązań. Na blogu najważniejsza jest treść i to ona powinna ładować się w pierwszej kolejności (w przypadku nowego kodu stronność nie ma znaczenia bo treść zawsze ładuje się tam pierwsza).


41 szablon Times w kolorze indygo zmieniony na prawostronny

Szablon 41 - Times indygo, ze zmienioną stronnością
na starym kodzie, dla blogów na blox.pl. -550px-


Generalnie stronność to kwesta wyboru ale w przypadku starego kodu bardzo ważnym czynnikiem będzie jednak kolejność ładowania się strony i dlatego dzisiaj jeden z moich szablonów lewostronnych zamienię w prawostronny.

Szybka instrukcja dla każdego szablonu.

1. Kopiujemy do schowka kod CSS szablonu, który będziemy zmieniać.

2. Sprawdzamy na jakim szablonie podstawowym zrobiony jest szablon, który zmieniamy i wybieramy jego przeciwieństwo pod względem stronności.

3. Wracamy do edycji CSS i zastępujemy kod znajdujący się w arkuszu tym który chwile temu skopiowaliśmy. Klikamy zapisz i sprawdzamy na oko jakie problemy się pojawiły. Jeżeli szablon jest prosty i nadaje się do łatwej zmiany stronności i wybraliśmy właściwy szablon podstawowy to do zmiany zostały bardzo nieliczne elementy.

4. Poprawiamy odstępy między szpaltami zmieniając odpowiednio wielkość bocznych marginesów (margin) i dopełnień (padding) przy elementach #BlogSzerokaSzpalta, #BlogWazkaSzpalta, #SkomentujWazkaSzpalta.

Gotowe

Ta sama instrukcja zmieni szablon lewostronny na prawostronny jak i prawostronny na lewostronny. Wystarczy tylko odpowiednio podmieniać marginesy i bazowe kody.

Na koniec notki zwyczajowo udostępniam gotowiec. Polecam

niedziela, 12 lutego 2012

Niektóre zmiany są trudne do przeprowadzenia. Ciężko jest zmienić klimat szablonu na którego charakter składają się głównie grafiki w tle, jest on dosłownie zszyty na wymiar i tyle (chociaż CSS 3 daje aktualnie dodatkowe możliwości, które eliminują konieczność wykorzystania precyzyjnie zaprojektowanych ilustracji do tła). Są jednak szablony nieco luźniejsze. Owszem mają grafiki ale są one powtarzalne. Owszem mają ozdoby ale są one tworem kodu i w każdej chwil można wykorzystać je do nieco innych celów albo nieznacznie zmienić.

szablon dashed zmiana kolorów

Jednym z takich szablonów jest dashed. Największą jego ozdobą jest kolor więc bardzo łatwo zmienić taki wyróżnik. Co lepsze przypisany jest on tylko linkom (wszystkim za wyjątkiem tytułu bloga i notek) więc ewentualną zmianę przeprowadza się w jednym miejscu. Banalnie proste, nieprawdaż?

Instrukcja najprostsza.

1. Przechodzimy do edycji kodu szablonu (WYGLĄD->EDYCJA CSS)

2. Odszukujemy w szablonie kolor, który chcemy zmienić, np. kolor linków

3. Otwieramy przeglądarkową wyszukiwarkę (Ctrl+F) i wpisujemy tam wybrany kolor.

4. Numer zmienianego koloru zastępujemy w arkuszu numerem nowego wybranego koloru.

5. Upewniamy się, że kolor, którego chcemy się pozbyć nie pojawia się ponownie w szablonie, korzystając z wyszukiwarki przeglądarki.

Klikamy zapisz i gotowe

W dalszej części wpisu dokładny opis całego procesu dla tych co miewają wątpliwości. A na koniec prezent: kolorowy dashed czyli gotowe kody ze zmienionymi kolorami. Wystarczy zastąpić nimi kod pobranego szablonu i gotowe.

Kolorowy Dashed

środa, 25 stycznia 2012

Niedawno w FAQ pisałam o zastępowaniu tytułu bloga ilustracją. To była krótka aczkolwiek bardzo treściwa notka. Pytanie czytelnika można było zinterpretować na kilka sposobów, choćby jako prośbę o pomoc w dodaniu faviconki. Kluczowe w pytaniu były słowa: zmienić nazwę bloga na logo. Czy to faktycznie miało być logo czy po prostu jakiś rodzaj ilustracji to już inna rzecz. W FAQ opisałam jak najprościej zastąpić tekst nazwy bloga ilustracją.

Dodawanie logo do szablonu ZERO

Dzisiaj coś bardzo podobnego, rozwinięcie skrótowego wpisu z FAQ lecz nie będę zastępować oryginalnego napisu z tytułu bloga obrazkiem tylko dodam mu obrazek. Można go w taki sposób umieścić w każdym szablonie i jest to bardzo proste, bez względu czy logo jest obok, nad czy pod tytułem.

Instrukcja ekspresowa:

1. Dodajemy wybrany plik do zasobów bloga

2. W edycji CSS przy części opisującej tytuł dodajemy taki fragment kodu:

#BlogTytulText {
background: url(/resource/twoje-logo.png) no-repeat center top; /* adres twojej ilustracji i jej oczekiwane położenie */
}
#BlogTytulText a {
display:block;
padding-top:128px; /* wysokość ilustracji */
}


Gotowe.

wtorek, 13 grudnia 2011

Przedstawiam drobny beżowy szablon, który nazwałam Light. Początkowo nazwa odnosiła się do wyglądu ale przy okazji zmian zwiększyłam jego lekkość opisując niemal cały wygląd kodem CSS. Biorąc pod uwagę pewne zasady i ograniczenia można zrobić z szablonem niemal wszystko, jest bardzo elastyczny. Oznacza to, że jeżeli komuś nie odpowiada jego drobność bez większego problemu może sobie przerobić nieco ten szablon.


szablon 19 z szerszą główną szpaltą

Szablon 19 - Light beżowy, z poszerzoną główną szpaltą
na starym kodzie, dla blogów na blox.pl. -670px-


Tym razem poszerzymy główną szpaltę ale tą instrukcję można zastosować do poszerzania dowolnego elementu a już na pewno, i to często z łatwością, do poszerzenia głównej szpalty w w sporej części innych moich szablonów.

W rozwinięciu wpisu znaleźć można:

poniedziałek, 03 października 2011

Aktualnie nie korzystam na moim blogu z szablonami z górnego poziomego menu. To chyba poważnie niedopatrzenie z mojej strony bo właśnie w takim menu najwygodniej umieścić linki do spraw generalnych jak informacje o blogu, kontakcie, księdze gości czy innych przydatnych rzeczach, które zawsze powinny być pod ręką choć bardzo rzadko się z nich korzysta.

W szablonach sportowych, które poprawiałam ostatnio, zrobiłam dodatkowe górne menu. Wykorzystałam w tym celu listę nieuporządkowaną, którą zamieniłam przy użyciu css w listę poziomą. Efekt jest łatwy do zobaczenia w każdym z tych sportowych szablonów a często, w związku z tym, że takie menu umieszczone jest w okolicach winiety tytułowej, stanowi ono istotny element wizualny szablonu.

górne poziome menu szablonów sportowych

Menu jest przydatne, w szablonach sportowych ma opisany estetyczny, dopasowany do reszty wygląd ale jak je dodać u siebie? Jak sprawić, że pojawi się na własnym blogu? Aby ułatwić wszystko stworzyłam stronę z szybką i prostą instrukcją, którą będę systematycznie uaktualniała. Tutaj natomiast nieco dokładniej, tak dla nawet bardzo zielonych opiszę jak dodać u siebie odpowiedni kod.

środa, 28 września 2011

Temat jest chyba jednym z najbardziej istotnych wyznaczników wyboru szablonu. Przypisując szablon do jakiegoś tematu zawsze waham się, odnoszę wrażenie, że określając z góry szablon zamykam innym drogę do skorzystania z niego. Temat zazwyczaj determinowany jest przez główną ilustrację, najczęściej bardzo łatwo ją zmienić. Nie zawsze ale bardzo często.

Dziś zmieniać będę jeden z pierwszych moich szablonów piłkarski brązowy. Poprzednio, poprzez nadpisanie plików w zasobach, sportowy szablon zmieniłam w kulinarny. Proszę jednak nie sugerować się nazwą kulinarnie, nikt nie będzie zmuszał użytkownika szablonu do gotowania. Podobnie dzisiaj zrobimy szablon dla moli książkowych ale znajomość literatury nie jest wymagana. Wystarczy umiejętność czytania... instrukcji.


4 szablon piłkarski brązowy zmieniony na książkowy

Szablon sportowy 04 - piłkarski brązowy, zmieniony na typ książkowy
na starym kodzie, dla blogów na blox.pl. -500px- 



Temat szablonu możemy zmienić na dwa sposoby. Bardzo prosto poprzez nadpisanie plików w zasobach bloga co zrobiliśmy poprzednio. I nieco trudniej, wykorzystując nieco informacji o css i w arkuszu właśnie wprowadzając zmiany. Podaję tylko gotowe rozwiązania. Obie instrukcje są bardzo proste do zastosowania i można je stosować zamiennie.

Jeżeli ktoś chce się pochwalić swoją zmianą albo ma jakieś pytania odnośnie zmiany tego szablonu to zapraszam do komentarzy.

poniedziałek, 19 września 2011

Temat szablonu to rzecz względna. W dużej mierze ten temat definiowany jest przez główną ilustrację. Wystarczy wymienić jedno zdjęcie i temat zmieniony. Co innego klimat, to coś bardziej nieuchwytnego. Wybierając szablon należy znaleźć swój klimat, patrzeć na układ, wielkość i odstępy między elementami, kolory... a następnie wymienić sobie główną ilustrację i może jeszcze pozmieniać parę dodatków. Klimat zostanie, tylko temat się zmieni.

Dziś zmieniać będę jeden z pierwszych moich szablonów (licząc ten, który zrobiłam dla siebie piłkarski brązowy będzie dokładnie trzecim). Zawsze mam wrażenie, że jest niedostatecznie atrakcyjny. Wszyscy piłkarze rzucili się na jego towarzysza, szablon piłkarski zielony i w porównaniu do niego popularność brązowego wypada słabo. Ale pora to zmienić.


4 szablon piłkarski brązowy zmieniony na kulinarny

Szablon sportowy 04 - piłkarski brązowy, zmieniony na typ kulinarny
na starym kodzie, dla blogów na blox.pl. -500px- 



Temat szablonu możemy zmienić na dwa sposoby. Bardzo prosto poprzez nadpisanie plików w zasobach bloga. Równie prosto ale ucząc się co nieco o css i w arkuszu właśnie wprowadzając zmiany. Podaję tylko gotowe rozwiązania. Obie instrukcje są bardzo proste do zastosowania i można je stosować zamiennie. Zacznę od nadpisywania plików w zasobach.

Jeżeli ktoś chce się pochwalić swoją zmianą albo ma jakieś pytania odnośnie zmiany tego szablonu to zapraszam do komentarzy.

niedziela, 20 grudnia 2009

Christmas lights Icon by Aha-SoftPamiętacie wpis o świątecznych RSSach sprzed 2 lat? Jak zapowiedziałam przyszła pora na wyjaśnienie tych czarów, które dwa lata temu dużym łutem szczęścia udało mi się zrobić (przy wydatnej pomocy w postaci zerknięcia do szymonowego szablonu z szablnowni). Niestety dwa lata temu nie potrafiłam wyjaśnić jak to się stało, że moja ikonka RSS jest linkiem. Tym razem postaram się wyjaśnić wszystko w miarę dokładnie i zrozumiale.

Na początek ikonka

Skoro mamy święta to oczywiście odsyłam do zbioru świątecznych ikonek RSS sprzed 2 lat. Jest nadal aktualny i można w nim znaleźć coś co pasuje do wielu blogów.

The Real Christmas RSS Icons by Denis Sudilkovsky

Można też wybrać sobie zwykłą ikonkę RSS i nałożyć jej świąteczną mikołajową czapeczkę.

Można też odwrotnie: wybrać świąteczną ikonkę, bez znaczka RSS i albo dodać do niej znaczek w programie graficznym, albo z niego zrezygnować a dla jasności informacji pozostawić obok ikonki napis RSS.

Jak zastąpić znaczek RSS obrazkiem - instrukcja

A. Oczywiście na początku umieszczamy wybrany przez nas obrazek-ikonkę w zasobach bloga.

B. przechodzimy do edycji arkusza stylów:

Edycja blogu -> Wygląd -> Edycja CSS

W arkuszu odnajdujemy fragment odpowiedzialny za wygląd elementu RSS. Będzie to selektor #BlogRss i w większości wypadków znajdować się powinien w początkowej części arkusza.

1. wybrana ikonkę przypisujemy jako tło w postaci obrazka do elementu #BlogRss

#BlogRss {
background: url(/resource/rss.jpg) left top no-repeat;
}

W zasadzie wystarczy nam w tym elemencie tylko opisać to, jeżeli jednak planujesz pozostawić napis RSS to dodaj jeszcze opis odstępu i musi to być dopełnienie nie margines.

#BlogRss {
padding: 10px 0px 10px 35px;
}

Tym dopełnieniem odsuniesz napis od ikonki.

2. zamieniamy obrazek w link korzystając z selektora #BlogRss a

Linki są elementami liniowymi czyli automatycznie, jeżeli jest miejsce, ustawiają się obok siebie. Można je odsuwać od innych elementów marginesem ale trudniej już przypisać im dopełnienie czy określoną wielkość. W tym celu musimy zmienić liniowy element linku RSS w blokowy

#BlogRss a {
display:block;
}

Teraz już bez większych problemów możemy określić wielkość naszego linku RSS.

#BlogRss a {
width:32px;
height:32px;
}

Uwaga, przypisując konkretną wielkość elementowi rss sprawdź czy przypadkiem element wyświetlany obok czyli kategorie nie ma opisanej szerokości. W niektórych szablonach możesz znaleźć podobny do poniższego zapis:

#BlogKategorie {
width: 480px;
}

Jeżeli jest to musisz go zmniejszyć o piksele które wykorzystasz przy RSS. Albo po prostu skasuj opis szerokości kategorii.

Wszystko już prawie gotowe, pozostało nam jeszcze zrobić coś z napisem. Metod jest wiele, można przykładowo ukryć napis nadając mu kolor tła. W takim przypadku wygodniej jednak będzie jak element linku będzie większy nić obrazek w tle. Ja tym razem wybrałam inną metodę ale wcale nie twierdzę, że jest ona najlepsza. Zamierzam pozbyć się napisu RSS poprzez użycie minusowego wcięcia w tekście

#BlogRss a {
text-indent: -9999em;
}

Wcięcie musi być na tyle duże aby tekst 'uciekł' daleko poza obszar ekranu tak aby przy różnych rozdzielczościach nie był widoczny.

Gotowe. Cały fragment powinien wyglądać mniej więcej tak (na szaro zaznaczyłam elementy, które należy zmienić na własne wartości):

#BlogRss {
background: url(/resource/nazwa_pliku.rozszerzenie) left top no-repeat;
padding: górny prawy dolny lewy;
}
#BlogRss a {
display:block;
width: szerokość;
height: wysokość;
text-indent: -9999em;
}

 
1 , 2
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...