Jak opravit malé nepříjemnosti na webu stylově [Firefox a Chrome]

Jak opravit malé nepříjemnosti na webu stylově [Firefox a Chrome]

Weboví designéři mají téměř nemožnou práci. Potřebují vymyslet jeden design, který potěší každého. Když mluvíte o službě, jako je Gmail, kterou používá bezpočet milionů lidí po celém světě, můžete opravdu vynechat „téměř“ část - je to prostě nemožné. I když se většině lidí redesign líbí, vždy se najdou uživatelé, kterým se nový vzhled opravdu nelíbí.





Někdy je těchto uživatelů dost na to, aby donutily společnost ustoupit, jako to nedávno udělal Google s tlačítky ikon Gmailu. Ale co když je něco, co vy opravdu nenávidíte a společnost to nezmění zpět? Trváte to navždy? Díky uživatelským stylům můžete takové problémy vyřešit sami.



Představujeme stylově

Stylish je bezplatný doplněk dostupný jak pro Firefox a Chrome , a to vám umožní udělat něco docela kouzelného - použít vlastní styly na prvky webových stránek. I když nejste webový vývojář a nikdy jste v životě nenapsali trochu CSS, je to mnohem jednodušší, než to zní. Stylish můžete použít k úplné transformaci webových stránek (jak vám ukážu v další části), ale co je ještě důležitější, můžete použít Stylish k opravě drobných nepříjemností během několika minut.





Měl jsem například problém s výchozí velikostí písma v Gmailu. Rozhraní bylo v pořádku - nechtěl jsem pomocí prohlížeče zvětšovat (Ctrl +), protože by se tím zvětšila velikost všech prvků rozhraní a bylo by to opravdu ošklivé. Chtěl jsem jen způsob, jak trochu zvětšit písmo zprávy.

Se Stylishem to bylo opravdu jednoduché a já vám ukážu, jak na to. Než se však podíváme na vytváření vlastních uživatelských stylů, pojďme si promluvit o využití práce jiných lidí.



UserStyles.org

Pokud vám něco leze na nervy, je docela možné, že nejste sami. UserStyles.org je web, který umožňuje uživatelům sdílet styly, které vytvořili. Nahoře vidíte styl ( Přidejte štítky k ikonám panelu nástrojů ) doporučil komentátor MakeUseOf RandyN v odpovědi na náš příběh o tlačítkách ikon Gmailu. Tento styl vám umožňuje ponechat ikony, ale přidat textové štítky - něco, co vám Google nedovolí.

UserStyles.org je skvělý, ale není dokonalý. Některé z návrhů se snaží udělat příliš mnoho (zcela změnit vzhled webových stránek) a některé jsou pro staré verze webových stránek a jsou nyní nefunkční. Pokud se pokoušíte opravit něco malého a nemůžete to najít na UserStyles.org, možná bude nejlepší, když to uděláte sami.



Vytvoření vlastního jednoduchého uživatelského stylu

Abyste si vytvořili svůj vlastní uživatelský styl, musíte nejprve vědět, jaký prvek stránky se pokoušíte změnit, a poté, jakou změnu chcete provést. Chcete-li tedy začít, klikněte pravým tlačítkem na cokoli, co chcete změnit, a vyberte Zkontrolovat prvek . Měli byste vidět něco takového:

Firefox ztmaví zbytek stránky a kolem prvku, který jste vybrali, vykreslí velmi jasný rámeček. Nad tímto prvkem text, který říká div#2d6.ii.gt.adP.adO , je spousta tříd CSS spolu s jedním ID (část, která začíná na #). Toto je volič, který ovlivňuje styl tohoto prvku. Ve spodní části obrazovky je navigační panel, který vám umožňuje procházet stromem DOM “, nebo jednodušeji řečeno, jděte nahoru a dolů v hierarchii prvků vedoucích k prvku, který jste vybrali.



Název hry zde je vybrat prvek, který chcete stylizovat, a zajistit, aby výběr nebyl tak úzký, aby neovlivňoval vše, co chcete ovlivnit, ani nebyl tak široký, aby zkazil další věci.

Klikl jsem o jeden prvek výše, div.gs , jen proto, že se mi líbí jeho název (vypadá to jako něco, co se příliš brzy nezmění, ale to je z mé strany úplný odhad). Ovlivňuje celou oblast zpráv. Jakmile je vybrána oblast, kterou chcete upravit, klikněte na Styl v pravém dolním rohu otevřete Pravidla chléb:

Vím, ze začátku je to děsivé. Ale právě zde vidíte různá pravidla CSS, která ovlivňují vámi vybraný prvek, a zde můžete provádět vlastní dočasné úpravy a sledovat jejich dopad na stránku v reálném čase, aniž byste ji museli znovu načítat. Co byste ale měli změnit? Klikněte na Vlastnosti tlačítko a zrušte zaškrtnutí Pouze uživatelské styly :

Zde můžete vidět kompletní seznam Všechno Pravidla CSS. Můžete procházet seznamem dolů, dokud nenajdete pravidlo, které dává smysl tomu, co potřebujete (velikost písma v našem případě), a dokonce kliknutím na otazník vedle něj otevřete stránku s vysvětlením. Takže teď víme, že chceme vyladit vlastnost velikosti písma pro všechny prvky div, které mají třídu ' gs “(napsáno zkráceně jako div.gs ).

Jedinou otázkou zůstává, jakou chceme mít její hodnotu. Za tímto účelem se vrátíme do podokna Pravidla a začneme hrát:

40 pixelů je možná trochu šílených, ale máte obecnou představu. Hrajte si s tím a klidně přidejte další vlastnosti, dokud nezískáte vzhled, po kterém jste toužili. Stránku určitě nezavírejte, protože vaše změny jsou ne uloženo kdekoli.

Uložení vašeho nového stylu

Jakmile budete mít tuto část webu, aby vypadala přesně tak, jak chcete, je čas ji uložit. Klikněte na Stylový na liště doplňků a vyberte Napište nový styl . Stylový by pak chtěl vědět, na jakých stránkách by měl nový styl použít - v našem případě vyberte druhou možnost, mail.google.com . Dále uvidíte toto dialogové okno:

Už jsem to vyplnil. Očividně jsem pro styl vybral jméno a nějaké značky. Ale skutečné věci se dějí v kódu: Řádek 3 už tam byl - Stylish to zavedl, aby věděl, na jakých stránkách styl platí. Ale řada 5-7 je moje. Pojďme je analyzovat:

Řádek 5: div.gs { - tuto část byste měli uznat. Toto je prvek, který jsme se rozhodli stylizovat. Úvodní závorka znamená, že nyní napíšeme některá pravidla CSS. Řádek 6: velikost písma: 20px! důležité; -to je pravidlo, které chceme změnit (velikost písma), následuje jeho nová definice (20 pixelů) a poté deklarace! Important, což znamená, že Firefox by se řídil tímto pravidlem, i když se pokusí nastavit prvek blíže k textu velikost písma na něco jiného. Řádek 7:} - zavření definice stylu.

Dále klikněte na Náhled a obdivujte svou práci:

A nakonec, jakmile uvidíte, že to funguje, klikněte Uložit.

Toto není úplný průvodce

Jsem si dobře vědom toho, že abych udržel tento krátký návod v rámci jednoho příspěvku, musel jsem udělat několik skoků a skoků. Pokud jste byli po cestě zmatení, přijměte moji omluvu. CSS je zpočátku ošidné, ale není tak složité, jakmile se v něm zorientujete - a přizpůsobení webových stránek místně zůstává jedním z nejlepších způsobů, jak se učit.

Pokud vás něco zmátlo, zeptejte se mě níže a já se pokusím pomoci.

soubor je otevřený v systému nelze odstranit
Podíl Podíl tweet E-mailem 5 tipů, jak přeplnit své počítače VirtualBox Linux

Jste unaveni špatným výkonem, který nabízejí virtuální stroje? Zde je to, co byste měli udělat, abyste zvýšili výkon svého VirtualBoxu.

Číst dále Související témata
  • Prohlížeče
  • Vývoj webu
  • Nástroje pro webmastery
  • Mozilla Firefox
  • Google Chrome
  • Webový design
O autorovi Erez Zukerman(288 publikovaných článků) Více od Ereze Zukermana

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru