Hvordan fikse små irritasjoner på nettet med stilig [Firefox og Chrome]

Hvordan fikse små irritasjoner på nettet med stilig [Firefox og Chrome]

Webdesignere har en nesten umulig jobb. De trenger å komme opp med ett design som gleder alle. Når du snakker om en tjeneste som Gmail, som brukes av utallige millioner av mennesker over hele verden, kan du virkelig slippe den 'nesten' delen - det er bare umulig. Selv om et redesign er godt likt av de fleste, vil det alltid være brukere som virkelig ikke liker det nye utseendet.





Noen ganger er det nok av disse brukerne til å tvinge et selskap til å spore tilbake, slik Google nylig gjorde med Gmail -ikonets knapper. Men hva om det er noe du egentlig hater, og selskapet endrer det ikke tilbake? Står du fast med det for alltid? Takket være brukerstiler kan du fikse slike problemer selv.



Vi presenterer Stylish

Stylish er et gratis tillegg tilgjengelig både for Firefox og Chrome , og det lar deg gjøre noe ganske magisk - bruk dine egne stiler på nettsideelementer. Selv om du ikke er en webutvikler og du aldri har skrevet litt CSS i livet ditt, er dette mye enklere enn det høres ut. Du kan bruke Stylish til å transformere nettsteder helt (som jeg vil vise deg i neste avsnitt), men enda viktigere, du kan bruke Stylish til å fikse små irritasjoner på få minutter.





Jeg hadde for eksempel et problem med standard skriftstørrelse i Gmail. Grensesnittet var fint - jeg ønsket ikke å zoome inn (Ctrl +) med nettleseren min, fordi det ville øke størrelsen på alle grensesnittelementene og være veldig stygg. Jeg ville bare ha en måte å gjøre meldingsfonten litt større.

Med Stylish var det veldig enkelt, og jeg skal vise deg hvordan. Men før vi ser på å lage dine egne brukerstiler, la oss snakke om å utnytte andres arbeid.



UserStyles.org

Hvis noe går på nervene dine, er det fullt mulig at du ikke er alene. UserStyles.org er et nettsted som lar brukerne dele stiler de har opprettet. Over kan du se en stil ( Legg til etiketter på verktøylinjeikonene ) anbefalt av MakeUseOf -kommentator RandyN som svar på historien vår om ikonene for Gmail -ikonet. Denne stilen lar deg beholde ikonene, men legge til tekstetiketter - noe Google ikke lar deg gjøre.

UserStyles.org er flott, men det er ikke perfekt. Noen av designene prøver å gjøre for mye (endre utseendet til et nettsted helt), og noen er for gamle versjoner av nettsteder og er nå ødelagte. Hvis du prøver å fikse noe lite og ikke finner det på UserStyles.org, er kanskje det beste tiltaket ditt å gjøre det på egen hånd.



Lag din egen enkle brukerstil

For å lage din egen brukerstil må du først vite hvilket element på siden du prøver å endre, og deretter hvilken endring du vil gjøre. Så, for å komme i gang, høyreklikk uansett hva du vil endre, og velg Inspisér element . Du bør se noe slikt:

Firefox mørkner resten av siden, og tegner en veldig klar ramme rundt elementet du har valgt. Over det elementet, teksten som sier div#2d6.ii.gt.adP.adO , er en haug med CSS -klasser, sammen med en ID (delen som starter med #). Dette er velgeren som påvirker stylingen for dette elementet. Langs bunnen av skjermen er det en navigasjonslinje som lar deg krysser DOM -treet ', eller med enklere ord, gå opp og ned i hierarkiet av elementer som fører til elementet du har valgt.



Navnet på spillet her er å velge elementet du ønsker å style, og gjøre valget ikke så smalt at det ikke vil påvirke alt du vil påvirke, og heller ikke så bredt at det vil ødelegge andre ting.

Jeg klikket ett element høyere, div.gs , bare fordi jeg liker navnet (virker som noe som ikke vil endre seg for tidlig, men det er en fullstendig gjetning fra min side). Det påvirker hele meldingsområdet. Når området du vil style er valgt, klikker du på Stil -knappen nederst til høyre for å åpne Regler brød:

Jeg vet, det er skummelt i begynnelsen. Men det er her du ser de forskjellige CSS-reglene som påvirker elementet du valgte, og det er her du kan gjøre dine egne midlertidige endringer og se deres innvirkning på siden i sanntid, uten å laste den på nytt. Men hva bør du endre? Klikk på Egenskaper knappen og fjern merket Bare brukerstiler :

Her kan du se en komplett liste over alle CSS -regler. Du kan bla nedover listen til du finner en regel som er fornuftig for det du trenger (skriftstørrelse i vårt tilfelle), og til og med klikke på spørsmålstegnet ved siden av den for å åpne en forklaringsside. Så nå vet vi at vi ønsker å justere skriftstørrelsesegenskapen for alle div-elementer som har en klasse ' gs '(skrevet i stenografi som div.gs ).

Det eneste spørsmålet som gjenstår er hva vi vil at verdien skal være. For det går vi tilbake til Regler -ruten og begynner å leke:

40 piksler kan være litt sprø, men du forstår den generelle ideen. Spill med dette, og legg gjerne til andre eiendommer til du får det utseendet du skulle ha. Sørg for ikke å lukke siden, for endringene er det ikke lagret hvor som helst.

Lagre din nye stil

Når du har fått denne delen av nettstedet til å se ut akkurat som du vil ha det, er det på tide å lagre det. Klikk på Stilig ikonet i tilleggslinjen, og velg Skriv ny stil . Stilig ville da vite på hvilke sider den skulle bruke den nye stilen - i vårt tilfelle, velg det andre alternativet, mail.google.com . Deretter vil du se denne dialogboksen:

Jeg har allerede fylt den ut. Tydeligvis valgte jeg et navn og noen tagger for stilen. Men de virkelige tingene skjer innenfor koden: Linje 3 var allerede der - Stilig satte den på plass slik at den vet på hvilke sider stilen gjelder. Men linje 5-7 er min. La oss analysere dem:

Linje 5: div.gs { - denne delen bør du kjenne igjen. Dette er elementet vi har bestemt oss for å style. Åpningsbøylen betyr at vi nå skal skrive noen CSS -regler. Linje 6: skriftstørrelse: 20px! viktig; -det er regelen vi ønsker å endre (skriftstørrelse), etterfulgt av den nye definisjonen (20 piksler), og deretter av en! Viktig erklæring, som betyr at Firefox ville følge denne regelen, selv om et element nærmere teksten prøver å sette skriftstørrelsen til noe annet. Linje 7:} - lukke stildefinisjonen.

Deretter klikker du Forhåndsvis og beundrer arbeidet ditt:

Og til slutt, når du ser at det fungerer, klikker du Lagre.

Dette er ikke en komplett guide

Jeg er godt klar over at for å holde denne korte opplæringen innenfor grensene for et enkelt innlegg, har jeg måttet ta en rekke hopp og hopp. Hvis du var forvirret underveis, kan du godta min unnskyldning. CSS er vanskelig i begynnelsen, men det er ikke så komplisert når du får tak i det - og å tilpasse nettsteder lokalt er fortsatt en av de beste måtene å lære.

Hvis du er forvirret av noe, vennligst spør meg nedenfor, så skal jeg gjøre mitt beste for å hjelpe.

se en film med en venn på nettet
Dele Dele kvitring E -post 5 tips for å overbelaste VirtualBox Linux -maskinene dine

Lei av den dårlige ytelsen som tilbys av virtuelle maskiner? Her er hva du bør gjøre for å øke VirtualBox -ytelsen.

Les neste Relaterte temaer
  • Nettlesere
  • Webutvikling
  • Verktøy for nettredaktører
  • Mozilla Firefox
  • Google Chrome
  • Webdesign
Om forfatteren Erez Zukerman(288 artikler publisert) Mer fra Erez Zukerman

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere