Strona 1 z 2

Dostosowanie wyglądu tawerny w 5 minut

: piątek, 29 czerwca 2007, 14:52
autor: fds
Opiszę jak obejść mdły gust administracji i dostosować, przynajmniej lekko i prosto, wygląd tawerny pod swój gust. Cała sprawa opiera się na modyfikowanie css'a. Można to zrobić zarówno dla forum jak i dla strony. Skupię się na samym forum. Większość rozwiązań będzie w miarę prostych i ordynarnych dla niektórych, ale ważne, że będą skuteczne :) Przede wszystkim, powiem jak to zrobić w firefox'ie. Jak bardzo będziecie chcieli, to powiem jak to zrobić też w Operze, Safari, a nawet pod ie ;)

Pierwszą rzeczą jest zainstalowanie sobie dodatku o nazwie Stylish. Można to zrobić klikając tutaj (wersja 0.5.2). Na pasku stanu (tym na dole) powinna się pojawić ikonka rozszerzenia. Klikamy na nią (prawym lub lewym), wybieramy "Stwórz arkusz stylu" -> "Pusty arkusz". Pojawia się okno w którym będziemy operować. W polu "Opis" wpisujemy np. "Tawerna-forum". W dużym pustym polu poniżej należy wpisywać kod. Powinno to wyglądać tak:

Kod: Zaznacz cały

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

@-moz-document url-prefix("http://www.tawerna.rpg.pl/forum/") {
bla bla !important;
bla bla !important;
bla bla !important;
bla bla !important;
}
"bla bla" jest to linijka kodu. Ważna, żeby pamiętać wpisywać na końcu każdej (no nie zawsze trzeba ale to szczegół) z nich "!important". Informujemy tym, przeglądarkę, że nasz kod jest ważniejszy niż orginalny i ma się do niego stosować. Jak o tym zapomnimy, to może sie okazać, że po odświeżeniu strony, wszystkie nasze ustawienia szlag trafił. Wszystkie kody, które napiszę należy umieścić w miejsce "bla bla" ;)

Kod do zmiany czcionki na forum:

Kod: Zaznacz cały

body {
  font-size: 11px !important;
  font-family: "Verdana" !important;
}
Zmiana ssącego małego napisu Tawerna RPG na duży i dumny (plus kolor - wybrałem losowy, można też wpisać nazwę, np. "red")

Kod: Zaznacz cały

h1 {
  color: #C2CCC4 !important;
  font-family: "Monotype Corsiva" !important;
  font-weight: normal !important;
  font-size: 64px !important;
}
Jak mi jeszcze coś prostego do łba przyjdzie, albo będą jakieś specjalne życzenia, które są możliwe i potrafię je spełnić to dopiszę trochę przykładów :)

Re: Dostosowanie wyglądu tawerny w 5 minut

: niedziela, 1 lipca 2007, 03:47
autor: fds
Oto mały przykład co można dzięki modyfikowaniu css'a zrobić. Tak u mnie wygląda tawerna:

Obrazek Obrazek Obrazek

Obrazek Obrazek Obrazek

Ta kolorystyka (i czcionka) jest o wiele przyjemniejsza dla oczu, mniej się męczą i już bez wstrętu można siedzieć na forum ;)

Re: Dostosowanie wyglądu tawerny w 5 minut

: niedziela, 1 lipca 2007, 13:18
autor: Force
Zaintrygowała mnie ta "sękowa" tekstura. Dasz kod?

Re: Dostosowanie wyglądu tawerny w 5 minut

: niedziela, 1 lipca 2007, 14:02
autor: fds
Jeśli chodzi Ci o tło, to w założeniu miała to być sosna i chyba nawet jest podobne ;) Niestety zbieram się i zbieram, ale ciągle nie mam prywatnego serwera to musiałem ją wrzucić na imageschacka :) Oto kod:

Kod: Zaznacz cały

body{background-image: url(http://img407.imageshack.us/img407/9361/drewno4duzedh3.jpg) !important;}
Tak więc do ciała "body" wystarczy dodać jedną linijkę kodu.

PS: Zapomniałem pokazać jeszcze jak wygląda u mnie cytowanie i kod.
Obrazek Obrazek

Re: Dostosowanie wyglądu tawerny w 5 minut

: poniedziałek, 30 lipca 2007, 19:00
autor: fds
Cały styl umieściłem już na userstyles.org. Można stamtąd ściągnąć, załadować bezpośrednio do stylish, czy co kto woli z tym zrobić. Dla posiadaczy stylish: wystarczy kliknąć "Znajdź arkusze stylów dla tej strony" a potem zaimportować styl "beach", kilka kliknięć i już.

Kilkoma prostymi kliknięciami można zainstalować sobie ten styl w:
- firefoxie z dodatkiem stylish lub greasemonkey,
- operze.
- chyba tez safari ;)

Dodatki do firefoxa nie są wymagane, można ręcznie zedytować plik user.css, lecz o niebo wygodniej jest za pomocą stylish.

EDIT

Link prosto do stylu :)

Re: Dostosowanie wyglądu tawerny w 5 minut

: sobota, 4 sierpnia 2007, 17:33
autor: jokemaster
A da się to jakoś wyłączyć jednym kliknięciem bo ściągnąłem sobie tą skórkę i używałem z jakieś dwa dni i po prostu zbrzydła mi bo niby przyjemna dla oka ale w ogóle nie pasuje mi do tawerny.

Re: Dostosowanie wyglądu tawerny w 5 minut

: sobota, 4 sierpnia 2007, 23:45
autor: fds
Na pasku stanu klikasz na ikonce stylish i odznaczasz styl tawerny, wszystko wraca do pierwotnego stanu.

Re: Dostosowanie wyglądu tawerny w 5 minut

: poniedziałek, 6 sierpnia 2007, 03:17
autor: fds
WAŻNE:
Właśnie został poinformowany, że XP totalnie ssie! Nie dość, że ma mało czcionek to jeszcze każdy ma inne ich zestawy. Aby styl poprawnie działał, należy najlepiej doinstalować czcionkę "Monotype Corsiva" (o ile się jej nie ma oczywiście).

Instrukcja jak zainstalować w Operze (bo nie jest to tak proste jak w fx):
1. Tworzymy na dysku w dowolnym miejscu katalog, w którym będziemy trzymać nasz styl, jako osobny plik js.
2. Wchodzimy w Narzędzia->Preferencje->Zaawansowane->Zawartość->Opcje JavaScript
3. Wybieramy na samym dole nasz folder, stamtąd Opera będzie pobierać nasze skrypty.
4. Po wejściu na stronę stylu np tu, klikamy na "load as user script"
5. Klikamy Plik->Zapisz jako
- w polu "Zapisz jako typ" wybieramy "wszystkie pliki",
- wybieramy nasz folder, który wcześniej wskazaliśmy w opcjach,
- zapisujemy.

Trzeba pamiętać, żeby mieć włączoną obsługę JavaScript.

Re: Dostosowanie wyglądu tawerny w 5 minut

: wtorek, 7 sierpnia 2007, 17:55
autor: scorez
Ja mam lepszy motyw, zmieniam niedługo kolorystykę moich postów.

Mogą być takie

Mogą być też takie

Ale mogą być też takie choć nie spodoba się to mojemu imiennikowi.

A tak serio to już sobie styl zmieniłem, ale jest niewiele gorszy niż standardowy styl tawerny.

Re: Dostosowanie wyglądu tawerny w 5 minut

: wtorek, 7 sierpnia 2007, 21:52
autor: Ouzaru
Tak jakoś nikt się nie wypowiada, a już ponad 10 osób (z 15ście?) zainstalowało sobie ten styl. Może się wydawać, że nie pasuje do TRPG, ale jest o wiele schludniejszy, ładniejszy i przyjemniejszy dla oczu :) Świetna robota, może pomyśl także nad innymi?

Re: Dostosowanie wyglądu tawerny w 5 minut

: środa, 22 sierpnia 2007, 01:46
autor: fds
Aktualizacja stylu. W międzyczasie jeszcze jedna była, ale był to zabieg czysto kosmetyczny, więc nie było sensu informować :) Zresztą stylish ma guzior po kliknięciu którego, sam sprawdza czy są aktualizacje ;)

Do ogólnej lekkiej zmiany kodu, dodałem kod zapobiegający rozjeżdżaniu się strony, gdy ktoś da gigantyczny obrazek lub zbyt długi link. Teraz pojawia się pasek przewijanie poziomego wewnątrz postu delikwenta-psuja.

Obrazek

Re: Dostosowanie wyglądu tawerny w 5 minut

: środa, 19 września 2007, 21:03
autor: fds
Ze względu na przyłączenie forum konwentowego do forum tawerny, nastąpiła aktualizacja stylu. Dzięki temu część konwentowa jedzie na swojej fajnej, pastelowej, szarawej kolorystyce. Polecam zrobić upa.

Wersja uproszczona, skrypt dla użytkowników Opery i greasmonkey.

Re: Dostosowanie wyglądu tawerny w 5 minut

: czwartek, 20 września 2007, 10:47
autor: Ouzaru
Nadal mam ten styl i już tak się przyzwyczaiłam, że ciężko by mi było teraz zmienić na jakiś inny. Mam nadzieję, że będziesz dalej pracował nad aktualizacjami?
Powinna być możliwość wyboru tego stylu w opcjach forum! :evil:

Re: Dostosowanie wyglądu tawerny w 5 minut

: czwartek, 20 września 2007, 10:50
autor: Force
Przecież możesz sobie zamienić styl : ) na proslilver czy jakiś tam masz to w Ustawieniach tawerny :)

Re: Dostosowanie wyglądu tawerny w 5 minut

: czwartek, 20 września 2007, 13:01
autor: Ouzaru
@Force
Ouzaru pisze:Powinna być możliwość wyboru tego stylu w opcjach forum! :evil:
Czyli stylu, który zrobił fds :P

Re: Dostosowanie wyglądu tawerny w 5 minut

: czwartek, 20 września 2007, 14:32
autor: Force
Wielkie sorry :P ja tam mam piękny styl informatora konwentowego na całym forum. nie wiem kto jest autorem ale dzięki :)

Re: Dostosowanie wyglądu tawerny w 5 minut

: piątek, 28 września 2007, 00:37
autor: fds
No i zrobiłem kolejny styl. Tym razem pobawiłem się przezroczystościami. Przy okazji stary został uaktualniony (a na dniach zostanie ponownie). Cieszcie oczy pastelami ;)

Tutaj można go ściągnąć.

Obrazek Obrazek Obrazek

Obrazek Obrazek Obrazek

Obrazek