Custom Theme Styling (CSS)

All of the custom CSS can be found in the Customizer > Additional CSS. At around 400 lines it can happily remain there. But i generally recommend that it finds a home in a child theme stylesheet. Most of the common Theme CSS is covered here for the inquisitive or for those wanting to make changes. CSS for specific pages or elements are covered in their relevant posts.

It should be noted that Custom CSS is only displayed on the Front End. Adding editor styles ( at this time ) is not achievable with an imported Site.

Typography

The vast majority of the theme styling, particularly Typography, Spacing and Colors are set in the customizer. But there is some custom CSS at play.

Large H2 Heading

The large-heading class can be added to a H2 Title Block to increase its size.

This is the large H2 heading

h2.large-heading {
    font-size: calc(28px + (64 - 28)*(100vw - 400px)/(1600 - 400));
    line-height: 1.1em;
}

Unless you’re a fan of algebra this CSS looks complicated. In a nut shell it sets the font size dynamically based on the current screen size. Our font size range is 28px to 64px. And our screen size range is 400px to 1600px. Try adjusting your browser width to see the effect.
If you want more information on fluid typography then check out Responsive And Fluid Typography With vh And vw Units

Enlace Flotante

The loud-link class will add an icon and underline hover effect. It should only be applied to a Text Block that only contains the link.

Hover Link

The loud-link class will add an icon and underline hover effect. It should only be applied to a Text Block that only contains the link.

Like this here

Buttons

All Theme button colors and typography are controlled via the customizer. The Happy Forms button has its own styling controls in the plugins settings. The additional rounded corners and hover styling is applied using this CSS:

a.button,
.wp-block-button__link,
.happyforms-submit,
.woocommerce button.button {
    -webkit-box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    border-radius: 4px !important;
}

a.button:hover,
a.wp-block-button__link:hover,
.happyforms-submit:hover,
.woocommerce button.button:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

Header

Underline

For this minimalist design I thought it best that we make a clear distinction between the Site Header and the page content. This is achieved with a simple bottom border on our Site Header. It comes in two varieties. White for pages with a Merged Header Element, and black for the ones without.

Deja un comentario

He leído y acepto la política de privacidad.

IMPORTANTE: Debes marca esta casilla para aceptar nuestra política de privacidad para comentarios y poder enviarlos.

*Información básica sobre Protección de Datos Responsable: Cristina arroyo de castro.Finalidad: Envío de información solicitada y gestión de suscripciones al blog, envío de ofertas, promociones o información sobre servicios que ofrece https://tokisart.com Legitimación: Consentimiento del interesado Destinatarios: Mailchimp como plataforma de envío de newsletters recibirá datos para gestionar las suscripciones.

  • Hosting: Contabo Hosting para el alojamiento de este sitio web, dentro del cual se guardan las bases de datos:
    Aschauer Str. 32a, 81549 München, Alemania.El teléfono de contacto es : +49 89 356471771
    Mail:SUPPORT@CONTABO.COM

 

Se puede consultar la Política de Privacidad de privacidad de CONTABO Aquí: Política de privacidad de Contabo

s. Derechos: A acceder, rectificar y suprimir los datos, así como otros derechos detallados en nuestra política de privacidad. Información adicional: Disponible la información adicional y detallada de mi web  en la páginas Política de privacidad, política de cookies y Aviso Legal

  *