atomik theme: personnaliser (centrer nav etc)

C'est le thème par défaut depuis la v9 de concretecms, je conseille son utilisation, d'autant que comme l'ancien elemental (encore dispo… mais pour combien de temps?), il propose des variantes

Le thème est bien foutu mais comporte une erreur de SEO dans le menu de nav du bloc “Top Navigation Bar”: si on a une icône pour le “home”, on ne peut pas y mettre d'attributs alt et pas de title sur le href non plus, ce qui est mal.

solution: un petit hack JS à placer dans un bloc html, en bas du site, dans une zone globale afin qu'il soit visible partout.

<script>
// Attendre que le DOM soit chargé
document.addEventListener('DOMContentLoaded', function() {
    const navbarBrand = document.querySelector('a.navbar-brand[href="https://radeff.red/recettes"]');
 
    if (navbarBrand) {
        // Mettre à jour le lien
        navbarBrand.classList.add('logo');
        navbarBrand.title = 'Recettes Fred Radeff - accueil';
 
        // Mettre à jour l'image
        const logoImg = navbarBrand.querySelector('img.logo');
        if (logoImg) {
            logoImg.alt = 'Recettes Fred Radeff - accueil';
        }
    }
});
</script>

Voir en action: https://radeff.red/recettes

La voie raide: How to clone and customize Atomik theme

Le thème Atomik c'est un des gros trucs de concretecms v9, par contre j'ai du pas mal batailler pour piger comment le customiser par le GUI, sans de voir faire la totale (recompilation scss etc)

Une fois qu'on a pigé, c'est assez simple

En images

On cherche les thèmes dans le dashboard > Atomik > Clic droit > Personnaliser

On voit la page courante, on passe en édition

Choisir “Default”

Scroller jusqu'au bas de la colonne gauche

CSS Personnalisé / Add custom CSS n'est pas activé

On active et on édite

Ajouter la ou les règles (ici on va mettre en rouge les H2) et très bizaremment, pour sauver on ferme la fenêtre ???

YES! Pour sauver faut encore cliquer sur “Create New”

Donner un nom et enregistrer (btn “Create”)

Le “custom skin” apparaît

Dans les thèmes, on peut resetter (et perdre tout le boulot…)

ajouter un bloc HTML dans une zone globale avec cette règle

<style>
/* centrer le menu atomik "top navigation bar" et le titre h1 (atomik theme container style) */
.ccm-block-top-navigation-bar,
h1 {
    max-width: 1200px;
    margin: 0 auto;
}  
</style>

Un truc très moche dans le sélecteur multilingue sur Atomik:

Tout simple pour régler, ajouter cette règle css dans une zone globale (voir infra)

/* fix bug display sélecteur de langue */
.dropdown-menu-lg-end > li:nth-child(2) > a:nth-child(1) {
text-transform: lowercase; 
}

Last but not least, un trick immonde pour faire du css sans se fatiguer - mais attention il n'est pas strictement valide! Et ne dites pas que ça vient de moi…

2 solutions: