Actualizado el 29/01/2017

Con el tutorial sobre idiomas de hace dos semanas terminamos la larga serie que complementa la documentación oficial de ThemeIsle. Como anticipé entonces, hoy es el turno de las breves (o no tan breves) respuestas para aplicar pequeños cambios en el tema gratuito Zerif Lite, y que muchas sirven de igual manera para Zerif PRO.

Recordemos que aquí están las instrucciones para crear un tema hijo de Zerif Lite, y aquí hablamos del plugin Simple CSS (a partir de WP 4.7 no es necesario un plugin, sino que se puede añadir código en el recuadro CSS adicional del Personalizador).

Contenidos

¿Cómo añadir 5 miembros de equipo?

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador añadimos el siguiente código:

@media screen and (min-width: 768px) {
.our-team .row .col-lg-3 {
width: 20%;
}
}

¿Cómo corregir el menú que desaparece en dispositivos móviles?

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador añadimos el siguiente código:

nav#site-navigation.in {
    height: auto !important;
}

¿Cómo cambiar el texto “Responder” de los comentarios?

Para esto es necesario usar un tema hijo, y en el archivo functions.php pegar el siguiente código:

function zerif_child_theme_filter_comments($args) {
        $args['reply_text'] = 'Nuevo texto de respuesta';
        $args['reply_to_text'] = 'Nuevo texto de respuesta %s';
        return $args;}
add_filter('comment_reply_link_args','zerif_child_theme_filter_comments');

Reemplazar Nuevo texto de respuesta por la frase que quiera.

¿Cómo agregar un subtítulo en la sección de título grande?

Es muy fácil añadir un subtítulo, debajo del título principal. Solo son necesarias algunas etiquetas HTML básicas. En el Personalizador > Sección de título grande > Contenido principal, pegaremos lo siguiente en el campo título:

Zerif Lite<br/><span>Este es un subtítulo</span>

Eso es todo. Y como la sección acepta elementos HTML, también se pueden usar enlaces y otros estilos.

¿Cómo eliminar las mayúsculas predeterminadas de los títulos?

Si no queremos que los títulos aparezcan en mayúsculas, podemos usar el siguiente código (en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador):

h1.intro-text {
    text-transform: none;
}
.section-header h2 {
    text-transform: none;
}
.newsletter h3{
    text-transform: none;
}
.custom-button {
    text-transform: none;
}
.sib_signup_form input[type="submit"] {
    text-transform: none!important;
}
.focus-box h5 {
    text-transform: none;
}
.skills .skill h6 {
    text-transform: none;
}
.team-member h5 {
    text-transform: none;
}
.package-header h5 {
    text-transform: none;
}
#carousel-homepage-latestnews .carousel-inner .item .latestnews-title a {
    text-transform: none;
}

¿Cómo fijar el menú a la parte superior en los dispositivos móviles?

Si queremos que el menú quede fijo también en los teléfonos y tablets, usaremos el siguiente código en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador:

@media (max-width: 767px) {
#main-nav, #main-nav.fixed {
    position: fixed;
}
}

¿Cómo aumentar el tamaño del logo?

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador pegaremos el siguiente código:

.navbar-brand {
    height: 100px !important;
}

Cambiaremos el valor de altura y de esta manera el menú se agrandará. Para aumentar el tamaño del logo específicamente, usaremos el siguiente código:

.navbar-brand > img {
    max-height: 80px !important;
}

(Usar el valor de altura que sea necesario).

¿Cómo agregar un número de teléfono en la cabecera?

Es muy fácil agregar un número de teléfono en la parte superior del menú.

Sería algo así:

Zerif Teléfono

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador pegaremos el siguiente código:

#main-nav:after {
    content: "123-456 7890";
    width: 200px;
    display: block;
    padding: 2px 4px;
    border-radius: 0 0 4px 4px;
    background: #efefef;
    font-size: 14px;
    text-align: center;
    color: #404040;
    position: absolute;
    top: 0;
    right: 70px;
}
#main-nav:before{
    font-family: FontAwesome;
    content: "\f095";
    top: 2px;
    font-size: 14px;
    right: 220px;
    position: absolute;
    color: #404040;
    width: 20px;
    display: block;
    z-index: 2;
}

Reemplazar 123-456 7890 por el número real.

¿Cómo mostrar cinco widgets en la sección “Nuestro enfoque”?

Si necesitamos mostrar cinco widgets en una misma línea, simplemente añadiremos el siguiente código en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador:

@media (min-width: 1200px) {
.col-lg-3.col-sm-3.focus-box {
    width: 20% !important;
}
}

¿Cómo controlar la altura de la sección de título grande?

Si queremos que la sección de título grande ocupe más espacio en la pantalla, podemos usar el siguiente código en la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador:

.header-content-wrap {
    padding: 385px 0 310px;
}

Solo ajustaremos los valores 385px y 310px para el relleno superior e inferior respectivamente. (Valores menores disminuirán el espacio).

¿Cómo agregar más círculos de habilidades en la sección “Quiénes somos”?

Para esto es necesario usar un tema hijo.

En la carpeta del tema hijo crearemos una carpeta llamada /sections/ y allí copiaremos el archivo about_us.php que está localizado en la carpeta /sections/ de Zerif Lite. Luego de copiarlo, lo abriremos con un editor de texto y buscaremos las siguientes líneas:

echo '</ul>';
echo '</div> <!-- / END SKILLS COLUMN-->';

Justo arriba del primer echo pegaremos lo siguiente:

/* SKILL FIVE */
<br />echo '<li class="skill skill_5">
<div class="skill-count">
<input type="text" value="94" data-thickness=".2" class="skill1">
</div>
<h6>Título de habilidad 5</h6>
<p>Texto de habilidad 5</p>
</li>';

Nada más queda editar el valor de value y reemplazar el título y texto por los que correspondan.

¿Cómo cambiar el color de borde de los widgets de la sección “Nuestro enfoque”

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador pegaremos el siguiente código:

.focus-box .service-icon:hover {
    border-color: #000000 !important;
}
.focus-box .red-border-bottom:before{
    background: #000000 !important;
}

Cambiaremos el código de color por el que necesitemos.

¿Cómo mostrar la imagen destacada en las páginas?

De manera predeterminada, Zerif no muestra las imágenes destacadas en las páginas. Para esto es necesario crear un tema hijo.

Copiaremos el archivo content-page.php de la carpeta del tema padre a la carpeta del tema hijo y pegaremos el siguiente código justo debajo de

</header><!-- .entry-header -->
<?php
        $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') );
        echo '<img src="'.esc_url($url).'" />';
?>

¿Cómo mostrar la imagen destacada en las entradas?

Seguiremos los mismos pasos que para las páginas, pero con el archivo content-single.php. Pegaremos el siguiente código justo debajo de

</header><!-- .entry-header -->
<?php
        $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') );
        echo '<img src="'.esc_url($url).'" />';
?>

Si se trata de Zerif Pro, tendremos que pegar el mismo código en reemplazo de este:

<?php
   if ( is_singular( 'portofolio' ) ) {
         $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') );
        echo '<img src="'.esc_url($url).'" />';
}
?>

¿Cómo reducir el espacio entre secciones?

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador pegaremos el siguiente código:

/* Sección Nuestro enfoque */
.focus {
    padding-bottom: 10px; padding-top: 20px;
}
/* Section Portfolio (Zerif PRO) */
.works {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección Quiénes somos */
.about-us {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección Nuestro equipo */
.our-team {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección Testimonios */
.testimonial {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección con botón inferior */
.separator-one {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección con botón derecho */
.purchase-now {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección Contáctenos */
.contact-us {
    padding-bottom: 10px; padding-top: 20px;
}
/* Sección Últimas noticias */
.latest-news {
    padding-bottom: 10px; padding-top: 20px;
}

Se puede usar solo el código correspondiente a la sección que sea necesaria y ajustar el valor del relleno a aquel que resulte más conveniente.

¿Cómo eliminar el texto meta de las entradas (“Publicada el” y “Esta entrada está publicada en”)?

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador pegaremos el siguiente código:

/* Publicada el */
.single .entry-meta {
    display: none;
}
/* Esta entrada está publicada en */
.post .entry-footer {
    display: none;
}

¿Cómo cambiar el fondo de las secciones?

En la hoja de estilos del tema hijo o en el recuadro CSS adicional del Personalizador pegaremos el código que corresponda a la sección (reemplazando el valor de color #000000 por el que se prefiera):

/* Nuestro enfoque */
.focus {
    background: #000000;
}
/* Quiénes somos */
.about-us {
    background: #000000;
}
/* Testimonios */
.testimonial {
    background: #000000;
}
/* Nuestro Equipo */
.our-team {
    background: #000000;
}
/* Últimas noticias */
.latest-news {
    background: #000000;
}
/* Contacto */
.contact-us {
    background: #000000;
}
/* Sección de fondo verde */
.separator-one {
    background: #000000;
}
/* Sección de fondo rojo */
.purchase-now {
    background: #000000;
}

Para colores semitransparentes (que se superponen a la imagen de fondo), usar valores RGBA, por ejemplo:

.purchase-now {
    background: rgba(0, 0, 0, 0.8);
}

¿Cómo agregar un número de teléfono (con enlace) en la cabecera?

En el archivo functions.php del tema hijo, pegar el siguiente código:

function zerif_child_header_phone() {
    echo '<div class="header-phone"><div class="container"><i class="fa fa-phone"></i> <a href="tel:0793218654">+07 9321-8654</a></div></div>'; 
}
add_action('zerif_top_header','zerif_child_header_phone');

Cambiar el número de teléfono por el que corresponda.

En el archivo custom.css del tema hijo, pegar el siguiente código:

.header-phone {
    background: #F6705F; /* color de fondo de la barra */
    text-align: right;
    width: 100%;
    z-index: 6;
}
.header-phone, .header-phone a {
    color: #fff; /* color de icono y enlace */
}

@media (min-width: 768px) {
.header-phone {
    position: fixed;
}
#main-nav {
    margin-top: 24px;
}
}

El color de fondo de la barra y los colores del icono y número de teléfono se pueden cambiar a gusto editando los valores comentados en el CSS.

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en Electromecánica, Periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)