Jak zrobić templatkę do wordpressa (8)

Wygląd skórki

Teraz nasza skórka wygląda marnie. Wszystko jest jedno po drugim i przy lewej ściance. Żeby nasza skórka nabrała kształtów i kolorów musimy odpowiednio opisać wygląd znaczników w arkuszu stylów. Będziemy to robić w pliku style.css

Nadanie właściwego położenia poszczególnym częściom strony

Najpierw całość otaczamy znacznikiem div z identyfikatorem wrapper.
<div id=”wrapper”>
</div>

Chcemy żeby nasz blog był wypośrodkowany i miał szerokość 900 pikseli. Dodajmy do pliku style.css następującą formułkę:
#wrapper {
margin:0 auto; text-align:left; width:900px; }

Warto dla body nadać text-align: center
body {
color:#333;
font-family:Arial, Verdana, Sans-Serif;
font-size:x-small;
margin:0;
text-align:center;
}
Następnie nadajemy dla nagłówka float:left i szerokość 100%:
#header {
float:left;
margin:0;
padding:0;
width:100%;
}

Następnie dla głównej części (czyli container) nadajemy opływanie od lewej i szerokość 600 pikseli.
#container {
float:left;
padding:0;
width:600px;
}

W tym momencie sidebar wskoczył na swoje miejsce po prawej stronie. Ale trzeba go jeszcze poprawić.
.sidebar{
float: left;

width: 290px;

background: #eeeeee;

margin: 0 0 0 10px;

display: inline;

}
Sidebar ma szerokość 290 pikseli plus 10 pikseli na margines po lewej daje razem 300 piskeli.
Formułka display:inline zapobiega rozszerzaniu się marginesu w IE, co mogłoby spowodować, że kolumna się nie zmieści i zjedzie na dół.

Mamy teraz już ładnie sformatowane kolumny środkową i boczną. Sidebar ma kolor szary żeby było widać jak to cały układ wygląda. Stopka jest pod kolumną i aby wskoczyła na swoje miejsce na spodzie, trzeba dodać następujący kod.
#footer{
clear: both;

float: left;

width: 750px;

}

 

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.