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

CASUALWEBS

ANA PASCUAL WEB ESTUDIO

  • Proyectos
  • Tiendas online
  • Hola
  • Blog
  • Contacto

Redecorar

Authority Pro – Cambiar colores por CSS

8 marzo, 2018 by apascual001

Hola!
Hoy vamos a ver como cambiar más colores del tema Authority Pro de StudioPress. En otro post ya vimos que en Apariencia/Personalizar/Colores existe un único ajuste de color que afecta a distintas secciones.
En cambio hoy veremos como personalizar el color de otras secciones.
Os dejo un vídeo con las explicaciones en directo y el código CSS que he utilizado para que podáis hacerlo vosotros mismos fácilmente.
La extensión de Firefox que utilizo para la selección de colores es Colorzilla.

Aquí os dejo los cambios de CSS que hago en el vídeo; sólo tenéis que cambiar el color por el vuestro:

/*Color del título del sitio*/
.site-title a, .site-title a:focus, .site-title a:hover {
    color: #694b18;
}
/*Color del título de la sección Hero*/
h2.hero-title {
    color: #487892;
}
/*Color del bloque detrás de la imagen de la sección Hero*/
.hero-section-column.right::before {
    background: #bab08e;
}
/*Color del bloque detrás de la imagen de los widgets de imagen*/
.widget_media_image::before {
    background: #dde0c5;
}
/*Color del bloque detrás de la imagen destacada de los posts*/
.authority-featured-image::before, .featuredpost .has-post-thumbnail > a::before {
    background: #95d5dd;
  
}
/*Color de fondo de los widgets del pié de página; footer-widgets*/
.footer-widgets {
    background-color: #F1AD474D;
 
}
/*Color de fondo de la imagen de la sección Hero*/
.hero-section-column.right {
 
    background-color: beige;
}

 

Si queréis cambiar algun otro color y no sabéis como no dudéis en contactar!

Ana

Archivado en:Authority, Redecorar

CSS para oscurecer o colorear una imagen

26 enero, 2018 by apascual001

Uno de los recursos CSS que más ultilizo es el de oscurecer o colorear las imágenes.
Lo leí hace un tiempo en CSS-Tricks y lo sigo usando. Se trata de añadir un gradiente de color al background así podemos ponerlo por encima de la imagen.

Vamos a verlo con un ejemplo. Crearemos un div con la clase «oscurecer»:

<div class="oscurecer"></div>

Y luego en nuestro CSS le vamos a asignar un background que contendrá el gradiente y la imagen de fondo. El gradiente será el color negro con una opacidad del 0.5. El truco es hacer un gradiente con el mismo color! 😉
Recordar también dar un ancho y una altura al div igual a las medidas de la imagen:

.oscurecer {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(https://www.comolademo.es/demos/colorear-foto.jpg);
height: 480px;
width: 720px;

}

Para añadir CSS a tu tema puedes seguir esta entrada donde lo expliqué en detalle.

Esta es la foto original:

Veamos el resultado con la clase oscurecer:

 

Ahora vamos a hacer lo mismo pero con un color que no sea negro; por ejemplo en rojo.

Crearemos un div con la clase «colorear».

<div class="colorear"></div>

Y luego creremos el CSS con el gradiente en rojo para el background.

.colorear { 
background-image: linear-gradient(
      rgba(255, 0, 0, 0.3), 
      rgba(255, 0, 0, 0.3)
    ),
 url(https://www.comolademo.es/demos/colorear-foto.jpg); 
height: 480px; 
width: 720px; 
}

El resultado:

 

 
Y finalmente haremos un gradiente de dos colores, un azul y un rosa. Crearemos un div con la clase «gradiente»:

<div class="gradiente"></div>

Y en este caso el CSS serà:

.gradiente { 
background-image: linear-gradient(
      rgba(25, 209, 231, 0.5),
      rgba(243, 17, 224, 0.5)
    ),
 url(https://www.comolademo.es/demos/colorear-foto.jpg); 
height: 480px; 
width: 720px; 
}

Comprobemos el efecto:

 

 
Pues ya lo véis que fácil es dar un toque colorista a vuestras imágenes.
Saludos y espero vuestros comentarios o consultas!

Ana

Archivado en:Pequeños cambios, Redecorar

Modificar la tipografia de la home en Gallery Pro

30 noviembre, 2017 by apascual001

Veamos como hacer unos cambios de CSS en la home del tema Gallery Pro de Genesis para darle un aspecto más potente.

El aspecto inicial de la home es éste:

Tipografía original en Gallery Pro
Tipografía original en Gallery Pro

Y el aspecto final al que queremos llegar es este otro; más potente, más juvenil, más desenfadado:

Nueva tipografía en Gallery Pro
Nueva tipografía en Gallery Pro

Para hacer estos cambios he aplicado unos ajustes de CSS. El estilo de la fuente ahora es normal en lugar de cursiva. He cogido la fuente del body, Open Sans,que es una sans serif. La fuente original para los encabezados h1 de la home tienen la fuente «Cormorant». También he aumentado el grosor y el espaciado entre letras y por último transformado todo a mayúsculas.
El código resultante es éste:

.front-page-1 h1, .front-page-3 h1 {
    font-style: normal;
    font-family: Open Sans, "Avenir", "Helvetica", arial;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1rem;
}

Veréis que lo aplico tanto a la widget área front-page-1 como a la front-page-3.

Estos cambios CSS los podéis aplicar modificando el archivo style.css del tema o yendo a la pestaña de CSS adicional en Personalizar/CSS adicional. Os enlazo las explicaciones de como añadir CSS a nuestra plantilla.
Con estos pequeños cambios de CSS la plantilla ya tiene un aspecto muy distinto!
Y finalmente os dejo el vídeo para que lo veáis en directo:

Archivado en:Gallery pro, Redecorar, Tips

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 cambiar las imágenes de fondo en Infinity Pro?

6 julio, 2017 by apascual001

Vamos a ver como cambiar las imágenes de fondo de la página de inicio del tema Infinity Pro.

Este tema viene con unas imágenes precargadas de manera que después de instalar la plantilla ya tenemos imágenes de fondo de muestra.

Para cambiarlas iremos al menú Apariencia / Personalizar / Front Page Background Images:

Escritorio WordPress Apariencia / Personalizar / Background Images
Escritorio WordPress Apariencia / Personalizar / Background Images

Una vez dentro veremos las imágenes precargadas en las distintas secciones: Featured Section 1 Image, Featured Section 2 Image, Featured Section 3 Image, Featured Section 4 Image. Debajo de cada una de ellas hay dos botones, el de la izquierda «Remove» sirve para eliminar la imagen y en este caso el fondo de esa widget área pasaría a ser blanco. El botón de la derecha «Change Image» sirve para cambiar la imagen:

Escritorio WordPress Apariencia / Personalizar / Background Images / Change Image
Escritorio WordPress Apariencia / Personalizar / Background Images / Change Image

En ese momento se abre el menú para insertar multimedia. Podemos escoger una imagen de nuestro ordenador o de la biblioteca que ya hayamos subido con anterioridad.
El tamaño recomendado para estas imágenes es de 1600px x 1000px y con un mínimo de ancho de 1140px.
Una vez escogida la imagen podemos ver los cambios en directo en el personalizador de WordPress.
Finalmente no olvidar guardar y publicar.

Archivado en:Infinity pro, Redecorar

Cómo añadir CSS a tu plantilla

29 junio, 2017 by apascual001

Para añadir cambios de CSS a un tema o plantilla podemos hacerlo de dos formas:

  1. Modificando el archivo style.css de nuestro tema hijo o child theme. Los temas de genesis siempre son un tema hijo del tema Genesis. Por lo tanto es totalmente válido modificar el archivo style.css y así mantener Genesis intacto y siempre actualizado. El lugar donde añadir las modificaciones dentro de la hoja de estilos depende un poco de cada desarrollador; los hay que prefieren añadir los cambios al final y otros insertarlos en el orden lógico de los elementos de la hoja. Sea cuál sea deberá ser de fácil lectura por otros desarrolladores.
  2. Si no estáis acostumbrados a acceder a los archivos de vuestro tema via FTP y preferís un método más sencillo, desde la versión 4.7 de WordPress tenemos disponible en el panel de administración la opción de añadir CSS asegurando que el archivo style.css se mantiene intacto. Vamos a ver como utlilizarlo:

Desde Apariencia/Personalizar accederemos al personalizador y veremos que en la parte más baja hay una pestaña de CSS adicional:

Apariencia / Personalizar / CSS Adicional
Apariencia / Personalizar / CSS Adicional

Accediendo a ella se abre un panel encabezado por la frase : /*Puedes añadir tu propio CSS aquí…

Aquí mismo ya podemos empezar a escribir nuestro CSS personalizado y ya sólo nos quedará guardar los cambio con el botón «Guardar y publicar»

Archivado en:Redecorar, Tips

© 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