Stylish - zrób sobie forum jakie lubisz (tutorial mało fotograficzny, ale związany z tym forum)

[2pompony]

Pochwalony!

Od zmiany forum obserwuję lamenty, że się nei podoba, że nieczytelne, że straciło sporo na przejrzystości... Zgadzam się, ale jednocześnie widzę, że administracja się stara, poprawia tłumaczenia, kolory żółte dorabia i tak dalej, więc nie pilę o czytelność. Po drugie czytelność jest pojęciem względnym - dla jednego groch z kapustą jest czymś swojskim i czytelnym, dla innego krzywo umieszczony jeden pod drugim napis będzie oznaką niechlujstwa i zaprzeczeniem czytelności.

Dla mnie nie do przejścia była zgoda na to, że posty - czyli to, po co odwiedzam forum - zaczynają się dopiero po pokazaniu całego śmiecia jak facebooki, loga, paski z tytułami pisanymi kobylastymi literami, i tak dalej, a wszystko to od góry. W zasadzie żeby zobaczyć to, po co przyszedłem, musiałem zacząć stronę od scrollowania, choć nie mam najmniejszego ekranu... Jeśli się tym interesujecie widzieliście zapewne post Władcy Pixeli, który na żółto zaznaczył, co według niego jest zbędne. Prawie cała góra! Jednocześnei rozumiem, że administracja gdzieś przyszłe reklamy wyświetlać musi, więc prośba, żeby to miejsce zminimalizować pewnie nie spotka się z szybkim odzewem.

I tu zmierzam do meritum. Wspomniałem, że zamiast cisnąć administrację, dużo rzeczy da się zrobić samemu. Wystarczy zainstalować extension do FireFoxa o nazwie Stylish i mieć podstawową wiedzę o stylach css. Dałem nawet jakieś zrzuty - i to był gwóźdź do trumny. Zalaliście mnie privami żebym to, żebym tamto, żebym zrobiłżółte litery, usunął jednemu guzik, innemu sruzik, i w ogóle przekopał całe forum.

Nic z tego.

Zamiast tego pokażę Wam jak to zrobić, i żebyście się nie zniechęcali mogę za niewielką cenę sprzedać to, co sam sobie zrobiłem. Poniżej macie zrzuty ekranu jak to, co zrobiłem wpływa na wygląda u mnie - jeśli to Wam wystarcza - musicie wykonać pracę Ctrl C i Ctrl V, a u Was będzei tak samo. Jeśli zaś chcecie coś więcej, powiem, jak zrobić. Najpierw screeny, jak ja widzę forum (ściśnięte w poziomie, ale po rozciągnięciu strony zmienai się tylko szerokość; odstępy w pionie, które są dla mnie ważne zostają takie jak widać):






1. Forum jasne strona główna:

źródło

2. Forum jasne post:

źródło

3. Forum ciemne, strona główna

źródło

4. Forum ciemne, post

źródło

OK, teraz jak zrobić, zeby mieć to samo.

