Plugins y algunos trucos para WP
Viendo actualmente:css

Cuándo mostrar menú responsive en Plantilla DIVI

La plantilla DIVI tiene muchas opciones para poder montar la web a nuestro gusto, pero a veces las cosas más sencillas son las más complejas.

Hace muy poco me pasó con un cliente que tenía el logo muy grande (muy alargado horizontalmente) y el menú era también bastante largo, con lo que habia un momento que según la resolución, el menú se doblaba en dos lineas, haciendo que quedase muy feo:

(más…)


Logo flotante en plantilla DIVI de WordPress

¿Cómo hacer para que el logo de nuestra plantilla DIVI sea flotante?

con este simple truco haremos que nuestro logo se comporte de una manera increible, flotando en la parte superior de nuestra web, sin tener que estar pendientes de que se ajuste a alto del header.

 

Ejemplo de Logo flotante en plantilla Divi de WordPress

Ejemplo de Logo flotante en plantilla Divi de WordPress

Sólo tenemos que ir a personalizar nuestro CSS con la siguientes lineas:
@media only screen and (max-width: 980px) {
#logo {
min-height: 100px;
}
}
@media only screen and (min-width: 981px) {
#logo {
min-height: 120px;
}
}

////Los 100px y 120px los podeís modificar en función del tipo de logo que tengáis y el fondo de la web.

Truco extraido de :

How to Create a Divi Overlapping Logo


Usar una regla css en una página/post concreto

¿Cuantas veces hemos necesitado variar una regla css pero sólo para una sección de nuestra web?

Fácil sabiendo cual es nuestro ID de esta página o sección:

 

.postid-545 .post-title a:link{font-size: 18px;}

En este caso como veis, el título es más pequeño que en el resto de secciones, al ser el post 545, le he asignado un tamaño de letra al post-title de 18px.

De esta manera podemos tener diferentes estilos para diferentes páginas, haciendo que nuestra web sea mucho más flexible y personalizada.

Y si no lo véis claro, tenemos la opción de instalar un plugin llamado CSS Plus el cual nos permitira editar un CSS particular para cada post o página. De esta manera podemos decir mediante CSS cada ajuste de diseño de cada página.
https://es.wordpress.org/plugins/css-plus/

Aunque lleva más de 2 años sin soporte, lo he probado en un Worpress versión 4.3 y funciona sin problemas!


Cambiar el número de columnas en productos de Woocommerce

Por defecto Woocommerce sólo muestra 4 columnasde productos. ¿Como se pueden cambiar el número de columnas en woocommerce?

Lo haremos modificando el archivo theme-woocommerce.php  desde APARIENCIA-EDITOR (o bien por FTP en includes/theme-woocommerce.php)

/////////ACTUALIZACIÓN Marzo de 2016, añadiremos este código directamente al final de nuestro functions.php de nuestra plantilla. Funciona correctamente para una version de WordPress 4.4.2 y de Woocommerce 2.5.5////////////////

Si queremos 4 columnas,  en el código añadiremos  esto:

 // Change thumbs on the single page to 4 per column
add_filter( 'woocommerce_product_thumbnails_columns', 'woocommerce_custom_product_thumbnails_columns' );
if (!function_exists('woocommerce_custom_product_thumbnails_columns')) {
function woocommerce_custom_product_thumbnails_columns() {
return 4;
}
}

// Change number or products per row to 4
add_filter('loop_shop_columns', 'loop_columns');
if (!function_exists('loop_columns')) {
function loop_columns() {
return 4;
}
}

Si cambiamos el 4 por un 5 saldrán 5 columnas en los productos.
Cuidado que al hacer esto, si no tenemos redimensionadas la imagenes, nos puede quedar muy feo, normalmente hay que modificar el CSS siguiente:

ul.products li.product {
position: relative;
width: 12.05%;
}

El ancho suele estar al 22.05%, cambiandolo por 12.05% es suficiente, podeís jugar a ver cómo queda mejor. Según que plantilla useis, en lugar de porcentaje podeis encontrar pixels a pelo, se tendrían que reducir. También iría bien cambiar el tamaño de letra de los productos.
Espero que esto os solucione este problema, que francamente, me ha dado muchos dolores de cabeza.


Esconder elementos con CSS (display: none;)

Esconder elementos con CSS (display: none;):

Como siempre el código CSS no deja de sorprender por la cantidad de posibilidades que nos ofrece.

Una de las utilidades puede ser la opción de no mostrar diferentes elementos para hacer pruebas con los diseños de nuestras plantillas.

Para esconder un elemento, para que no se vea, podemos usar el comando display: none;

Añadiendo esa propiedad a cualquier elemento de nuestro CSS conseguiremos que no se muestre en pantalla.

 

Ejemplo: no queremos mostrar el logo en nuestra web.

Buscamos en el css donde está el logo y añadimos el comando:

.logo { float: left; width: 950px; height: 65px; }

.logo { float: left; width: 950px; height: 65px; display:none;}


Añadir o poner imagen de fondo en DIV

Añadir o poner imagen de fondo en DIV:

Como añadir o poner una fotografía de fondo en un DIV.

Añadiendo en el CSS “background” de la siguiente manera:

(Ejemplo con un div#sidebar)

#sidebar { width: 238px; float:left; padding-top: 35px; padding-left: 40px;  background: url(“images/afondo2.png”);background-repeat:no-repeat; background-position:right bottom; }

A parte de seleccionar la imagen, podemos definir otras características:

background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-repeat:repeat-y;

y algunas más.

(Aconsejable que la foto sea un poco transparente por si tapa algo de texto o contenido de la web)

 


Powered by WordPress | Designed by Elegant ThemesPolítica de privacidad