Zmiana wyglądu stron przy użyciu Sygnatury CSS oraz styli CSS

Razem z Operą 8.00 wprowadzono obsługę UserJS - czyli skryptów użytkownika. Jest to ciekawa funkcja (wcześniej posiadał ją FireFox jako rozszerzenie).

Jednym z ciekawych stryptów jest Sygnatura CSS, dzięki której możemy zmienić wygląd każdej strony (korzystająć z odpowiednich stylów CSS.

Jak uruchomić UserJS

Potrzebujesz Operę 8.00 oraz jakikolwiek notatnik.

    1. Tworzysz gdziekolwiek na dysku folder UserJS (nazwa może być oczywiście inna)
    2. W Operze, w Preferencjach (CTRL+F12) -> Zaawansowane -> Zawartość -> Opcje JavaScript wybierasz ten przed chwilą utworzony folder
    3. Do tego folderu będziesz mógł wrzucać pliki tekstowe o rozszerzeniu *.js (jako twoje własne skrypty użytkownika.

Sygnatury CSS

/****** SYGNATURY CSS ******/

/* Podstawowa sygnatura id dla elementu BODY */

function SygnaturaCSS() {
	var semafor = false;
	if (document.body) {
		if (!document.body.hasAttribute('id')) {
			document.body.setAttribute('id',location.host.replace(/^www\./,'').replace(/^\d/,'_$&').replace(/\./g,'-'));
		}
		semafor = true;
	}
	if (!semafor) {
		setTimeout("SygnaturaCSS()",50);
	}
}
SygnaturaCSS();

/* Zaawansowana sygantura klas dla elementu HTML
   autorzy: TarquinWJ i LiteraryMoose */

function mooseRootSignature() {
	var d = document.documentElement;
	var locHost = location.hostname.replace(/^www\./g,'').replace(/\./g,' ');
	locHost = locHost.replace(/[^\w- ]/g,'');
	locHost = locHost.replace(/\b(\d)/g,'_$1');
	d.className = (d.className?(d.className+' '):'') + 'moose' + ' ' + locHost;
}
var mooseDoneNums = 0, mooseCheckNode = setInterval('mooseDoneNums++;if(document.documentElement){clearInterval(mooseCheckNode);mooseRootSignature();}else if(mooseDoneNums>50){clearInterval(mooseCheckNode);document.addEventListener(\'load\',mooseRootSignature,false);}',25);

Kopiujesz kod, wklejasz do notatnika i zapisajesz do naszego folderu UserJS jako <b>sygnatura.js</b>. Od teraz każda strona w otwarta w Operze otrzyma identyfikator "id=" dla znacznika body.

Istnieje również wersja dla użytkowników korzystających z lokalnego serwera proxy: Proxomitron. Poniższe filtry nie wymagają do poprawnego działania innych filtrów. Koniecznie muszą być umieszczone na liście w tej właśnie kolejności (wejście drugiego jest wyjściem pierwszego).

Filtry te dodają atrybut "class=" do znacznika <html> każdej strony. Proxomitron przeznaczony jest dla zaawansowanych użytkowników, jednak nawet oni mogą pominąć możliwość dodania takich filtrów.


Name = "Add: classes"
Active = TRUE
Multi = TRUE
Limit = 256
Match = "<html (\3(class=$AV(\1))|)*\2>"       
Replace = "<html \3 \2 class="\1 \h"  >$STOP()"

Name = "Add: classes 2"
Active = TRUE
Bounds = "<html*>"
Limit = 1000
Match = "\1 class="(\#.)+(\#") \2"
Replace = "\1 class="\# \# \# \# \#" \2"
	      "$STOP()"

Można dzięki temu zmieniać wygląd stron, które przeglądamy. A więc... zmieńmy wygląd google. :)

Plik ze stylami (User.css)

Gdzie będziemy wrzucać odpowiednie style CSS? Do tego służy plik user.css. Zapisujemy w profilu naszej Opery (np. w podkatalogu styles) plik tekstowy user.css.

W tej samej części Preferencji co ostatnio wybieramy Opcje Stylów. Zaznaczamy haczykiem Mój akrusz stylów po obu stronach i wskazujemy plik user.css.

Do tego pliku można wklejać takie style:

#onet-pl a {font-size:120%; color:red}
#adres-strony-pl p {jakieś tam style}
#inny-adres-com div#menu {jeszcze inne style}

Skrypt zamienia adres strony www.onet.pl na #onet-pl. Osoby chociaż troszkę znające CSS nie powinny mieć problemu z rozgryziem działania.

Przykładowe style zmieniające wygląd stron

Google z krokusami

Zrzut[Autor: AdamDziura]

Styl zmienia wygląd strony z wynikami wyszukiwarki google.

Wystarczy zawartość wybranego pliku wkleić do pliku user.css i używać.

Style dla serwisu idg.pl

[Autor: sidtherat]
Zobacz jak to wyglada

/* IDG */
#idg-pl {
background-color: #E2E4EB;
margin: 10px auto;
border: 1px solid #010101;
border-width: 3px 1px;
width: 1000px;
position: relative;
}
#idg-pl table.obrysA, 
#idg-pl .obrysKT2,
#idg-pl td[width="125"],
#idg-pl td[width="190"],
#idg-pl td[width="180"],
#idg-pl td[width="1%"],
#idg-pl table[width="135"],
#idg-pl td[width="160"],
#idg-pl table[width="60%"],
#idg-pl table[width="70%"],
#idg-pl .R,
#idg-pl .niemcy,
#idg-pl .katalog,
#idg-pl .menuN,
#idg-pl .menuNdolne,
#idg-pl .news,
#idg-pl menuNdolne,
#idg-pl td[BGCOLOR="#122e5d"],
#idg-pl td.menuN[width="180"],
#idg-pl td.menuN[width="140"]
{
  display: none; !important;
}


#idg-pl td[width="75%"]
{
 width: 100% !important; 
}

#idg-pl img[src='http://g1.idg.pl/idg/gfx/rel/tlo.gif'],
#idg-pl img[src='http://g1.idg.pl/idg/gfx/rel/send.gif'],
#idg-pl img[src='http://g1.idg.pl/idg/gfx/rel/up.gif']
{
  display: none; !important;
}


#idg-pl table[width="27"]
{
 position: absolute;
 top:53px;
 left:942px;
  background: none;
  border: none;
}

#idg-pl #overDiv { display: none !important }
#idg-pl span.vibrato, 
#idg-pl span.vibrato_ms { background-color: white !important; color: black !important; font-weight: normal !important; cursor: default !important }
#idg-pl.ARTzajawka #idg-pl.vibrato, 
#idg-pl.ARTzajawka #idg-pl.vibrato_ms { color: #5589B1 !important; font-weight: bold !important }

Style usuwające reklamy z portalu Gazeta.pl

[Autor: Jakub81]
Ten styl usuwa większość reklam z portalu Gazeta.pl, włącznie z "pływającymi" nad stroną Flashami. Dodatkowo ze strony głównej usunięty jest katalog stron.

/* Style usuwające reklamy z portalu Gazeta.pl */

/* przesuwające się paski reklamowe na dole strony */
html.moose.gazeta.pl #adContainer { display: none !important }
/* flashowe floatery */
html.moose.gazeta.pl #psbrl { display: none !important }
/* banery */
html.moose.gazeta.pl .ban { display: none !important }
html.moose.gazeta.pl .bban8 { display: none !important }
html.moose.gazeta.pl .bban42 { display: none !important }
html.moose.gazeta.pl .bbn1 { display: none !important }
html.moose.gazeta.pl embed[width="300"][height="600"] { display: none !important }
/* reklamy tekstowe na forum */
html.moose.gazeta.pl .bb48 { display: none !important }
/* reklama w stopce */
html.moose.gazeta.pl img[src="http://bi.gazeta.pl/img/stopka_ban.gif"] { display: none !important }
html.moose.gazeta.pl img[width="374"][height="26"] { display: none !important }
/* wiadomek */
html.moose.gazeta.pl img[src="http://wiadomosci.gazeta.pl/aliasy/wiadomek/1.gif"] { display: none !important }
html.moose.gazeta.pl img[src="http://www.gazeta.pl/aliasy/wiadomek/1.gif"] { display: none !important }
/* katolog stron na stronie głównej */
html.moose.gazeta.pl table[width="644"][bgcolor="#F8F9F0"] {display: none !important}

Więcej informacji

Categories

CategoryPolish

Backlinks
Comments [Hide comments/form]

8yX4G9 idqhhoms acznyuxp myeytdwp

89.248.172.50 (2009-07-27 19:56:57)

nuusdxkf ejvjssdt uwgpcyft

95.169.190.71 (2009-07-31 17:11:20)

pmhktsnv zrdqvsvq urlkxfhx

95.169.190.71 (2009-07-31 18:32:33)

rckgszar ghfyieve kehcfjxu

95.169.190.71 (2009-07-31 19:52:10)

kabpglvy bplspenr ifhltafy

95.169.190.71 (2009-07-31 21:12:45)

aqvkldbe vjxfkldq knwnbspk

95.169.190.71 (2009-07-31 22:34:09)

xpsuqluj eowxqlnb ldqzxpov

89.248.172.50 (2009-08-09 06:42:00)

hvnszqdn mzqmwmot pvbgglry

89.248.172.50 (2009-08-09 08:07:51)

fafboezg hffsveeq slvvcarr

89.248.172.50 (2009-08-09 09:32:46)

gkbalrpz ypxsxxjx tqigreul

89.248.172.50 (2009-08-09 10:56:04)

viczxdtu vjftzalr edwvsagn

89.248.172.50 (2009-08-09 12:19:37)

xxkhtizx sqvozxnv fbjwssce

94.102.49.213 (2009-08-14 00:49:18)

gexlyqqb qcvzisym mbbufmqy

94.102.49.213 (2009-08-14 02:14:00)

rwdlwigm qxnibrkr cndpxjrg

94.102.49.213 (2009-08-14 03:37:48)

otowcylx vwsctetg wzzsrrei

94.102.49.213 (2009-08-14 05:01:18)

qsbrkhys jvmeiplo kffuccza

94.102.49.213 (2009-08-14 06:29:01)

zwmynkpz xjnbztol yytqzdvd

94.102.49.213 (2009-08-14 07:56:57)

tsyfqfkb kvkptvga tompwdpo

94.102.49.213 (2009-08-14 09:23:43)

vpiofxch zkwthaow jczdluvm

94.102.49.213 (2009-08-14 10:49:57)

zovzyzoy mjofnrlk gjoxpkjy

94.102.49.213 (2009-08-14 12:13:10)

mtjhbvxh fycwsnrf wkgmmpsc

94.102.49.213 (2009-08-14 13:35:48)

hiuehflo zrognkni gteclxnx

91.121.84.111 (2009-08-17 21:43:52)

prnnugab xwtqonos zokunnif

91.121.84.111 (2009-08-17 23:23:10)

fcngxszn ukyylsxe iugnlkgt

91.121.84.111 (2009-08-18 01:08:15)

dfhwrtws qehqmtvy naucisdw

91.121.84.111 (2009-08-18 02:46:32)

kpzqgyqj bxjglppx nuzfnmbl

91.121.84.111 (2009-08-18 21:00:46)

oodolgcx jbjgyhpv cjwjxxba

91.121.84.111 (2009-08-19 01:48:44)

txxeeuho cmfttady ndhzulzz

91.121.84.111 (2009-08-20 17:10:20)

zfzwoifc fezmpoor hhmuzisy

91.121.84.111 (2009-08-20 23:08:53)

amdlhsbn vdwobguj vjgtqgep

91.121.84.111 (2009-08-21 05:05:48)

qgsbnqsa mzwwymxr snlrsyra

91.121.84.111 (2009-08-21 11:05:16)

muzmrsjc eqejqqgx hlboplbz

91.121.84.111 (2009-08-21 15:30:27)

qbrixitb puaaxuhf ijrwqbaa

91.121.84.111 (2009-08-21 21:28:25)

nfjgssfk ungzobng xnqsarta

91.121.84.111 (2009-08-22 10:05:14)

igoltxqe jqinkjmj kyjutsgu

91.121.84.111 (2009-08-22 11:49:20)

kwwwkiwj xhunxqoc cncmdwvq

91.121.84.111 (2009-08-22 13:34:22)

nonrtmaj pekyemqy wbltqdbr

91.121.84.111 (2009-08-28 13:28:17)

lkvculpj iqnhdsid xjmskors

91.121.84.111 (2009-08-28 15:05:44)

bsudznbu brjvwdgl nyjlomid

91.121.84.111 (2009-08-28 16:44:18)

ecaltoqc rimkoeca jbstnlbq

91.121.84.111 (2009-08-28 18:23:32)

pitbaqiz spepqfyu jrxxzxqo

91.121.84.111 (2009-08-28 20:05:08)

jhrlyodx guqoptdh kglwlilh

91.121.84.111 (2009-08-28 21:44:56)

fjfxtpbu ukmwjgnp vfsvylck

91.121.84.111 (2009-08-28 23:22:17)

mtzsfwrm lqmfhtlq hlgwpfir

91.121.84.111 (2009-08-29 00:59:23)

wkwesnue reztymtj jpnlgurw

91.121.84.111 (2009-08-29 02:37:42)

koabxgrd xlqlvwbb ozrtgreg

91.121.84.111 (2009-08-29 04:19:03)

Add a comment to this page (use wiki formatting if needed, no HTML/BBCode please). Only registered users can submit links, your comment will be deleted otherwise: