Facebook hack Stylish használatával

Minap találtam egy alkalmazást/módszert arra, hogy lehet átalakítani mások lapját tartósan a Firefox-omban.. a Facebook kapcsán jött elő, de persze bármelyik lapon lehet alkalmazni.

Persze nem szerverszinten megy a „hack”, csak a monitoromon való megjelenésben történnek változások, lokálisan.

Most ezért biztos páran meg fognak kövezni, de szerintem a default Facebook kinézet egyszerűen rossz, nehezen olvasható, úgy kell bogarásznom a tartalmat, hogy kiszedjem a számomra hasznos részeket. Hasznos alatt értem a bejegyzéseket és a rájuk adott kommenteket, a képeket, a többi rész – mint a sok idióta kvízjáték és többi baromság – teljesen hidegen hagy, sőt megkockáztatom: csak idegesít.

Így hát örömmel vettem észre a Stylish nevű extension-t Firefox alá, ami segítségével 1-1 honlaphoz saját CSS részleteket fűzhetek hosszabb távon is. Hasonló megoldás mint pl. a Firebug-ban lévő CSS módosítás vagy mint a Web Developer Toolbar-ban lévő funkció, a különbség „mindössze” annyi, hogy a Stylish-ban ezeket a változtatásokat el is tudom menteni.

Stylish

A következő pár lépésben azt mutatom meg, hogy lehet felvenni és beállítani az általam írt módosítást amivel a leírás végén lévő „kinézetet” fogod megkapni. Persze akár teljesen újat is írhatsz, vagy módosíthatod az enyémet, illetve a neten számtalan mások által írt ilyen CSS is van, amit 1 kattintással lehet telepíteni a Stylish-odba.

… de most nézzük a pár lépést amire fentebb utaltam:

Stylish letöltése, telepítése

Letöltés: Stylish :: Firefox Add-ons

Miután letöltötted, telepítetted a Stylish-t és újraindítottad a Firefox-odat, a felső menüben érdemes kitenni az ikonját:

Beállítás

A képen látható ikonra kattintva keresd meg a „Manage Styles…” pontot és kattints rá

Új stílus felvétele

A lentebbi képen is látható, hogy a „Write…” menüpontva kattinva fel lehet venni egy új stílust, annak címet és tartalmat adva.

A címnek bármit be lehet állítani, a tartalomnak én ezt adtam meg:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@namespace url(http://www.w3.org/1999/xhtml);
 
@-moz-document domain("facebook.com") {
 
div#pymk_hp_box div.UIHomeBox_Top { display: none; }
div#home_sidebar { background-color: #ECEFF5; margin: -10px 0px 0px 5px; padding: 0px; }
div#pymk_hp_box div.UIHomeBox_Content { display: none; }
div.UIHomeBox_Sponsored div.UIHomeBox_Top { display: none; }
div.UIHomeBox_Sponsored div.UIHomeBox_Content { display: none; }
div#pymk_hp_box { display: none; margin-bottom: 0px !important; margin-top: 0px !important; }
div#home_filter_list { display: none; }
div.UIIntentionalStream_Content div.UIStream { width: 660px; }
div.UIIntentionalStory_Body .UIIntentionalStory_Message { color: red !important; }
h3.UIIntentionalStory_Message span.UIIntentionalStory_Names { color: red !important; }
}

Ha a facebook.com van közben megnyitva, akkor a „Preview” gombra kattintva egyből ellenőrizni is lehet, hogy mentés után hogy fog kinézni a site. Ha később módosítasz ezen a tartalmon, akkor szintén ezzel a gombbal lehet ellenőrizni, hogy mi lesz a hatása.

Facebook hacked

A lentebbi képen látható, hogy fenti módosítás eredménye mi lesz. A szövegek pirosra váltanak és kiemelkednek az összes többi szöveg közül, a bal oldali oszlop eltűnt, a jobb oldalon is felső rész tartalma meg lett nyirbálva és maradt a galéria.
Az eredmény nem mondhatni, hogy szemkápráztató lenne, a jövőben még tervezem tovább írni, de ez kb 5-10 perc eredménye ami jelenleg időhiány miatt több mint elégséges a számomra.

További stílusok a neten

Ha a fenti stílus nem tetszik és nem is szeretnéd magad megírni az újat, akkor lehetőség van a neten mások által írt kódok közül is választani. Erre az alábbi lapon van lehetőség:

Userstyles gyűjtemény: Site styles | userstyles.org

Ha kimondottan Facebook stílusokat keresel, akkor egyből mehet ide is: Styles for ‘facebook.com’ | userstyles.org

userstyles.org használata

Az egyes oldalakon keresd a „Show code„-t vagy a „Load into Stylish” gombot. Előbbi megmutatja a kódot amit manuálisan tudsz felvenni a saját Stylish-odba, utóbbi pedig egyből telepíti és aktiválja is (szerintem ez kényelmesebb, utólag úgyis tudod módosítani).

Mindenkinek jó szórakozást hozzá és ha írtok ilyen kódokat, nyugodtan postoljátok be ide bejegyzésként! :)