Home-theater-designers![Com solucionar petites molèsties al web amb estil [Firefox i Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
Els dissenyadors web tenen una feina gairebé impossible. Han d’arribar a un disseny que agradi a tothom. Quan parleu d’un servei com Gmail, utilitzat per infinitat de milions de persones a tot el món, podeu deixar de banda la part “gairebé”: és impossible. Fins i tot si a la majoria de la gent li agrada molt un redisseny, sempre hi haurà usuaris als quals realment no els agrada el nou aspecte.
De vegades, n’hi ha prou amb aquests usuaris per obligar una empresa a retrocedir, com va fer recentment Google amb els botons de la icona de Gmail. Però què passa si hi ha alguna cosa tu realment odi, i l’empresa no el torna a canviar? Estàs atrapat per sempre? Gràcies als estils d’usuari, podeu solucionar aquests problemes vosaltres mateixos.
Us presentem Stylish
Elegant és un complement gratuït disponible per a tots dos Firefox i Chrome , i us permet fer alguna cosa força màgic: apliqueu els vostres propis estils als elements de la pàgina web. Fins i tot si no sou un desenvolupador web i mai no heu escrit una mica de CSS a la vostra vida, això és molt més fàcil del que sembla. Podeu utilitzar Stylish per transformar completament els llocs web (com us mostraré a la secció següent), però encara més important, podeu utilitzar Stylish per solucionar petites molèsties en qüestió de minuts.
Per exemple, he tingut un problema amb la mida de lletra predeterminada a Gmail. La interfície estava bé: no volia ampliar (Ctrl +) amb el meu navegador, perquè això augmentaria la mida de tots els elements de la interfície i seria molt lleig. Només volia una manera de fer que la font del missatge sigui una mica més gran.
Amb Stylish, va ser molt senzill i us mostraré com fer-ho. Però abans de mirar de crear els vostres propis estils d’usuari, parlem d’aprofitar el treball d’altres persones.
UserStyles.org
Si alguna cosa us posa nerviós, és del tot possible que no estigueu sols. UserStyles.org és un lloc web que permet als usuaris compartir els estils que han creat. A sobre podeu veure un estil ( Afegiu etiquetes a les icones de la barra d'eines ) recomanat pel comentarista de MakeUseOf RandyN en resposta a la nostra història sobre els botons de la icona de Gmail. Aquest estil us permet conservar les icones, però afegiu-hi etiquetes de text, cosa que Google no us permetrà fer.
UserStyles.org és fantàstic, però no és perfecte. Alguns dels dissenys intenten fer massa (canvien completament l’aspecte d’un lloc web), i alguns són per a versions antigues de llocs web i ara estan trencats. Si intenteu arreglar alguna cosa petita i no la trobeu a UserStyles.org, potser el vostre millor curs és fer-ho tot sol.
Creació del vostre propi estil d’usuari senzill
Per crear el vostre propi estil d’usuari, primer heu de saber quin element de la pàgina voleu canviar i, a continuació, quin canvi voleu fer. Per tant, per començar, feu clic amb el botó dret al que vulgueu canviar i seleccioneu Inspeccionar element . Hauríeu de veure alguna cosa així:
Firefox enfosqueix la resta de la pàgina i dibuixa un marc molt clar al voltant de l’element que heu seleccionat. A sobre d’aquest element, el text que diu div # 2d6.ii.gt.adP.adO , és un munt de classes CSS, juntament amb un identificador (la part que comença per #). Aquest és el selector que afecta l'estil d'aquest element. A la part inferior de la pantalla hi ha una barra de navegació que us permet travessa l’arbre DOM ', o en paraules més senzilles, aneu amunt i avall en la jerarquia dels elements que condueixen a l'element que heu seleccionat.
El nom del joc aquí és escollir l’element que voleu dissenyar i fer que la selecció no sigui tan estreta que no afecti tot el que vulgueu afectar, ni tan àmplia que desordenaria altres coses.
He fet clic un element més amunt, div.gs , només perquè m'agrada el seu nom (em sembla una cosa que no canviarà massa aviat, però és una suposició completa per la meva part). Afecta tota l'àrea de missatges. Un cop seleccionada la zona que voleu dissenyar, feu clic a Estil a l'extrem inferior dret, per obrir el botó Normes pa:
Ja ho sé, al principi fa por. Però aquí és on veieu les diferents regles CSS que afecten l’element que heu seleccionat i aquí podeu fer les vostres pròpies modificacions temporals i veure’n l’impacte a la pàgina en temps real, sense recarregar-la. Però, què heu de canviar? Feu clic a Propietats botó i desmarqueu Només estils d'usuari :
Aquí podeu veure una llista completa de tot Normes CSS. Podeu desplaçar-vos cap avall per la llista fins que trobeu una regla que tingui sentit per al que necessiteu (mida del tipus de lletra en el nostre cas), i fins i tot feu clic al signe d’interrogació que hi ha al costat per obrir una pàgina d’explicació. Per tant, ara sabem que volem modificar la propietat font-size per a tots els elements div que tinguin una classe de ' gs '(escrit abreujat com div.gs ).
L’única pregunta que queda és quin volem que sigui el seu valor. Per a això, tornem al tauler de regles i comencem a jugar:
Els 40 píxels poden ser una mica bojos, però teniu la idea general. Juga amb això i no dubtis a afegir altres propietats fins que obtinguis l’aspecte que desitjaves. Assegureu-vos de no tancar la pàgina perquè els vostres canvis són reals no guardat a qualsevol lloc.
Desant el vostre nou estil
Quan hàgiu aconseguit que aquesta part del lloc tingui l’aspecte que desitgeu, és hora de desar-la. Feu clic a Elegant a la barra de complements i seleccioneu Escriu un estil nou . Elegant voldria saber en quines pàgines hauria d'aplicar el nou estil; en el nostre cas, trieu la segona opció, mail.google.com . A continuació, veureu aquest diàleg:
Ja ho he omplert. Viouslybviament, vaig triar un nom i algunes etiquetes per a l’estil. Però les coses reals succeeixen dins del codi: la línia 3 ja hi era. Elegant la va posar al seu lloc perquè sàpiga a quines pàgines s'aplica l'estil. Però la línia 5-7 és meva. Analitzem-los:
Línia 5: div.gs { - Hauríeu de reconèixer aquesta part. Aquest és l’element que hem decidit donar estil. El claudàtor inicial significa que ara escriurem algunes regles CSS. Línia 6: font-size: 20px! important; - aquesta és la regla que volem canviar (mida del tipus de lletra), seguida de la seva nova definició (20 píxels) i, a continuació, d'una declaració important! la mida de la lletra és diferent. Línia 7:}: es tanca la definició d'estil.
A continuació, feu clic a Vista prèvia i meravelleu-vos del vostre treball:
I, finalment, un cop vegeu que funciona, feu clic a Desa.
Aquesta no és una guia completa
Sé ben bé que, per mantenir aquest breu tutorial dins dels límits d’un sol missatge, he hagut de fer diversos salts. Si us heu confós durant el camí, accepteu les meves disculpes. CSS al principi és complicat, però no és tan complicat una vegada que en teniu cap, i personalitzar els llocs web de manera local segueix sent una de les millors maneres d’aprendre.
Si alguna cosa us va confondre, pregunteu-me a continuació i faré tot el possible per ajudar-vos.
com obtenir missatges antics a l'iPhoneCompartir Compartir Tweet Correu electrònic 5 consells per sobrecarregar les vostres màquines VirtualBox Linux
Cansat del baix rendiment que ofereixen les màquines virtuals? Això és el que heu de fer per millorar el rendiment del VirtualBox.
Llegiu a continuació Temes relacionats- Navegadors
- Desenvolupament web
- Eines per a administradors web
- Mozilla Firefox
- Google Chrome
- Web Design
Subscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us