Zmiana wyglądu forum

[Domen]

Każdy jest inny przez co w nie każde gusta się trafia.
Prezentuję Wam poradnik jak zmienić wygląd forum tylko dla siebie.

1. Musimy ściągnąć odpowiednią wtyczkę/dodatek do przeglądarki.
   Chrome: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=pl&gl=PL
   Firefox: https://addons.mozilla.org/pl/firefox/addon/tampermonkey/

Instalacji nie będę opisywał bo tak właściwie jest to tylko kliknięcie dodaj albo instaluj.

1. Musimy wgrać odpowiednio spreparowany skrypt.

A) Po instalacji powinna pojawić się nam taka ikonka:


B) Klikamy prawym a następnie “Dodaj nowy skrypt”.


C) Usuwamy całą zawartość i wklejamy nasz skrypt.

SKRYPT:

// ==UserScript==
// @name Animes.PL zmiana wyglądu
// @namespace animes.pl
// @version 0.1
// @description Zmienia wygląd strony.
// @match http://www.animes.pl
// @match http://www.animes.pl/*
// @match http://animes.pl
// @match http://animes.pl/*
// @copyright 2016, Domen
// ==/UserScript==

// Funkcja zmieniająca wygląd - NIE RUSZAĆ!
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName(‘head’)[0];
if (!head) { return; }
style = document.createElement(‘style’);
style.type = ‘text/css’;
style.innerHTML = css;
head.appendChild(style);
}

// TUTAJ ZMIENIAMY WYGLĄD

// Kolory belek itd.
addGlobalStyle(’.content-search .textbox:focus { border-color: #000; }’);
addGlobalStyle(’.prehead, .thead, a.button:hover, a.button:focus, .pollbar, button, input.button { background-color: #000; }’);
addGlobalStyle(’.forum_on, .forum_minion, .forumstats .unapproved, .thread-summary .gotounread .unread, .post_head .postlink a, .forumstats .counter .fa, #stream .user, .content-search .textbox:focus, .content-search .textbox:focus ~ button, .mini-title a:hover { color: #000; }’);

// Logo
addGlobalStyle(’#mainhead {background: #121212; background-image: url(http://vignette4.wikia.nocookie.net/anime-answers/images/a/a6/Chopper.png); background-repeat: no-repeat; background-position: center;}’);

// Tło
addGlobalStyle(’#content { background-image: url(https://images4.alphacoders.com/616/616945.jpg);}’);

// Czcionka dla całej strony
addGlobalStyle(‘body {font-family: Arial;}’);

Tak to ma wyglądać:


D) Na koniec zapisujemy nasz skrypt (Ctrl+S lub ikonka dyskietki).

1. Oglądamy nasz upragniony wygląd forum.
   

   https://imgur.com/yHWd72t

Skrypt działa tylko u Was na komputerze a zatem możecie zmieniać jak Wam się tylko podoba.

Jak edytować skrypt?

Mamy podział na 4 główne zmiany, kolor forum, logo, tło, czcionkę.

KOLORY
Mamy 3 regułki i aby zmienić kolor na forum trzeba w każdej zmienić wartość kolor na upragniony. Zmieniamy tylko wartość #000 na wybrany kolor (lista kolorów html: http://fonty.pl/porady,15,kolory.htm)
Przykład na pierwszej regule:

addGlobalStyle(’.content-search .textbox:focus { border-color: #000; }’);

Po zmianie koloru na #660033

addGlobalStyle(’.content-search .textbox:focus { border-color: #660033; }’);

I tak robimy dla 3 regułek.

LOGO
Tutaj mamy tylko 1 regułkę, musimy zmienić adres obarzka.
Przykład:

addGlobalStyle(’#mainhead {background: #121212; background-image: url(http://vignette4.wikia.nocookie.net/anime-answers/images/a/a6/Chopper.png); background-repeat: no-repeat; background-position: center;}’);

Chcę zmienić na obrazek - https://lh3.googleusercontent.com/-zqWvT12JKiY/AAAAAAAAAAI/AAAAAAAAAAA/KmgzWyqZUXM/photo.jpg

addGlobalStyle(’#mainhead {background: #121212; background-image: url(https://lh3.googleusercontent.com/-zqWvT12JKiY/AAAAAAAAAAI/AAAAAAAAAAA/KmgzWyqZUXM/photo.jpg); background-repeat: no-repeat; background-position: center;}’);

Zmieniamy tylko wartość url, między nawiasami.

Proces zmieniania tła strony jest prawie identyczny, wklejamy tylko wartość url.

ZMIANA CZCIONKI
Zmieniamy warość font-family na upragnioną przez nas czcionke, która jest zainstalowana na komputerze.
Przykład:

addGlobalStyle(‘body {font-family: Arial’);

Chcemy zmienić na Open-Sans, więc:

addGlobalStyle(‘body {font-family: Open-Sans’);

A jaki wygląd animsa Wy zrobiliście?

 

[Lumek]

Dobry poradnik, kiedyś też tej wtyczki sobie używałem.
A to mój efekt (5 min roboty):

 

[IdolwSzutrab7]

Napisałem już na fejsie, że nie lepiej by było zrobić to na zmiennych globalnych CSS?
Od wersji CSS3 zostały dodane zmienne globalne.

Zmienne globalne CSS można szybko i w łatwy sposób edytować.
Nie trzeba by wgrywać skomplikowanego skryptu JS, tylko dodatek na własne stylesheet.

EDIT: no i przede wszystkim CSS są szybsze niż podmiana JS.

 

[Mroczna]

Zadam dość istotne pytanie…
Czy jest może gdzieś regułka zwiększająca przezroczystość tego: http://puu.sh/pTY87/914f3f0a2c.png ?