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:)