Witam w kolejnej części, gdzie omówimy "przygotowania" do zrobienia szablonu oraz jego bazowy kod CSS, którego dużo osób używa. To zawsze zależy od was, jak ten kod może wyglądać. Wszystko w tym poście jest opisane, jak ja robię szablony, więc inni mogą mieć inne sposoby.
Artykuły, które warto przeczytać:
Position,
Selektory,
Układy
b. Układ
Mamy do wybrania dużo
układów, można też wymyślać własne, jednak - według mojej zasady - najważniejsze, żeby układ był prosty, przejrzysty, ale nie nudny. Można zawsze dodać któremuś gadżetowi
position: fixed; i już mamy jakiś ciekawy element. Ważne, żeby nie przesadzać z urozmaicaniem.
Ja osobiście, preferuję układy jednokolumnowe lub w ogóle bez kolumn, układając wszystko w stopce. Dla mnie w układach dwukolumnowych często może nam się wkraść chaos, nad którym trudno zapanować i zazwyczaj nie potrzebujemy aż dwóch kolumn.
Można przed pisaniem kodu, zrobić sobie tzw. "sketch" w Gimpie, Photoshopie, nawet na kartce. Robię tak z większością szablonów i bardzo mi to pomaga.
przykładowy sketch
2. Kod CSS
body {
background: #kolortła;
}
> Tutaj zazwyczaj dodajemy sam kolor tła, można zmienić to na obrazek, wtedy kod wygląda następująco - background-image: url(adre-obrazka);
.header h1, .navbar, footer, .feed-links {
display:none;
}
> Wskazane elementy bloga stają się niewidoczne, jest to nagłówek(tekstowy) bloga, pasek na górze bloga, stopka oraz napis "subskrybuj(...)". Wiadomo jeśli chcemy, żeby stopka widniała na blogu po prostu, usuwamy ją z tego kodu i dopisujemy na nowo z wyglądem.
.header {
position:relative;
background: url(adres-nagłówka);
width:1000px;
height:650px;
left:-40px;
top: 0px;
}
> Nagłówek bloga, czyli grafika, którą sami zrobiliśmy. W zależności od tego jakie mamy widzi mi się względem szablonu, ustalamy wszystkie wartości, oprócz - wiadomo - background.
.column-left-inner {
position:relative;
top:-350px;
left:65px;
width:220px;
}
> W zależności od tego, po której stronie mamy kolumnę lub czy mamy jedną, dwie czy w ogóle kody mogą się różnić. I tutaj też, jak wcześniej wspomniałam, kod zmieniamy według naszych zachcianake.
#Blog1 {
width:550px;
position:relative;
top:-180px;
left:40px;
}
> Tutaj też jest wszystko zależne od naszej wizji szablonu.
Brak komentarzy:
Prześlij komentarz