Custom la forme d'une section
À partir de la version 2.9.4 d'Uncode, de nouvelles classes CSS personnalisées ont été introduites pour améliorer la mise en page des section. Ces classes vous permettent de créer des rangées avec des marges espacées selon la fenêtre d'affichage (viewport) et des coins arrondis pour des designs plus sophistiqués.
Comment appliquer les classes de section personnalisées
Pour utiliser ces classes :
-
Allez dans le réglage de section (Réglages de la section) → Extra → Extra Class Name ;
-
Ajoutez le nom de la classe souhaitée parmi la liste ci-dessous ;
-
Enregistrez vos modifications.
Classes de Bordures Arrondies (Border Radius)
Ces classes appliquent des effets d'arrondis prononcés à vos rangées :
-
unradius-hg-top-bottom: Applique un arrondi géant en haut et en bas de la section. -
unradius-hg-top: Applique un arrondi géant uniquement en haut de la section. -
unradius-hg-bottom: Applique un arrondi géant uniquement en bas de la section.
Classes de Marges (Margin)
Ces classes créent un espacement entre vos rangées et les bords de l'écran (viewport) :
-
unmargin-h-force: Applique un espacement horizontal à la section(marges gauche et droite). -
unmargin-top-force: Applique un espacement au sommet de la section. -
unmargin-bottom-force: Applique un espacement au bas de la section.
Déploiement d'une blurred navbar avec overlay
Lors du déploiement de votre site web sous Uncode 2.10 ou une version antérieure, il est possible d’ajouter un effet de flou gaussien à la barre de navigation et de personnaliser les couleurs du texte, même si ces options ne sont pas disponibles nativement via l’éditeur d’administration du thème.
Cette personnalisation peut néanmoins être mise en place à l’aide de CSS et JavaScript personnalisés.
Étape 1 — Configuration dans les options du thème
Rendez-vous dans le menu suivant :
Uncode → Theme Options → General → Navbar
Appliquez les réglages nécessaires à l’affichage de la barre de navigation (structure, positionnement)
Étape 2 — Ajout du CSS personnalisé
Une fois la configuration de base effectuée, ajoutez le code CSS ci-dessous dans :
Uncode → Theme Options → Utility → CSS & JS
Ce code permet d’appliquer un fond translucide avec un effet de flou sur la navigation verticale, uniquement à partir d’une largeur d’écran minimale définie.
Code CSS :
@media (min-width: 960px) {
/* Fond gris argenté + blur */
body.vmenu-offcanvas-overlay.off-opened .masthead-vertical .vmenu-container {
/* gris argenté translucide */
background: rgba(180, 180, 190, 0.30) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
/* Texte blanc */
body.vmenu-offcanvas-overlay.off-opened .vmenu-container,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container a,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .menu-primary-inner > li > a,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .uncode-menu-additional-text,
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .vmenu-footer {
color: #ffffff !important;
}
/* === Overlay sombre derrière le off-canvas (sans rien modifier du natif) === */
body.vmenu-offcanvas-overlay.off-opened::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.10); /* 10% */
pointer-events: none; /* ne bloque jamais les clics */
z-index: 200; /* sous le off-canvas, au-dessus du site */
}
/* Icônes sociales blanches */
body.vmenu-offcanvas-overlay.off-opened .vmenu-container .menu-social i {
color: #ffffff !important;
}
}
/* état ouvert normal */
body.menu-mobile-open .menu-row-wrapper {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background: rgba(128, 128, 128, 0.30);
transition: backdrop-filter 0.4s ease, background 0.4s ease;
}
/* AJOUTEZ CE CSS à votre CSS existant */
@media (min-width: 960px) {
/* Garder le blur pendant la FERMETURE du menu desktop */
body.vmenu-offcanvas-overlay.off-closing .masthead-vertical .vmenu-container {
background: rgba(180, 180, 190, 0.30) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
}
/* Overlay sombre pendant la fermeture */
body.vmenu-offcanvas-overlay.off-closing::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.10);
pointer-events: none;
z-index: 200;
}
/* Texte blanc pendant la fermeture */
body.vmenu-offcanvas-overlay.off-closing .vmenu-container,
body.vmenu-offcanvas-overlay.off-closing .vmenu-container a,
body.vmenu-offcanvas-overlay.off-closing .vmenu-container .menu-primary-inner > li > a {
color: #ffffff !important;
}
}
Code JS:
(function($) {
'use strict';
// Configuration
const CONFIG = {
// Classes Uncode détectées dans votre CSS
openClassDesktop: 'off-opened',
openClassMobile: 'menu-mobile-open',
overlayClass: 'vmenu-offcanvas-overlay',
closingClassDesktop: 'off-closing',
closingClassMobile: 'menu-mobile-closing',
animationDuration: 500,
};
let isClosing = false;
let closeTimeout = null;
function handleMenuClose(isDesktop) {
const $body = $('body');
if (isClosing) return;
isClosing = true;
if (isDesktop) {
$body.addClass(CONFIG.closingClassDesktop);
} else {
$body.addClass(CONFIG.closingClassMobile);
}
if (closeTimeout) clearTimeout(closeTimeout);
closeTimeout = setTimeout(function() {
$body.removeClass(CONFIG.closingClassDesktop + ' ' + CONFIG.closingClassMobile);
isClosing = false;
}, CONFIG.animationDuration);
}
function handleMenuOpen() {
if (closeTimeout) {
clearTimeout(closeTimeout);
closeTimeout = null;
}
isClosing = false;
$('body').removeClass(CONFIG.closingClassDesktop + ' ' + CONFIG.closingClassMobile);
}
function initObserver() {
const targetNode = document.body;
const config = {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
};
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const oldClasses = mutation.oldValue || '';
const newClasses = targetNode.className;
const wasOpenDesktop = oldClasses.includes(CONFIG.openClassDesktop);
const isOpenDesktop = newClasses.includes(CONFIG.openClassDesktop);
const wasOpenMobile = oldClasses.includes(CONFIG.openClassMobile);
const isOpenMobile = newClasses.includes(CONFIG.openClassMobile);
if ((!wasOpenDesktop && isOpenDesktop) || (!wasOpenMobile && isOpenMobile)) {
handleMenuOpen();
}
if (wasOpenDesktop && !isOpenDesktop) {
handleMenuClose(true);
}
if (wasOpenMobile && !isOpenMobile) {
handleMenuClose(false);
}
}
});
});
observer.observe(targetNode, config);
}
function initClickListeners() {
// Bouton hamburger / close
$(document).on('click', '.mobile-menu-button, .mmenu-close, .menu-close-search, .close-menu', function() {
const $body = $('body');
const isDesktop = $body.hasClass(CONFIG.openClassDesktop);
if ($body.hasClass(CONFIG.openClassMobile) || isDesktop) {
handleMenuClose(isDesktop);
}
});
$(document).on('click', '.vmenu-overlay, .off-canvas-overlay, .vmenu-offcanvas-overlay', function() {
const $body = $('body');
const isDesktop = $body.hasClass(CONFIG.openClassDesktop);
handleMenuClose(isDesktop);
});
$(document).on('click', '.menu-primary a, .vmenu-container a', function(e) {
const $body = $('body');
const href = $(this).attr('href');
const isDesktop = $body.hasClass(CONFIG.openClassDesktop);
// Si c'est un lien interne (ancre ou page), le menu va se fermer
if (href && (href.startsWith('#') || href.startsWith('/'))) {
if ($body.hasClass(CONFIG.openClassMobile) || isDesktop) {
handleMenuClose(isDesktop);
}
}
});
}
/**
*/
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
initObserver();
initClickListeners();
});
} else {
initObserver();
initClickListeners();
}
console.log('✓ Fix menu off-canvas Uncode initialisé');
}
init();
})(jQuery);
@media (min-width: 960px) {
// Pour desktop (vmenu vertical)
body.vmenu-offcanvas-overlay.off-opened .masthead-vertical .vmenu-container,
body.vmenu-offcanvas-overlay.menu-mobile-closing .masthead-vertical .vmenu-container {
background: rgba(180, 180, 190, 0.30) !important;
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
transition: backdrop-filter 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
// Overlay sombre pendant ouverture ET fermeture
body.vmenu-offcanvas-overlay.off-opened::after,
body.vmenu-offcanvas-overlay.menu-mobile-closing::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.10);
pointer-events: none;
z-index: 200;
transition: opacity 0.4s ease;
}
}
// Pour mobile
body.menu-mobile-open .menu-row-wrapper,
body.menu-mobile-closing .menu-row-wrapper {
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
background: rgba(128, 128, 128, 0.30);
transition: backdrop-filter 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
*/
}