T’has enamorat de l’estil de la web que acabes de descobrir i t’agradaria saber com aplicar-lo al teu WordPress? Necessites dues coses: o contractar un dissenyador web que t’ajudi o descobrir tu mateix el codi CSS que utilitza.

El codi CSS és el llenguatge que facilita que qualsevol web tingui un estil determinat. Quan parlem d’estil ens referim a aspectes com ara la tipografia, el seu gruix i mida, els colors, els marges i paddings, els contorns, les ombres… etcètera.

Dins de qualsevol theme de WordPress, el codi s’ubica al full d’estils, habitualment l’style.css, que habitualment es troba a wp-content/themes/nom-de-theme/style.css.

Ara pots pensar… però com puc descobrir aquests estils en una web aliena si no tinc accés als arxius del theme? Doncs no, no hi tens accés ni et fa cap falta tenir-ne. Avui, existeixen moltes eines i formes de visualitzar aquests estils. I no, no cal ser cap hacker ni gurú de la tecnologia per aconseguir-ho. És molt més fàcil del que sembla.

En aquest article, t’explicaré dues formes diferents però igualment efectives de descobrir el codi CSS de qualsevol WordPress de forma ràpida i senzilla.

Com descobrir el codi CSS d’un WordPress amb l’inspector de Chrome

La forma més directa de descobrir-los és aprofitar l’enorme potencial de de les eines per a desenvolupadors dels navegadors. En aquest cas, t’explicaré com utilitzar l’inspector de Google Chrome, el navegador més utilitzat del món (i el que utilitzo jo cada dia).

Realment les DevTools de Chrome són molt completes i et permeten anar molt més enllà. Tot i això, en aquest post em centraré a explicar-te les eines relatives a la inspecció i l’edició d’estils.

Primer de tot, cal accedir a l’inspector. I és ben senzill: només has de fer clic amb el botó dret sobre qualsevol part de la web i després a “Inspecciona”. Veurás que s’obre una finestra nova a la dreta, integrada dins el navegador. És aquí on comença la màgia.

Partint de l’exemple de la imatge anterior, a l’inspector podem veure dos apartats clarament diferenciats:

• La part superior, a la pestanya Elements, on podem veure tot el codi HTML de la pàgina on estem.
• La part inferior, on es mostra el codi CSS d’aquella pàgina en concret.

Si vas fent clic als diferents elements de l’HTML, veuràs com el codi CSS que es mostra a sota va canviant. Això és perquè l’estil mostrat és el de la classe o id seleccionada en cada moment.

A més, si passes el ratolí per sobre de cada etiqueta, veuràs com s’il·lumina la part de la web a la que correspon cada una d’elles.

En l’exemple de sota, pots veure com s’il·lumina el div “Welcome” de la meva home, una widget area personalitzada on hi mostro un títol, un subtítol i un cta.

A partir d’aquí, si fas clic al triangle que apareix a l’esquerra de cada etiqueta HTML, veuràs com es desplega el contingut que conté aquella etiqueta en concret,

Arribats a aquest punt pots voler dues coses. Descobrir l’estil d’un element de la pàgina en concret, o be aconseguir el codi css complet de la web. Vejem com pots fer les dues coses fàcilment.

Com descobrir el codi CSS d’un element en concret

Per buscar l’estil d’un element en concret de la pàgina, no cal que comencis a desplegar etiquetes des de la primera fins que el trobis. Sí, ho pots fer, però és un pal i no hi ha cap necessitat. És molt més fàcil.

Només has de fer clic amb el botó dret sobre l’element que t’interessa i després clicar a “Inspecciona”. Automàticament, es seleccionarà l’etiqueta HTML corresponent i el visor d’estils et mostrarà el codi CSS d’aquest element.

Com a exemple, pots veure l’estil del CTA de la home d’aquesta mateixa web.

En aquest cas, podem veure que té definits un margin-top, un text-align, un display, un width, un border-radius i un font-size.

El procés és el mateix per a qualsevol altre element que vulguis. Fàcil, simple i ràpid.

Un aspecte molt interessant és que un cop tens seleccionat l’element, pots modificar-ne l’estil en viu. Només cal que facis clic sobre el valor de l’atribut CSS i canviar-lo. I de la mateixa manera, també pots afegir-li els teus propis estils.

Seguint amb l’exemple del CTA, aquí pots veure com l’he modificat fàcilment canviant el margin-top de 20px a 100px i afegint un padding de 100px als quatre costats.

Evidentment, aquestes modificaciones només les pots veure tu i es perdran en el moment de refrescar la pàgina.

Com descobrir el codi CSS sencer de la web

Si el que necessites es caçar tot el codi CSS de la web, Chrome Dev Tools també et pot ajudar. En aquest cas d’accedir a la pestanya “Sources” i desplegar les carpetes del theme fins arribar a l’arxiu style.css. Habitualment, el trobaràs dins de /wp-content/themes/nom-del-theme/style.css

I màgia màgia! A la dreta t’apareix el full d’estils sencer del theme.

És important que tinguis en compte que, en funció de les opcions de catxe activades a cada web, és possible que aquest arxiu CSS no es mostri, ja sigui perquè està minificat, comprimit o concatenat amb d’altres arxius CSS.

Una de les avantatges de tenir tot el codi CSS de la web, és que també el pots modificar en viu. D’aquesta manera, per exemple, si estàs maquetant un theme de WordPress, pots veure al moment com s’apliquen els estils. És una funcionalitat que utilitzo moltíssim quan desenvolupo pàgines web a mida per a emprenedors que volen captar clients online per al seu negoci.

A la vegada, també és una bona manera de saber quin theme està fent servir una web amb WordPress, així com qui l’ha desenvolupat i la seva pàgina web (dades que es troben comentades a l’inici del full d’estils).

Personalment, com a bon friky, m’encanta saber estan dissenyades les pàgines web amb WordPress i acostumo a investigar-ho sovint. Per això, et recomano que si vols aprendre CSS t’hi capbussis. És la millor forma de millorar els teus coneixements i, de retruc, la teva pròpia web.

Això sí, el que mai et recomanaré fer és copiar. Una cosa és aprendre i inspirar-se, i una altra ben diferent fusil·lar la feina dels altres. A part d’una mala pràctica, és molt cutre, no trobes?

Aquesta és la meva forma preferida de treballar, ja que t’obliga a veure codi des del primer moment. Realment, és una manera senzilla d’averiguar-ho, tot i que al principi pot atabalar-te una mica si no n’has vist gaire.

Ja saps que jo et recomano que miris codi des del primer moment. Aquí t’explico per què és important que en comencis a aprendre des de ja. És la millor que pots fer: com més codi vegis, més et sonarà i més aviat seràs capaç de començar a implementar-lo a la teva web.

Com descobrir el codi CSS d’una web amb WordPress mitjançant una extensió de Chrome

Ara bé, si no vols complicar-te i anar directe al gra, vull compartir amb tu una extensió de Chrome sensacional. D’aquelles imprescindibles que no podràs deixar de fer servir i passarà directament a formar part de les teves preferides: CSS Pepper.

CSS Pepper és una extensió per a Chrome que t’ajuda a conèixer el codi CSS de qualsevol web. Els seus creadors la presenten una eina per a dissenyadors, en el sentit que ja no s’han de preocupar de rebuscar al codi i poden centrar-se en dissenyar. Però, evidentment, és una eina per a tothom: dissenyadors, desenvolupadors, usuaris i també per tu. Per això, a continuació t’explico com et pot ajudar.

Amb una interfície d’allò més elegant, et revela tant les propietats de les etiquetes html com de les imatges integrades a la web. Si fas clic sobre qualsevol element, ja sigui un div, un paràgraf o una imatge, a l’instant en sabràs quina tipografia utilitza, la seva mida, els marges, les ombres, etcètera.

Seguint amb l’exemple anterior, aquí podem veure els estils del CTA gràcies a CSS Pepper.

Com pots veure, els estils estan organitzats perquè no et perdis:

• En primer lloc, et mostra els estils generals de la pàgina, com ara la tipografia, la mida, l’alineació, el gruix o l’interlineat.
• Després et revela els colors utilitzats en format hexadecimal, i incorpora un botó on, si hi fas clic, copia el codi perquè puguis enganxar-lo al teu full d’estils.
• I finalment pots veure els assets, a punt per ser descarregats, ja sigui tots de cop, o d’un en un. El que prefereixis.

Realment és una eina molt interessant que pot facilitar-te la feina i estalviar-te una bona estona capbussat entre línies de codi CSS. Com a part negativa, CSS Pepper no et mostra el full d’estils sencer del theme. Per això, pots utilitzar el mètode que t’he explicat més amunt.

Aquí tens el videotutorial on t’ho explico tot plegat.

En resum

Si has vist una web que t’agrada i vols conèixer els seus estils, necessites descobrir el codi CSS que utilitza. Hi han diverses formes de fer-ho, i en aquest article en veiem dues de molt senzilles.

En primer lloc, pots utilitzar les DevTools de Google Chrome. Concretament, amb l’inspector i la pestanya “Elements” pots esbrinar de forma ràpida el codi CSS de qualsevol element de la pàgina web. De la mateixa manera, el pots modificar en viu i veure com canvia a l’instant.

D’altra banda, també és fàcil accedir al full d’estils complet del theme. Només t’has de desplaçar a la pestanya “Sources” i navegar fins l’arxiu style.css. Un cop allà, pots editar-lo i veure de forma inmediata com es modifica l’estil de la pàgina.

Si no vols haver de remenar codi, pots fer servir una extensió de Chrome molt útil: CSS Pepper. Aquesta eina et mostra l’estil de qualsevol element d’una web amb una interfície molt cuidada i clarament enfocada a la usabilitat.

Només has de fer clic a l’element en qüestió, i l’extensió s’encarrega de mostrar-te tot el codi CSS. Com a pega, no pots veure el full d’estils complet de la web.

En definitiva, conèixer el codi CSS d’una web pot ser molt útil si necessites averiguar com està maquetada. Amb les eines que he compartit amb tu, aquesta serà una tasca més senzilla.

Si vols aprendre més sobre CSS3, pots donar un cop d’ull a aquest manual de la w3schools.

I recorda que si vols aprendre WordPress i Genesis com un Pro, tens a la teva disposició 39 articles, 19 videotutorials i 9 episodis del podcast on comparteixo amb tu tot allò que sé perquè aprenguis a dominar el teu lloc web amb WordPress i que no et domini ell a tu 🙂