Kaip pataisyti nedidelius nemalonumus internete naudojant stilingą [„Firefox“ ir „Chrome“]

Kaip pataisyti nedidelius nemalonumus internete naudojant stilingą [„Firefox“ ir „Chrome“]

Interneto dizainerių darbas yra beveik neįmanomas. Jie turi sugalvoti vieną dizainą, kuris patiks visiems. Kalbėdami apie tokią paslaugą kaip „Gmail“, kuria naudojasi daugybė milijonų žmonių visame pasaulyje, tikrai galite atsisakyti „beveik“ dalies - tai tiesiog neįmanoma. Net jei daugumai žmonių patiks pertvarkymas, visada atsiras vartotojų, kuriems nauja išvaizda tikrai nepatinka.





Kartais šių vartotojų pakanka, kad priverstų įmonę atsitraukti, kaip neseniai „Google“ padarė naudodami „Gmail“ piktogramos mygtukus. Bet ką daryti, jei kažkas yra tu tikrai nekenčiu, o įmonė to nekeičia? Ar tu amžinai įstrigęs? Naudotojų stilių dėka tokias problemas galite išspręsti patys.



Pristatome stilingą

„Stylish“ yra nemokamas priedas, skirtas abiem „Firefox“ ir „Chrome“ , ir tai leidžia padaryti kažką gana stebuklingo - pritaikyti savo stilių tinklalapio elementams. Net jei nesate žiniatinklio kūrėjas ir niekada gyvenime neparašėte CSS, tai yra daug lengviau, nei atrodo. Galite naudoti „Stylish“, kad visiškai pakeistumėte svetaines (kaip aš jums parodysiu kitame skyriuje), bet dar svarbiau, kad galite naudoti „Stylish“, kad per kelias minutes išspręstumėte nedidelius nemalonumus.



Pavyzdžiui, turėjau problemų dėl numatytojo šrifto dydžio „Gmail“. Sąsaja buvo gera - nenorėjau priartinti (Ctrl +) naršyklėje, nes tai padidintų visų sąsajos elementų dydį ir būtų tikrai negraži. Aš tiesiog norėjau, kad pranešimo šriftas būtų šiek tiek didesnis.

Su „Stylish“ tai buvo tikrai paprasta, ir aš jums parodysiu, kaip tai padaryti. Tačiau prieš pradėdami kurti savo vartotojo stilių, pakalbėkime apie kitų žmonių darbo panaudojimą.



UserStyles.org

Jei kažkas nervina nervus, visiškai įmanoma, kad nesate vieni. UserStyles.org yra svetainė, leidžianti vartotojams dalytis savo sukurtais stiliais. Viršuje galite pamatyti stilių ( Pridėkite etikečių prie įrankių juostos piktogramų ) rekomendavo „MakeUseOf“ komentatorius RandyN, atsakydamas į mūsų istoriją apie „Gmail“ piktogramų mygtukus. Šis stilius leidžia išsaugoti piktogramas, bet pridėti teksto etikečių - to neleidžia „Google“.

„UserStyles.org“ yra puikus, bet nėra tobulas. Kai kurie dizainai bando padaryti per daug (visiškai pakeisti svetainės išvaizdą), o kai kurie yra skirti senoms svetainių versijoms ir dabar yra sugedę. Jei bandote pataisyti ką nors mažo ir negalite jo rasti „UserStyles.org“, galbūt geriausias būdas tai padaryti yra patiems.



Sukurkite savo paprastą vartotojo stilių

Norėdami sukurti savo vartotojo stilių, pirmiausia turite žinoti, kokį puslapio elementą bandote pakeisti, o tada - kokį pakeitimą norite atlikti. Taigi, norėdami pradėti, dešiniuoju pelės mygtuku spustelėkite viską, ką norite pakeisti, ir pasirinkite Tikrinti elementą . Turėtumėte pamatyti kažką panašaus:

„Firefox“ tamsina likusią puslapio dalį ir aplink pasirinktą elementą piešia labai aiškų rėmelį. Virš to elemento yra tekstas, kuriame sakoma div#2d6.ii.gt.adP.adO , yra krūva CSS klasių ir vienas ID (dalis, prasidedanti #). Tai yra selektorius, turintis įtakos šio elemento stiliui. Ekrano apačioje yra naršymo juosta, kuri leidžia pereiti DOM medį “, arba paprasčiau tariant, eikite aukštyn ir žemyn elementų, vedančių į jūsų pasirinktą elementą, hierarchijoje.



Žaidimo pavadinimas yra pasirinkti elementą, kurį norite sukurti, ir padaryti pasirinkimą ne tokį siaurą, kad jis nepaveiktų visko, ką norite paveikti, ir ne tokį platų, kad sujauktų kitus dalykus.

Spustelėjau vieną elementą aukščiau, div.gs , tik todėl, kad man patinka jo pavadinimas (atrodo, kad kažkas nepasikeis per anksti, bet tai yra mano visiškas spėjimas). Tai veikia visą pranešimo sritį. Pasirinkę sritį, kurią norite sukurti, spustelėkite Stilius mygtuką apatiniame dešiniajame kampe, kad atidarytumėte Taisyklės duona:

Žinau, iš pradžių baisu. Tačiau čia matote skirtingas CSS taisykles, turinčias įtakos jūsų pasirinktam elementui, ir čia galite atlikti laikinus pakeitimus ir pamatyti jų poveikį puslapyje realiuoju laiku, jo neperkeldami. Bet ką turėtumėte pakeisti? Spustelėkite Savybės mygtuką ir panaikinkite žymėjimą Tik vartotojo stiliai :

Čia galite pamatyti visą sąrašą visi CSS taisyklės. Galite slinkti sąrašu žemyn, kol rasite taisyklę, atitinkančią tai, ko jums reikia (mūsų atveju šrifto dydis), ir net spustelėkite šalia esančią klaustuką, kad atidarytumėte paaiškinimo puslapį. Taigi, dabar mes žinome, kad norime patobulinti šrifto dydžio ypatybę visiems div elementams, kurių klasė yra „ gs “(parašyta santrumpa kaip div.gs ).

Lieka tik klausimas, kokios norime būti jo vertės. Norėdami tai padaryti, grįžtame į taisyklių sritį ir pradedame žaisti:

40 pikselių gali būti šiek tiek beprotiška, tačiau jūs suprantate bendrą idėją. Žaiskite su tuo ir drąsiai pridėkite kitų savybių, kol gausite tą išvaizdą, kurios siekėte. Nepamirškite uždaryti puslapio, nes jūsų pakeitimai yra ne išsaugota bet kur.

Išsaugokite naują stilių

Kai ši svetainės dalis atrodys taip, kaip norite, laikas ją išsaugoti. Spustelėkite Stilingas piktogramą priedų juostoje ir pasirinkite Parašykite naują stilių . Tada „Stilingas“ norėtų sužinoti, kuriuose puslapiuose jis turėtų taikyti naują stilių - mūsų atveju pasirinkite antrą variantą, mail.google.com . Tada pamatysite šį dialogo langą:

Jau užpildžiau. Akivaizdu, kad pasirinkau stiliaus pavadinimą ir keletą žymių. Tačiau tikri dalykai vyksta pagal kodą: 3 eilutė jau buvo - „Stylish“ įdėjo ją į vietą, kad žinotų, kuriuose puslapiuose stilius taikomas. Bet 5-7 eilutė yra mano. Išanalizuokime juos:

5 eilutė: div.gs { - šią dalį turėtumėte atpažinti. Tai yra elementas, kurį nusprendėme sukurti. Atidarymo petnešos reiškia, kad dabar parašysime kai kurias CSS taisykles. 6 eilutė: šrifto dydis: 20 taškų! svarbu; -tai taisyklė, kurią norime pakeisti (šrifto dydis), po jos nauja apibrėžtis (20 pikselių), o po to-svarbi deklaracija, o tai reiškia, kad „Firefox“ laikysis šios taisyklės, net jei bando nustatyti arčiau teksto esantis elementas šrifto dydį į kitą. 7 eilutė:} - stiliaus apibrėžimo uždarymas.

Tada spustelėkite Peržiūra ir stebėkite savo darbą:

Ir galiausiai, kai pamatysite, kad jis veikia, spustelėkite Sutaupyti.

Tai nėra išsamus vadovas

Puikiai žinau, kad norėdamas išlaikyti šią trumpą pamoką vieno įrašo ribose, turėjau atlikti daugybę šuolių ir šuolių. Jei paklydote, sutikite su mano atsiprašymu. Iš pradžių CSS yra sudėtinga, tačiau tai nėra taip sudėtinga, kai įsisąmoninate - ir tinkinti svetaines vietoje išlieka vienu geriausių būdų mokytis.

Jei kas nors jus supainiojo, paklauskite manęs žemiau ir aš padarysiu viską, kad padėtume.

šaunūs dalykai, kuriuos reikia padaryti su „Tasker“
Dalintis Dalintis „Tweet“ Paštu 5 patarimai, kaip perkrauti „VirtualBox Linux“ mašinas

Pavargote nuo prastų virtualių mašinų našumo? Štai ką turėtumėte padaryti, kad padidintumėte „VirtualBox“ našumą.

Skaityti toliau Susijusios temos
  • Naršyklės
  • Interneto svetainių kūrimas
  • Žiniatinklio valdytojo įrankiai
  • Mozilla Firefox
  • „Google Chrome“
  • Interneto svetainės dizainas
Apie autorių Erezas Zukermanas(Paskelbti 288 straipsniai) Daugiau iš Erez Zukerman

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia