css-personalizar-theme-genesis

CSS en Genesis, personalizando tu theme a tu gusto y sin agobios

Por fin te traigo los trucos de CSS que estabas esperando para personalizar tu theme de Genesis a tu gusto. O al menos, eso me habéis pedido algunos 😉

Vamos a abordar 3 cuestiones muy básicas pero muy importantes, que son:

  • Cómo cambiar la tipografía y poner la que te dé la gana con Google Fonts.
  • Cómo conocer el nombre de un elemento para poder cambiarlo por CSS.
  • Cómo cambiar los colores de los distintos elementos de mi theme.

Por último, haré un apunte sobre el concepto de «hojas de estilo en cascada». Importante.

Te lo cuento por escrito y también te hago un video con cada tema. Vamos allá.

css-personalizar-theme-genesis

 icon-edit Cómo cambiar el tipo de letra mediante Google Fonts

En realidad, puedes utilizar cualquier tipografía que tu quieras y tengas, no tiene que ser necesariamente una de las de Google Fonts.

Si hablo de ello para esto, es porque pienso que tiene mucha variedad donde elegir y, sobre todo, que su implementación en nuestro theme es muy sencilla, no necesitas ser ningún crack para hacerlo.

El proceso es el siguiente:

  1. Visita el sitio web de Google Fonts. (Con tu sesión de Google iniciada)
  2. Tienes un montón de tipografías, a la izquierda ves las categorías que hay.
  3. Encuentra la que te gusta, y pulsa en un icono con una flecha que apunta hacia la derecha.
  4. Si te deja escoger, puedes seleccionar la opción «bold», «italic», «extra-bold», etc.
  5. Una vez seleccionado lo que quieras, baja y verás una pestaña que pone «@import»
  6. Copia y pega esa línea de código al principio de tu style.css (Ver video)

Por si no lo tienes claro, aquí puedes verlo en video:

 icon-search Saber el nombre de cada cosa y poder «manipularlo»

La siguiente herramienta que vamos a ver es Web Developer.

Web Developer es un complemento que se instala en tu navegador, para Firefox y para Chrome. (Búscalo en Google con tu navegador abierto)

¿Para qué sirve? Con él activado, puedes hacer click en cualquier elemento de una página web y te dice las reglas de CSS que se le están aplicando.

De esta forma, luego lo puedes localizar y modificar en tu style.css sin volverte loco.

Esta herramienta sirve para otras muchas cosas, en este caso la utilizaremos para temas esto.

Lo que tienes que hacer es:

  1. Descargarte el Web Developer (es gratis, no cunda el pánico) 😉
  2. Instalarlo, ya sea para Firefox o para Chrome.
  3. Una vez instalado, sobre cualquier web haces botón derecho y en el menú que sale busca «Web Developer/CSS/Display Style Information».
  4. Creo que es mejor que veas el siguiente video, sino no te harás una idea de cómo va.

 icon-tint Cómo cambiar los colores, algo fácil de ejemplo

Puedes elegir en las opciones de Genesis unos colores de «base» que se aplicarán por defecto sin que tú hagas nada.

Por ejemplo, puedes utilizar azules, verdes, rosas… dependiendo de las opciones de tu theme.

Si utilizas los colores por defecto del theme, te será relativamente fácil modificar los colores de lo que quieras, localizándolo primero con el Web Developer y después cambiándolo en el style.css

El problema es que si escoges otros colores de bases, la opción «blue» por ejemplo, para que se apliquen por defecto una serie de azules en todo (barras de menús, botones, enlaces, etc…) pues ahí en el CSS ya no se van a aplicar las mismas líneas de código.

Esto si te lo explico por escrito no lo vas a entender, mejor que veas el siguiente video donde te explico esto cambiando los colores de la barra de menú a un color que no sea ninguna de las opciones que vienen por defecto.

 icon-copy Cascade Style Sheets: hojas de estilo en cascada

Esto último que hemos visto en el video, me sirve para explicarte el concepto de «hojas de estilo en cascada» y por qué a veces aplicamos cosas en el código, donde parece que es, pero luego en realidad no se aplican los cambios.

Bien. Lo de «en cascada» significa, que el código de CSS se lee de arriba a abajo. Esto es, que yo al principio del código puedo estar aplicando un valor a una propiedad de un elemento, pero si luego unas líneas más abajo de ese mismo código le aplico otro valor a la misma propiedad del elemento, pues me lo cambia.

Traducido al castellano: que si arriba del código le pongo que un botón sea rojo, vale, pero que si más abajo del mismo código volvemos a tener el mismo botón y se le dice que sea azul, el botón en pantalla se mostrará azul.

A un elemento se le pueden aplicar distintas clases y esto es lo complicado del CSS.

Siguiendo el ejemplo del video, puedes ir a cambiar la clase «.nav-genesis» para editar el «background-color» (color de fondo). Bien.

El problema es, que si tienes seleccionada la opción de «colores base blue», más abajo en el código se aplicará una clase llamada «.blue-theme .nav-genesis { background-color: blue; }»

Y ya puedes ponerle lo que quieras todo convencido a la primera, que aplicará la lectura en cascada y hará caso a lo que tenga más abajo.

Si quieres aprender más cosas sobre el manejo básico de CSS:

  • CSS básico para mejorar tu blog
  • Trucos para personalizar tus widgets con CSS

 icon-smile-o Conclusiones

Esto son sólo algunas cositas sobre Genesis y el uso de CSS para personalizar tu theme.

En próximos post iremos viendo otras cosas, como la estructura de widgets del Home o la forma de personalizar la cabecera.

Porque poner un texto o una imagen es fácil, pero… ¿y modificar el tamaño de la imagen porque el que viene por defecto es demasiado pequeño para lo que tú quieres? 😉

Acepto sugerencias e ideas para futuros posts sobre Genesis, ¿algo que comentar?

Artículos de la serie Genesis Framework:

  • Genesis Framework: la guía re-definitiva que debes consultar si estás pensando en cambiarte a Genesis
  • Guía definitiva para personalizar tu child theme de Genesis
  • Child Theme, 10 factores a tener en cuenta a la hora de elegir tu theme
  • CSS en Genesis, personalizando tu Child Theme agusto y sin agobios
  • Plugins de Genesis hay unos cuantos, te presento mis 5 imprescindibles
  • Genesis Simple Sidebars: usa distintos widgets donde y como te plazca
  • Genesis Grid Loop: otra vuelta de tuerca a tus páginas de contenidos
  • Genesis Responsive Slider con Executive Pro para webs corporativas
  • Genesis Simple Hooks: vamos a jugar con nuestro theme de Genesis
  • Qué es un Third Party Theme de Genesis y ejemplo con toque femenino

40 comentarios en “CSS en Genesis, personalizando tu theme a tu gusto y sin agobios”

  1. Hola omar
    1o gran posttttt
    2o una question: google fonts no afecta a la velocidad de carga??
    Graciaas
    Tienes mis 5🤩

    1. Omar de la Fuente

      Hola Ana,
      ni idea de cuanto exactamente, pero teniendo en cuenta que lo utilizan practicamente todas las webs es algo que no me preocuparía.
      Un saludo!

  2. Buenos días Omar! Gracias por el post, tengo una pregunta ¿sabes por qué puede ser que los widget del footer no salgan en la home y en el resto si? Estoy utilizando el theme infinity pro de studiopress.

    Gracias!

    1. Omar de la Fuente

      Hola Pepe,
      seguramente ese theme pues tenga esa opción así configurada por defecto.
      O puede ser que hayas escogido una página en concreto para visualizar la home, porque en principio si has seleccionado «ultimas entradas» para que se fomra la Home mediante el puzzle de widgets… entiendo que los del footer deberían de salir también ahí.
      Trastea con las opciones del theme, de todas formas a unas malas piensa que la Home debería ser una página enfocada a un solo objetivo, donde quizá la info habitual de unos widgets en el footer nos puede hasta sobrar…
      Un saludo!

  3. Hola Omar,
    Me ha encantado tu tutorial para cambiar las fuentes a Google Fonts, muy sencillo y muy claro, y lo acabo de hacer al pie de la letra pero no veo ningún cambio.
    Tengo la plantilla de Infinity Pro.
    Y si vuelvo al editor sale que las fuentes están cambiadas pero todo sigue igual.

    ¿Sabes qué puedo hacer?
    Muchas gracias!!

    1. Omar de la Fuente

      Hola Silvia,
      es muy complicado decirte porque pueden ser varias cosas.
      Desde una triste «coma» que hayas puesto mal en el código y por más que lo repasas no lo ves (suele pasar mucho, a mí el primero), como que tengas alguna otra regla CSS que se está superponiendo y siendo aplicada por encima de lo que tú acabas de añadir, dentro del propio style.css…
      Sólo puedo decirte que lo revises bien el código y te asegures de haberlo puesto en el sitio correcto.
      También puedes probar a ver la web en otro navegador, no vaya a ser un tema de la caché del navegador.
      Lamento no poder decirte mucho más, un saludo!

      1. Hola Omar! Lo he revisado y no veo qué puede ser..
        En fin, mucha gracias de todas formas por compartir tus conocimientos y por tu rápida respuesta!
        Un saludo

  4. Buenos días Omar. Enhorabuena por el blog, el post y gracias por tu ayuda de antemano.
    Para modificar el Css (que no tengo ni idea de hacerlo de otra forma…) y teniendo Chrome utilizo la extensión «stylebot» y me da buenos resultados….
    Me gustaría saber una cosa (si no es mucho pedir), ¿cómo haces para añadir la sombra en el layout de la página?…
    Gracias.
    Un saludo

  5. Hola Omar estoy personalizando el theme metro pro pero no se como eliminar la parte que esta arriba del titulo : donde dice la parte donde estoy de la pagina

    ejemplo: you are Home etc. etc.

    sabes que parte de la plantilla o hoja de estilo debo modificar para eliminarla de la plantilla ?

    y donde dice la cantidad de comentario ponerlo en español ya que esta en ingles?

    Me estoy poniendo loco

    jaja

    Un saludo eduardo V

    1. Omar De La Fuente

      Hola Eduardo,
      para lo de donde estás en cada momento, entra en Genesis/Opciones del tema y desactiva lo de «Breadcrumbs»

      Lo del idioma, instalate el plugin Genesis Translations y con eso debería valer 😉

      Un saludo.

  6. Hola Omar
    Este post me ha sido de mucha ayuda, hace un tiempo le metí mano al editor de mi child theme y provoqué un fallo que me dejó con miedo de volverlo a intentar.

    Siguiendo las indicaciones de uno de los videos pude hacer algo que hace meses quería y no encontraba la forma.

    Me gustaría invitarte una cerveza de agradecimiento, pero vivo un poco lejos 😉

    Un saludo desde Ecuador!

  7. Hola, Omar.
    Estoy desarrollando mi web con framework génesis y utilizo el tema news pro. El caso es que quiero realizar algunos cambios en los colores de fondo del menú de cabecera para personalizarlo a mi gusto. He leído tu información sobre web developer pero no sé si han cambiado cosas. Utilizo el navegador Chrome y he instalado la extensión web developer pero no funciona lo que comentas sobre que con el botón derecho del ratón aparezca un desplegable con web developer y las opciones de style information. Pincho sobre el logo que hay de la extensión en la parte de la ventana del navegador pero dentro de las opciones que salen no veo ninguna que diga style information. No sé si han cambiado algo, tienes idea sobre ese asunto?
    Gracias y un saludo.

    1. Omar de la Fuente

      Hola Luis,
      si ha variado algo respecto a la versión o su uso con Chrome, lo desconozco.
      Yo lo uso con Firefox desde siempre, y cero problemas.
      Un saludo.

  8. Hola Omar, otra vez por aquí para ver si me puedes ayudar, resulta que deseo achicar el espacio que hay entre mi barra de menu y la siguiente imagen que es el fondo de la plantilla Beautiful Pro Theme, he modificado algunas cosas en el editor, pero no me da resultado y ya no no se como hacerle, mi pagina aun esta en contruccion por eso no puedo poner el enlace. Si tienes alguna sugerencia será bienvenida.

  9. Manuel Pérez

    Hace ya un mes que te leo, visto tus videos,…. y al final he seguido tu consejo: ¡me he cambiado a MetroPro+Genesis usando tu enlace de afiliado y a WebEmpresa usando tu código de tu cupón! y he vuelto a rediseñar mi sitio desde cero.

    Me ha llevado casi un mes todo esto (rediseño, ver cómo funciona génesis y estudiarme todas las notas al respecto en tu blog. Gracias por enseñarme el camino Omar.

    Te agradezco tus notas y explicaciones que me invitaron a cambiar de proveedor de hosting y de plantillas por StudioPress

    1. Omar de la Fuente

      Hola Manuel,

      me alegro que te hayan servido mis contenidos para progresar con tu proyecto, fenomenal, y muchas gracias por echarme un cable contratando con mis enlaces 😉

      Sobre lo otro que me comentas, ya conseguí ver cómo se hacía precisamente a través de ese blog que comentas, aunque no lo implementé.

      No suelo publicar enlaces en los comentarios, pero animo al que quiera a que haga click en tu nombre para ir a ver tu blog.

      Un abrazo.

  10. Hola Omar, excelente los post que publicas, sigue compartiendo informacion de calidad, estare a la espera de tu curso. Pero queria hacerte una pregunta, ya he podido configurar todo, solo lo que no pued es la parte de Magic Action Box, como has configurado para que te quede asi, en donde has puesto el css, cambiar el color de link, y poner de otro color el titulo dentro de la caja..
    agradeceria mucho, si me pudieras dar algunas luces, he estado peleando con ello

    1. Omar de la Fuente

      Hola Edwin,

      sería muy complejo explicarlo por escrito, pero te daré unas pistas:

      Cuando escribes el tiulo (main heading) de tu action box, en ese campo se puede escribir HTML y CSS. (Etiquetas «strong», «style=»color:red;», ….)
      IMPORTANTE: he notado un fallo en el plugin, y es que cuando utilizas etiquetas dentro de esos campos, lo entiende, pero si vuelves a entrar en otro momento a editar el action box, ese mismo campo se borra, por lo que si no te das cuenta y actualizas se quedará desconfigurado. Hay que fijarse y volver a escribir el texto completo de ese campo antes de actualizar y hacer otros cambios.

      Por otro lado, lo de cambiar el color del botón ya es tocar el CSS dentro del propio plugin. Es más complicado, pero lo puedes intentar en «Plugins/Editor» y arriba a la derecha seleccionas el plugin del que quieres ver los .css y demás archivos que lo componen (con cuidado de no cargarse nada) 😉

      Un saludo.

  11. Con respecto a google fonts hay una controversia entre cual es la forma mas optimizada de agregar nuevas fuentes desde google, a base de mi experiencia sugiero realizando agregando una accion al archivo functions.php del child theme. aqui un ejemplo:

    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts() {
    echo »;
    }

  12. Agustín Millán

    Hola Omar, muchas gracias por estos posts tan currados. Estuve buscando información sobre Genesis, pero no he encontrado nada tan útil como lo que estás publicando y menos en español.
    Uno de los tantos puntos pendientes que tengo es el buscar un theme para el blog, cada vez estoy más decidido a coger alguno de Genesis.
    Muchas gracias otra vez por todo los que nos estas aportando.
    Un saludo.

      1. Agustín Millán

        Me has convencido Omar. Acabo de adquirirlo, ahora voy a ver si lo tuneo un poco siguiendo tus instrucciones.
        Muchas gracias.

  13. Pues qué te voy a decir yo… A mi me encanta esta serie de entradas sobre CSS y sobre Genesis 🙂

    (Después de quitar el WC3 Total Caché, todo ok, ya puedo hacer cambios. Gracias)

  14. Yo que soy fan del firefox, utilizo otro complemento que se llama FIREBUG y que es muy parecido al que tu recomiendas y va muy bien, sobretodo para cambios en el CSS.

    Lo comento por aportar otra alternativa.

    Añadir que cuando hacemos cambios en el CSS del theme a veces es necesario añadir la etiqueta !important al final de esa linea CSS para que mande por encima de las demas reglas que el theme trae de origen.

    1. Omar de la Fuente

      Hola Jose,

      tu comentario es un ejemplo 100% del comentario que realmente aporta valor.

      Firebug si que lo conocía, solo que utilizo el otro pero genial porque es otra alternativa que quizás los lectores no conozcan.

      Donde ya me partes en dos es con el apunte de «!important» pues hasta ahora yo pensaba que era una simple anotación en el código para resaltar que eso era importante, pero de cara a la lectura nuestra del código, no que realmente tuviera una función y mucho menos una tan útil como esa!!!

      Mil gracias por tu aportación, un saludo!

  15. Rafael García Gutiérrez

    Buenas tardes Omar:

    Cada día me gusta más tu blog. Espero ansioso tus post tan técnicos y útiles. Cómo hacer esto, cómo hacer aquello y, por si alguna duda, con un video y todo. Vamos, una virguería. Lástima que con tanto trabajo te estés alejando del nivel de grandes trabajadores de este país como Belén Esteban, Kiko Matamoros…y, por consiguiente, de su nivel salarial. En fin, es lo que tiene ser un currante, que nunca llegarás al nivel económico de los arriba mencionados…

    Bueno, ironías aparte. Quería preguntarte dos cosas:

    1- Por un lado me encantó aquello de los Sliders de AVADA y justo cuando andaba convencido con ese Theme apareció la revolución GENESIS y tu blog y…Vuelta a las dudas. Ahora ando buscando child theme para Génesis pero mi pregunta es respecto a todas las posibilidades que ofrecían los SLIDERS de ÁVADA. ¿Es posible tener algo de aquello con GENESIS? Es que flipo con las demo de todos los tipos de SLIDERS que tiene la demo de AVADA. También me interesa tener un portfolio pero parece que GENESIS me aporta más o menos lo mismo que AVADA, o no?

    2- Para el caso de GENESIS. ¿Por qué te decidiste por METRO?¿Qué valoraste que no te ofrecieran las otras? ¿Qué te parece el child theme «Going Green Pro Theme»? ¿O el executive Pro Theme?

    En fin, que sigo dando vueltas a elegir tema. Si tan bueno es GENESIS no quiero descartarlo pero con AVADA hiciste un buen trabajo formativo que creo que me podría valer para enfrentarme al tema. Quisiera montar una WEB de formación en ingeniería pero aportando algo distinto a las otras que pueda haber y, bueno, creo que el tema audiovisual es fundamental en la transmisión de conocimientos vía online y quizá los sliders de AVADA podrían serme de gran ayuda en esta idea diferenciadora.

    En fin, no sé qué opinas de todo esto.

    Un saludo y, de nuevo, enhorabuena por tu gran trabajo (bueno, a mi me lo parece así)

    PD: Si compras GENESIS+child theme, ¿puedes más adelante comprar un nuevo child theme sin GENESIS? ¿Cuál sería el precio del child theme sólo?

    1. Omar de la Fuente

      Hola Rafael,

      son muchas preguntas para responder todo por aqui. Te respondo algunas de forma breve y te contesto más al detalle por email.

      1- Genesis tiene un plugin específico llamado «Genesis Slider» que te permite añadir Sliders.
      2- Me decanté por Metro Pro ya que me pareció muy completo y su estructura a priori encajaba con lo que yo quería.
      3- Cuando compras Genesis+Child te conviertes ya en cliente con tu cuenta de StudioPress. Cuando vuelvas a hacer otra compra, puedes coger sólo otro Child y tienes descuento, creo que son a 33$ cada child suelto.

    2. Hola Rafael. Yo te aconsejo comprar primero el Genesis Framework sólo, y luego volver a entrar y comprar el Childtheme que quieras, ya que una vez compras el Framework y te registras en StudioPress, al volver a entrar ya te reconoce y te aplica un precio especial, con lo que te ahorras unos 7 eur si no recuerdo mal.

      (Al volver a loguearte, como ya has comprado el Framework, los theme te aparecen con su precio independiente)

      1. Rafael García Gutiérrez

        Hola Teresa:

        Comprando GENESIS+CHILD THEME –> $99,95

        Comprando GENESIS –> $59,95
        Comprando CHILD THEME–> $33 (según la respuesta de Omar)
        TOTAL –> $92,95

        Efectivamente, te ahorras $7.

        Qué curioso. Debería ser al revés. Que comprando FRAMEWORK+CHILD THEME te resultara más barato que si compras primero una cosa y luego otra.

        Muchas gracias Teresa por tu ahorrativo apunte.

  16. Muy buenos los vídeotutoriales, Omar, pero ahora he comprobado que no es que estuviera haciendo algo mal, lo hacía como explicas, pero no sé por qué motivo, da igual lo que modifique en style.css, porque no se aplica nada. Y tengo el Metro theme como tu.

    Ya estoy pensando si no será algún tema de incomptibilidad de algún plugin. POrque no se me ocurre nada y no puedo modificar las cosas (ni si quiera añadir los iconos de compartir en las entradas (a pesar de estar seleccinada la opción de mostrarlos).

        1. Hola!! No se publico en el otro comentario, pero queria decirte con el menu puede pasar , porque segun la plantilla se usan distintos selectores.
          uno es el
          #genesis-nav-menu
          y otro puede ser el .nav-primary o similar.

          Dependiendo de la importancia y los atributos de cada uno, capaz se hace cambio en uno y no se ve reflejado.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Responsable » Omar de la Fuente Prieto (servidor)
Finalidad » gestionar los comentarios.
Legitimación » tu consentimiento.
Destinatarios » los datos que me facilitas estarán ubicados en los servidores de Webempresa (proveedor de hosting de Haciaelautoempleo) dentro de la UE. Ver política de privacidad de Webempresa. (https://www.webempresa.com/aviso-legal.html).
Derechos » podrás ejercer tus derechos, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

Ir arriba