[RESOLU]MyContact, MySiteMap et Thème W3css

michelw · novembre 2016

Bonjour;
J'ai deux petits soucis sur mon site: http://wendling.xyz/
Pour les menus Sitemap et Contact j'ai un décalage vers le haut des textes d'une part et d'autre part lorsque je passe la souris dessus la couleur de fond devient est grise alors que pour les autres menus elle est du même bleu que le site. Pourriez-vous m'aider à ce sujet? En vous remerciant

DjbWebmaster · novembre 2016

Bonsoir,

En regardant ton code, tu as sur les 5 premiers lien une class sur ton li

[== Indéfini ==]
<li class="w3-hide-small w3-theme-dark w3-hover-shadow noactive">

sur contact et sitemap, tu n'as pas de class.

tu peux envoyer ton code sur le fichier header.php ? juste la partie <nav role="navigation>.....</nav>

niqnutn · novembre 2016

j'ai partiellement répondu ici: https://blog.niqnutn.com/index.php?article54/w3css#c0054-22

je pense que le "problème" vient de l'utilisation des plugins qui insèrent des liens dans le menu.
j'ai simplement prévu d'avoir un menu intégrant les pages statiques, du coup il y a quelques pb d'affichages.

il existe bien des solutions mais nécessitant des modifications de code.
la plus rapide mais la plus mauvaise, c'est d'ajouter en dur les liens dans le header.php du thème.

[== PHP ==]
<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
<html lang="<?php $plxShow->defaultLang() ?>">
<head>
	<meta charset="<?php $plxShow->charset('min'); ?>">
	<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
	<title><?php $plxShow->pageTitle(); ?></title>
	<?php $plxShow->meta('description') ?>
	<?php $plxShow->meta('keywords') ?>
	<?php $plxShow->meta('author') ?>
	<link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/w3.css" media="screen"/>
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/w3-custom.css" media="screen"/>
	<!-- <script type="text/javascript" src="<?php $plxShow->template(); ?>/css/w3.js"></script> -->
	<?php $plxShow->templateCss() ?>
	<?php $plxShow->pluginsCss() ?>
	<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
	<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
</head>

<body id="top" class="w3-theme-dark">

<!-- Navbar -->
<nav  role="navigation" >

	<!-- Navbar on wide screens -->
	<ul class="menu-large w3-navbar w3-theme-dark w3-left-align w3-large">
		<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
			<a class="w3-padding-large w3-hover-theme w3-large w3-theme-dark" href="javascript:void(0);" onclick="myMenu()" title="Ouvir le menu"><i class="fa fa-bars"></i></a>
		</li>
		<li id="static-home">
		<a href="<?php $plxShow->racine() ?>" class="w3-padding-large w3-theme-light w3-hover-theme ">
			<?php $plxShow->lang('HOME') ?>
		</a>
		</li>
	<?php $plxShow->staticList('','<li class="w3-hide-small w3-theme-dark w3-hover-shadow #static_status" id="#static_id"><a href="#static_url" title="#static_name" class="w3-padding-large w3-hover-theme ">#static_name</a></li>', '<div class="w3-hide-small w3-padding-large  w3-hover-theme ">#group_name</div>  ' ); ?>	
	<li class="w3-hide-small w3-theme-dark w3-hover-shadow " id="sitemap"><a class="w3-padding-large w3-hover-theme " href="sitemap" title="Sitemap">Sitemap</a></li>
	<li class="w3-hide-small w3-theme-dark w3-hover-shadow " id="contact"><a class="w3-padding-large w3-hover-theme " href="contact" title="Contact">Contact</a></li>	
	</ul>

	<!-- Navbar on small screens -->
	<div id="navDemo" class="menu-small w3-hide w3-hide-large w3-hide-medium "  >
		  <ul class="w3-navbar w3-left-align w3-large w3-theme-dark w3-padding-bottom ">
			<?php $plxShow->staticList('','<li class="#static_status " id="#static_id_alt"><a href="#static_url" title="#static_name" class="w3-padding-large w3-hover-theme">#static_name</a></li>', '<div class="w3-padding-large ">#group_name</div>  '); ?>
			<li class="#static_status " id="#sitemap_alt"><a href="sitemap" title="Sitemap" class="w3-padding-large w3-hover-theme">Sitemap</a></li>
			<li class="#static_status " id="#contact_alt"><a href="contact" title="Contact" class="w3-padding-large w3-hover-theme">Contact</a></li>
		  </ul>
	</div>
	
</nav>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myMenu() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

<!-- Header -->
<div class="w3-container w3-theme w3-padding">
  <h1 class="w3-xxlarge"><b><?php $plxShow->mainTitle('link'); ?></b></h1>
  <h2 class="w3-xlarge"><i><?php $plxShow->subTitle(); ?></i></h2>
</div>

[== PHP ==]
<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
<html lang="<?php $plxShow->defaultLang() ?>">
<head>
	<meta charset="<?php $plxShow->charset('min'); ?>">
	<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">
	<title><?php $plxShow->pageTitle(); ?></title>
	<?php $plxShow->meta('description') ?>
	<?php $plxShow->meta('keywords') ?>
	<?php $plxShow->meta('author') ?>
	<link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/w3.css" media="screen"/>
	<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/w3-custom.css" media="screen"/>
	<!-- <script type="text/javascript" src="<?php $plxShow->template(); ?>/css/w3.js"></script> -->
	<?php $plxShow->templateCss() ?>
	<?php $plxShow->pluginsCss() ?>
	<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
	<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
</head>

<body id="top" class="w3-theme-dark">

<!-- Navbar -->
<nav  role="navigation" >

	<!-- Navbar on wide screens -->
	<ul class="menu-large w3-navbar w3-theme-dark w3-left-align w3-large">
		<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
			<a class="w3-padding-large w3-hover-theme w3-large w3-theme-dark" href="javascript:void(0);" onclick="myMenu()" title="Ouvir le menu"><i class="fa fa-bars"></i></a>
		</li>
		<li id="static-home">
		<a href="<?php $plxShow->racine() ?>" class="w3-padding-large w3-theme-light w3-hover-theme ">
			<?php $plxShow->lang('HOME') ?>
		</a>
		</li>
	<?php $plxShow->staticList('','<li class="w3-hide-small w3-theme-dark w3-hover-shadow #static_status" id="#static_id"><a href="#static_url" title="#static_name" class="w3-padding-large w3-hover-theme ">#static_name</a></li>', '<div class="w3-hide-small w3-padding-large  w3-hover-theme ">#group_name</div>  ' ); ?>	
	<li class="w3-hide-small w3-theme-dark w3-hover-shadow " id="sitemap"><a class="w3-padding-large w3-hover-theme " href="sitemap" title="Sitemap">Sitemap</a></li>
	<li class="w3-hide-small w3-theme-dark w3-hover-shadow " id="contact"><a class="w3-padding-large w3-hover-theme " href="contact" title="Contact">Contact</a></li>	
	</ul>

	<!-- Navbar on small screens -->
	<div id="navDemo" class="menu-small w3-hide w3-hide-large w3-hide-medium "  >
		  <ul class="w3-navbar w3-left-align w3-large w3-theme-dark w3-padding-bottom ">
			<?php $plxShow->staticList('','<li class="#static_status " id="#static_id_alt"><a href="#static_url" title="#static_name" class="w3-padding-large w3-hover-theme">#static_name</a></li>', '<div class="w3-padding-large ">#group_name</div>  '); ?>
			<li class="#static_status " id="#sitemap_alt"><a href="sitemap" title="Sitemap" class="w3-padding-large w3-hover-theme">Sitemap</a></li>
			<li class="#static_status " id="#contact_alt"><a href="contact" title="Contact" class="w3-padding-large w3-hover-theme">Contact</a></li>
		  </ul>
	</div>
	
