Thème par défaut: installer une bannière sous le logo de PluXml
Lire la suite de Thème par défaut: installer une bannière sous le logo de PluXml
Lire la suite de Thème par défaut: installer une bannière sous le logo de PluXml
.nav {
background-color: #fff;
height: 4rem;
text-align: left;
margin-top: 1rem;
}
par
.nav {
background-color: #fbfbfb;
height: 4rem;
text-align: center;
padding-top: 0.5rem;
position: fixed;
width: 100%;
z-index: 1;
border-bottom: 1px #eee solid;
}
La barre sera ainsi fixe en haut de l'écran lors de l'utilistion du scroll vertical à la souris et les menus seront centrés.
Nous allons voir en 2 étapes comment afficher la liste des catégories dans un menu déroulants, dans la barre des menus des page statiques
Éditer le fichier header.php de votre thème (exemple /themes/defaut/header.php)
Localisez les lignes suivantes
<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
Remplacez les par le code suivant
<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
<li class="submenus">
<a href="#"><?php $plxShow->lang('CATEGORIES') ?> ▼</a>
<ul>
<?php $plxShow->catList('','<li id="#cat_id"><a class="#cat_status" href="#cat_url" title="#cat_name">#cat_name</a> (#art_nb)</li>'); ?>
</ul>
</li>
<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
Éditer le fichier theme.css de votre thème (exemple /themes/defaut/css/theme.css)
Rajoutez à la fin du fichier les lignes suivantes
.submenus ul {
position: relative;
left: -9999px;
float: left;
margin: 0;
padding: 0;
list-style: none;
z-index: 999;
}
.submenus:hover ul {
left: 0;
color: #fff;
background-color:#000;
}
.submenus:hover ul li {
font-size: 0.9rem;
clear: both;
float: left;
padding: 2px 10px 2px 10px;
width: 100%;
}
.submenus:hover ul li a {
display: inline-block;
margin: 0;
padding: 3px 0 3px 0;
}
.submenus:hover ul li a:hover {
text-decoration: none;
}
Et voilà, à vous d'adapter en fonction de vos besoins et de votre thème.
Envie d'afficher la liste des menus des pages statiques sous forme de menus déroulants ?
Comme on essaye toujours de faire les choses simples avec PluXml avec un minimun de modification, voici comment réaliser des listes déroulantes à partir des groupes des menus des pages statiques avec uniquement du code css.
Lire la suite de Pages statiques sous forme de menus déroulant en pur css
Cette astuce a été publiée sur le forum de PluXml par David Revoy. Parce qu'elle est très facile à mettre en place et peut être très utile pour les concepteurs de thème, j'ai trouvé dommage qu'elle reste noyée dans tous les sujets du forum.
Lire la suite de Astuce PluCSS: connaitre le mode d'affichage (sml, med, lrg)