1. Zainstalować Stylisha dokłądnie tak, jak każde inne extension do Firefoxa
2. Wejść na stronę forum
3. Kliknać guzik Stylisha (u mnie pokazał się na samej górze po prawej), następnei wybrać 'napisz nowy styl', a następnie z podmenu wybrać jedno z dwojga: 'dla forum.nikoniarze.pl' lub 'dla nikoniarze.pl'
4. W nowej karcie pojawi się okno Stylisha. Od góry wpiszcie nazwę jaką chcecie (ja wpisałem po prostu nikoniarze, ale może być byle jaka). W następne, duże na całą stronę okno wpejstujcie to, co poniżej, albo napiszcie to sobie sami.
5. Kliknijcie guzik 'Zapisz'. Jeśli zrobiliście wszystko bez błędu, od tej pory FireFox przy oglądaniu stron forum będzie brał pod uwagę poprawki styli, jakei ma w tym dużym oknie wpisane. I teraz ważne: w każdej chwili podczas oglądana forum można te poprawki wyłączyć (guzik Stylish > odptaszkować nikoniarze (czy nawę, jaką mu sami zadaliście).

Proste, zuchy?! Jasne ze proste.




Poniżej mój kod, te parę linijek powoduje wygląd włąśnei taki, jak na powyższych screenach. To jest wersja 2, poprawka usuwająca jedno niedociągnięcie jest dwa posty niżej (proszę patrzeć na wersję w nagłówku)

@namespace url(http://www.w3.org/1999/xhtml);

/* bombel - moje style do nikoniarzy, v2 */

@-moz-document domain("forum.nikoniarze.pl") {
 
#page_title_container { /* znika cały pasek z dużym tytułem */
  display: none; }

.doc_header { /* linijka 'cześć user' jest wysoka tylko na 25 px, nie na 100 */
 min-height: 25px;
 height: 25px; }
  
#postlist .content { /* treść postów Verdaną 12px - dla mnie czytelniejsza */
  font-family: Verdana;  
  font-size: 12px;} 
 
.announcements .announcerow:first-child { /* znika ogłoszenia reklamowe */
  display: none; }
  
.texteditor.forum .cke_skin_kama textarea.cke_source, .texteditor.forum textarea { /* font w texeditorze, jak się pisze szybką odpowiedź */
    font: 12px Verdana;
}
  
blockquote.preview.forumcontent { /* font w preview odpowiedzi */
    font: 12px Verdana;
}
  
.bbcode_container div.bbcode_quote { /* font czyjegoś cytatu mniejszy niż używanego w poście */
    font: 11px Verdana;
}
  
.forumbit_post .foruminfo .forumicon { /* zmniejszona wielkość ikony podforów na stronie głownej forum */
    width: 24px;}
    
.forumbit_post .foruminfo .forumdata .datacontainer { /* trochę mnioejszy odstęp powyższej ikony od textu na prawo */
    padding-left: 40px; }
    
body a { /* linki są napisane boldem; zrezygnowalem z manipulacji kolorem linków, bo administyracja obiecała, ze je zmieni */
    font-weight: bold; }
    
body a:hover { /* po najechaniu myszą linki się podkreślają */
    text-decoration: underline;} 
    
.breadcrumb { /* breadcrumbs */
    font-weight: normal;
    font: 12px Verdana;
    text-transform: none;
    text-shadow: none;
    height: auto;}
    
.logo-image { /* zmniejszenie wymiaru layera z logiem, bo zawadza w poziomie breadcrumb'om i w pionie też był za wysoki */
    margin: 0px 0px 0px 0px;
    transition: none;}
    
.navtabs ul { /* przesuwa pasek z małymi literkami (Co Nowego pod guzikami) na prawo i w górę */
    left: 290px;
    top: 8px;}
    
#navbar_container { /* pasek z guziorami CO NOWEGO zajmuje mniej miejsca w pionie */
    height: 30px;}
    
   
}

Obiecałem powiedzieć, co trzeba zrobić, żeby samemu sobie coś podorabiać... Otóż to samo co w punktach 1 - 5, tylko zamiast pejstować w punkcie 4 mój kod, trzeba sobie napisać swój. Czy ta prostota nie jest piękna?







I jeszcze odpowiadając na pytania, jak je zapamiętałem...

1. Czy forum jasne i ciemne są identyczne?
Nie, choć różnice są drobne, ale są.

2. Czy Stylish zadziała na jasny i ciemny, czy muszą być dwa różne?
Zadziała (patrz screeny), choć ja obrabiałem forum jasne, bo na tym oglądam forum, więć na tym się skupiłem i ciemne można by było dopracować.

3. Czy dorobię żółte literki?
Nie, bo admin to zrobi.

4. Czy dorobię inne kolory linków?
Podobnie, to ma być zrobione, więć na razie nei ruszam w ogóle tej sprawy.

5. Czy da się zmieniać ikonki różnych rzeczy?
Da się (ale mi się nie chce). Słyszałem jednak, że łapówki potrafią zdziałać cuda.

6. Czy pomogę w instalacji i późniejszych bojach ze Stylishem?
No właśnie pomagam.

7. Czy mogę dać swój telefon do tej pomocy?
Nie mogę, trzeba sobie skombinować własny telefon.





