Kako ispraviti male smetnje na webu sa stilom [Firefox i Chrome]

Kako ispraviti male smetnje na webu sa stilom [Firefox i Chrome]

Web dizajneri imaju gotovo nemoguć posao. Moraju smisliti jedan dizajn koji će se svidjeti svima. Kad govorite o usluzi poput Gmaila, koju koriste bezbrojni milijuni ljudi diljem svijeta, doista možete ispustiti 'gotovo' dio - to je jednostavno nemoguće. Čak i ako se redizajn svidi većini ljudi, uvijek će biti korisnika kojima se novi izgled zaista ne sviđa.





Ponekad ima dovoljno tih korisnika da natjeraju tvrtku da se povuče, kao što je Google nedavno učinio s gumbima za ikonu Gmail. Ali što ako postoji nešto ti stvarno mrzite, a tvrtka to ne mijenja? Jeste li zauvijek zaglavljeni s tim? Zahvaljujući korisničkim stilovima, sami možete riješiti takve probleme.



Predstavljamo Stylish

Stylish je besplatni dodatak dostupan i za Firefox i Krom , i omogućuje vam da učinite nešto prilično čarobno - primijenite vlastite stilove na elemente web stranice. Čak i ako niste web programer i nikada u životu niste napisali malo CSS -a, ovo je mnogo lakše nego što zvuči. Možete koristiti Stylish za potpunu transformaciju web stranica (kao što ću vam pokazati u sljedećem odjeljku), ali što je još važnije, možete koristiti Stylish za rješavanje malih smetnji u nekoliko minuta.





Na primjer, imao sam problem sa zadanom veličinom fonta u Gmailu. Sučelje je bilo u redu - nisam htio povećati preglednik (Ctrl +) svojim preglednikom, jer bi to povećalo veličinu svih elemenata sučelja i bilo bi zaista ružno. Samo sam htio način da font poruke bude nešto veći.

Uz Stylish, bilo je stvarno jednostavno, a ja ću vam pokazati kako. No, prije nego što pogledamo stvaranje vlastitih korisničkih stilova, razgovarajmo o iskorištavanju rada drugih ljudi.



UserStyles.org

Ako vam nešto ide na živce, sasvim je moguće da niste sami. UserStyles.org je web stranica koja korisnicima omogućuje razmjenu stilova koje su sami stvorili. Iznad možete vidjeti stil ( Dodajte oznake ikonama na alatnoj traci ) preporučio komentator MakeUseOfa RandyN u odgovoru na našu priču o gumbima ikona Gmail. Ovaj stil omogućuje vam zadržavanje ikona, ali dodavanje tekstualnih oznaka - nešto što vam Google ne dopušta.

UserStyles.org je sjajan, ali nije savršen. Neki od dizajna pokušavaju učiniti previše (potpuno promijeniti izgled web stranice), a neki su za stare verzije web stranica i sada su pokvareni. Ako pokušavate popraviti nešto malo i ne možete to pronaći na UserStyles.org, možda je najbolje da to učinite sami.



Stvaranje vlastitog jednostavnog korisničkog stila

Da biste stvorili vlastiti korisnički stil, najprije morate znati koji element stranice pokušavate promijeniti, a zatim koju promjenu želite napraviti. Dakle, za početak kliknite desnom tipkom miša sve što želite promijeniti i odaberite Pregledajte element . Trebali biste vidjeti ovako nešto:

Firefox zatamnjuje ostatak stranice i iscrtava vrlo jasan okvir oko elementa koji ste odabrali. Iznad tog elementa, tekst koji kaže div#2d6.ii.gt.adP.adO , je hrpa CSS klasa, zajedno s jednim ID -om (dio koji počinje s #). Ovo je birač koji utječe na stil ovog elementa. Pri dnu zaslona nalazi se navigacijska traka koja vam omogućuje pređite stablo DOM ', ili jednostavnijim riječima, idite gore -dolje u hijerarhiji elemenata koji vode do elementa koji ste odabrali.



Naziv igre ovdje je odabir elementa koji želite stilizirati i neka odabir ne bude tako uzak da neće utjecati na sve na što želite utjecati, niti toliko širok da bi poremetio druge stvari.

Kliknuo sam jedan element više, div.gs , samo zato što mi se sviđa njegovo ime (čini se kao nešto što se neće promijeniti prerano, ali to je potpuna pretpostavka s moje strane). Utječe na cijelo područje poruke. Nakon što je odabrano područje koje želite stilizirati, kliknite na Stil gumb u donjem desnom kutu za otvaranje Pravila kruh:

Znam, isprva je strašno. Ali ovdje vidite različita CSS pravila koja utječu na element koji ste odabrali, a ovdje možete napraviti vlastite privremene izmjene i vidjeti njihov utjecaj na stranicu u stvarnom vremenu, bez ponovnog učitavanja. Ali što biste trebali promijeniti? Kliknite na Svojstva gumb i poništite odabir Samo korisnički stilovi :

Ovdje možete vidjeti potpuni popis svi CSS pravila. Možete se pomicati prema dolje po popisu dok ne pronađete pravilo koje ima smisla za ono što vam je potrebno (veličina slova u našem slučaju), pa čak i kliknuti upitnik pored njega da biste otvorili stranicu s objašnjenjima. Dakle, sada znamo da želimo prilagoditi svojstvo font-size za sve div elemente koji imaju klasu ' gs '(napisano stenografski kao div.gs ).

Ostaje samo pitanje kakva nam je vrijednost. Za to se vraćamo na okno Pravila i počinjemo se igrati:

40 piksela može biti pomalo ludo, ali stekli ste opću ideju. Poigrajte se s ovim i slobodno dodajte bilo koje drugo svojstvo dok ne dobijete izgled koji ste htjeli. Ne zatvarajte stranicu jer su vaše promjene takve ne spremljeno bilo gdje.

Spremanje vašeg novog stila

Nakon što ovaj dio web stranice izgleda baš onako kako želite, vrijeme je da ga spremite. Kliknite na Stilski na traci s dodacima i odaberite Napišite novi stil . Stylish bi tada htio znati na kojim stranicama bi trebao primijeniti novi stil - u našem slučaju odaberite drugu opciju, mail.google.com . Zatim ćete vidjeti ovaj dijalog:

Već sam ga napunio. Očito sam odabrao ime i neke oznake za stil. No, stvarne stvari događaju se unutar koda: Red 3 je već bio tamo - Stylish ga je postavio tako da zna na kojim stranicama se stil primjenjuje. Ali linija 5-7 su moje. Analizirajmo ih:

Redak 5: div.gs { - ovaj dio biste trebali prepoznati. Ovo je element koji smo odlučili stilizirati. Otvorna zagrada znači da ćemo sada napisati neka CSS pravila. Red 6: font-size: 20px! važno; -to je pravilo koje želimo promijeniti (veličina fonta), nakon čega slijedi njegova nova definicija (20 piksela), a zatim! Važna deklaracija, što znači da će se Firefox pridržavati ovog pravila čak i ako element bliže tekstu pokuša postaviti veličina fonta na nešto drugo.Red 7:} - zatvaranje definicije stila.

Zatim kliknite Pregled i zadivite se svojim radom:

I na kraju, kad vidite da radi, kliknite Uštedjeti.

Ovo nije potpuni vodič

Svjestan sam da sam, kako bih zadržao ovaj kratki vodič u granicama jednog posta, morao napraviti nekoliko skokova i skokova. Ako ste usput bili zbunjeni, prihvatite moju ispriku. CSS je isprva lukav, ali nije toliko kompliciran kad se snađete - a lokalno prilagođavanje web stranica ostaje jedan od najboljih načina za učenje.

Ako vas je nešto zbunilo, pitajte me u nastavku i potrudit ću se pomoći.

najbolji način kupovine iPhonea
Udio Udio Cvrkut E -pošta 5 savjeta za nadopunu vaših VirtualBox Linux strojeva

Umorni ste od loših performansi koje nude virtualni strojevi? Evo što biste trebali učiniti kako biste povećali performanse VirtualBox -a.

Pročitajte Dalje Povezane teme
  • Preglednici
  • Web razvoj
  • Alati za webmastere
  • Mozilla Firefox
  • Google Chrome
  • Web dizajn
O autoru Erez Zukerman(288 objavljenih članaka) Više od Ereza Zukermana

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu