CASUALWEBS

ANA PASCUAL WEB ESTUDIO

Pequeños cambios

Redecorando con CSS – Bordes en las imágenes

by

Vamos a ver como cambiar el aspecto de un tema con unas líneas de CSS.
En este caso jugaremos con los bordes de las imágenes para adaptar el tema a nuestro estilo.
Un ejemplo lo haremos con el tema Outfitter Pro. Este es el aspecto inicial del tema:

Aspecto original de Outfitter Pro - Genesis theme StudioPress
Aspecto original de Outfitter Pro – Genesis theme StudioPress

Y ahora añadiremos un borde del color destacado y de un tamaño lo suficientemente ancho para dar un impacto visual el las imágenes de los productos.
El CSS añadido en este caso es:

/* Añadir bordes en imágenes de productos */
li.product a img {
    border: 30px solid;
    margin-bottom: 0;
}

Y el resultado obtenido es este:

Aspecto redecorado de Outfitter Pro - Genesis theme StudioPress
Aspecto redecorado de Outfitter Pro – Genesis theme StudioPress

Ahora vemos un cambio parecido en el tema Market de StudioPress.
Este es el aspecto inicial:

Aspecto original de Market Pro - Genesis theme StudioPress
Aspecto original de Market Pro – Genesis theme StudioPress

Añadiendo este CSS en los bordes de las imágenes que enlazan a contenido destacado:

/* Añadir bordes en imágenes de contenido destacado */
.entry-image.attachment-page {
    border: 16px solid;
}

Obtenemos el siguiente aspecto:

Aspecto modificado de Market Pro - Genesis theme StudioPress
Aspecto modificado de Market Pro – Genesis theme StudioPress

Vemos que según la imagen que queramos transmitir a nuestro público, podemos ajustar el estilo de la plantilla modificando como se muestran las imágenes.

¿Cómo fijar el encabezado en Business Pro y cambiarle el color de fondo al hacer scroll?

by

En el tema Business Pro el encabezado que contiene el logo y el menú no se muestra cuando hacemos scroll:

Business Pro on scroll
Business Pro on scroll

Para fijar el encabezado en el tema Business Pro de Genesis vamos a dar una posición fija a todo el header. Para ello tendremos que incluir el siguiente CSS :

/*fijar el encabezado*/
.site-header {
    position: fixed;
}

Para hacer cambios de CSS puedes seguir estas instrucciones.

Una vez aplicado este CSS:

Bussiness Pro fixed header.
Bussiness Pro fixed header.

Vemos que al hacer scroll el menú está fijo pero presenta problemas de lectura al sobreponerse las letras del menú con las del fondo. Para ello daremos un color de fondo que contraste con el blanco de las letras del menú y a la vez mantenga la estética de la plantilla. Le damos al header un color de fondo igual al color rojo destacado.
El CSS necesario:

/*color de fondo en el encabezado al hacer scroll*/
.site-header.shrink {
    background-color: #fb2056;
}

El resultado que veremos es éste:

Encabezado fijo y color de fondo en Bussiness Pro
Encabezado fijo y color de fondo en Bussiness Pro

****Actualización del tema Business Pro*****

Desde la versión (1.0.5 ) se puede fijar el encabezado desde el customizer del panel de administración:

Veámoslo en el video:

Video background en Infinity Pro

by

En esta entrada vamos a ver como colocar un video de fondo en el área Front Page 1 en la home del tema Infinity Pro.
Lo primero que haremos es obtener las versiones mp4 y webm de nuestro video. El ratio recomentdado es de 1920 x 1080.
También crearemos una imagen del video para mostrarla en las pantallas de resoluciones más pequeñas.
Subiremos los dos videos y la imagen a la mediateca de nuestro WordPress y obtendremos los enlaces correspondientes.
Luego instalaremos y activaremos el plugin Video Background

Crearemos una página que podemos llamar «home». Veremos que en la parte inferior nos aparece una nueva caja de opciones llamada «Video Background»

Video Background Plugin
Video Background Plugin

En el campo «Container» colocar «.front-page-1».
En el campo Link to .mp4 colocar la url del video mp4.
En el campo Link to .webm colocar la url del video webm.
En el campo Link to fallback image colocar la imagen del video.
Una vez guardados lo cambios ir a Apariencia/Personalizar/Front Page Background Images/Featured Section 1 Image y eliminar la imagen.
Después ir a Ajustes / Lectura y establecer la página que acabamos de crear como página de inicio.

Ajustes / Lectura / Página del video
Ajustes / Lectura / Página del video


Ahora sólo nos queda comprobar los resultados.