Sådan repareres små gener på nettet med stilfuld [Firefox og Chrome]

Sådan repareres små gener på nettet med stilfuld [Firefox og Chrome]

Webdesignere har et næsten umuligt job. De skal finde på et design, der glæder alle. Når du taler om en tjeneste som Gmail, der bruges af utallige millioner af mennesker over hele verden, kan du virkelig droppe den 'næsten' del - det er bare umuligt. Selvom et redesign er vellidt af de fleste, vil der altid være brugere, der virkelig ikke kan lide det nye look.





Nogle gange er der nok af disse brugere til at tvinge et firma til at spore tilbage, som Google for nylig gjorde med Gmail -ikonets knapper. Men hvad hvis der er noget du virkelig hader, og virksomheden ændrer det ikke tilbage? Sidder du fast med det for evigt? Takket være brugerformater kan du selv løse sådanne problemer.



Vi præsenterer Stylish

Stylish er en gratis tilføjelse tilgængelig både for Firefox og Chrome , og det lader dig gøre noget temmelig magisk - anvende dine egne stilarter på websideelementer. Selvom du ikke er en webudvikler, og du aldrig har skrevet en smule CSS i dit liv, er det meget lettere end det lyder. Du kan bruge Stylish til at transformere websteder fuldstændigt (som jeg vil vise dig i det næste afsnit), men endnu vigtigere, du kan bruge Stylish til at rette små irritationer på få minutter.





For eksempel havde jeg et problem med standard skriftstørrelse i Gmail. Interfacet var fint - jeg ville ikke zoome ind (Ctrl +) med min browser, fordi det ville øge størrelsen på alle grænsefladeelementer og være virkelig grim. Jeg ville bare have en måde at gøre meddelelsestypen lidt større.

Med Stylish var det virkelig simpelt, og jeg viser dig hvordan. Men før vi ser på at oprette dine egne brugerstile, lad os tale om at udnytte andres arbejde.



UserStyles.org

Hvis noget går på nerverne, er det helt muligt, at du ikke er alene. UserStyles.org er et websted, der lader brugerne dele stilarter, de har oprettet. Ovenfor kan du se en stil ( Føj etiketter til værktøjslinjens ikoner ) anbefalet af MakeUseOf -kommentator RandyN som svar på vores historie om Gmail -ikonets knapper. Denne stil lader dig beholde ikonerne, men tilføjer tekstetiketter - noget Google ikke lader dig gøre.

UserStyles.org er fantastisk, men det er ikke perfekt. Nogle af designene forsøger at gøre for meget (ændre udseendet af et websted helt), og nogle er til gamle versioner af websteder og er nu ødelagte. Hvis du forsøger at reparere noget lille og ikke kan finde det på UserStyles.org, er din bedste fremgangsmåde måske at gøre det på egen hånd.



Oprettelse af din egen enkle brugerstil

For at oprette din egen brugerstil skal du først vide, hvilket element på siden du prøver at ændre, og derefter hvilken ændring du vil foretage. Så for at komme i gang skal du højreklikke på det, du vil ændre, og vælge Efterse element . Du bør se noget i stil med dette:

Firefox mørkner resten af ​​siden og tegner en meget klar ramme omkring det element, du har valgt. Over det element, teksten der siger div#2d6.ii.gt.adP.adO , er en flok CSS -klasser sammen med et ID (den del, der starter med #). Dette er vælgeren, der påvirker stylingen for dette element. I bunden af ​​skærmen er der en navigationslinje, der lader dig ' krydse DOM -træet ', eller med enklere ord, gå op og ned i hierarkiet af elementer, der fører til det element, du har valgt.



Navnet på spillet her er at vælge det element, du ønsker at style, og gøre valget ikke så snævert, at det ikke påvirker alt, hvad du vil påvirke, og heller ikke så bredt, at det ville ødelægge andre ting.

Jeg klikkede et element højere, div.gs , bare fordi jeg kan lide dets navn (virker som noget, der ikke ændrer sig for tidligt, men det er et komplet gæt fra min side). Det påvirker hele meddelelsesområdet. Når det område, du vil style, er valgt, skal du klikke på Stil knappen i nederste højre hjørne for at åbne Regler brød:

Jeg ved, det er skræmmende i starten. Men det er her, du ser de forskellige CSS-regler, der påvirker det element, du har valgt, og det er her, du kan foretage dine egne midlertidige ændringer og se deres indvirkning på siden i realtid uden at genindlæse den. Men hvad skal du ændre? Klik på Ejendomme knappen og fjern markeringen Kun brugerstilarter :

Her kan du se en komplet liste over alle CSS regler. Du kan rulle ned på listen, indtil du finder en regel, der giver mening for det, du har brug for (skriftstørrelse i vores tilfælde), og endda klikke på spørgsmålstegnet ved siden af ​​det for at åbne en forklaringsside. Så nu ved vi, at vi vil finjustere egenskaben skrifttype for alle div-elementer, der har en klasse ' gs '(skrevet i stenografi som div.gs ).

Det eneste spørgsmål, der er tilbage, er, hvad vi vil have, at dens værdi skal være. Til det går vi tilbage til ruden Regler og begynder at lege:

40 pixels er måske lidt skøre, men du får den generelle idé. Spil med dette, og tilføj gerne andre ejendomme, indtil du får det udseende, du gik efter. Sørg for ikke at lukke siden, for dine ændringer er ikke gemt hvor som helst.

Gem din nye stil

Når du har fået denne del af webstedet til at se ud, som du vil have den, er det tid til at gemme den. Klik på Stilfuld ikonet i tilføjelseslinjen, og vælg Skriv ny stil . Stilfuld vil så gerne vide på hvilke sider den skal anvende den nye stil - i vores tilfælde skal du vælge den anden mulighed, mail.google.com . Dernæst vil du se denne dialog:

Jeg har allerede udfyldt det. Selvfølgelig valgte jeg et navn og nogle tags til stilen. Men de virkelige ting sker inden for koden: Linje 3 var der allerede - Stilfuld satte den på plads, så den ved på hvilke sider stilen gælder. Men linje 5-7 er mine. Lad os analysere dem:

Linje 5: div.gs { - denne del skal du genkende. Dette er det element, vi har besluttet at style. Åbningsbøjlen betyder, at vi nu skal skrive nogle CSS -regler. Linje 6: skrifttype: 20px! vigtigt; -det er den regel, vi ønsker at ændre (skriftstørrelse), efterfulgt af dens nye definition (20 pixels) og derefter af en! Vigtig erklæring, hvilket betyder, at Firefox ville adlyde denne regel, selvom et element tættere på teksten forsøger at indstille skriftstørrelsen til noget andet. Linje 7:} - lukning af stildefinitionen.

Klik derefter på Preview og forundring over dit arbejde:

Og endelig, når du ser, at det virker, skal du klikke Gemme.

Dette er ikke en komplet guide

Jeg er udmærket klar over, at for at holde denne korte vejledning inden for rammerne af et enkelt indlæg, har jeg været nødt til at tage et antal spring og spring. Hvis du var forvirret undervejs, skal du acceptere min undskyldning. CSS er vanskelig i starten, men det er ikke så kompliceret, når du først får styr på det - og tilpasning af websteder lokalt er stadig en af ​​de bedste måder at lære på.

Hvis du var forvirret over noget, så spørg mig herunder, og jeg vil gøre mit bedste for at hjælpe.

kan politiet læse tekstbeskeder, der er blevet slettet
Del Del Tweet E -mail 5 tips til at overlade dine VirtualBox Linux -maskiner

Træt af den dårlige ydelse, der tilbydes af virtuelle maskiner? Her er hvad du skal gøre for at øge din VirtualBox -ydeevne.

Læs Næste Relaterede emner
  • Browsere
  • Web-udvikling
  • Webmasterværktøjer
  • Mozilla Firefox
  • Google Chrome
  • Webdesign
Om forfatteren Erez Zukerman(288 artikler udgivet) Mere fra Erez Zukerman

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere