En el artículo anterior sobre como modificar la apariencia de Genesis Theme mostré una sencilla manera de agregar estilos personalizados al tema hijo. Con solo un par de líneas de código es posible agregar esa misma hoja de estilos a un nuevo blog con Genesis sin tocar el CSS originar ni hacer nada raro.
Ahora veremos como modificar alguna propiedad CSS, osea un estilo ya existente. Para ello siempre recomiendo mantener las cosas separadas, la hoja de estilos original del tema hijo y la hoja de estilos personalizados que vayamos a crear. Así, si por a o b cometemos un error, en el peor de los casos siempre se solucionará en la hoja de estilos que hayamos creado y tenemos el control total sobre ella.
Lo que vamos a utilizar:
- Editor de texto plano
- Gestor FTP
- Navegador web
- Blog con Genesis
Método universal para modificar la apariencia de un tema
Lo primero de lo primero es saber exactamente qué es lo que queremos modificar de apariencia. Para ello tenemos varias herramientas desde básicas hasta avanzadas pero con lo que viene por defecto en el navegador es suficiente.
En mi caso (Chrome), clic derecho sobre el elemento que queremos modificar y en el menú que se abre le damos Inspeccionar elemento. Y acabo de ver que en Firefox existe exactamente la misma opción 🙂
A lo práctico: Modificar el estilo de Breadcrumbs en Genesis
Voy a tomar como objeto de este ejemplo las migas de pan de este blog que aparecen en la parte de arriba.
Lo que quiero hacer es dejarlas en forma de botones con punta uno tras otro, los has visto?.. No? Mmm bueno dentro de poco verás el resultado de esta travesura con el CSS.
Identificando el elemento HTML
Lo primero es saber que elemento HTML queremos afectar. Con el puntero nos ponemos encima de las migas de pan y damos clic derecho y luego Inspeccionar elemento.
En la parte de abajo se sombrea una línea de color azul que nos indica que la capa o div que envuelve las migas de pan tiene la clase «breadcrumb», muy obvio.
Eso es todo lo que necesitamos saber para modificar a nuestro gusto las famosas migas. Pues de ahí en adelante todas las demás etiquetas HTML estarán dentro de la capa con clase «breadcrumb».
Asignando los estilos a la clase
En vez de ponerme a escribir CSS lo que he hecho es hacer esta búsqueda. El primer resultado ya tiene el código del estilo que busco y solo habrá que retocar alguna cosa.
Te recomiendo, a menos que tu intención sea aprender CSS, que no reinventes la rueda y lo hagas de esta misma manera. Te ahorra mucho tiempo.
El código es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.breadcrumb { background-color: #555; border:none; border-radius:3px; color:#ffffff; overflow:hidden; padding:0; } .breadcrumb a{ display:block; color:#ffffff !important; padding: 10px 0 10px 55px; position:relative; -o-transition:0s; -ms-transition:0s; -moz-transition:0s; -webkit-transition:0s; transition:0s; } .breadcrumb a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid #555; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb a:hover{ color:#f0f0f0; } .breadcrumb-link-wrap { display:inline-block; text-align:center; } .breadcrumb-link-wrap:first-child { text-align:center !important; } .breadcrumb-link-wrap:last-child { margin-right:50px !important; } .breadcrumb .breadcrumb-link-wrap a:hover { background: #333; } .breadcrumb .breadcrumb-link-wrap a:hover:after { border-left-color: #333 !important; } |
Ese código lo pegas en tu hoja de estilos personalizada y la subes vía FTP tal y como lo expliqué en la primera parte.
Eso es todo por el lado del CSS pero también hay que hacer un pequeño ajuste en las funciones de Genesis… No te asustes, nada del otro mundo. Solo vas en tu Dashboard de WordPress a Apariencia > Editor y ahí seleccionas functions.php de tu child theme en donde pegarás al final de todo este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//* Modify breadcrumb arguments. add_filter( 'genesis_breadcrumb_args', 'sp_breadcrumb_args' ); function sp_breadcrumb_args( $args ) { $args['home'] = '<i class="fa fa-home"></i>'; $args['sep'] = ''; $args['list_sep'] = ', '; // Genesis 1.5 and later $args['prefix'] = '<div class="breadcrumb">'; $args['suffix'] = '</div>'; $args['heirarchial_attachments'] = true; // Genesis 1.5 and later $args['heirarchial_categories'] = true; // Genesis 1.5 and later $args['display'] = true; $args['labels']['prefix'] = ''; $args['labels']['author'] = 'Archives for '; $args['labels']['category'] = 'Archives for '; // Genesis 1.6 and later $args['labels']['tag'] = 'Archives for '; $args['labels']['date'] = 'Archives for '; $args['labels']['search'] = 'Search for '; $args['labels']['tax'] = 'Archives for '; $args['labels']['post_type'] = 'Archives for '; $args['labels']['404'] = 'Not found: '; // Genesis 1.5 and later return $args; } |
Lo pegas y lo guardas sin miedo 😉
Después de guardar cambios solo actualiza tu página, purga cualquier sistema de caché que utilices y borra también el cache de tu navegador para que puedas ver los cambios.
¿Qué te parece el cambio? No tengo ni que preguntarlo, la versión tuneada del breadcrumb está mucho más elegante y guapa.
Conclusiones
Ese es el proceso a seguir para cambiar el estilo de cualquier elemento de Genesis. Al principio puede parecer un rollo terrible, más si eres un neófito de esto, pero después solo es cuestión de dedicarle algo de atención y podrás personalizar lo que desees.
De todos modos seguiré haciendo «How To» sobre cambiar la apariencia de otros elementos de este popular tema.
Estos cambios puede que parezcan muy laboriosos y hasta innecesarios. Pero ¿Sabes cuántos blosgs con Genesis hay por ahí?… Miles. No se tú, pero yo con solo entrar a un blog ya me doy cuenta que es hecho en Genesis por la apariencia. La mayoría instala su tema y lo deja ahí tal cual, y estos pequeños cambios en el estilo marcarán la diferencia a nivel visual y le aportarán más «personalidad» a tu blog.
he hecho lo que dices, pero no me a funcionado. No sale el fondo negro, se muestra todo pegado sin espacios.