En este post veremos algunos interesantes Tips CSS para Elegant Fusion, una de las plantillas de Elegant Themes para WordPress.

Fusion es un theme de Elegant Themes bastante vistoso.

 

(Yo prefiero otros como por ejemplo Divi, por su capacidad asombrosa de personalización, pero para gustos los colores …)

Elegant Themes | Fusion

 
 

Ofrece un slider bastante grande en su homepage, con la posibilidad de mostrar determinadas páginas con su extracto, o mostrar los artículos de determinadas categorías.

 

Pues vamos a ello, a ver algunos de esos Tips CSS para personalizar nuestro tema Fusion

   
al máximo, y mejorar algunos detalles (cada uno tiene sus gustos claro…).

 

 

Elegant Fusion css Tip 1 – Modificar el padding-top del menú principal y el logo

.top-content {
padding-top: 10px;
}

 

Con este CSS podremos configurar y cambiar el padding o relleno superior que existe entre el inicio de la página y  el menú principal y el logo del tema. En mi opinión este espacio, por defecto, es demasiado grande. Así que para aquellos que prefieran un espacio menor (el menú y el logo colocados un poco más arriba) o incluso un espacio mayor, solo tenemos que añadir el anterior código CSS en el epanel de Fusion y cambiar la cantidad de píxeles (en este caso yo he puesto 10px).

 

Cómo se ve este cambio:

Antes

Elegant Fusion - Modificar el padding-top del menu principal y el logo

Tras aplicar el css anterior:

Elegant Fusion - Modificar el padding-top del menu principal y el logo-despues

 

 

Elegant Fusion css Tip 2 – Modificar el tamaño del logo

#logo {
    width: 250px;
}

 

Respecto a la captura de pantalla anterior, ahora el logo se verá así:

 Elegant Fusion css - Modificar el tamaño del logo

 

 

Elegant Fusion css Tip 3 – Aplicar efectos de sombra y caja a las imágenes del slide en homepage

 

.home img {
max-width: 100%;
height: auto;
-webkit-box-shadow: -9px -4px 5px -4px rgba(0,0,0,0.75);
-moz-box-shadow: -9px -4px 5px -4px rgba(0,0,0,0.75);
box-shadow: -9px -4px 5px -4px rgba(0,0,0,0.75);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
}

 

En el caso de las imágenes que trae el tema por defecto, al ser imágenes png recortadas y perfiladas, el efecto queda algo marciano, pero en el caso de subir nosotros nuestras propias imágenes jpg cuadradas (o rectangulares), el efecto sombra queda bastante resultón. Probadlo!

Elegant Fusion css - efectos sombra y caja imágenes slide homepage

 

 

Elegant Fusion css Tip 4 – Modificar padding titulo pagina

En las páginas del tema Fusion, el area que ocupa la parte superior del título de las páginas es bastante grande como se puede ver en la siguiente captura de pantalla:

 

Elegant Fusion css - Modificar padding titulo pagina

 

Así que podemos disminuir ese molesto espacio tan amplio con el siguiente css:

.page-title-area {
padding-top: 40px;
}

 

De forma que ahora nuestro título de página y el margen superior que ocupa se mostrará así:

Elegant Fusion css - Modificar padding titulo pagina-2

 

 

Elegant Fusion css Tip 5  – Disminuir Margin-top de las Migas de pan

Igualmente podemos mejorar un poco más la forma en que se muestran los títulos de página disminuyendo el padding-top de la capa wrapper que contiene los breadcrumbs o migas de pan.

 

Así se ve ahora, antes de aplicar el próximo cambio:

Elegant Fusion - disminuir padding-top breadcrumbs

 

Y trás aplicar este css que disminuye el margen superior del área de las migas de pan:

#breadcrumbs-wrapper {
margin-top: -40px;
}

 

Se mostrará así (el título de página “About” ya no está tan separado de la barra horizontal donde se encuentran las migas de pan y el buscador a la derecha):

Elegant Fusion css - disminuir margin-top breadcrumbs

 

 

Elegant Fusion css Tip 6  – Disminuir Margin-top del área de contenido de la página Fullwidth

Igualmente, el margen superior que podemos encontrar en el área de contenido de la página de anchura completa o Fullwidth, a mi parecer es demasiado grande y podríamos disminuirlo.

 

Así se ve ahora:

Disminuir Margin-top area contenido pagina fullwidth - 1

Pero vamos a disminuir ese margen superior:

.fullwidth #left-area {
margin-top: -60px;
}

Y se verá de esta forma:

Disminuir Margin-top area contenido pagina fullwidth - 2

 

 

Elegant Fusion css Tip 7  – Letras del menú en negrita

#top-menu > ul > li > a {
padding-bottom: 15px;
font-weight: bold;
}
}

 

 

Elegant Fusion css Tip 8  – Modificar la anchura del contenedor de una página

 

Como podemos ver, la anchura de las páginas en el tema Fusion no es completa, puesto que utilizan un diseño con caja.

Modificar la anchura del contenedor de una página

 

El siguiente css se aplicará a la página con el id correspondiente que utilicemos (el id de la página lo podemos ver en la url de la página, cuando la estamos editando):

.page-id-332 #content .container {
width: 100%;
}

 

Y como vemos a continuación, la página ya no muestra la caja exterior, y se muestra al 100%:

Elegant Fusion css - modificar anchura contenedor pagina segun id

 

 

Elegant Fusion css Tip 9  – Solucionar la altura del slide de Homepage (evitar el scroll para ver todo el slide al cargar la home)

En el tema Fusion de Elegant Themes por defecto, la capa que contiene el slide es muy alto (hay que hacer scroll para poderlo ver entero), y además la imágen de slide aparece un poco cortada por el final de la pantalla (también hay que hacer scroll para poder verla completamente) y podríamos subirla un poco para que de un vistazo se vea la capa que contiene el slide y la imágen del deslizador.

Me explico… por defecto, la homepage con el slide se vería así (y dependiendo de las imágenes que utilicemos podría ser necesario más scroll todavía…) :

Solucionar altura slide Homepage-1

 

Podemos apreciar a qué me refiero con una imágen de fondo:

Solucionar altura slide Homepage-2

 

¿Parece que queda bien?

Pues todo este trozo de imágen queda por debajo (necesario scroll) :

 

Solucionar altura slide Homepage-3

 

A mí personalmente no me gusta; en este caso incluso puede quedar bien porque la imágen es un fondo de naturaleza, y da igual que se corte un poco antes o un poco después, pero si se trata de otra imágen, por ejemplo la de un coche de un concesionario, el resultado será desastroso porque la foto aparecerá cortada…

Así que vamos a solucionar este problema con el siguiente CSS:

.et-slide .container {
padding: 200px 0 0;
}
#et-slider-wrapper {
height: 680px;
}

 

Y el efecto final nos mostrará un slide a pantalla completa, con una preciosa imágen de fondo a fullwidth, sin cortes y sin que sea necesario el scroll (para un deslizador a pantalla completa no mola mucho vamos…) :

Solucionar altura slide Homepage-4

 

 

Elegant Fusion css Tip 10  – Solucionar problemas responsive de navegación mobile

Con todos estos cambios en el css del tema, si hacemos pruebas de navegación móvil, comprobaremos que hay alguna que otra cosa fuera de lugar.

Incluso sin haber hecho cambios en los estilos css del tema, es probable que nos interesa mejorar y adaptar algunos elementos de la navegación móvil.

En este caso, os muestro un error que aparece en la capa detrás del logo (tras haber modificado el .et-slide .container y el #et-slider-wrapper , la pantalla de homepage, incluido el espacio que se encuentra tras el logo, ha cambiado…):

Elegant Fusion css - problemas mobile responsive-1

 

 

En mi caso, he aplicado el siguiente css, pero en cada caso, dependiendo de la imágen de fondo, la imágen de slide, el tamaño del logo…puede ser necesario personalizar el código. Podéis jugar un poco con él y hacer pruebas de navegación móvil en la web de pruebas de navegación mobile de herramientas-online.com.

@media only screen and ( max-width: 767px ) {
.et-slide .container {
padding-top: 100px;
}
#et-slider-wrapper {
height: 310px !important;
}
.et-slide {
background-size:cover;
background-position: center center;
}

#logo {
    float: left;
    margin-right: 10px;
    width: 150px;
}
.et-slider-arrows a {
    top: 262px;
}
}

 

Otro problema de navegación móvil que se resolverá con el anterior css, es este (navegación móvil en resolución 480px X 320px), el slider aparece cortado, a media pantalla:

Elegant Fusion css - problemas mobile responsive-2

 

Podría mostraros muchas otras resoluciones pero para muestra un botón. Si no aplicamos la corrección css anterior (insisto en que cada caso, según las imágenes que se utilicen será diferente…) obtendremos errores de visualización como la captura superior.

 

Y en este caso (navegación móvil en resolución 480px X 320px), al aplicar el código css que corrige el problema, la navegación se mostrará así de bien 🙂  :

Elegant Fusion css - problemas mobile responsive-3

 

Esta es otra versión del código anterior, quizás menos personalizado, pero os lo dejo por si acaso:

@media only screen and (max-width:767px) { 
#et-slider-wrapper {
height: 200px !important;
}
.et-slide {
background-size:cover;
background-position: center center;
}
div#top-area {
position: relative !important;
}
.et-slide .container {
padding-top: 10px;
}}

 

Pues nada, espero que os haya gustado este post sobre Tips css para el tema Fusion de Elegant Themes, y os animeis a ir probando vosotros a personalizar vuestro tema.

Y por supuesto se agradecen vuestros comentarios sobre qué opináis de este tema y de otras posibles customizaciones css que conozcáis.

Nos vemos!

 


Etiquetas del articulo: , ,


Suscríbete para acceder a la zona privada

Suscribiéndote a la lista de correo de El Taller del Bit conseguirás entrar a la zona privada de descargas con materiales exclusivos (ebooks, artículos privados, plugins, descargas de exámenes resueltos ...)

Gracias. Te has suscrito con éxito!