</nav>

<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myMenu() {
    var x = document.getElementById("navDemo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

<!-- Header -->
<div class="w3-container w3-theme w3-padding">
  <h1 class="w3-xxlarge"><b><?php $plxShow->mainTitle('link'); ?></b></h1>
  <h2 class="w3-xlarge"><i><?php $plxShow->subTitle(); ?></i></h2>
</div>

kowalsky · novembre 2016

Paradoxalement c'est le fait qu'il y a trop d'options possibles dans le thème de base qui pose problème

Le CSS des classes pour "li" et "a" est trop spécifique au niveau du thème concernant la navbar. Il y a des classes partout et pour tout. Donc forcement dès que la classe est absente, ça devient bancal.

Chemin CSS pour un lien par défaut :
html body#top.w3-theme-dark nav ul.menu-large.w3-navbar.w3-theme-dark.w3-left-align.w3-large li#static-7.w3-hide-small.w3-theme-dark.w3-hover-shadow.noactive a.w3-padding-large.w3-hover-theme

Chemin CSS pour lien généré par le plugin :
html body#top.w3-theme-dark nav ul.menu-large.w3-navbar.w3-theme-dark.w3-left-align.w3-large li a.static.noactive

Il faudrait laisser les "li" et "a" sans classes et n'appliquer les classes que sur les "ul" de la navbar au niveau du thème, comme ça tous les liens seront identiques : <ul class="w3-navbar"><li><a></a><li><ul> et plus de problème quand un plugin insère un lien.

Bien entendu cela demande de modifier le thème pour que cela s'applique correctement, avec éventuellement toutes les déclinaisons possibles :
ul.w3-navbar li a
ul.w3-theme-dark li a
ul.w3-large li a
etc.

(mais c'est un coup à avoir un CSS qui ressemble à ceci :

.w3-btn, .w3-btn-floating, .w3-btn-floating-large, .w3-btn-block, .w3-hover-shadow, .w3-hover-opacity, .w3-navbar a, .w3-sidenav a, .w3-dropnav a, .w3-pagination li a, .w3-hoverable tbody tr, .w3-hoverable li, .w3-accordion-content a, .w3-dropdown-content a, .w3-dropdown-click:hover, .w3-dropdown-hover:hover, .w3-opennav, .w3-closenav, .w3-closebtn, .w3-hover-amber, .w3-hover-aqua, .w3-hover-blue, .w3-hover-light-blue, .w3-hover-brown, .w3-hover-cyan, .w3-hover-blue-grey, .w3-hover-green, .w3-hover-light-green, .w3-hover-indigo, .w3-hover-khaki, .w3-hover-lime, .w3-hover-orange, .w3-hover-deep-orange, .w3-hover-pink, .w3-hover-purple, .w3-hover-deep-purple, .w3-hover-red, .w3-hover-sand, .w3-hover-teal, .w3-hover-yellow, .w3-hover-white, .w3-hover-black, .w3-hover-grey, .w3-hover-light-grey, .w3-hover-dark-grey, .w3-hover-text-amber, .w3-hover-text-aqua, .w3-hover-text-blue, .w3-hover-text-light-blue, .w3-hover-text-brown, .w3-hover-text-cyan, .w3-hover-text-blue-grey, .w3-hover-text-green, .w3-hover-text-light-green, .w3-hover-text-indigo, .w3-hover-text-khaki, .w3-hover-text-lime, .w3-hover-text-orange, .w3-hover-text-deep-orange, .w3-hover-text-pink, .w3-hover-text-purple, .w3-hover-text-deep-purple, .w3-hover-text-red, .w3-hover-text-sand, .w3-hover-text-teal, .w3-hover-text-yellow, .w3-hover-text-white, .w3-hover-text-black, .w3-hover-text-grey, .w3-hover-text-light-grey, .w3-hover-text-dark-grey {
transition: background-color 0.3s ease 0s, color 0.15s ease 0s, box-shadow 0.3s ease 0s, opacity 0.3s ease 0s;
}

sans avoir regardé plus que cela, je me dis qu'un "w3-hover" aurait sans doute été plus simple à gérer)

niqnutn · novembre 2016

@kowalsky: ce que tu proposes est à l'opposé de l'objectif du thème.
l'idée est de pouvoir modifier "facilement" le thème sans aucune notion de css.

ça reste pour autant une solution possible.
il suffit de reprendre la structure du menu (sans les classes) et ajouter les propriétés qui correspondent dans le css:
...
nav ul {color:red}
nav ul li {...}
nav ul li a {...}
nav ul li a:hover {...}
...

j'ai proposé quelques solutions mais j'ai pas de solutions miracles.

michelw · novembre 2016

Bonjour,
Voici le code, avec les différentes interventions quelle serait la meilleure solution d'après vous?
En vous remerciant

[== PHP ==]
<nav  role="navigation" >

	<!-- Navbar on wide screens -->
	<ul class="menu-large w3-navbar w3-theme-dark w3-left-align w3-large">
		<li class="w3-hide-medium w3-hide-large w3-opennav w3-right">
			<a class="w3-padding-large w3-hover-theme w3-large w3-theme-dark" href="javascript:void(0);" onclick="myMenu()" title="Ouvir le menu"><i class="fa fa-bars"></i></a>
		</li>
		<li>
		<a href="<?php $plxShow->racine() ?>" class="w3-padding-large w3-theme-light w3-hover-theme ">
			<?php $plxShow->lang('HOME') ?>
		</a>
		</li>
	<?php $plxShow->staticList('','<li class="w3-hide-small w3-theme-dark w3-hover-shadow #static_status" id="#static_id"><a href="#static_url" title="#static_name" class="w3-padding-large w3-hover-theme ">#static_name</a></li>', '<div class="w3-hide-small w3-padding-large  w3-hover-theme ">#group_name</div>  ' ); ?>
	</ul>

	<!-- Navbar on small screens -->
	<div id="navDemo" class="menu-small w3-hide w3-hide-large w3-hide-medium "  >
		  <ul class="w3-navbar w3-left-align w3-large w3-theme-dark w3-padding-bottom ">
			<?php $plxShow->staticList('','<li class="#static_status " id="#static_id"><a href="#static_url" title="#static_name" class="w3-padding-large w3-hover-theme">#static_name</a></li>', '<div class="w3-padding-large ">#group_name</div>  '); ?>
		  </ul>
	</div>
	
</nav>

kowalsky · novembre 2016

@niqnutn : ne te méprends pas, le thème est superbe et les options de modifications avancées sont évidement le but recherché. Je proposais juste une piste pour résoudre le problème rencontré.

niqnutn · novembre 2016

@michelw: tu peux recopier le header.php que j'ai mis plus haut, j'ai rajouté les liens en dur.
ensuite tu désactive les liens à partir du plugin pour éviter les doublons.

@kowalsky: pas de pb. c'est une solution qu'il faut que je travaille.

michelw · novembre 2016

Merci pour votre aide, mais pour l'instant je ne préfère pas toucher au code et je laisserai donc mon site en l'état. J'attendrai les prochaines versions des plugins, tu thème et de pluxml pour mettre cela à jour.

niqnutn · novembre 2016

michelw a écrit:

Merci pour votre aide, mais pour l'instant je ne préfère pas toucher au code et je laisserai donc mon site en l'état. J'attendrai les prochaines versions des plugins, tu thème et de pluxml pour mettre cela à jour.

pourquoi ça ?
j'ai proposé une solution dans le post plus haut. il suffit de modifier un seul fichier du thème.
tu peux facilement faire retour arrière si besoin.

[RESOLU]MyContact, MySiteMap et Thème W3css

Réponses