• Skip to main content
  • Skip to footer

Marketing Delta

Agencia de Marketing Digital y SEO en Ecuador

  • Solicita Cotización
You are here: Home / Wordpress / Cambiar propiedades CSS en Genesis parte II – Breadcrumbs

Cambiar propiedades CSS en Genesis parte II – Breadcrumbs

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.

Estilos en Genesis II - las migas de pan o breadcrumbs

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 🙂

Inspeccionar elemento en Chrome
Opción Inspeccionar elemento

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.

Migas de pan

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.

Nota: No necesitas ser un experto en CSS ni mucho menos. Si te gusta cierto estilo de un blog basta con que copies su CSS o googlees el código CSS que buscas y agregarlo a tu hoja de estilos.

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.

clase

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:

Breadcrumb triangle
CSS
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:

Modifica el texto de breadcrumbs
PHP
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 😉

En este ejemplo estoy usando el icono de Font Awesome para reemplazar «Portada». Ten en cuenta que si deseas que aparezca ese icono también debes añadir soporte para Font Awesome en tu plantilla.

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.

cambiar el estilo de las migas de pan en genesis
Breadcrumbs antes
modificar el breadcrumb en genesis
Breadcrumbs despúes

¿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.

¿Te gustó? ¡Comparte!

  • Haz clic para compartir en Facebook (Se abre en una ventana nueva)
  • Haz clic para compartir en Twitter (Se abre en una ventana nueva)
  • Haz clic para compartir en LinkedIn (Se abre en una ventana nueva)
  • Más
  • Haz clic para imprimir (Se abre en una ventana nueva)
  • Haz clic para compartir en Pinterest (Se abre en una ventana nueva)
  • Haz clic para compartir en Reddit (Se abre en una ventana nueva)
  • Haz clic para compartir en Tumblr (Se abre en una ventana nueva)
  • Haz clic para compartir en Pocket (Se abre en una ventana nueva)

About Guillermo

Emprendedor en constante proceso de aprendizaje. Programador y SEO. Trabajo en lo que me gusta.

Reader Interactions

Comments

  1. Jhol says

    11 julio, 2017 at

    he hecho lo que dices, pero no me a funcionado. No sale el fondo negro, se muestra todo pegado sin espacios.

    Responder

Deja un comentario Cancelar respuesta

Footer

Marketing Delta:
Alborada 10ma Etapa Mz405 N4 (Guayaquil - Ecuador).

Contáctanos

Copyright © 2021 · marketingdelta.net