Hogyan javítsunk ki apró bosszúságokat az interneten stílusosan [Firefox és Chrome]

Hogyan javítsunk ki apró bosszúságokat az interneten stílusosan [Firefox és Chrome]

A webes tervezőknek szinte lehetetlen dolguk van. Ki kell dolgozniuk egy olyan dizájnt, amely mindenkinek tetszik. Amikor egy olyan szolgáltatásról beszélünk, mint a Gmail, amelyet számtalan millió ember használ a világ minden tájáról, akkor valóban elengedheti a „majdnem” részt - ez egyszerűen lehetetlen. Még akkor is, ha az újratervezést a legtöbb ember kedveli, mindig lesznek olyan felhasználók, akiknek nagyon nem tetszik az új megjelenés.





Néha elég sok ilyen felhasználó kényszeríti a céget a visszalépésre, mint a Google a közelmúltban tette a Gmail ikongombokkal. De mi van, ha van valami benned igazán gyűlölet, és a cég nem változtat rajta? Örökre ragadtál vele? A felhasználói stílusoknak köszönhetően ezeket a problémákat saját maga is kijavíthatja.



Bemutatjuk a Stylish -t

A Stylish egy ingyenes kiegészítő, amely mindkettőhöz elérhető Firefox és Króm , és lehetővé teszi valami egészen varázslatos cselekvést - alkalmazza saját stílusait a weboldal elemeire. Még ha nem is webfejlesztő, és soha életében nem írt egy csomó CSS ​​-t, ez sokkal könnyebb, mint amilyennek hangzik. A Stylish segítségével teljesen átalakíthatja a webhelyeket (amint azt a következő részben megmutatom), de még ennél is fontosabb, hogy a Stylish segítségével pillanatok alatt kijavíthatja az apró bosszúságokat.





Például problémám volt a Gmail alapértelmezett betűméretével. A kezelőfelület rendben volt - nem akartam nagyítani (Ctrl +) a böngészőmmel, mert ez megnövelné az összes interfész elem méretét, és nagyon csúnya lenne. Csak azt akartam, hogy az üzenet betűtípusa kicsit nagyobb legyen.

A Stylish segítségével nagyon egyszerű volt, és megmutatom, hogyan. Mielőtt azonban saját felhasználói stílusok létrehozását vizsgálnánk, beszéljünk mások munkájának kihasználásáról.



UserStyles.org

Ha valami az idegeire megy, akkor teljesen lehetséges, hogy nem vagy egyedül. UserStyles.org egy olyan webhely, amely lehetővé teszi a felhasználók számára az általuk létrehozott stílusok megosztását. Fent láthat egy stílust ( Címkék hozzáadása az eszköztár ikonjaihoz ) - ajánlotta a MakeUseOf kommentelője, RandyN, válaszul a Gmail ikongombjairól szóló történetünkre. Ez a stílus lehetővé teszi az ikonok megtartását, de szöveges címkék hozzáadását - ezt a Google nem teszi lehetővé.

A UserStyles.org nagyszerű, de nem tökéletes. A tervek egy része túl sokat próbál tenni (teljesen megváltoztatja a webhely megjelenését), mások pedig a weboldalak régi verzióihoz készültek, és most nem működnek. Ha valami apró dolgot próbál kijavítani, de nem találja a UserStyles.org webhelyen, akkor talán a legjobb, ha önállóan csinálja.



Saját egyszerű felhasználói stílus létrehozása

Saját felhasználói stílus létrehozásához először tudnia kell, hogy az oldal melyik elemét szeretné megváltoztatni, majd milyen változtatásokat szeretne végrehajtani. Tehát a kezdéshez kattintson a jobb gombbal a módosítani kívánt elemre, és válassza ki Elem vizsgálata . Valami ilyesmit kellene látnia:

A Firefox elsötétíti az oldal többi részét, és nagyon világos keretet rajzol a kiválasztott elem köré. Az elem felett a szöveg, amely azt mondja div#2d6.ii.gt.adP.adO , egy csomó CSS ​​osztály, valamint egy azonosító (a #-al kezdődő rész). Ez a választó befolyásolja az elem stílusát. A képernyő alján található egy navigációs sáv, amely lehetővé teszi, hogy keresztezze a DOM fát ', vagy egyszerűbben fogalmazva, lépjen felfelé és lefelé a kiválasztott elemhez vezető elemek hierarchiájában.



A játék neve itt az, hogy válassza ki a stílusolni kívánt elemet, és ne legyen olyan szűk a választék, hogy ne befolyásolja mindazt, amit befolyásolni szeretne, és ne legyen olyan széles, hogy más dolgokat is összezavarjon.

Egy elemmel feljebb kattintottam, div.gs , csak azért, mert tetszik a neve (olyan dolognak tűnik, ami nem fog túl hamar megváltozni, de ez egy teljes találgatás a részemről). A teljes üzenetterületet érinti. Miután kiválasztotta a formázni kívánt területet, kattintson a gombra Stílus gombot a jobb alsó sarokban a Szabályok kenyér:

Tudom, elsőre ijesztő. De itt láthatja a különböző CSS-szabályokat, amelyek befolyásolják a kiválasztott elemet, és itt végezheti el saját ideiglenes módosításait, és valós időben, újratöltés nélkül láthatja azok hatását az oldalon. De min kellene változtatni? Kattints a Tulajdonságok gombot, és törölje a jelölést Csak felhasználói stílusok :

Itt láthatja a teljes listát összes CSS szabályok. Görgethet lefelé a listában, amíg meg nem talál egy szabályt, amely értelmes ahhoz, amire szüksége van (esetünkben a betűméret), sőt a magyarázó oldal megnyitásához kattintson a mellette lévő kérdőjelre is. Tehát most már tudjuk, hogy a betűméret tulajdonságot módosítani szeretnénk minden div elemnél, amelyek osztálya ' gs '(rövidítve írva, mint div.gs ).

Már csak az a kérdés marad, hogy mi akarjuk az értékét. Ehhez térjünk vissza a Szabályok ablakra, és kezdjünk el játszani:

A 40 képpont kissé őrült lehet, de megérti az általános elképzelést. Játsszon ezzel, és nyugodtan adjon hozzá más ingatlanokat, amíg meg nem kapja azt a kinézetet, amelyre vágyik. Ügyeljen arra, hogy ne zárja be az oldalt, mert a módosítások nem mentve bárhol.

Az új stílus mentése

Miután a webhely ezen része úgy nézett ki, ahogyan szeretné, itt az ideje menteni. Kattints a Elegáns ikont a bővítménysávon, majd válassza a lehetőséget Új stílus írása . A Stylish ekkor tudni szeretné, hogy mely oldalakon alkalmazza az új stílust - esetünkben válassza a második lehetőséget, mail.google.com . Ezután ezt a párbeszédpanelt fogja látni:

Már feltöltöttem. Nyilvánvalóan kiválasztottam egy nevet és néhány címkét a stílushoz. De az igazi dolgok a kódon belül történnek: a 3. sor már ott volt - Stílusos helyezze a helyére, hogy tudja, milyen oldalakon érvényes a stílus. De az 5-7 sor az enyém. Elemezzük őket:

5. sor: div.gs { - ezt a részt fel kell ismerned. Ez az az elem, amelyet a stílus mellett döntöttünk. A nyitó zárójel azt jelenti, hogy most néhány CSS -szabályt írunk. 6. sor: font-size: 20px! fontos; -ezt a szabályt szeretnénk megváltoztatni (betűméret), majd az új definícióját (20 képpont), majd egy! Fontos nyilatkozatot, ami azt jelenti, hogy a Firefox akkor is engedelmeskedik ennek a szabálynak, ha a szöveghez közelebb lévő elem megpróbál beállítani a betűméretet valami másra. 7. sor:} - zárja a stílusdefiníciót.

Ezután kattintson az Előnézet gombra, és csodálja meg munkáját:

És végül, ha látja, hogy működik, kattintson Megment.

Ez nem teljes útmutató

Tisztában vagyok vele, hogy ahhoz, hogy ezt a rövid bemutatót egyetlen bejegyzés keretein belül tartsam, számos ugrást és ugrást kellett megtennem. Ha zavart volt az úton, fogadja el bocsánatkérésemet. A CSS kezdetben bonyolult, de nem olyan bonyolult, ha ráérez - és a webhelyek személyre szabása továbbra is az egyik legjobb módja a tanulásnak.

Ha megzavart valami, kérdezzen tőlem alább, és mindent megteszek, hogy segítsek.

hogyan lehet .exe fájlt készíteni
Részvény Részvény Csipog Email 5 tipp a VirtualBox Linux gépek feltöltéséhez

Unod már a virtuális gépek gyenge teljesítményét? Íme, mit kell tennie a VirtualBox teljesítményének növelése érdekében.

Olvassa tovább Kapcsolódó témák
  • Böngészők
  • Webfejlesztés
  • Webmestereszközök
  • Mozilla Firefox
  • Google Chrome
  • Web Design
A szerzőről Erez Zukerman(288 megjelent cikk) Bővebben: Erez Zukerman

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide