• Ir a navegación principal
  • Ir al contenido principal

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Pequeños cambios

Redecorando con CSS – Bordes en las imágenes

12 octubre, 2017 by apascual001

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.

Archivado en:Pequeños cambios, Redecorar

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

4 octubre, 2017 by apascual001

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:

Archivado en:Business, Modificar menú, Pequeños cambios

Video background en Infinity Pro

25 agosto, 2017 by apascual001

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.

Archivado en:Infinity pro, Pequeños cambios

Centrar el logo en Infinity Pro

28 julio, 2017 by apascual001

En este post veremos como centrar el logo y el menú en el tema Infinity Pro de Genesis
Para ello sólo tendremos que hacer unos pequeños cambios de CSS. Si no estáis acostumbrados a hacer modificaciones de la hoja de estilos podéis hacer cambios de CSS mediante un plugin.

Infinity Pro - ¿Cómo centrar el logo y el menú?
Infinity Pro – ¿Cómo centrar el logo y el menú?

Los cambios van a ser dar un ancho del 100% al título y a la navegación a la vez que alineamos el texto en el centro.

Para centrar el logo:

.title-area {

    text-align: center;

    width: 100%;

}

Para centrar el menú:

.nav-primary {

    text-align: center;

    width: 100%;

}

Archivado en:Infinity pro, Modificar logo, Pequeños cambios

  • « Ir a la página anterior
  • Ir a la página 1
  • Ir a la página 2

© 2022 · Aviso legal · Política de privacidad

Esta web solo instalará cookies analíticas y de publicidad si lo aceptas. Puedes informarte más sobre qué cookies estamos utilizando en los ajustes Ajustes Aceptar Rechazar Más información
Política de cookies

Resumen de privacidad

Esta web solo instalará cookies analíticas y de publicidad comportamiento si usted lo acepta. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puede encontrar más información en nuestra política de cookies
Cookies estrictamente necesarias
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies analíticas
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares
GUARDAR Y ACEPTAR