Seis trucos simples de CSS para el tema Foxy

¡Usando solo CSS y nuestro cuadro de CSS personalizado en ePanel, puede hacer cosas asombrosas! Hoy repasaré 6 trucos simples que pueden alterar el tema Foxy de una manera realmente genial. Para aplicar estos cambios, simplemente copie y pegue el código mencionado en el cuadro » CSS personalizado » en ePanel, que se puede encontrar en la pestaña Apariencias > Opciones de tema en su Panel de WordPress.

Este cambio transformará su barra de navegación en una barra de navegación flotante con una posición fija. No importa dónde se desplacen sus visitantes, los elementos de su menú serán fácilmente accesibles en la parte superior de la pantalla. Esto puede mejorar la participación de los visitantes, ya que promueve clics adicionales y exploración del sitio web. Con este código, la barra de navegación flotante se elimina en los dispositivos móviles para garantizar que las pantallas pequeñas no se obstruyan.

Para aplicar este cambio, simplemente copie y pegue el siguiente código en el cuadro CSS personalizado en ePanel y haga clic en Guardar . Si alguna vez desea volver al estilo original, simplemente puede eliminar el código del campo CSS personalizado.

/* Fixed Navigation Bar */
@media only screen and (min-width: 768px) {
#main-header {
    position: fixed;
    width: 90%;
    text-align: center;
    margin: 0;
    top: 0;
    background-color: #fff;
    padding: 20px 5% 20px 5%;
    z-index: 100;
    left: 0;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    }
#body-area {
    padding-top: 74px;
}
}

Encabezados de publicaciones centrales dentro de la miniatura

Este es un cambio divertido que centra los títulos de las publicaciones dentro del cuadro de la imagen destacada. De alguna manera, este estilo es más cohesivo con la forma en que los títulos ya se muestran en las páginas de categorías, ¡pero realmente depende de usted decidir qué diseño prefiere!

/* Center Post Headings */
.et_full_width_image .post-heading {
    padding: 0;
    width: 100%;
    position: absolute;
    text-align: center;
    background: none;
    color: #fff;
    margin-top: -360px;
    font-weight: ;
}
 
.post-heading p.meta-info, .post-heading p.meta-info a, .post-heading h1 {
    color: #fff;
}
 
@media only screen and (max-width: 1300px) and (min-width: 961px) {
    .et_full_width_image .post-heading { padding: 0; margin-top: -260px; }
}
 
@media only screen and (max-width: 960px) and (min-width: 768px) {
.et_full_width_image .post-heading { padding: 0; margin: -220px 0 0 -60px; }
}
 
@media only screen and (max-width: 767px) {
    .et_full_width_image .post-heading { padding: 0; margin: -180px 0 0 -60px; }
}
 
@media only screen and (max-width: 479px) {
    .et_full_width_image .post-heading { padding: 0; margin: -120px 0 0 -40px; }
    .post-heading p.meta-info { font-size: 14px; }
}

Dale estilo a tu sitio web con esquinas redondeadas

A algunas personas les gustan los bordes duros, mientras que a otras les gustan las esquinas suaves y redondeadas. De forma predeterminada, el contenedor de contenido en Foxy es simple y cuadrado, pero esto se puede cambiar fácilmente con unas pocas líneas de CSS. Si desea darle a su sitio web un aspecto más completo, ¡no busque más! También puede ajustar el tamaño de la curva cambiando los valores «30» a continuación a algo más pequeño o más grande según el resultado deseado.

/* Rounded Corners */
.container { 
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
 
#footer-area .container { 
    -webkit-border-bottom-right-radius: 30px;
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: hidden;
}

Eliminar animaciones de transición del control deslizante

Personalmente, me encantan las animaciones de transición en el control deslizante de Foxy. Sin embargo, no son para todos, y si está buscando darle a su página de inicio una apariencia menos llamativa y más optimizada, estas animaciones se pueden eliminar fácilmente. Afortunadamente, usamos CSS puro para las animaciones de este control deslizante, en lugar de usar JavaScript, por lo que también podemos ajustar las animaciones usando CSS. Agregar el siguiente código eliminará los efectos de deslizamiento y rebote a favor de un desvanecimiento clásico.

/* Remove Slider Animations */
 
#featured .slide.et-active-slide img, #featured .slide.et-active-slide h2, #featured .slide.et-active-slide .description {
    -webkit-animation-duration: 0;
    -webkit-animation-delay: 0;
    -moz-animation-duration: 0;
    -moz-animation-delay: 0;
    -o-animation-duration: 0;
    -o-animation-delay: 0;
    -ms-animation-duration: 0;
    -ms-animation-delay: 0;
    animation-duration: 0;
    animation-delay: 0;
}

Crear botones flotantes para redes sociales

Las redes sociales se han convertido en una parte importante de cualquier sitio web, y algunos propietarios de sitios web querrán poner un énfasis adicional en sus perfiles de redes sociales. De forma predeterminada, Foxy coloca un enlace a sus páginas de Facebook, Twitter y Google+ en el pie de página. Para que estos enlaces sean más destacados, podemos sacarlos de su contenedor y hacer que se adhieran al costado de su página para que ningún visitante los pierda.

/*Make Social Media Sticky*/
  
#et-social-icons {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #333333;
padding: 20px 10px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
  
#et-social-icons a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
}

Estiliza tu sitio web usando un diseño plano

A lo largo del diseño de Foxy, implementamos un efecto de sombra interior para dar un poco de profundidad al control deslizante, los botones, las pestañas y las llamadas. Reconociendo la popularidad de la tendencia del «diseño plano», sin embargo, estoy seguro de que algunos usuarios querrán eliminar estas sombras a favor de un diseño más simple. Estas sombras se pueden eliminar fácilmente usando el siguiente código. El resultado es un solo color de resaltado en todo el tema.

/* Make Things Flat */
 
#featured, #top-navigation > ul > li.sfHover > a, #top-navigation > ul > li > a:hover, #home-tab-area > ul > li.home-tab-active, #footer-bottom li a:hover, .mobile_nav, #callout { 
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

Encabezados de publicaciones centrales dentro de la miniatura

Dale estilo a tu sitio web con esquinas redondeadas

Eliminar animaciones de transición del control deslizante

Crear botones flotantes para redes sociales

Estiliza tu sitio web usando un diseño plano

Publicaciones relacionadas: