013. Jak szybko zrobić własny szablon na bloga?

Wiele osób się zastanawia, jak ja zrobiłam taki a taki szablon i większość z nich mówi "CSS to dla mnie czarna magia". W ostatnim czasie jest Was za dużo, by policzyć na palcach jednej ręki, więc postanowiłam przedstawić kilka sztuczek, jakie stosuję i zobaczycie, że to wcale nie jest trudne. I że wcale nie jestem geniuszem:) Mój pierwszy szablon stworzyłam bez dodawania w „zaawansowanych”  arkuszy CSS. Z dwóch powodów – nie wiedziałam, do czego miałoby to służyć, a co dopiero jak ten arkusz napisać. Przekształciłam kod HTML. Odnalezienie tego, czego w nim szukam i co chcę zmienić, zajęło mi kilka dni. Ale wiedziałam, że jest szybszy sposób i że do czegoś te arkusze muszą służyć. Poduczyłam się z kilku kursów css’a w necie (zajęło to kolejne dwa dni) specjalnych kodów i spróbowałam z arkuszem. Zadziałało. Wyjaśnię, jak zamontować szybko i sprawnie własny szablon  na blogu, bez znajomości CSS’a. Od razu mówię – nie jestem zawcą całego blogspota, jestem tutaj tylko 3 tygodnie, ale metody, jakie stosuję, są proste i skuteczne. Z nimi każdy onetowicz da sobie radę;]

1.  O d   c z e g o   z a c z ą ć

Na początku musisz więc zapamiętać trzy zasady:

I. unikaj edytowania kodu HTML tak często, jak tylko jest to możliwe

II. zmieniaj szablon tylko i wyłącznie w „Projektancie szablonów”, czyli kolory czcionek itd. oraz przede wszystkim pisząc dodatkowy arkusz CSS

III. w wybranym przez Ciebie szablonie (obojętnie, czy to jest Prosty, Okno obrazu czy jakiś inny) wszystkie elementy, które chcesz edytować, mają swoje nazwy, zapisane w specjalny sposób. To selektory. Edytując kod HTML możesz je podejrzeć już na początku, w tych wszystkich linijkach zaczynających się od:
Group description="Tabs Text" selector=".tabs-inner .widget li a"
Dlatego dla kart mamy tutaj selektor:  .tabs-inner .widget li a, bo taki został wprowadzony w group description. Poza tym możemy je podpatrzeć w Układzie. Najeżdżamy myszką na hasło Edytuj dla danej ramki i pokazuje nam się w lewym dolnym rogu przeglądarki adres linku. Interesuje nas ten fragment linku: "widgetId=Blog1", a konkretnej to, co stoi za znakiem równa się (czyli Blog1). Dopisujemy do tego # i mamy selektor bloga: #Blog1.

Jak wygląda edycja prostego, pojedynczego parametru? Schemat jest taki:

Selektor {  właściwość : wartość ; }

2.  P r o b l e m y    z    w s t a w i e n i e m    n a g ł ó w k a

Samo załadowanie obrazu w oknie edycji „nagłówka” (edytować możemy wszystkie ramki, gdy wejdziemy w „Układ”). Wszystko jest fajnie, jeśli nagłówek nie zostanie nigdzie przycięty. Jeśli zostanie przycięty, dodajemy arkusz CSS, np. w moim szablonie nr 2 było tak:

#Header1{

margin: -20px -178px 0 0;

}

Właściwość „margin” oznacza marginesy. Pierwsza cyfra odpowiada marginesowi górnemu, druga – z prawej strony, trzecia – dolnemu, czwarta – z lewej strony. Marginesy te są odległością (w pikselach) danej krawędzi ramki od brzegu strony (tudzież brzegu wyświetlacza monitora, tak to trzeba interpretować).  Przykład: dla marginesu górnego dodatnia wartość będzie oddalała brzeg nagłówka od góry monitora, ujemna – będzie ją przybliżać w stronę krawędzi górnej monitora itd. Wartości wpisujcie tak długo, aż w podglądzie poniżej będzie wyglądać idealnie.

3. R ó ż n e   e f e k t y    t ł a – p o d    p o s t a m i ,  k o l u m n a m i

Co można zrobić z tłem? Lista selektorów i opcji, jakie tutaj mamy:

background-color: #000000;      (tłem będzie kolor #000000)

background-image: url(‘adres zalinkowanego obrazka’);     (tłem będzie obrazek)

border-width: 1px;      (grubość obramowania - wpisujemy wartość jaką chcemy w pikselach)

border-color: #000000;      (kolor obramowania)

border-style: dotted;       (styl obramowania: dotted – kropeczki, dashed – kreseczki, double – podwójna linia)

border-radius: 20px;       (zaokrąglone rogi tła, jedna wartość zaokrągli wszystkie cztery rogi, wprowadzając cztery różne wartości możesz zaokrąglić każdy z czterech rogów w inny sposób np.:

border-radius: 20px 0 20px 0;     )

Selektory możemy łączyć, czyli możesz dodać jednocześnie jako tło obrazek, który będzie obramowany danym kolorem w dany sposób. Ustawiając tło pod postem wpisujemy np.:

#Blog1 {

background-color: #000000; 

border-width: 1px;  

border-color: #ffffff;

border-style: dotted; 

}

Uzyskane tło będzie czarne z obramowaniem w postaci białych kropeczek, o grubości 1 piksela.

Takie samo tło dla kolumny będzie się różniło tylko selektorem, który należy wpisać zamiast ”#Blog1”:

Kolumna prawa:     .column-right-inner

Kolumna lewa:     .column-left-inner

4. T ł o   p o d   c a ł y m   b l o g i e m  -  j a k   o s z u k a ć    l i m i t    r o z m i a r u ?

Można je załadować w projektancie szablonów (Szablon > Dostosuj > Tło). Jest jednak limit rozmiaru. Chcąc załadować większe tło trzeba załadować małe, zapisać i przejść do edycji kodu HTML. Zapamiętaj nazwę małego tła! Przykładowo u mnie jest to jasddas.png, więc będąc w edycji kodu wciskam Ctrl + f i wklejam nazwę. W ten sposób znalazłam w kodzie html moje tło i teraz mogę zalinkować gdzieś duże tło i wkleić adres obrazka w odszukane w kodzie miejsce.

5. C o   z r o b i ć ,  b y   r a m k i   n a c h o d z i ł y   n a   n a g ł ó w e k ?

Do tego służy nam pozycjonowanie.  Najmniej inwazyjne jest relatywne (absolutne może wpłynąć na inne elementy szablonu). Jeżeli chcemy, żeby np. kolumna lewa nachodziła na nagłówek (który łączy nam się z tłem bloga) i żeby była wyżej od postów używamy właśnie tego. Wpisujemy

.column-left-inner {

position: relative;

top:  -125px;

left: 275px;

}

Tutaj musimy pokombinować znowu z ustawieniem odpowiednich wartości, ale podgląd wyświetla się od razu, więc nie ma z tym problemu. W ten sposób możesz ustawić w dowolnym miejscu gdzie chcesz daną kolumnę czy tylko jedną ramkę (#Blog1 – całe okno z postami, #PageList – strony czyli menu w kartach, itd.), nawet na nagłówku.

6. M a m y   r a m k i ,  a l e   t e k s t    w    n i c h    n i e    j e s t    r ó w n o ?

No tak. Wszystko fajnie, ale marginesu górnego prawie nie ma, lewy jest ok, ale prawy jest dużo mniejszy. Co teraz? Bawimy się właściwością margin tak jak to opisałam wcześniej. Często jednak margin nie załatwia sprawy, bo działa on na elementy z zewnątrz. Wtedy zamiast margin stosujemy padding. Tak samo jak dla margin ustawiamy cztery wartości w pikselach, gdy z danej strony nie chcemy dopasowania zmieniać dajemy na 0 i po kłopocie.

7. Z a k o ń c z e n i e

Przykładowy CSS, który tu napisałam, wygląda tak:

#Header1 {

margin: -20px -178px 0 0;

}

#Blog1 {

background-color: #000000; 

border-width: 1px;  

border-color: #ffffff;

border-style: dotted; 

}

.column-left-inner {

position: relative;

top:  -125px;

left: 275px;

}

Tak wprowadzony arkusz CSS zapisujemy i zostanie on automatycznie dopisany do naszego kodu HTML szablonu. Oczywiście możecie dopisywać więcej ustawień, dla każdej ramki inne, co Wam się tylko podoba.

Gotowe! Szablon mamy wstawiony.  Teraz tylko edycja czcionek itd.

Macie z czymś jeszcze kłopoty?

Piszcie, postaram się Wam wszystkim pomóc!:)

Już wkrótce dodam nowe szablony:)