phpBB2 by Przemo

maniocek · **Pomógł:** 30 razy Posty: 401

Witam!

Założyłem wcześniej o tym temat ale to dotyczy innego stylu i tamta metoda nie skutkuje...

Posiadam przerobiony styl Saphic.
I chciałbym zmienić podświetlanie w nim lecz niestety mi nie wychodzi

Oto kawałek kodu.

Kod:

/* General text */
.gen { font-size : 11px; }
.genmed { font-size : 10px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #565037; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #A1BA23; }

.nav1 { height: 23px; vertical-align: middle; background: url(images/cellpic2.gif); padding: 0; margin: 0; }
.nav_top { color: #4F4F4F; padding: 0; margin: 0; }
.nav_top li { float: center; display: inline; }
.nav_top a:link, .nav_top a:visited { float: center; font-size: 11px; font-weight: bold; padding: 4px 8px 6px 8px; text-decoration: none; color: #EEEEEE; }
.nav_top a:link.active, .nav_top a:visited.active, .nav_top a:hover { color: #FFFFFF; background: url(images/cellpic3.gif); }

/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #444444; }
a.mainmenu:hover { color:#A1BA23; text-decoration:none; }

/* Forum category titles */
.cattitle { font-weight: bold; font-size: 10px ; letter-spacing: 1px; color : #4F4F4F}
a.cattitle { text-decoration: none; color : #4F4F4F; }
a.cattitle:hover { text-decoration: underline; }

Załanczam cały plik.

MatINet.rar
MatINet.css

Pobierz Plik ściągnięto 1322 raz(y) 2,83 KB

Gadatliwa Kasia

maniek.a · **Pomógł:** 14 razy Posty: 303

Nie rozumiem, chodzi ci o to ?

Cytat:

Cytat:
Ponizszy tutorial zostal napisany na podstawie klas zawartych w stylu subSilver. Moga wystapic drobne roznice w stosunku do innych stylow. W miejscu zaznaczonym na czerwono wpisujemy interesujaca nas wartosc. Caly ten tekst dotyczy zawartosci pliku xxx.css, gdzie xxx to nazwa stylu. Klasy, ktore nie zostaly uwzglednione ponizej nie sa dla poczatkujacego zbyt istotne i nie beda niezbedne przy tworzeniu stylu.

background-color: #E5E5E5; - kolor tla forum

Klasy zaczynajace sie od slowa "scrollbar" odpowiadaja za pasek przewijania, dzialaja pod IE.
scrollbar-face-color: #DEE3E7; - kolor paskow przewijania
scrollbar-highlight-color: #FFFFFF; - kolor cienia na pasku przewijania
scrollbar-shadow-color: #DEE3E7; - kolor cienia pod paskiem przewijania
scrollbar-3dlight-color: #D1D7DC; - obrys gornej i lewej krawedzi paska przewijania
scrollbar-arrow-color: #006699; - kolor strzalki do przewijania
scrollbar-track-color: #EFEFEF; - kolor toru pod paskiem przewijania
scrollbar-darkshadow-color: #98AAB1; - obrys dolnej i prawej krawedzi paska przewijania

background-image: url(); - Pozwala nam ustawic dowolny obrazek jak tlo forum. Sciezke do obrazka wpisujemy w nawiasach.

margin: 4px; - Okresla w pikselach odleglosc samej w sobie tabeli forum od gory i dolu strony.

font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif } - Sa to glowne czcionki forum. Na komputerze bez zainstalowanej czcionki bedzie ona zastepowana przez nastepna zawarta w klamrach.

a:link,a:active,a:visited { color : #006699; } - kolory linkow na forum odpowiednio: samego linku, linku aktywnego i odwiedzonego linku

p, td { font-size : 11px; color : #000000; } - rozmiar i kolor czcionki glownie tekstu w PA oraz tego uzywanego w zwyklych, inaczej niezdefiniowanych w css tabelach przykladowo stworzonych w postach

a:hover { text-decoration: underline; color : #DD6900; } - styl oraz kolor linkow po najechaniu na nie myszka

hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px; } - parametry html'owej linii oddzielajacej, znajdziemy ja przykladowo w widoku profilu nad polem podpisu

.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; } - Pierwszy kolor odpowiada za wypelnienie tla wewnatrz tabeli forum. Drugi za kolor i szerokosc w pikselach oraz styl obramowania tej tabeli. Screeny - ( 1,
2 )

.forumline { background-color: #A9B8C2; border: solid #D1D7DC 0px; border-top-width: 1px; } - Pierwszy kolor odpowiada za linie pomiedzy tabelami forum (na czerwono na screenie), drugi kolor (czarny) za dodatkowo dodane wokol tabeli forum linie oraz obramowanie shoutboxa.

td.row1,td.row2,td.row3 { background-color: #XXXXXX; } - Sa to 3 najczesciej uzywane na forum tabelki. Mimo, ze sa oddzielnie to napisalem tutaj jako jedna, poniewaz schemat wszystkich 3 wyglada tak samo. Najlepiej to widac na screenie. row1 zaznaczone jest na czerwono, row2 na zielono, row3 na niebiesko. Trzeba zaznaczyc, ze row1 i row2 sa rowniez naprzemiennie tlami postow.

td.row_helped { background-color: #F0EDDE; } - kolor, jaki bedzie mial post po daniu punktu pomogl.

td.rowpic { background-color: #FFFFFF; background-image: url('images/cellpic2.jpg'); background-repeat: repeat-y; height: 22px;} - Belka na prawo od belki z glowna kategoria forum, standardowo jest tam cellpic2. Mozemy zamienic go inna belka edytujac background-image lub go wyrzucic i ustawic w to miejsce sam kolor. Za pomoca repeat-x lub y definiujemy czy image ma sie powtarzac w pionie czy w poziomie.

th { color: #FFA34F; font-size: 11px; font-weight: bold; background-color: #006699; height: 25px; background-image: url(images/cellpic3.gif) ; - Standardowo gorna, niebieska belka z naglowkami "Forum", "Tematy", "Posty" i "Ostatni Post". Tak samo jak powyzej belke mozemy oczywiscie zmieniac podajac zamiast cellpic3 sciezke do innego obrazka na serwerze lub zdefiniowac tlo. W przypadku tej belki mozemy ustawic rowniez styl czcionki, jaka bedzie pisany na belce tekst.

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom { background-image: url('images/cellpic1.gif'); background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;} - We wszystkich tych klasach uzyta jest ostatnia forumowa belka, czyli cellpic1. Na stronie glownej jest to belka nad shoutboxem, z glowna kategoria forum i z "kto jest na forum". W viewforum i viewtopic jest to belka pod tematami i postami. Stosowane sa w wiekszosci stron forum.

th.thCornerL,th.thTop,th.thCornerR {color: #FFA34F; font-size: 70%; font-weight: bold; background-color: #006699; background-image: url('images/cellpic3.gif'); height: 28px; } - Pozwala nam ustawiac tlo kolejnych belek i uzyte na nich czcionki. Sa to odpowiednia lewa, srodkowe i prawa czesc belki w viewforum.

td.spaceRow { background-color: #D1D7DC; border: #FFFFFF; border-style: solid; } - Pozwala nam zdefiniowac kolor i ramke wokol paska bedacego przerwa pomiedzy postami. Widac na screenie.

th.thHead,td.catHead { font-size: 12px; border-width: 0px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px; }
th.thLeft,td.catLeft { border-width: 0px; }
th.thBottom,td.catBottom { border-width: 0px; }
th.thTop { border-width: 0px; }
th.thCornerL { border-width: 0px; }
th.thCornerR { border-width: 0px; }
^Caly powyzej wydzielony fragment pozwala sprecyzowac grubosc obramowan wokol odpowiednio podanych belek. Tutaj przykladowy efekt.

.maintitle {font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; text-decoration: none; line-height : 120%; color : #000000;} - Standardowo jest to napis "Nazwa twojego forum" na gorze forum. Mozemy kolejno okreslic wyglad czcionki, jej rozmiar, rodzaj, dekoracje, odleglosc od gornej tabeli forum oraz kolor.

.gen { font-size : 12px; } - Rozmiar czcionki odpowiadajacy za "Krótki tekst opisujacy twoje forum".

.genmed { font-size : 11px; } - Rozmiar czcionki na stronie glownej przykladowo opisow kategorii.

.gensmall { font-size : 10px; } - Rozmiar czcionki bardzo duzej ilosci tekstu na forum. Widac na screenie.

.gen,.genmed,.gensmall { color : #000000; } - Kolor czcionki trzech wyzej wymienionych.

a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; } - Kolor linkow u ktorych uzyto powyzszych klas.

a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; } - Kolor tych linkow po najechaniu na nie myszka.

.mainmenu { font-size : 11px; color : #000000 } - Rozmiar i kolor czcionki tekstu uzytego w naglowku forum. Rowniez odnosnika do shoutboxa.

a.mainmenu { text-decoration: none; color : #006699; } - Rozmiar i kolor czcionki linku w naglowku forum.

a.mainmenu:hover { text-decoration: underline; color : #DD6900; } - Rozmiar i kolor czcionki linku po najechaniu myszka w naglowku forum.

.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699} - Klasa okreslajaca napisy "Glówna kategoria forum" oraz "Kto jest na Forum". Oczywiscie pozwala nam zmieniac czcionke.

a.cattitle { text-decoration: none; color : #006699; } - Klasa okreslajaca linki "Glówna kategoria forum" oraz "Kto jest na Forum".

a.cattitle:hover { text-decoration: underline; } - Klasa okreslajaca linki "Glówna kategoria forum" oraz "Kto jest na Forum" po najechaniu myszka.

.forumlink { font-weight: bold; font-size: 12px; color : #006699; } - Nazwy kategorii subfor.

a.forumlink { text-decoration: none; color : #006699; } - Nazwy kategorii subfor bedace linkami.

a.forumlink:hover { text-decoration: underline; color : #DD6900; } - Nazwy kategorii subfor bedace linkami po najechaniu myszka.

.nav { font-weight: bold; font-size: 11px; color : #000000;} - Odpowiada za czcionke na pasku nawigacyjnym, ktorego opis zaczyna sie od strony glownej poprzez kategorie a konczy sie na temacie. Standardowo rozdzielone pomaranczowymi strzalkami. Uzyte rowniez przy panelu moderatora.

a.nav { text-decoration: none; color : #006699; } - Styl linkow w panelu nawigacyjnym.

a.nav:hover { text-decoration: underline; } - Styl linkow w panelu nawigacyjnym po najechaniu na nie myszka.

.topictitle { font-weight: bold; font-size: 11px; color : #FFFFFF; } - Tekst uzyty w tytule tematow.

a.topictitle:link { text-decoration: none; color : #006699; } - Tytul tematu
bedacy linkiem.

a.topictitle:visited { text-decoration: none; color : #5493B4; } - Odwiedzony odnosnik do jakiegos tematu.

a.topictitle:hover { text-decoration: underline; color : #DD6900; } - Styl tematu po najechaniu na jego nazwe myszka.

.name { font-size : 11px; color : #000000; text-decoration: none} - Odpowiada za wyswietlanie nicku uzytkownika miedzy innymi w viewtopic i w skrzynce z prywatnymi wiadomosciami. Do edycji oczywiscie rozmiar i kolor czcionki i ewentualne podkreslenie, pogrubienie itp.

.postdetails { font-size : 10px; color : #000000; } - Czcionka, jaka zostaly napisane szczegoly o poscie. Miedzy innymi kiedy user dolaczyl, skad pochodzi, data urodzenia itd. Klasa odpowiada rowniez za date i nazwe tematu zawarte nad postem.

.postbody { font-size : 12px; line-height: 18px } - Odpowiada za czcionke, jaka napisane zostaly posty.

a.postlink:link { text-decoration: none; color : #006699 } - Kolor i dekoracja linkow zawartych w postach oraz w shoutboxie.

a.postlink:visited { text-decoration: none; color : #5493B4; } - Kolor i dekoracja odwiedzonych linkow zawartych w postach oraz w shoutboxie.

a.postlink:hover { text-decoration: underline; color : #DD6900 } - Kolor i dekoracja linkow zawartych w postach oraz w shoutboxie po najechaniu na nie myszka.

.code {font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; } - W taki sam sposob jak w klasach poprzednich pozwala nam poustawiac wszystkie parametry dotyczace tekstu oraz ramki stworzonych po uzyciu na forum bbcode'owej funkcji [code ][/code].

.quote {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; } - Tutaj mozemy ustawic jak ma wygladac ramka cytowania po uzyciu na forum bbcode [ quote ][ /quote ].

.copyright { font-size : 10px; color: #444444; font-family: Verdana, Arial, Helvetica, sans-serif; } - Odpowiada za wyglad tekstu uzytego w stopce. Zaznaczone na screenie trzema kolorami, zeby bylo widac.

a.copyright { text-decoration: none; color : #006699; } - kolor i styl linkow w stopce

a.copyright:hover { text-decoration: underline; color : #DD6900; } - kolor i styl linkow w stopce po najechaniu na nie myszka

input,textarea, select {color : #000000; font: normal 11px Verdana, Arial, Helvetica, sans-serif;} - Odpowiada za tekst uzyty w polu wpisywania posta, wiadomosci do shoutboxa, rozwijanych jumpboxach i na przyciskach zatwierdzajacych.

input.post, textarea.post, select { background-color : #EFEFEF; } - Kolor tla pola wpisywania posta, wiadomosci w shoutboxie, rozwijanych jumpboxow i przyciskow zatwierdzajacych.

input.post2, textarea.post2, select { background-color : #DEE3E7; } - kolor tla uzupelniajacych jumpboxow i przyciskow

input { text-indent : 2px; } - wciecie przed pierwsza litera tekstu w inputach

input.button {background-color : #EFEFEF; color :#000000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer;} - Pozwala nam ustalic kolor tla i czcionke zawarta na niektorych przyciskach forum. Miedzy innymi przycisk wyslania wiadomosci w shoutboxie i przyciski bbcode.

input.mainoption { background-color: #FAFAFA; font-weight: bold; cursor: pointer; } - Ustawienia dla glownego przycisku zatwierdzajacego. Miedzy innymi "Podglad" i "Wyslij".

input.liteoption { background-color: #FAFAFA; font-weight: normal; cursor: pointer; } - Odpowiada za niepogrubione glowne przyciski zatwierdzajace.

.helpline { background-color: #DEE3E7; border-style: none; } - Kolor tla paska z pomoca znajdujacego sie na stronie pisania nowej wiadomosci. Najlepiej ustawic kolor taki sam jak tla.

span.badwordhighlight { background-color: #FFFF00; } - Odpowiada za kolor podswietlenia slow ustawionych w PA do ocenzurowania. Widzi tylko admin.

.table0
{ background-color : #EFEFEF;
border-bottom-color : #dedede;
border-bottom-style : solid;
border-bottom-width : 1;
border-left-color : #fefefe;
border-left-style : solid;
border-left-width : 1px;
border-right-color : #dedede;
border-right-style : solid;
border-right-width : 1px;
border-top-color : #fefefe;
border-top-style : solid;
border-top-width : 1px;
color : #000000;
font-size : 10px; }

^ Powyzszy fragment odpowiada za kolor, grubosc i styl obrysow tabel w shoutboxie. Opis jest normalnie po angielsku, czyli, bottom odpowiada za dolna krawedz, top za gorna, left za lewa, right za prawa.

.pagination { color: #666; font-size: 10px; font-weight: bold; padding: 3px; padding-bottom: 4px; cursor: pointer; text-decoration: none; } - Pozwala nam okreslac wyglad panelu przejscia do danej strony w tematach, w ktorych jest wiele stron. Mozemy zdefiniowac rozmiar, kolor i styl czcionki, rodzaj kursora oraz odleglosc od tabeli forum.

.pagination a, .pagination a:visited, .pagination a:active, .pagination a:hover { background-color: #EAEBEB; color: #000; border-color: #D4D7DA; border: #D4D7DA 1px solid; padding: 1px; text-decoration: none; } - Dotyczy dokladnie tego samego, co wyzej, lecz odnosi sie do linkow, linkow odwiedzonych, linkow aktywnych i linkow po najechaniu myszka w polu paginacji.

joli · Yollien +Styler **Pomógł:** 2988 razy Posty: 16981

maniocek, po pierwsze, co chcesz podswietlac? Tabele?

Odpowiedź na Twoje pytanie znajduje sie w
F.A.Q. dla stylów

maniek.a, tego nie ma w cssie, a Ty nie musisz wklejać tu całego tutoriala, skoro wystarczy wejsc do FAQ styli.

maniocek · **Pomógł:** 30 razy Posty: 401

O kurczę

Przepraszam zapomniałem napisać.. .

Chciałbym zmienić podświetlanie menu...
Założyłem o tym już wcześniej temat ale tamta metoda jakoś nie skutkuje.

joli · Yollien +Styler **Pomógł:** 2988 razy Posty: 16981

No tak.. Bo tu podswietleniem jest obrazek...
Jednak w css musisz zmienic, choc w standartowych opisach tego nie ma:

Kod:

.nav_top a:link.active, .nav_top a:visited.active, .nav_top a:hover { color: #FFFFFF; background: url(images/cellpic3.gif); }

na:

Kod:

.nav_top a:link.active, .nav_top a:visited.active, .nav_top a:hover { color: #A1BA25 }

, jesli kolor podswietlenia ma byc taki zielonkawy. Jesli inny no to juz kolor wstaw inny

maniocek · **Pomógł:** 30 razy Posty: 401

Dzięki pomogło

Masz +

można zamknąć temat.