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

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;    
}