Modifier la barre de navigation

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifier la barre de navigation

Message par hémicycliste Sam 9 Sep 2017 - 23:36

Bonsoir,

j'aimerais modifier la barre de navigation de mon forum, mais je ne vois pas comment faire dans le template overall_header...
J'ai conçu une page html pour chaque bouton de la barre de navigation, et j'ai conçu une barre de navigation commune à toutes les pages. Mais je ne parviens pas à intégrer cette barre de navigation dans le template, pour que la page de mon forum ait exactement la même barre de navigation que toutes les autres pages.

Voici la barre de navigation que j'utilise, par exemple sur cette page : http://www.forumdephilosophie.com/h3-bibliotheque
Voici le code correspondant :
Code:
<body>
<center>
<ul>
      <li><a href="http://www.forumdephilosophie.com/">Forum</a></li>
      <li><a href="http://www.forumdephilosophie.com/h5-portail">Portail</a></li>
      <li><a href="http://www.forumdephilosophie.com/h3-bibliotheque">Bibliothèque</a></li>
      <li><a href="http://www.forumdephilosophie.com/h7-sitotheque">Sitothèque</a></li>
      <li><a href="http://www.forumdephilosophie.com/h8-sitosciences">SitoSciences</a></li>
      <li><a href="http://www.forumdephilosophie.com/h6-revues">Revues</a></li>
      <li><a href="http://www.forumdephilosophie.com/h9-langues-anciennes" class="bar">Langues Anciennes</a></li>
</ul>
</center>
<style type="text/css">
ul {
    width: 961px;
   list-style-type: none;
    margin: 0;
   padding: 0;
    overflow: hidden;
    background-color: black;
   border-radius: 8px;
   font-size: 22px;
}

li {
    float: left;
   border-right:1px solid #fff;
}

li:last-child {
   border-right: none;
}

li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.active {
    background-color: #058A99;
}

a {
  text-decoration: none;
  color: #058A99;
}

a:visited {
  color: #058A99;
}

a:hover {
  text-decoration: none;
  color: #995E05;
}
</style>

Voici maintenant la partie du template où je pense qu'il faudrait intervenir, pour ma part, j'ai essayé en vérifiant que mes sélecteurs css étaient corrects par rapport aux class et aux id, mais ça ne fonctionne pas :
Code:
<div id="submenu">
               <ul>
                  <li class="clearfix">{GENERATED_NAV_BAR}</li>
               </ul>
            </div>
            <!-- BEGIN switch_user_logged_in -->
            <div id="userlinks" class="clearfix">
               <ul>
                     <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
                     <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
                  <li class="last"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
               </ul>
               <p>{LOGGED_AS}.</p>
            </div>
            <!-- END switch_user_logged_in -->
            <!-- BEGIN switch_user_logged_out -->
            <div id="userlinks" class="not-connected clearfix">
               <span class="guest">{L_NOT_CONNECTED}</span> <span>{L_LOGIN_REGISTER}</span>
            </div>
            <!-- END switch_user_logged_out -->

Merci d'avance (je me rends compte en postant que je n'ai pas créé de sélecteur pour "not-connected clearfix", entre autres choses, ceci expliquant peut-être cela ?)

Un grand merci par avance à qui accepterait de m'expliquer la procédure, parce que je voudrais mémoriser une bonne fois pour toutes la démarche.

Cordialement,
Hemicycliste
avatar

hémicycliste
*

Masculin
Messages : 46
Inscrit(e) le : 29/01/2011

http://www.forumdephilosophie.com/
hémicycliste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la barre de navigation

Message par Tech Dim 10 Sep 2017 - 15:55

Bonjour,

C'est la variable {GENERATED_NAV_BAR} qui génère et affiche la barre de navigation sur le forum. Vous pouvez soit la supprimer et gérer un à un chaque élément, soit ajouter vous-même des liens dans la barre de navigation via votre PA > Affichage > Page d'accueil > En-tête & Navigation.

Cordialement.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la barre de navigation

Message par hémicycliste Mar 12 Sep 2017 - 12:28

Merci pour cette information. Je fais quelques tests et, au besoin, je vous demanderai un peu d'aide.
avatar

hémicycliste
*

Masculin
Messages : 46
Inscrit(e) le : 29/01/2011

http://www.forumdephilosophie.com/
hémicycliste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la barre de navigation

Message par hémicycliste Mar 12 Sep 2017 - 15:08

Je viens d'obtenir ce résultat :http://www.forumdephilosophie.com/, avec les codes suivants :
Code:
<div id="submenu">
<center>
  <ul>
<li class="clearfix">
<li><a href="http://www.forumdephilosophie.com/forum" class="clearfix">Forum</a></li>
<li><a href="http://www.forumdephilosophie.com/h5-portail" class="clearfix">Portail</a></li>
<li><a href="http://www.forumdephilosophie.com/h3-bibliotheque" class="clearfix">Bibliothèque</a></li>
<li><a href="http://www.forumdephilosophie.com/h7-sitotheque" class="clearfix">Sitothèque</a></li>
<li><a href="http://www.forumdephilosophie.com/h8-sitosciences" class="clearfix">SitoSciences</a></li>
<li><a href="http://www.forumdephilosophie.com/h6-revues" class="clearfix">Revues</a></li>
<li><a href="http://www.forumdephilosophie.com/h9-langues-anciennes" class="clearfix">Langues Anciennes</a></li>
<li><a href="http://www.forumdephilosophie.com/faq" class="clearfix">FAQ</a></li>
<li><a href="http://www.forumdephilosophie.com/memberlist" class="clearfix">Membres</a></li>
<li><a href="http://www.forumdephilosophie.com/groups" class="clearfix">Groupes</a></li>
<li><a href="http://www.forumdephilosophie.com/profile?mode=editprofile" class="clearfix">Profil</a></li>
<li><a href="http://www.forumdephilosophie.com/privmsg?folder=inbox" class="clearfix">Messagerie</a></li>
<li><a href="http://www.forumdephilosophie.com/register" class="clearfix">S'enregistrer</a></li>
<li><a href="http://www.forumdephilosophie.com/login" class="clearfix">Connexion</a></li>
</li>
</ul>
  </center>