Dziękuję za uwagę. Jeśli komuś podobało, to wspaniale, a jeśli nie - niechże zrobi spier i zechce wypchać się sianem.

Jan Sebastian Bombelkiewicz
tytan honoris causa

[maniak666]

Jestes wielki
Myslę że teraz moja lepsza połowa już nie będzie bała się wejsc na Nikoniarzy. A na pewno ja będę miał więcej spokoju

[2pompony]

Jestes wielki

Jak wejdę na drabinę, to rzeczywiście.







poprawka, usuwająca poziomy pasek skrolowania:

@namespace url(http://www.w3.org/1999/xhtml);

/* bombel - moje style do nikoniarzy, v2.1 */

@-moz-document domain("forum.nikoniarze.pl") {
 
#page_title_container { /* znika cały pasek z dużym tytułem */
  display: none; }

.doc_header { /* linijka 'cześć user' jest wysoka tylko na 25 px, nie na 100 */
 min-height: 25px;
 height: 25px; }
  
#postlist .content { /* treść postów Verdaną 12px - dla mnie czytelniejsza */
  font-family: Verdana;  
  font-size: 12px;} 
 
.announcements .announcerow:first-child { /* znika ogłoszenia reklamowe */
  display: none; }
  
.texteditor.forum .cke_skin_kama textarea.cke_source, .texteditor.forum textarea { /* font w texeditorze, jak się pisze szybką odpowiedź */
    font: 12px Verdana;
}
  
blockquote.preview.forumcontent { /* font w preview odpowiedzi */
    font: 12px Verdana;
}
  
.bbcode_container div.bbcode_quote { /* font czyjegoś cytatu mniejszy niż używanego w poście */
    font: 11px Verdana;
}
  
.forumbit_post .foruminfo .forumicon { /* zmniejszona wielkość ikony podforów na stronie głownej forum */
    width: 24px;}
    
.forumbit_post .foruminfo .forumdata .datacontainer { /* trochę mnioejszy odstęp powyższej ikony od textu na prawo */
    padding-left: 40px; }
    
body a { /* linki są napisane boldem; zrezygnowalem z manipulacji kolorem linków, bo administyracja obiecała, ze je zmieni */
    font-weight: bold; }
    
body a:hover { /* po najechaniu myszą linki się podkreślają */
    text-decoration: underline;} 
    
.breadcrumb { /* breadcrumbs */
    font-weight: normal;
    font: 12px Verdana;
    text-transform: none;
    text-shadow: none;
    height: auto;}
    
.logo-image { /* zmniejszenie wymiaru layera z logiem, bo zawadza w poziomie breadcrumb'om i w pionie też był za wysoki */
    margin: 0px 0px 0px 0px;
    transition: none;}
    
.navtabs ul { /* przesuwa pasek z małymi literkami (Co Nowego pod guzikami) na prawo i w górę */
    left: 290px;
    top: 8px;
    width: 80%;}
    
#navbar_container { /* pasek z guziorami CO NOWEGO zajmuje mniej miejsca w pionie */
    height: 30px;}
    
   
}

[Andrzej1974]

Ja wolę się wypchać gdyż nie używam Firefoxa...
Poczekam jak forum będzie dopracowane...

[2pompony]

Jak się okazało, kolega Slon dokonał takiego odkrycia: żeby jemu zadziałało w Chromie, usunął linijkę

@-moz-document domain("forum.nikoniarze.pl") {

bo jak stwierdził inaczej nie chciało zaskoczyć. Mam nadzieję, że Wam zaskoczy.

[2pompony]

Ludzie, poczekajcież, jak rany...

Forum się zmienia, nie ma sensu żebym teraz publikował zmieny, skoro administracja dłubie i jeszcze się wszystko może zmienić. Ze zmian o jakie wołacie: logo mniejsze się pojawiło i już nei zawadza, ale jak pojawią się jakieś zmiany, to pewnie będzie wyglądało jakoś inaczej. W każdym razie dopóki się forum nie ustali, to nie ma sensu publikować wersji trzeciej, czwartej ósmej, itd... . Teraz to wygląda tak (czarne forum indentycznie co do ukłądu, tylko jest ciemne):

FORUM

źródło

POST

źródło