Temat: Mini Kurs zrobienia stylu
Mini Kurs zrobienia własnego stylu dla PunBB 1.3 na podstawie xtremecs. Efekt powinniśmy otrzymać mniej więcej taki jak na tej stronie.
1. Zmiana tła
W Oxygen_cs.css zmieniamy:
body {
background: #fff;
color: #333;
}
na
body {
background: #fff;
background-image:url(img/body.png);
background-repeat:repeat;
background-position:top center;
background-attachment:no-fixed;
color: #333;
font-size:14px;
}
Gdzie "img/body.png" to ścieżka do obrazka z tłem.
2. Zmiana nav-menu [czyli linki: Główna, Forum, Użytkownicy, Szukaj, Profil, Wiadomości, Wyloguj itp.]
a) W Oxygen_cs.css zmieniamy:
#brd-navlinks {
background: #113C5E;
border-color: #113C5E;
color: #ddd;
}
na
#brd-navlinks {
background: #a4dc72;
border:0;
color: #333333;
font-size:10px;
height:25px;
background-image: url(img/na.gif);
background-repeat:repeat;
}
Gdzie "img/na.gif" to ścieżka do obrazka pod menu.
b) Dla lepszego efektu można zmienić podkreślanie linków
^-- Pierwotny efekt linku
^--Nowy efekt linku
W Oxygen_cs.css zmieniamy:
#brd-navlinks a:hover, #brd-navlinks a:active, #brd-navlinks a:focus {
color: #fff;
text-decoration: underline;
}
na
#brd-navlinks a:hover, #brd-navlinks a:active, #brd-navlinks a:focus {
color: #fff;
text-decoration: none;
border-bottom:dashed #32CD32 2px;
}
3. Pasek Administratora
W Oxygen_cs.css zmieniamy:
.brd .main-menu, .brd .admin-menu {
background: #1F537B;
}
na
.brd .main-menu, .brd .admin-menu {
background: #61a2e4;
background-image: url(img/adme.gif);
background-repeat:repeat;
}
Gdzie "img/adme.gif" to ścieżka do obrazka z tłem.
4. Logo
W Oxygen_cs.css zmieniamy:
#brd-head {
color: #ddd;
border-color: #296FA5;
}
na
#brd-head {
background-color:transparent;
background-image:url(img/logo.gif);
background-repeat:no-repeat;
background-position:top center;
color: #fff;
font-size:-100px;
border:0;
margin-top:0;
height:270px;
}
Gdzie "img/logo.gif" to ścieżka do obrazka z tłem.
Uwaga! Trzeba zmienić w atrybucie "height" wysokość naszego obrazku!
5. Ikony postów:
Szybka instrukcja, wykorzystana na tym forum:
Plik Oxygen.css, znajdź:
.brd .main-content .main-item .item-subject .hn {
display:inline;
margin: 0 0 0 1.5em;
}
.brd .main-content .main-item .item-subject p {
margin: 0 0 0 1.5em;
}Zamień na:
.brd .main-content .main-item .item-subject .hn {
display:inline;
margin: 0 0 0 1em;
}
.brd .main-content .main-item .item-subject p {
margin: 0 0 0 1em;
}Znajdź:
.brd .main-content .main-item .icon {
border-style: solid;
border-width: 0.5833em;
height: 0;
width: 0;
float: left;
margin-top: 0.667em;
margin-left: -2.417em;
margin-left: -3.6em;
}Zamień na:
.brd .main-content .main-item .icon {
height: 32px;
width: 32px;
float: left;
margin-top: 0.667em;
margin-left: -3.6em;
}Teraz wystarczy tylko dodać obrazki do Oxygen_cs.css po komentarzu:
/* Status indicators */
w następujący sposób:
/* Przeczytane */
.brd .main-content .main-item .icon {
background: url(img/afs.png);
}
/* Przekierowanie, zapomniałem dać obrazek*/
.brd .main-content .redirect .icon {
border-color: #f4f4f4 #f4f4f4 #f4f4f4 #f4f4f4
}
/* Przyklejone */
.brd .main-content .sticky .icon {
background: url(img/przyklejone.png);
}
/* Zamknięte */
.brd .main-content .closed .icon {
background: url(img/zamkniete.png);
}
/* Zamknięte i przyklejone */
.brd .main-content .sticky.closed .icon {
background: url(img/przyklejonezamkniete.png);
}
/* Nowe */
.brd .main-content .new .icon {
background: url(img/noweposty.png);
}
"img/obrazek.png" to ścieżka do obrazka.
Na razie tyle 
Jutro lub później dodam jak zmienić tło Kategorii, tło z "Fora w tej kategorii z ilością tematów, postów, ostatni post" oraz "kreski" bo nie wiem jak to nazwać ^^
Ostatnio edytowany przez Proximus (2009-02-24 17:02:24)