</div>
Code:
#submenu {
    width: 100%;
    height: 20px;
    list-style-type: none;
    margin: 5 px;
    padding: 5px;
    overflow: hidden;
    background-color: #995E05;
    border-radius: 8px;
    font-size: 14px;
    color: white!important;
}

a.clearfix {
    float: left;
  border-left:1px solid #ffffff;
}

a.clearfix:last-child {
    border-right: none;
}

a.clearfix {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #058A99;
}
Mais impossible d'obtenir un menu avec les couleurs que je souhaite. Y a-t-il dans le code css ci-dessus des incompatibilités avec mon code css global ci-dessous ? (Par exemple, impossible d'activer le border-left...)
Code:
#submenu {
    width: 100%;
    height: 20px;
    list-style-type: none;
    margin: 5 px;
    padding: 5px;
    overflow: hidden;
    background-color: #995E05;
    border-radius: 8px;
    font-size: 14px;
    color: white!important;
}

a.clearfix {
    float: left;
  border-left:1px solid #ffffff;
}

a.clearfix:last-child {
    border-right: none;
}

a.clearfix {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #058A99;
}

.postbody {
text-align:justify;
padding-left:0px;
padding-right:0px;
background-color:#fafafa;
}

.post-entry ol, .post-entry ul {
    margin-left: 1.8em;
}

div.postbody a
{
    color:#048B9A!important;
}

div.postbody a:hover
{
    color:#FF0000!important;
}

blockquote {
  border: 1px solid #000000;
  border-radius: 0px;
  margin: 0px;
}

blockquote cite {
background-color: #000000;
font-size:18px;
color: white; /* Le texte de la page sera blanc */
}

.navbar ul {
border-bottom:none;
}

#savec { position:relative; }
.save-bloc { color: #555 !important; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(http://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }
.save-bloc div:hover { color: #050505 !important; }
.save-bloc div { cursor: pointer; }
.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

a, a:hover {
    text-decoration: none !important;
}

.table-title, .table-title h2 {
    font-family:gisha, arial !important;
    font-size:22px !important;
}

.sceditor-container textarea {
    font-size: 20px !important;
}

hr { border-color: #3366ff; }

.bandef{
    display: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: marquee 150s linear infinite; /* Chrome, Safari, Opera */
    animation: marquee 150s linear infinite; /* Vitesse de défilement */
}
 
/*  Arrêt du défilement au survol */
.bandef:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

#content-container #left {
  margin-top: 108px;
}

#content-container #right {
  margin-top: 108px;
}

a
{
color:#6D071A;
}

tr.annonce td {background-color:#6D071A!important;} /* Modifie la couleur de fond des annonces */
tr.Note td {background-color:#3366FF!important;} /* Modifie la couleur de fond des Note */

.post-entry ol, .post-entry ul {
    margin-left: 2.5em;
}

span[data-tip]{
  border-bottom: 1px dotted #3366ff;
  cursor: help;
}

[data-tip]{
  display: inline-block;
  position: relative;
}

[data-tip]:hover:before{
  content: attr(data-tip);
  position: absolute;
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  background-color: #3366ff;
  left: -10px;
  top: -38px;
  font-size: 14px;
  border-radius: 3px;
  white-space: nowrap;
  color: #fff;
  font-size: 11px;
}

[data-tip]:hover:after {
  content: "";
  position: absolute;
  border-top: 8px solid #3366ff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 0;
  top: -10px;
}


Je ne parviens pas à trouver ce qui coince.
Merci par avance de votre aide.
avatar

hémicycliste
*

Masculin
Messages : 46
Inscrit(e) le : 29/01/2011

http://www.forumdephilosophie.com/
hémicycliste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la barre de navigation

Message par hémicycliste Jeu 14 Sep 2017 - 11:42

up
avatar

hémicycliste
*

Masculin
Messages : 46
Inscrit(e) le : 29/01/2011

http://www.forumdephilosophie.com/
hémicycliste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la barre de navigation

Message par Tech Sam 16 Sep 2017 - 11:25

Bonjour,

J'ai l'impression que le a.clearfix n'existe pas ... ne devriez-vous pas utiliser .clearfix a à la place ?

Et je serai d'avis à rajouter l'id submenu pour être sûr de bien sélectionner les éléments désirés :
Code:
#submenu .clearfix a {
    ...
}

Cordialement.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier la barre de navigation

Message par hémicycliste Sam 16 Sep 2017 - 23:18

Bonsoir,

merci, malgré quelques difficultés, j'ai réussi à obtenir une barre de navigation conforme à ce que je voulais.

Encore merci,
Cordialement.
avatar

hémicycliste
*

Masculin
Messages : 46
Inscrit(e) le : 29/01/2011

http://www.forumdephilosophie.com/
hémicycliste a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum