Kuinka korjata pieniä ärsytyksiä verkossa tyylikkäällä [Firefox ja Chrome]

Kuinka korjata pieniä ärsytyksiä verkossa tyylikkäällä [Firefox ja Chrome]

Web -suunnittelijoilla on lähes mahdoton tehtävä. Heidän on keksittävä yksi malli, joka miellyttää kaikkia. Kun puhutaan Gmailin kaltaisesta palvelusta, jota lukemattomat miljoonat ihmiset käyttävät ympäri maailmaa, voit todella pudottaa 'melkein' osan - se on vain mahdotonta. Vaikka useimmat ihmiset pitävät uudistamisesta, on aina käyttäjiä, jotka eivät todellakaan pidä uudesta ulkoasusta.





Joskus näitä käyttäjiä riittää pakottamaan yrityksen perääntymään, kuten Google teki äskettäin Gmail -kuvakepainikkeilla. Mutta entä jos sinulla on jotain Todella vihaa, eikä yritys muuta sitä? Oletko jumissa sen kanssa ikuisesti? Käyttäjätyylien ansiosta voit korjata tällaiset ongelmat itse.



Esittelyssä Tyylikäs

Stylish on ilmainen lisäosa, joka on saatavana molemmille Firefox ja Kromi , ja sen avulla voit tehdä jotain melko maagista - soveltaa omia tyylejäsi verkkosivun elementteihin. Vaikka et ole web -kehittäjä etkä ole koskaan kirjoittanut CSS: ää elämässäsi, tämä on paljon helpompaa kuin miltä se kuulostaa. Voit käyttää Stylishiä verkkosivustojen muuttamiseen kokonaan (kuten näytän sinulle seuraavassa osassa), mutta mikä vielä tärkeämpää, voit käyttää Stylishiä korjaamaan pieniä ärsytyksiä muutamassa minuutissa.





Minulla oli esimerkiksi ongelma Gmailin oletuskirjasinkoon kanssa. Käyttöliittymä oli hyvä - en halunnut lähentää (Ctrl +) selaimellani, koska se lisäisi kaikkien käyttöliittymäelementtien kokoa ja olisi todella ruma. Halusin vain tapaa lisätä viestin fonttia hieman isommaksi.

Stylishin avulla se oli todella yksinkertaista, ja näytän sinulle kuinka. Mutta ennen kuin aiomme luoda omia käyttäjätyylejäsi, puhutaan muiden ihmisten työn hyödyntämisestä.



UserStyles.org

Jos jokin hermostuttaa, on täysin mahdollista, ettet ole yksin. UserStyles.org on sivusto, jonka avulla käyttäjät voivat jakaa luomiaan tyylejä. Yllä näet tyylin ( Lisää tunnisteita työkalurivin kuvakkeisiin ), suosittelee MakeUseOf -kommentoija RandyN vastauksena tarinaamme Gmail -kuvakepainikkeista. Tämän tyylin avulla voit säilyttää kuvakkeet, mutta lisätä tekstitunnisteita - mitä Google ei salli sinun tehdä.

UserStyles.org on hieno, mutta se ei ole täydellinen. Jotkut mallit yrittävät tehdä liikaa (muuttaa verkkosivuston ulkoasua kokonaan), ja jotkut ovat vanhoja verkkosivustoversioita ja ovat nyt rikki. Jos yrität korjata jotain pientä etkä löydä sitä UserStyles.org -sivustolta, ehkä paras tapa toimia on tehdä se itse.



Oman yksinkertaisen käyttäjätyylin luominen

Jotta voit luoda oman käyttäjätyylisi, sinun on ensin tiedettävä, mitä sivun osaa yrität muuttaa, ja sitten mitä muutosta haluat tehdä. Joten aloita napsauttamalla hiiren kakkospainikkeella mitä haluat muuttaa ja valitse Tarkastele elementtiä . Sinun pitäisi nähdä jotain tällaista:

Firefox tummentaa loput sivusta ja piirtää erittäin selkeän kehyksen valitsemasi elementin ympärille. Tämän elementin yläpuolella teksti, joka sanoo div#2d6.ii.gt.adP.adO , on joukko CSS -luokkia yhdessä yhden tunnuksen kanssa (osa, joka alkaa #: lla). Tämä valitsin vaikuttaa tämän elementin muotoiluun. Näytön alareunassa on navigointipalkki, jonka avulla voit kulkea DOM -puun läpi ', tai yksinkertaisemmin sanottuna, siirry ylös ja alas valitsemaasi elementtiin johtavien elementtien hierarkiassa.



Pelin nimi tässä on valita tyyli, jonka haluat muotoilla, ja tehdä valinnasta niin kapea, ettei se vaikuta kaikkeen, mihin haluat vaikuttaa, eikä niin laaja, että se sekoittaisi muita asioita.

Napsautin yhden elementin korkeammalle, div. g , vain siksi, että pidän sen nimestä (vaikuttaa siltä, ​​että se ei muutu liian pian, mutta se on täydellinen arvaus omalta osaltani). Se vaikuttaa koko viesti -alueeseen. Kun alue, jonka haluat muotoilla, on valittu, napsauta Tyyli -painiketta oikeassa alakulmassa avataksesi Säännöt leipä:

Tiedän, se on aluksi pelottavaa. Mutta tässä näet eri CSS-säännöt, jotka vaikuttavat valitsemaasi elementtiin, ja tässä voit tehdä omia väliaikaisia ​​muutoksia ja nähdä niiden vaikutukset sivulle reaaliajassa ilman lataamista. Mutta mitä sinun pitäisi muuttaa? Klikkaa Ominaisuudet painiketta ja poista valinta Vain käyttäjätyylit :

Täältä näet täydellisen luettelon kaikki CSS -säännöt. Voit vierittää luetteloa alaspäin, kunnes löydät säännön, joka on tarkoituksenmukainen (fonttikoko meidän tapauksessamme), ja jopa napsauttaa sen vieressä olevaa kysymysmerkkiä avataksesi selityssivun. Tiedämme nyt, että haluamme säätää kirjasinkoko-ominaisuutta kaikille div-elementeille, joilla on luokka gs '(kirjoitettu lyhenteellä kuten div. g ).

Ainoa jäljellä oleva kysymys on, mitä haluamme sen arvon olevan. Tätä varten palaamme Säännöt -ruutuun ja aloitamme leikkimisen:

40 pikseliä voi olla hieman hullua, mutta saat yleisen käsityksen. Pelaa tällä ja voit lisätä muita ominaisuuksia, kunnes saat haluamasi ilmeen. Älä sulje sivua, koska muutokset ovat ei tallennettu minnekään.

Uuden tyylin tallentaminen

Kun olet saanut tämän sivuston osan näyttämään juuri sellaiselta kuin haluat, on aika tallentaa se. Klikkaa Tyylikäs -kuvaketta lisäpalkissa ja valitse Kirjoita uusi tyyli . Tyylikäs haluaisi sitten tietää, millä sivuilla sen pitäisi soveltaa uutta tyyliä - meidän tapauksessamme valitse toinen vaihtoehto, mail.google.com . Seuraavaksi näet tämän valintaikkunan:

Olen jo täyttänyt sen. Ilmeisesti valitsin tyylille nimen ja joitain tunnisteita. Mutta todelliset asiat tapahtuvat koodin sisällä: Rivi 3 oli jo olemassa - Tyylikäs laita se paikalleen, jotta se tietää, millä sivuilla tyyliä sovelletaan. Mutta rivi 5-7 ovat minun. Analysoimme niitä:

Rivi 5: div.gs { - tämä osa sinun pitäisi tunnistaa. Tämä on elementti, jonka olemme päättäneet muotoilla. Avaushaka tarkoittaa, että kirjoitamme nyt joitain CSS -sääntöjä. fontin koko: 20px! -tätä sääntöä haluamme muuttaa (fontin koko), jota seuraa sen uusi määritelmä (20 pikseliä) ja sitten! Tärkeä ilmoitus, mikä tarkoittaa, että Firefox noudattaa tätä sääntöä, vaikka tekstiä lähempänä oleva elementti yrittäisi asettaa rivi 7:} - tyylimäärityksen sulkeminen.

Napsauta seuraavaksi Esikatselu ja ihmettele työtäsi:

Ja lopuksi, kun näet, että se toimii, napsauta Tallentaa.

Tämä ei ole täydellinen opas

Tiedän hyvin, että pitääkseni tämän lyhyen opetusohjelman yhden viestin rajoissa, minun on täytynyt tehdä useita harppauksia ja hyppyjä. Jos olet hämmentynyt matkan varrella, ota anteeksi. CSS on aluksi hankala, mutta se ei ole niin monimutkainen, kun saat siitä kiinni - ja verkkosivustojen mukauttaminen paikallisesti on edelleen yksi parhaista tavoista oppia.

Jos olet hämmentynyt jostain, kysy alla, niin autan parhaani mukaan.

katsella puhelimen näyttöä tietokoneella usb: n kautta
Jaa Jaa Tweet Sähköposti 5 vinkkiä VirtualBox Linux -koneiden lataamiseen

Oletko kyllästynyt virtuaalikoneiden heikkoon suorituskykyyn? Tässä on, mitä sinun pitäisi tehdä parantaaksesi VirtualBox -suorituskykyäsi.

Lue seuraava Liittyvät aiheet
  • Selaimet
  • Verkkokehitys
  • Verkkovastaavan työkalut
  • Mozilla Firefox
  • Google Chrome
  • Web-suunnittelu
Kirjailijasta Erez Zukerman(288 artikkelia julkaistu) Lisää Erez Zukermanilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi