F.A.Q. - style i grafika - MENU Pod¶wietlenie menu w SAPHIC
maniocek - 18-04-2007, 18:43
Temat postu: MENU Pod¶wietlenie menu w SAPHIC
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.
maniek.a - 18-04-2007, 19:32
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 - 18-04-2007, 23:38
maniocek, po pierwsze, co chcesz podswietlac? Tabele?
maniek.a, tego nie ma w cssie, a Ty nie musisz wklejać tu całego tutoriala, skoro wystarczy wejsc do FAQ styli.
| joli napisał/a: | Kolory pod¶wietlenia tabel zmieniamy w pliku theme_info.cfg – to opcje:
$subSilver[0]['faonmouse_color'] = "DEE3E7";
$subSilver[0]['faonmouse2_color'] = "EFEFEF"; |
maniocek - 19-04-2007, 07:16
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 - 19-04-2007, 08:47
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 - 19-04-2007, 12:32
Dzięki pomogło
Masz +
można zamkn±ć temat.
|
|
|
