Taille du texte: + –

Différence de style CSS entre Widgetkit et YooTheme Pro ?

jeudi 22 mars 2018

1342 lectures

Vous vous êtes rendus compte que les styles CSS entre le thème YooTheme Pro et le composant Widgetkit 2 sont différents et du coup ce n'est pas très joli en terme d'ergonomie et de design.

Il y a une raison à cela :

Widgetkit utilise CSS depuis UIkit 2 alors que YOOtheme Pro utilise UIkit 3. Ces versions d'UIkit sont incompatibles entre elles, donc Widgetkit n'appliquera pas automatiquement le style de bouton que vous avez défini dans le customizer de style de YOOtheme Pro.

Vous devrez ajouter du CSS / LESS personnalisé pour écraser le style de bouton de Widgetkit.

Par exemple, ajoutez ce qui suit à Extensions-> Templates-> Styles-> yootheme-> OPEN WEBSITE BUILDER-> Paramètres-> Custom Code-> CSS / LESS pour le style de bouton principal:

html .wk-button.wk-button-primary {    
    border-radius: @button-border-radius;    
    border-width: @button-border-width;    
    font-family: @button-font-family;    
    font-size: @button-font-size;    
    font-style: @button-font-style;    
    font-weight: @button-font-weight;    
    letter-spacing: @button-letter-spacing;    
    line-height: @button-line-height;    
    padding-left: @button-padding-horizontal;    
    padding-right: @button-padding-horizontal;    
    text-transform: @button-text-transform;    
    transition-duration: @button-transition-duration;    
    background: @button-primary-background;    
    border-color: @button-primary-border;    
    color: @button-primary-color;    
}    
html .wk-button.wk-button-primary:hover {    
    background: @button-primary-hover-background;    
    border-color: @button-primary-hover-border !important;    
    color: @button-primary-hover-color;    
}    
html .wk-button.wk-button-primary:active {    
    background: @button-primary-active-background;    
    border-color: @button-primary-active-border !important;    
    color: @button-primary-active-color;    
}    
html .uk-light .wk-button.wk-button-primary {    
    background: @inverse-button-primary-background;    
    border-color: @inverse-button-primary-border;    
    color: @inverse-button-primary-color;    
}    
html .uk-light .wk-button.wk-button-primary:hover {    
    background: @inverse-button-primary-hover-background;    
    border-color: @inverse-button-primary-hover-border;    
    color: @inverse-button-primary-hover-color;    
}    
html .uk-light .wk-button.wk-button-primary:active {    
    background: @inverse-button-primary-active-background;    
    border-color: @inverse-button-primary-active-border;    
    color: @inverse-button-primary-active-color;    
}

How do you feel about this post?

joomla-conseil.com n'est ni affilié à Open Source Matters ou au projet Joomla!® ni approuvé par eux. Le nom Joomla! et le logo sont utilisé sous licence limitée accordée par Open Source Matters, propriétaire de la marque aux États-Unis et autres pays. joomla-conseil.com is not affiliated with or endorsed by The Joomla! Project™. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.

Mentions Légales - Données personnelles - Plan du site