Zerif Lite: ¿Cómo eliminar la opacidad del fondo?

96 comentarios

¡Atención! Zelle Lite (ex Zerif) ya no se actualiza. Cambia a:

Hestia

Hestia

Multipropósito
Adaptable a todos los dispositivos
Fácil de configurar

Más opciones en Hestia Pro

Neve

Neve

Súper rápido
Compatible con AMP
Hecho para Elementor

Más opciones en Neve Pro

Tutoriales de Zerif Lite en español

Por: Caribdis.Net

Publicada: 2 de diciembre de 2015

En este quinto tutorial vamos a aprender a manejar la opacidad de la imagen de fondo para la sección de título grande en el tema gratuito Zerif Lite.

Zerif Lite - Opacidad

Puede que no nos guste el efecto de opacidad y queramos que la imagen tenga su contraste original. Para eso tendremos que añadir el siguiente código a la hoja de estilos (el archivo custom.css) del tema hijo; las instrucciones para crear un tema hijo se encuentran en esta entrada anterior:

.header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, 0);
}

Tener en cuenta que este código también suprime el efecto de opacidad en la sección Contáctenos.

Zerif Lite - Opacidad - Sección "Contáctenos"

Para conservarlo, simplemente eliminar el selector .contact-us.

Si no desea eliminar la opacidad, pero sí atenuarla un poco, puede ajustarla cambiando el valor de la última cifra, a algo así:

.header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, .3);
}

Y si desea aplicar una opacidad de distinto color, cambie los valores RGB. Por ejemplo, para un color que coincida con el rojo de los botones, quedaría algo así:

.header, .header-content-wrap, .contact-us {
    background: rgba(233, 102, 86, .3);
}

Zerif Lite - Opacidad - Rojo

Una herramienta muy útil para cuando trabajamos con colores, es la que nos ofrece el sitio HEX to RGB Converter: Aquí podemos insertar los valores hexadecimales correspondientes para un color y convertirlos a valores RGB.

¿Qué pasa si nada más queremos aplicar estilos a Zerif Lite, pero sin cambiar nada en los archivos? En este caso, el tema hijo no es necesario, ya que a partir de la versión 4.7 WordPress incluye la opción CSS adicional en el Personalizador, que nos da la posibilidad de pegar los códigos necesarios en el recuadro correspondiente y ver los cambios en el momento. La opción se encuentra al final:

Tutorial original en inglés: How to remove background opacity in Zerif

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

96 Comentarios

  1. Henry

    Buen día estimada, muy buen aporte de su parte con todo lo que hay en su contenido, Tengo una pregunta, ¿Que código css uso para cambiar el color y el tamaño al texto de las secciones de la pagina de inicio de mi tema Zerif lite?, te agradecería un mundo por tu ayuda, saludos desde Ecuador!!!

    • Caribdis Diseño Web

      Hola, Henry.

      Fijate en esta respuesta están todos los códigos correspondientes a las secciones. Para el tamaño, dentro de los selectores, usá font-size: 16px; (con el valor en píxeles que necesites).

      Saludos.

  2. Christofher

    Hola buenas tardes, primera vez que uso el tema y me encanta pero tengo un problema quiero cambiar el color de fondo del “navbar” a transparente pero no logro hacerlo… ¿me ayudarian por favor?

    • Caribdis Diseño Web

      Hola, Christofher.

      Fijate en esta respuesta.

      Saludos.

      • Christofher

        Hola, hice lo que me decia pero no cambia con ese codigo se vuelve a poner en blanco… que hago?

        • Caribdis Diseño Web

          Hola, Christofher.

          El código es correcto. Tenés que pegarlo en el recuadro CSS adicional del Personalizador o en el archivo custom.css si estás usando un tema hijo.

          Saludos.

          • Christofher

            quiero enviarles una imagen… tengo la version pro del tema… y no puedo al principio me carga el fondo transparente luego se vuelve de nuevo a blanco… como les envio una imagen? necestio ayuda

          • Caribdis Diseño Web

            Hola, Christofher.

            Si es Zerif Pro, usá background: transparent !important.

            Saludos.

  3. Greicy

    Hola tengo un problema cambio la imagen de fondo la coloco del mismo tamano de la original de 1901×1266 pixeles pero me sale como cortada no se ve completa como hago para que tome la imagen de fondo bien. Sin cortarla?

    • Caribdis Diseño Web

      Hola, Greicy.

      Guardá la imagen con un ancho superior. Fijate que el tamaño que recomiendan en la documentación es de 2048×1365 píxeles (para que se vea bien en monitores de resoluciones altas).

      Saludos.

  4. Oscar Murguia

    Hola Ana. Uso zerif ya instalado al 100% pero no me aparece em móvil la imagen de cabecera. No encuentro que configuración pueda ser la solución. ¿Alguna idea?. Excelentes los tutoriales. Saudos.

    • Caribdis Diseño Web

      Hola, Oscar.

      Veo que tenés demasiados plugins y seguramente es alguno que está haciendo conflicto. Desactivalos uno por uno hasta dar con el culpable.

      Y por otro lado, tratá de optimizar las imágenes, porque la página tarda muchísimo en cargar. Fijate en el tutorial, se indican las medidas recomendadas.

      Saludos.

      • Oscar Murguia

        Ana, eres muy amable. Probaré con lo que comentas. Una vez más, agradezco la realización de estos tutoriales.

      • Oscar Murguia

        Hola de nuevo Ana. Pues ya elimine varios Plugins y reduje drásticamente tamaños de imágenes, sin embargo y aunque tengo el plugin WP Super Cache, la carga aún sigue siendo algo prolongada (y el gris sigue bloqueando la imagen de cabecera en móviles). ¿Recomiendas instalar algún plugin extra para velocidad?

        • Caribdis Diseño Web

          Hola, Oscar.

          Veo que es una versión bastante desactualizada del tema, así que algún bug debe haber con respecto a la imagen de fondo.

          En cuanto a la velocidad, son varios los factores que influyen, como el servidor y los plugins que tengas activados. El video incrustado también agrega tiempo de carga.

          Saludos.

          • Oscar Murguia

            Hi Ana! Comparto las causas ya detectadas y soluciones aplicadas:

            Imagen del fondo: Pude al fin hacerla aparecer en el móvil eligiendo en Background Image : Fit to Screen y Repeat Background Image.

            Velocidad: No eran los Plugins. Con F12 detectamos que había errores con la hoja de estilos, está llamando contenido sin HTTPS. Así mismo, la Google font del tema: “Lato” estaba dando problemas. Me apoyé con mi proveedor de hosting quien me ayudó a editar el código y aunque no es tan veloz, si mejoró la carga. Muchas gracias por tus respuestas.

          • Oscar Murguia

            Hola! Hoy actualicé a la versión más reciente de Zerif y SANTO REMEDIO. He logrado una carga de 6 segundos. ¡Estoy FELIZ! Fue muy desgastante el proceso y tuve que editar nuevamente algunas secciones, pero ya esta!

  5. john villegas

    buenas noches, he leido mucho tus comentarios.
    Me gustaria que me ayudaras a resolver lo siguiente:

    1. tengo el tema zerif pro y instalado ,pero quiero cambiar el color de la cabecera donde se ubica el logo y el menú es de color blanco pero quiero cambiarlo a otro color por medio del código css, pero no lo acepta, este codigo fue el coloque
    .navbar {
    background: #003d6b;
    }

    en el css adicional. me ayudar porfavor gracias.

    • Caribdis Diseño Web

      Hola, John.

      En Zerif Pro podés cambiar los colores desde el personalizador. Para la cabecera es la opción Colores > Colores generales > Color de fondo del menú de navegación.

      Saludos.

      • John

        Hola buenas noches Ana,gracias ya pude cambiar el color.
        Pero tengo otra duda podría cambiar el fondo blanco de mis páginas y entradas a otro color y cómo sería .
        Y me podrías ayudar con el código CSS para aumentar el tamaño de los logos de clientes gracias

        • Caribdis Diseño Web

          Hola, John.

          Para lo primero, fijate en esta respuesta. Y para lo segundo, está este tutorial.

          Saludos.

  6. Luis

    Hola Ana,
    instale el codigo

    .header, .header-content-wrap, .contact-us {
    background: rgba(0, 0, 0, 0);
    }

    Pero la imagen en la sección Blog no cambia y aparece con el efecto y se ve muy oscura.
    Que puedo hacer.

    Mil gracias

    • Caribdis Diseño Web

      Hola, Luis.

      La clase para esa sección es .blog-header-content-wrap.

      Saludos.

  7. alejandro macià

    Hola, quiero que el fondo de las páginas (donde aparece el texto) en el tema twenty seventeen de wordpress, en vez de ser blanco, sea transparente, a fin de que el texto de las secciones (inicio, servicios, contacto…) se lea sobre la imagen de la cabecera… ¿Es posible? Gracias y felicidades por tu impresionante blog… Me estoy poniendo al día con tus articulos y respuestas a comentarios.

    • Caribdis Diseño Web

      Hola, Alejandro.

      Gracias por tu comentario.

      En el recuadro CSS adicional del personalizador (u hoja de estilos del tema hijo) pegá el siguiente código:

      .home .site-content-contain {
          background: transparent;
      }
      

      Tené en cuenta que también el pie de página quedará transparente. Para que sea blanco usá el siguiente código:

      .home footer {
          background: #fff;
      }
      

      Saludos.

  8. Antonio Diez

    Queria aprovechar lo dinamico de este foro de consultas, para preguntar si tienen como, aprovechando la opcion que brinda WP 4.7 de incorporar template en los posteos, sin necesidad de utilizar plugins que como en mi caso suelen fallar actualizacion tras actualización.

    Vi este video https://www.youtube.com/watch?v=A4-axjEGvtY pero no me queda claro como hago ademas para incorporar varios formatos juntos, para poder variar segun los posts.

    • Caribdis Diseño Web

      Hola, Antonio.

      Tendrías que usar una plantilla diferente para cada formato que quieras cambiar. La plantilla debería estar encabezada por el siguiente código:

      <?php 
      /**
      * Template Name: Mi plantilla
      * Template Post Type: post
      */
      

      Simplemente usá nombres de plantilla distintos para cada diseño (guardando el archivo también con distinto nombre, por ejemplo, single-mi-plantilla.php).

      Saludos.

  9. Hernan

    Hola.
    Por favor ayudame con un código para cambiar de color el título principal grande del tema. Gracias

    • Caribdis Diseño Web

      Hola, Hernán.

      Fijate en esta respuesta, el código que corresponde al título grande en cabecera.

      Saludos.

      • Hernan

        Muchas gracias.
        Ahora si no es mucha molestia porfavor ayudame con esto, ¿Como puedo cambiar el color del pie de página ?. y Gracias por tus aportes.

        • Caribdis Diseño Web

          Hola, Hernán.

          La respuesta aquí.

          Saludos.

  10. Younly

    Hola, seria posible hacer más transparentes los campos blancos del formulario contact-form-7 ?.
    Gracias nuevamente

    • Caribdis Diseño Web

      Hola, Younly.

      Tendrías que darle al fondo un valor menor de opacidad, por ejemplo:

      .input-box, .form-control {
          background: rgba(255,255,255,.75);
      }
      

      Modificá el .75 por el valor que necesites.

      Saludos.

  11. Víctor Rodríguez

    Saludos, Una consulta:

    ¿Cómo puedo cambiar el color de sombreado (al colocarle el mouse arriba de la letra)? Tengo un problema con mi web principal www.indweb.com.ve Porque como puedes observar, la convinación de Verde/azúl y el predeterminado sombreado de letras (Naranja) No convina. Si pudieras ayudarme con eso te lo agradecería muchísimo.

    Además de lo anterior, ¿Cómo podría cambiarle el color gris que posee la página www.integrasg.com.ve por un negro mate? Es que por las opciones personalizadas no puedo y por el css no tengo ni idea como hacerlo. En fin, gracias por toda la info, excelente página web.

    • Caribdis Diseño Web

      Hola, Víctor.

      Para lo primero tendrías que usar el siguiente código:

      .sticky-navigation .main-navigation li a:hover,
      .sticky-navigation .login-register li.login a:hover {
          color: #000000;
      }
      

      Cambiá #000000 por el valor de color que necesites. Y para lo segundo:

      .about-us, #footer, .copyright {
          background: #000000;
      }
      

      Saludos.

      • Victor Rodriguez

        en donde colocaría eso? Saludos y buen fia.

        • Caribdis Diseño Web

          Hola, Víctor.

          Fijate que está explicado en esta entrada. Puede ser creando un tema hijo, o usando un plugin para agregar código CSS personalizado.

          Saludos.

      • María Ángeles

        Buenas tardes

        Tengo el mismo problema, el color naranja al pasar por encima de las letras no casa con los de mi web, pero al pegar el código

        .sticky-navigation .main-navigation li a:hover,
        .sticky-navigation .login-register li.login a:hover {
        color: #000000;
        }

        en el CSS Adicional no funciona.

        Además de esto, también se ponen naranja y subrayados en naranja los textos del menú y submenús al clicar en ellos. Po último, las líneas debajo de los títulos en las páginas también aparecen naranjas. Podrían ayudarme con eso? Me gustaría cambiarlo todo de color.

        Mil gracias por su trabajo.

        • Caribdis Diseño Web

          Hola, María Ángeles.

          Ese código corresponde al tema Azera Shop. Para Zerif Lite, los códigos están en esta respuesta.

          Saludos.

  12. Carlos

    Hola… como se podría poner un gift en lugar de la imagen de fondo????

    Gracias por vuestro gran trabajo. sois de mucha ayuda

    • Caribdis Diseño Web

      Hola, Carlos.

      Podés agregar un archivo en formato GIF desde Personalizar > Imagen de fondo.

      Saludos.

  13. erick

    hola como puedo poner en css una instruccion para que mis paginas salgan semi transparentes o transparentes.. muchas gracias soy principiante

    muchas bendiciones por tu labor!

    • Caribdis Diseño Web

      Hola, Erick.

      Gracias por tu comentario.

      El código es background: transparent; para un fondo transparente o background: rgba(0,0,0,.5); para un negro semitransparente (tenés que editar el valor de color rgb y el nivel de alfa). Depende dónde lo quieras aplicar usarás el selector que corresponda. Por ejemplo, una página entera tendría el siguiente código:

      body {
          background: transparent;
      }
      

      Saludos.

      • Carlos Romero

        Hola, cambie ese código en el archivo CSS del documento “style” de la carpeta del tema y no se da cambio alguno, sigue el fondo blanco, ¿qué puedo hacer? Muchas gracias.

        • Caribdis Diseño Web

          Hola, Carlos.

          Depende de lo que quieras cambiar. Las páginas internas tienen color de fondo aplicado al contenedor. Si querés cambiar ese fondo, el código sería:

          .site-content {
              background: #000;
          }
          

          Saludos.

  14. younly

    Hola me animo nuevamente a solicitar su ayuda, y esta vez les dejo estas tres dudas:
    1. Necesito que me faciliten el codigo para poner un color diferente a cada uno de los circulitos que aparecen en la sección Nuestro Enfoque.
    2. Cambiarle el color a las secciones de nuestro enfoque y quienes somos.
    3. Cree un menu de contacto en la parte inferior de mi pagina y me gustaria que al darle click el mismo se desplace hasta la seccion de contactos que esta en la parte de abajo de la pagina, o de igual manera que se abra en otra pagina, si pudieran por favor me aportan las dos variantes, para valorar cual es la que encaja mejor a mis gustos.
    Saludos y mil gracias…ahhh y felicitaciones por tantos aportes que nos dan para que podamos crear nuestras propias web con los minimos conocimientos y con la colaboración de ese eficiente equipo que tienen.

    • Caribdis Diseño Web

      Hola, Younly.

      El primer punto ya te lo respondí.

      El segundo:

      /* Nuestro enfoque */
      .focus {
          background: #000000;
      }
      /* Quiénes somos */
      .about-us {
          background: #000000;
      }
      

      El tercero, en el tutorial está explicado cómo añadir los anclajes. Y los elementos del menú que enlazan a páginas internas se agregan como cualquier otro en WordPress, desde Apariencia > Menús.

      Saludos.

  15. johana

    buenas tardes
    quiero cambiar el diseño de texto y fondo de cada pagina.
    que debo hacer
    gracias.

    • Caribdis Diseño Web

      Hola, Johana.

      Este tema está diseñado para presentar la información en una sola página (la portada). Si necesitás algo más avanzado, tendrías que probar con algún plugin constructor de páginas.

      Saludos.

  16. Andrea Lopez

    Hola,

    Quiero felicitarte por tu estupendo sitio y preguntarte: ¿Cómo puedo borrar el background del h1. intro-text, es decir, del título grande de mi sitio?

    De antemano,
    Mil gracias.

    • Caribdis Diseño Web

      Hola, Andrea.

      Gracias por tu comentario. El fondo que se ve en esa sección es el fondo de la página. Si querés ocultar esa imagen con un color sólido, usá la clase header-content-wrap con el código que está en esta entrada, pero usando un valor alfa de 1 o un color hexadecimal.

      Saludos.

      • Andrea Lopez

        Hola,

        Mil gracias por responder pero me temo que no lo estoy resolviendo. Cuando desactivo el background en el html funciona, pero cuando copio y pego este setting en el editor CCS, no me lo aplica. 🙁

        Otra pregunta: ¿Sabes cómo dejar fija la imagen del padding? saludos y gracias.

      • Andrea Lopez

        Ah, ya logré eliminar la opacidad del fondo. Mil gracias. Saludos.

        • Caribdis Diseño Web

          OK, en cuanto a dejar fija la imagen, no me queda claro a cuál te referís.

          • Andrea Lopez

            Hola, me refiero la que aparece en la sección de título grande, es decir, la del efecto parallax. Me gustaría que no se moviera pero no consigo lograrlo.

            Mil gracias nuevamente,

          • Caribdis Diseño Web

            Hola, Andrea.

            El efecto Parallax está diseñado justamente para eso: que la imagen y el fondo se muevan, dando una sensación semi-3D. Tendrías que usar la opción de Fondo.

            Saludos.

  17. karina

    hola buenos dias soy nueva en esto…y tengo una duda..como hago para que la imagen principal de la cabecera quede solo hay y pueda pasar varias imágenes aleatoria mente….y que al desplazar la pagina no se vea como fondo..

    • Caribdis Diseño Web

      Hola, Karina.

      Este es el tutorial para reemplazar esa sección por un slider.

      Saludos.

  18. Ignacio

    Hola, excelentes los aportes, la verdad es que sirven y mucho. Mi consulta es la siguiente: ¿Cómo cambiar el color de la letra del titulo de “Contactenos”?

    • Caribdis Diseño Web

      Hola, Ignacio.

      Gracias por tu comentario.

      El código sería el siguiente:

      #contact .white-text {
          color: #1990A4;
      }
      

      Saludos.

  19. Juan Gil

    Hola, estuve leyendo gran parte del blog, gran parte de cada post y no pude conseguir respuesta a una duda, ‘Cómo hacer para desactivar el efecto Parallax’; al desactivarlo con la casilla en el apartado ‘personalizar’ me deja un fondo de color, en este caso gris, ahora bien, quiero tener una imagen en la sección de ‘Titulo Grande’ pero que no tenga ese efecto de ‘brinco’ al que llaman parallax.

    Espero sus comentarios.
    Gracias.

    • Caribdis Diseño Web

      Hola, Juan.

      La sección de título grande usa la misma imagen de fondo del sitio (que se configura en Apariencia > Fondo). Si solo querés aplicar una imagen a esa sección tendrías que usar el siguiente código (en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador):

      .header-content-wrap {
          background: url(http://rutacompletadelarchivo.com/032.jpg);
      }
      

      Saludos.

  20. Vítor

    Buenos días, me gustaría cambiar el fondo de mi página que por defecto es el blanco al negro, la forma de proceder?

    • Caribdis Diseño Web

      Hola, Vítor.

      Este es el código que deberías usar:

      .navbar, .focus, .our-team, .latest-news {
          background: #000;
      }
      

      También tendrías que cambiar el color de los textos para que contraste, por ejemplo:

      .navbar-inverse .navbar-nav > li > a,
      .dark-text,
      .section-header .section-legend,
      .focus-box h3,
      .focus-box p,
      #carousel-homepage-latestnews .carousel-inner .item .latestnews-title a,
      .latesnews-content p {
          color: #fff;
      }
      

      Saludos.

      • Vítor

        De hecho me gustaría cambiar las “páginas” de fondo, pero ha ayudado mucho. Gracias amigo

        Ex.: http://premiotopouro.com.br/o-premio/

        • Caribdis Diseño Web

          En ese caso el código sería:

          .site-content {
              background: #000000;
          }
          

          Saludos.

          • Vítor

            Gracias amigo, gracias.

  21. Ing. Christian Orellana

    Hola que tal, Quería saber si en el código HTML en CSS se puede cambiar directamente la opacidad o tenemos que crear ese archivo hijo de ley?

    • Caribdis Diseño Web

      Hola, Christian.

      Solo para hacer cambios de estilo basta con instalar el plugin Simple CSS y pegar el código en el Personalizador, tal como está explicado en esta entrada.

      Saludos.

  22. Younly

    Hola Buenas tardes, me gustaría saber si se puede mover hacia arriba o hacia abajo la sección de titulo grande, mil gracias de antemano

    • Caribdis Diseño Web

      Hola, Younly.

      Sí es posible, creando un tema hijo y editando el archivo front-page.php.

      El código que tenés que mover es:

      $zerif_bigtitle_show = get_theme_mod('zerif_bigtitle_show');
          if( isset($zerif_bigtitle_show) && $zerif_bigtitle_show != 1 ):
              get_template_part( 'sections/big_title' );
          endif;
      

      Para más información podés revisar esta entrada.

      Saludos.

    • younly

      Hola gracias por responder, pero no tengo en mi carpeta del tema hijo ese archivo, que podría hacer en este caso?

      • Caribdis Diseño Web

        Hola, Younly.

        Tenés que copiarlo de la carpeta del tema padre a la carpeta del tema hijo.

        Saludos.

  23. Daniel Luckaszczuk

    Cómo se puede agrandar la imagen principal de Zerif?

    • Caribdis Diseño Web

      Hola, Daniel.

      Si te referís a la imagen de fondo, existe un tamaño recomendado por ThemeIsle, que es de 2048 x 1365 píxeles. Si querés que se ajuste al ancho de la pantalla, tenés que agregar el siguiente código:

      body.custom-background {
          background-size: cover;
      }
      

      Saludos.

  24. Ibán

    Hola!
    ¿Como se podría cambiar el color de fondo de las secciones “testimonios” y “¿Quienes somos?”? ¿Se podría hacer con el Advanced CSS editor?
    Y otra duda ¿se podrían poner los testimonios en formato carrusel?

    Muchas gracias de antemano y enhorabuena por estos tutoriales tan útiles.

    • Caribdis Diseño Web

      Hola, Ibán.

      Gracias por comentar.

      Los códigos serían:

      /* Quiénes somos */
      .about-us {
          background: #000000;
      }
      /* Testimonios */
      .testimonial {
          background: #000000;
      }
      

      En cuanto al carrusel, me temo que no es posible sin un nivel muy grande de edición. Podrías buscar un plugin de testimonios con ese estilo y agregar el código abreviado con un do_shortcode.

      Saludos.

      • Iban

        Muchas gracias!
        Funciona perfectamente. ¡y sois muy rápidos!
        Respecto a lo del carrusel, con la pista que me habéis dado he visto que el plugin de Carousel CK te permite insertar en la sección Testimonios (o cualquier otra) el carrusel a través de un simple widget. Genial!

      • miguel

        ¿Como se podría cambiar el color de fondo de las secciones “testimonios” y “¿Quienes somos?”? ¿Se podría hacer con el Advanced CSS editor?
        Y otra duda ¿se podrían poner los testimonios en formato carrusel?

        disulpen pero donde o en que archivo hago esto

        Los códigos serían:
        /* Quiénes somos */
        .about-us {
        background: #000000;
        }
        /* Testimonios */
        .testimonial {
        background: #000000;
        }

        • Caribdis Diseño Web

          Hola, Miguel.

          La última versión de WordPress incluye un panel en el Personalizador denominado CSS adicional, donde podés pegar los códigos (está el ejemplo en esta misma entrada).

          Saludos.

    • Mauricio

      Hola Iban!
      me podrías por favor compartir lo que encontraste del carrousel, tengo el mismo inconveniente pero no soy tan hábil con la programación, sería genial si lo puedo agregar a la sección de “Simple Custom CSS” como con los cambios de color.

  25. Mauro

    Hola, Sería posible hacer más transparentes los campos blancos del formulario Pirate?

    • Caribdis Diseño Web

      Hola, Mauro.

      Este es el código que tendrías que agregar en la hoja de estilos del tema hijo (o en el recuadro CSS adicional del Personalizador):

      .pirate_forms input, .pirate_forms textarea {
          background: rgba(255,255,255, 0.65);
      }
      

      Modificá el valor 0.65 por el que necesites. Y como la transparencia también se aplica al texto del campo, agregá lo siguiente:

      .pirate_forms input::-webkit-input-placeholder,
      .pirate_forms textarea::-webkit-input-placeholder {
        color:  #000 !important;
      }
      .pirate_forms input::-moz-placeholder,
      .pirate_forms textarea::-moz-placeholder {
        color:  #000 !important;
      }
      .pirate_forms input:-ms-input-placeholder,
      .pirate_forms textarea:-ms-input-placeholder {
        color:  #000 !important;
      }
      .pirate_forms input::placeholder,
      .pirate_forms textarea::placeholder {
        color:  #000 !important;
      }
      

      Podés usar cualquier valor de color en lugar de #000 para que sea distinto del negro.

      Espero que te sirva.

      Saludos.

      • Mauro

        Perfecto, funciona, muchas gracias.

  26. luis

    Hola gracias por todos tus aporte me han servido mucho, queria preguntar como le haces para cambiar el color de la cabezera me aparece blanco en mi tema hijo, pero quiero que se vea de otro color, mas parecido al del tema original, te agradeceria tu respuesta, gracias

    • Caribdis Diseño Web

      Hola, Luis.

      Gracias por tu comentario.

      En la hoja de estilos del tema hijo tenés que agregar el siguiente código:

      .navbar {
          background: #000000;
      }
      

      Reemplazá #000000 por el valor del color que quieras usar.

      Espero que te sirva.

      Saludos.

  27. Javier

    Perfecto. Muchas gracias. Seguiré aprendiendo con tu blog 🙂

  28. enrique

    Hola.
    He hecho todos los pasos para quitar la opacidad pero no se me quita.
    La duda que tengo es respecto al crear el tema hijo es que al final donde dice:

    “Podrá editar el nombre del tema, la descripción, el autor, la versión y las URI de acuerdo con sus necesidades. Solo asegúrese de que Template coincide con el nombre de la carpeta del tema padre.
    Por último, cree un archivo en la carpeta /zerif-child/ con el nombre custom.css (que se usará en caso de aplicar estilos personalizados).”

    donde dice ASEGÚRESE DE QUE TEMPLATE COINCIDE CON EL NOMBRE DE LA CARPETA DEL TEMA PADRE, no sé muy bien qué significa. No sé si tengo que cambiar algún nombre. Yo copié el código exactamente igual sin modificar nada ¿qué tendría que cambiar?

    • Caribdis Diseño Web

      Hola, Enrique.

      Gracias por tu comentario.

      El tema padre está instalado dentro de /wp-content/themes/ en el servidor. El nombre de la carpeta se puede comprobar fácilmente desde Apariencia > Temas, haciendo clic en Detalles del tema y viendo cuál es la URL que se muestra en la barra de dirección del navegador. Por ejemplo, para Zerif Lite lo más probable es que sea http://urldelsitio.com/wp-admin/themes.php?theme=zerif-lite.

      Recordá que luego de crear el tema hijo y subirlo a WordPress hay que activarlo.

      Espero que te sirva.

      Saludos.

      • enrique

        Mil gracias!!!
        Buena página, buena atención y muy rápida.

  29. Javier

    Facil y sencillo. Muchas gracias por mostrar como cambiar esos detalles.

    Una pregunta. se puede cambiar el ancho de la imagen de fondo. Se queda corta y quedan huecos blancos en ambos lados.

    Muchas gracias.

    • Caribdis Diseño Web

      Hola, Javier.

      De nada, me alegro de que haya sido útil. El tema de la imagen de fondo depende básicamente de las dimensiones de la foto. El que se recomienda para este tema es de 2048 x 1365 píxeles. De todas maneras, es posible ajustar una imagen algo más pequeña con el siguiente código:

      body.custom-background {
          background-size: cover;
      }
      

      Pero tené en cuenta que si la imagen es más bien pequeña, en resoluciones altas se va a ver con menor calidad.

      Saludos.

      • Javier

        La imagen que tengo el grande, por eso no hay problema.
        Lo que pasa es que si pongo a 2048 x 1365 se amplia muchísimo. Voy reduciendo pero no pasa nada hasta que hace un cambio brusco al tamaño actual. No hace puntos medios o un tamaño u otro.

        Gracias por la ayuda.

        • Caribdis Diseño Web

          Agregá body.custom-background { background-size: cover; } en la hoja de estilos, con eso se corrige. 😉

          • Javier

            Funciona perfecto en la versión de escritorio pero no se ajusta en la versión de ipad y móvil. En estas ultimas de ve muy ampliado. ¿Hay alguna solución?.

            Muchas gracias la ayuda.

          • Caribdis Diseño Web

            Hola, Javier.

            La verdad, no tengo manera de probarlo porque no cuento con dispositivos con iOS; al parecer es un problema común en esos SO (no así en Android, que los muestra correctamente). Fijate si algunas de las respuestas de este foro de CSS Tricks te sirven.

            Saludos.

Los comentarios están cerrados. ¿Por qué?

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!