Kako odpraviti majhne nadloge v spletu s stilom [Firefox & Chrome]

Kako odpraviti majhne nadloge v spletu s stilom [Firefox & Chrome]

Spletni oblikovalci imajo skoraj nemogoče delo. Imeti morajo eno obliko, ki bo vsem všeč. Ko govorimo o storitvi, kot je Gmail, ki jo uporablja nešteto milijonov ljudi po vsem svetu, lahko resnično opustite 'skoraj' del - to je preprosto nemogoče. Tudi če je preoblikovanje všeč večini ljudi, se bodo vedno našli uporabniki, ki jim nov videz res ni všeč.





Včasih je teh uporabnikov dovolj, da prisilijo podjetje, da se umakne, kot je to nedavno storil Google z gumbi za ikono Gmail. Kaj pa, če obstaja nekaj tebe res sovraži in ga podjetje ne spremeni nazaj? Ste zaljubljeni v to za vedno? Zahvaljujoč uporabniškim slogom lahko takšne težave odpravite sami.



Predstavljamo Stylish

Stylish je brezplačen dodatek, ki je na voljo tako za Firefox in Chrome in vam omogoča, da naredite nekaj precej čarobnega - uporabite lastne sloge za elemente spletne strani. Tudi če niste spletni razvijalec in v življenju niste napisali niti malo CSS -ja, je to veliko lažje, kot se sliši. S storitvijo Stylish lahko popolnoma preoblikujete spletna mesta (kot vam bom pokazal v naslednjem razdelku), še pomembneje pa je, da lahko v nekaj minutah odpravite majhne težave z orodjem Stylish.





Na primer, imel sem težave s privzeto velikostjo pisave v Gmailu. Vmesnik je bil v redu - z brskalnikom nisem hotel povečati (Ctrl +), ker bi to povečalo velikost vseh elementov vmesnika in bi bilo res grdo. Želel sem samo način, da bi pisavo sporočila nekoliko povečali.

Z Stylish je bilo res preprosto in pokazal vam bom, kako. Toda preden se lotimo ustvarjanja lastnih uporabniških stilov, se pogovorimo o spodbujanju dela drugih ljudi.



UserStyles.org

Če vam gre kaj na živce, je povsem mogoče, da niste sami. UserStyles.org je spletno mesto, ki uporabnikom omogoča skupno rabo slogov, ki so jih ustvarili. Zgoraj lahko vidite slog ( Ikonam orodne vrstice dodajte oznake ) priporoča komentator MakeUseOf RandyN kot odgovor na našo zgodbo o gumbih za ikone Gmail. Ta slog vam omogoča, da obdržite ikone, vendar dodate besedilne oznake - nekaj, kar vam Google ne dovoli.

UserStyles.org je odličen, vendar ni popoln. Nekateri modeli poskušajo narediti preveč (popolnoma spremeniti videz spletnega mesta), nekateri pa so namenjeni starim različicam spletnih mest in so zdaj pokvarjeni. Če poskušate popraviti nekaj malega in tega ne najdete na UserStyles.org, je morda najbolje, da to storite sami.



Ustvarjanje lastnega preprostega uporabniškega sloga

Če želite ustvariti lasten uporabniški slog, morate najprej vedeti, kateri element strani poskušate spremeniti, nato pa kakšno spremembo želite narediti. Če želite začeti, z desno miškino tipko kliknite, kar želite spremeniti, in izberite Preglej element . Morali bi videti nekaj takega:

Firefox zatemni preostanek strani in nariše zelo jasen okvir okoli izbranega elementa. Nad tem elementom besedilo, ki pravi div#2d6.ii.gt.adP.adO , je kup razredov CSS skupaj z enim ID -jem (del, ki se začne z #). To je izbirnik, ki vpliva na slog tega elementa. Na dnu zaslona je navigacijska vrstica, ki vam omogoča, prečkajte drevo DOM 'ali z enostavnejšimi besedami pojdite gor in dol po hierarhiji elementov, ki vodijo do izbranega elementa.



Tukaj je ime igre, da izberete element, ki ga želite oblikovati, in naj izbor ne bo tako ozek, da ne bo vplival na vse, na kar želite vplivati, niti tako širok, da bi pokvaril druge stvari.

Kliknil sem za en element višje, div.gs , samo zato, ker mi je všeč njegovo ime (zdi se kot nekaj, kar se ne bo prehitro spremenilo, vendar je to moja popolna ugibanja). Vpliva na celotno področje sporočil. Ko izberete območje, ki ga želite oblikovati, kliknite gumb Slog gumb v spodnjem desnem kotu, da odprete Pravila kruh:

Vem, sprva je strašljivo. Tu pa vidite različna pravila CSS, ki vplivajo na izbrani element, in tu lahko naredite lastne začasne spremembe in si ogledate njihov vpliv na stran v realnem času, ne da bi jo znova naložili. Kaj pa morate spremeniti? Kliknite na Lastnosti gumb in počistite polje Samo uporabniški slogi :

Tukaj si lahko ogledate celoten seznam vse Pravila CSS. Po seznamu se lahko pomikate navzdol, dokler ne najdete pravila, ki je smiselno za vaše potrebe (velikost pisave v našem primeru), in celo kliknite vprašaj zraven, da odprete stran z razlagami. Zdaj vemo, da želimo prilagoditi lastnost velikosti pisave za vse elemente div, ki imajo razred ' gs '(napisano na kratko kot div.gs ).

Ostaja le vprašanje, kakšno vrednost želimo imeti. Za to se vrnemo na podokno s pravili in se začnemo igrati:

40 pik je morda nekoliko noro, vendar dobite splošno predstavo. Poigrajte se s tem in dodajte vse druge lastnosti, dokler ne dobite želenega videza. Ne zapirajte strani, ker so vaše spremembe takšne ne shranjeno kjer koli.

Shranite svoj novi slog

Ko imate ta del spletnega mesta videti tako, kot si želite, je čas, da ga shranite. Kliknite na Eleganten ikono v vrstici z dodatki in izberite Napišite nov slog . Stylish bi potem želel vedeti, na katerih straneh bi moral uporabiti nov slog - v našem primeru izberite drugo možnost, mail.google.com . Nato boste videli to pogovorno okno:

Sem ga že napolnil. Očitno sem izbral ime in nekaj oznak za slog. Toda resnične stvari se dogajajo v kodi: vrstica 3 je že bila tam - Stylish jo je postavil tako, da bo vedela, na katerih straneh slog velja. Toda vrstica 5-7 je moja. Analizirajmo jih:

Vrstica 5: div.gs { - ta del bi morali prepoznati. To je element, ki smo se ga odločili stilizirati. Začetni oklepaj pomeni, da bomo zdaj napisali nekaj pravil CSS. 6. vrstica: font-size: 20px! important; -to je pravilo, ki ga želimo spremeniti (velikost pisave), ki mu sledi nova definicija (20 slikovnih pik), nato pa še pomembna deklaracija, kar pomeni, da bo Firefox upošteval to pravilo, tudi če želi element, ki je bližje besedilu, nastaviti velikost pisave na nekaj drugega. Vrstica 7:} - zapiranje definicije sloga.

Nato kliknite Predogled in se čudite svojemu delu:

In končno, ko vidite, da deluje, kliknite Shrani.

To ni popoln vodnik

Zavedam se, da sem za to kratko vadnico moral ostati v mejah ene same objave, zato sem moral narediti kar nekaj skokov in skokov. Če ste bili na poti zmedeni, sprejmite moje opravičilo. CSS je sprva težavno, vendar ni tako zapleteno, ko se tega naučite - lokalno prilagajanje spletnih mest pa ostaja eden najboljših načinov za učenje.

Če vas je kaj zmotilo, me vprašajte spodaj in potrudil se bom, da vam pomagam.

kako nitro povečati strežnik
Deliti Deliti Cvrkutati E-naslov 5 nasvetov za polnjenje vaših strojev VirtualBox Linux

Ste naveličani slabe zmogljivosti, ki jo ponujajo virtualni stroji? Tukaj je tisto, kar morate storiti za povečanje zmogljivosti VirtualBox.

Preberite Naprej Sorodne teme
  • Brskalniki
  • Spletni razvoj
  • Orodja za spletne skrbnike
  • Mozilla Firefox
  • Google Chrome
  • Oblikovanje spletnih strani
O avtorju Erez Zukerman(288 objavljenih člankov) Več od Ereza Zukermana

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite