Ako opraviť malé nepríjemnosti na webe štýlovo [Firefox a Chrome]

Ako opraviť malé nepríjemnosti na webe štýlovo [Firefox a Chrome]

Weboví dizajnéri majú takmer nemožnú prácu. Musia vymyslieť jeden dizajn, ktorý poteší každého. Keď hovoríte o službe ako Gmail, ktorú používa nespočetné množstvo miliónov ľudí na celom svete, môžete skutočne vynechať „takmer“ časť - je to jednoducho nemožné. Aj keď sa väčšine ľudí páči redizajn, vždy sa nájdu používatelia, ktorým sa nový vzhľad skutočne nepáči.





Niekedy je týchto používateľov dosť na to, aby prinútili spoločnosť ustúpiť, ako to nedávno urobil Google pomocou tlačidiel ikon Gmailu. Ale čo keď je niečo vy naozaj nenávisť a spoločnosť to nezmení späť? Ostali ste pri tom navždy? Vďaka štýlom používateľov môžete takéto problémy vyriešiť sami.



Predstavujeme štýlovo

Stylish je bezplatný doplnok, ktorý je k dispozícii pre Firefox a Chrome , a umožní vám to urobiť niečo dosť magické - použiť vlastné štýly na prvky webových stránok. Aj keď nie ste webový vývojár a nikdy ste v živote nenapísali trochu CSS, je to oveľa jednoduchšie, ako to znie. Štýlový môžete použiť na úplnú transformáciu webových stránok (ako vám ukážem v nasledujúcej časti), ale čo je dôležitejšie, môžete použiť štýlový spôsob, ako opraviť malé nepríjemnosti v priebehu niekoľkých minút.





Napríklad som mal problém s predvolenou veľkosťou písma v Gmaile. Rozhranie bolo v poriadku - nechcel som v prehliadači približovať (Ctrl +), pretože by sa tým zväčšila veľkosť všetkých prvkov rozhrania a bolo by to skutočne škaredé. Len som chcel spôsob, ako trocha zväčšiť písmo správy.

So Stylishom to bolo skutočne jednoduché a ja vám ukážem, ako na to. Ale skôr, ako sa pozrieme na vytváranie vlastných používateľských štýlov, porozprávajme sa o využití práce iných ľudí.



UserStyles.org

Ak vám niečo lezie na nervy, je celkom možné, že nie ste sami. UserStyles.org je webová stránka, ktorá používateľom umožňuje zdieľať štýly, ktoré vytvorili. Hore vidíte štýl ( Pridajte štítky k ikonám panela s nástrojmi ) odporúča komentátor MakeUseOf RandyN v odpovedi na náš príbeh o tlačidlách ikon Gmailu. Tento štýl vám umožní ponechať ikony, ale pridať textové štítky - niečo, čo vám Google nedovolí.

UserStyles.org je skvelý, ale nie je dokonalý. Niektoré z návrhov sa pokúšajú urobiť príliš veľa (úplne zmeniť vzhľad webovej stránky) a niektoré sú pre staré verzie webových stránok a sú teraz nefunkčné. Ak sa pokúšate opraviť niečo malé a nemôžete to nájsť na UserStyles.org, možno je najlepšie, ak to urobíte sami.



Vytvorenie vlastného jednoduchého používateľského štýlu

Ak si chcete vytvoriť vlastný užívateľský štýl, musíte najskôr vedieť, aký prvok stránky sa pokúšate zmeniť, a potom akú zmenu chcete vykonať. Ak chcete začať, kliknite pravým tlačidlom myši na čokoľvek, čo chcete zmeniť, a vyberte Preskúmať prvok . Mali by ste vidieť niečo také:

Firefox ztmaví zvyšok stránky a okolo prvku, ktorý ste vybrali, vykreslí veľmi jasný rámček. Nad týmto prvkom je text, ktorý hovorí div. 2d6.ii.gt.adP.adO , je veľa tried CSS spolu s jedným ID (časť začínajúca sa #). Toto je volič, ktorý ovplyvňuje štýl tohto prvku. V spodnej časti obrazovky je navigačný panel, ktorý vám umožňuje prechádzať stromom DOM “, alebo jednoduchšími slovami, prechádzajte hore a dole v hierarchii prvkov vedúcich k prvku, ktorý ste si vybrali.



Názov hry tu je vybrať prvok, ktorý chcete štylizovať, a aby výber nebol taký úzky, aby neovplyvnil všetko, čo chcete ovplyvniť, ani nebol taký široký, aby to pokazilo ďalšie veci.

Klikol som o jeden prvok vyššie, div.gs , len preto, že sa mi páči jeho názov (vyzerá to ako niečo, čo sa príliš skoro nezmení, ale to je z mojej strany úplný odhad). Ovplyvňuje celú oblasť správ. Akonáhle je vybratá oblasť, ktorú chcete štylizovať, kliknite na Štýl v pravom dolnom rohu otvoríte súbor Pravidlá chlieb:

Viem, na začiatku je to desivé. Tu však vidíte rôzne pravidlá CSS, ktoré ovplyvňujú vybratý prvok, a tu môžete vykonávať vlastné dočasné úpravy a sledovať ich vplyv na stránku v reálnom čase bez toho, aby ste ju museli znova načítať. Čo by ste však mali zmeniť? Kliknite na Vlastnosti tlačidlo a zrušte začiarknutie Iba používateľské štýly :

Tu nájdete kompletný zoznam všetky Pravidlá CSS. Môžete sa posúvať nadol v zozname, kým nenájdete pravidlo, ktoré dáva zmysel tomu, čo potrebujete (veľkosť písma v našom prípade), a dokonca kliknutím na otáznik vedľa neho otvoríte stránku s vysvetlením. Teraz teda vieme, že chceme vylepšiť vlastnosť veľkosti písma pre všetky prvky div, ktoré majú triedu „ gs “(napísané skratkou ako div.gs ).

Jedinou otázkou zostáva, akú chceme mať hodnotu. Za týmto účelom sa vrátime na tablu Pravidlá a začneme hrať:

40 pixelov je možno trochu šialených, ale máte všeobecnú predstavu. Hrajte sa s tým a pokojne pridajte aj ďalšie vlastnosti, kým nedosiahnete požadovaný vzhľad. Stránku určite nezatvárajte, pretože vaše zmeny sú nie uložená kdekoľvek.

Zachráňte svoj nový štýl

Keď budete mať túto časť webu tak, ako by ste chceli, je načase si ju uložiť. Kliknite na Štýlové ikonu na paneli doplnkov a vyberte položku Napíšte nový štýl . Štýlový by potom chcel vedieť, na ktorých stránkach by mal použiť nový štýl - v našom prípade vyberte druhú možnosť, mail.google.com . Ďalej uvidíte toto dialógové okno:

Už som to vyplnil. Očividne som pre názov vybral názov a niekoľko značiek. Skutočné veci sa však dejú v kóde: Riadok 3 tam už bol - Stylish ho umiestnil na miesto, aby vedel, na ktorých stránkach štýl platí. Ale riadok 5-7 je môj. Analyzujme ich:

Riadok 5: div.gs { - túto časť by ste mali poznať. Toto je prvok, ktorý sme sa rozhodli štylizovať. Úvodná zátvorka znamená, že teraz napíšeme niekoľko pravidiel CSS. Riadok 6: veľkosť písma: 20 pixlov! dôležité; -to je pravidlo, ktoré chceme zmeniť (veľkosť písma), za ktorým nasleduje nová definícia (20 pixelov) a potom deklarácia! Important, čo znamená, že Firefox by sa riadil týmto pravidlom, aj keď sa ho pokúša nastaviť prvok bližšie k textu. veľkosť písma na niečo iné. Riadok 7:} - zatvorenie definície štýlu.

Potom kliknite na položku Ukážka a obdivujte svoju prácu:

A nakoniec, akonáhle uvidíte, že to funguje, kliknite Uložiť.

Toto nie je kompletný sprievodca

Som si dobre vedomý toho, že aby som udržal tento krátky návod v medziach jedného príspevku, musel som urobiť niekoľko skokov a skokov. Ak ste boli po ceste zmätení, prijmite moje ospravedlnenie. CSS je spočiatku zložitý, ale nie je to také zložité, keď sa v tom zorientujete - a lokálne prispôsobenie webových stránok zostáva jedným z najlepších spôsobov, ako sa učiť.

Ak ste boli niečím zmätení, opýtajte sa ma nižšie a ja sa pokúsim pomôcť.

ľavé kliknutie myši nefunguje
zdieľam zdieľam Tweet E -mail 5 tipov, ako nabiť svoje počítače VirtualBox Linux

Ste unavení z nízkeho výkonu, ktorý ponúkajú virtuálne počítače? Tu je to, čo by ste mali urobiť, aby ste zvýšili výkon svojho VirtualBoxu.

Čítajte ďalej Súvisiace témy
  • Prehliadače
  • Vývoj webových aplikácií
  • Nástroje správcu webu
  • Mozilla Firefox
  • Google Chrome
  • Vzhľad stránky
O autorovi Erez Zukerman(288 publikovaných článkov) Viac od Ereza Zukermana

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber