Code pour la navigation

Page 1 sur 2 1, 2  Suivant

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

Résolu Code pour la navigation

Message par lilas le Dim 23 Oct 2016 - 6:58

salut forum,
Lien du forum test : http://lilassexpose.forumactif.com/forum

J'ai trouvé un code (sur un forum inactif) pour remplacer les liens et boutons de la navigation par un cadre.



 Template overall_header : Remplacer les lignes 274 à 278 par :

Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" id="navSIT">
    <tr><td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td></tr>
    </table>
Le Css :

Code:
/* NAVIGATION */
#navSIT {
position:absolute; top:0; left:50px; /* MODIFIABLE - DETERMINE LA POSITION */
width:175px; padding:10px 5px 25px; border-radius:0 0 50px 50px;
background:rgba(0,0,0,0.3); /* MODIFIABLE */
}
.mainmenu img{
display:none;
}
/* LIEN NAVIGATION */
#navSIT a{
display:block;  
text-transform:uppercase; text-align:center; font-size:12px;
color:white; /* MODIFIABLE */
}
/* SURVOL LIEN NAVIGATION */
#navSIT a:hover {
font-weight:bold;
}

Les boutons ont disparus  thumright Bravo !
Cependant, les liens de navigation manquent à l'appel (sans doute incomplet).
J'ai ajouté un height mais pour le reste, je nage... 

Un gentil Géo pour compléter le code, svp ?


Angel


Dernière édition par lilas le Lun 31 Oct 2016 - 20:48, édité 3 fois
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Dim 23 Oct 2016 - 12:03

Bonjour,
Dans le css, supprimez le code suivant :
Code:
.mainmenu img {
  display: none;
}
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Dim 23 Oct 2016 - 21:27

cheers MelleAlys
Je veux supprimer les images justement pour les remplacer par des liens texte comme proposé par le codeur :



Avec le code, je n'ai que le cadre, pas les liens... 

Une suggestion ?

Interrog
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Dim 23 Oct 2016 - 21:36

Vous pouvez activer l'affichage des liens version "texte" dans affichage > page d'accueil > en-tête et navigation : Afficher seulement des images : NON.
Supprimez les images dans la gestion des images pour n'avoir que les liens texte
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Dim 23 Oct 2016 - 22:10

:no J’eusse dû y penser de moi-même...  Basketball

1) L'espace entre les intitulés est trop large
2) J'aimerais une gentille bordure de couleur autour du cadre.
3) Une image de fond pour le cadre

Cette partie du code, c'est ce qui joue sur la transparence et la couleur ?
Que signifie rgba ? 
Code:
background:rgba(0,0,0,0.3); /* MODIFIABLE */
Merci pour les recettes instantanées

Lunette
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Dim 23 Oct 2016 - 22:46

1) Pour modifier la hauteur de ligne, ajoutez line-height:10px; à #navSIT dans votre css. Modifiez la valuer en fonction de ce que vous souhaitez.

2) Ajoutez border: 1px solid white; à ce même élément pour lui appliquer une bodure d'1px de couleur blanche.

3) cette ligne code effectivement pour le fond translucide. rgba signifie red green blue alpha. Les trois couleurs sont mélangées à l'aide d'un nombre entre 0 et 255, et alpha code pour l'opacité, nombre entre 0 (complètement transparent) et 1 (complètement opaque).
Ici rgb(0,0,0) code pour du noir. rgba(0,0,0,0.3) code pour du noir avec une opacité de 0,3.
(attention aux points et aux virgules à ne pas mélanger)

Pour ajouter une image de fond, modifiez cette ligne ainsi :
background: url(URL DE L'IMAGE);
Remplacez URL DE L'IMAGE par le lien direct de l'image souhaitée.
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Lun 24 Oct 2016 - 1:17

Un gros merci MlleAlys  Angel
Et si je veux modifier la police ?

Gloups
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Lun 24 Oct 2016 - 12:13

Localisez dans le css la mise en forme de #navSIT a et ajoutez font-family: arial; pour mettre en arial par exemple.
Pour modifier la taille de la police, modifiez la valeur de font-size déjà présente dans ce même code (pour l'instant à 12px).
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Lun 24 Oct 2016 - 22:08

Mr. Green Merci MlleAlys.
J'aimerais aussi placer une petite image en haut du cadre : 



Je suis un puits sans fond..  :no

Merci d'avance,

Lunette
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Lun 24 Oct 2016 - 22:30

dans le css à #navSIT ajoutez

background-image: url(URL DE L'IMAGE);
background-position: top center;
background-repeat: no-repeat;
background-size: 100% auto;

remplacez URL DE L'IMAGE par le lien direct de l'image choisie.
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Mar 25 Oct 2016 - 0:49

Un gros Merci MlleAlys pour tes connaissances et ta patience.
Très apprécié.
Je ne vois pas ce que je pourrais demander d'autres...  Embarassed
Belle nouvelle semaine d'automne,

::pourtoi::
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Mar 25 Oct 2016 - 6:34

MlleAlys

J'ai un petit soucis depuis les modifications effectuées
Le texte de la description du forum 2 impose des interlignes trop larges :



Le 1er forum a été créé il y a quelques jrs... et le forum 2 un peu plus tôt, aujourd'hui...

Y a t'il quelque chose dans le Css qui est en cause pour ce soucis ?

Merci de te pencher sur mon Css...

scratch scratch


Dernière édition par lilas le Mer 26 Oct 2016 - 2:45, édité 1 fois
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Mar 25 Oct 2016 - 15:12

Les espaces ne viennent pas de votre css, vérifiez plutôt la structure de la description : Il semble y avoir plusieurs paragraphes, hors un paragraphe est automatiques précédé et suivi d'une marge.
Dans la description du forum, vérifiez que vous êtes en mode édition et non en mode wysiwyg, et supprimez les balises p que vous ne souhaitez pas.
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Mer 26 Oct 2016 - 3:06

Misère, MlleAlys, il y avait des dizaine de <p>, de <div>, de <br />  scratch
J'ai dû ajouter des <br /> pour appliquer les paragraphes.

J'aimerais modifier le texte des intitulés. Dans le template si possible... afin que le Css ne s'alourdissent pas trop... 

Lunette Gloups
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par MlleAlys le Mer 26 Oct 2016 - 12:31

De quels intitulés parlez-vous ?
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Mer 26 Oct 2016 - 13:37

   Le texte des liens. Exemple, modifier Accueil par Forum...

Aussi : 
1) Faire clignoter S'enregistrer
2) Appliquer une couleur sur Connexion

Merci pour ta patience MlleAlys et belle journée forum

Yahoo
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MlleAlys le Mer 26 Oct 2016 - 14:40

Passer par les templates ne me semble pas indiqué ici, il me semble qu'il vaut mieux passer par le css et du javascript, ou que du javascript.
Mais pour ces points je préfère laisser la main, c'est moins mon domaine... ^^"
avatar

MlleAlys
Membre actif

Messages : 4589
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Mer 26 Oct 2016 - 22:34

Merci pour ton soutien MlleAlys  ::fleur:: ::fleur:: ::fleur:: tu m'as bien aidé sur ce coup.

J'attends donc l'aide d'un autre généreux bénévole.

Lunette   reflexion
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par MasDan le Jeu 27 Oct 2016 - 0:29

Bonjour,

Ajouter à votre CSS pour la couleur sur Connexion / Déconnexion
Code:
a.mainmenu[href^="/login"] { color: #FFBB22; }

Créer un javascript (placement sur toutes les pages) pour le clignotement sur S'enregistrer
Code:
$(function(){
  $('a.mainmenu[href^="/register"]').each(function() {
    var elem = $(this);
    setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }   
    }, 500);
  });
});
Ligne 10: Le 500 correspond au temps de clignotement en milliseconde
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1062
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Jeu 27 Oct 2016 - 4:39

cheers  MasDan

Il y a un soucis avec le Css : Les liens s'affichent incorrectement



La partie du Css :
Code:
/* LIEN NAVIGATION */
#navSIT a{
 /**  font-family: arial;  **/
display:block;  
text-transform:uppercase; text-align:center; font-size:12px;
color:white; /* MODIFIABLE */
 a.mainmenu[href^="/login"] { color: #FFBB22; }  /** Couleur Connexion **/
}
Le JavaScript n'est pas en cause, je l'ai désactivé et le problème persiste.

Cette partie "/login" s'affiche en rouge dans le Css


Merci et bonne nuit forum


Lunette
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MasDan le Jeu 27 Oct 2016 - 6:46

Bonjour,

Le code fournit précédemment n'a pas été placé au bon endroit.

Remplacer
Code:
/* LIEN NAVIGATION */
#navSIT a{
 /**  font-family: arial;  **/
display:block;  
text-transform:uppercase; text-align:center; font-size:12px;
color:white; /* MODIFIABLE */
 a.mainmenu[href^="/login"] { color: #FFBB22; }  /** Couleur Connexion **/
}
par
Code:
/* LIEN NAVIGATION */
#navSIT a{
  /**  font-family: arial;  **/
  display:block; 
  text-transform:uppercase; text-align:center; font-size:12px;
  color:white; /* MODIFIABLE */
}

a.mainmenu[href^="/login"] { color: #FFBB22; }  /** Couleur Connexion **/
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1062
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Ven 28 Oct 2016 - 21:15

cheers
S'enregistrer clignote joliment  geek  MasDan
Par contre, la colorisation ne s'applique pas sur Connexion/Déconnexion...  reflexion

Gloups
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MasDan le Ven 28 Oct 2016 - 23:04

Bonjour Lilas,

Selon l'ordre de priorité, l'attribut color ligne 6 a priorité sur l'attribut color ligne 9 du code du précédent message. L'ajout de l'attribut !important va modifier la priorité et corriger le tout.

remplacer
Code:
a.mainmenu[href^="/login"] { color: #FFBB22; }  /** Couleur Connexion **/
par
Code:
a.mainmenu[href^="/login"] { color: #FFBB22 !important; }  /** Couleur Connexion **/
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1062
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Sam 29 Oct 2016 - 4:41

Embarassed  Connexion/Déconnexion ne prend toujours pas la nouvelle couleur...

Code:
/* LIEN NAVIGATION */
#navSIT a{
  /**  font-family: arial;  **/
  display:block;
  text-transform:uppercase; text-align:center; font-size:12px;
  color:white; /* MODIFIABLE */
}
 
a.mainmenu[href^="/login"] { color: #FFBB22; !important; }  /** Couleur Connexion **/
J'ai vidé le cache... 

Gloups
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par MasDan le Sam 29 Oct 2016 - 8:04

Bonjour,

Il y a une erreur dans votre code à la ligne 9. Il y a un ; de trop.

avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1062
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Sam 29 Oct 2016 - 20:05

Merci à votre oeil de lynx MasDan.

Pour modifier le texte de Forum, Connexion /Déconnexion, ça se passe dans quel Template et où pour le faire, svp ?

Belle fin de journée

Lunette
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Code pour la navigation

Message par MasDan le Dim 30 Oct 2016 - 4:51

@lilas a écrit:Pour modifier le texte de Forum, Connexion /Déconnexion
Remplacer le javascript pour le clignotement de S'ENREGISTRER par le code suivant
Code:
$(function(){
  /* clignotement pour s'enregistrer */
  $('a.mainmenu[href^="/register"]').each(function() {
    var elem = $(this);
    setInterval(function() {
      if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
      } else {
        elem.css('visibility', 'hidden');
      }   
    }, 500);
  });
  /* modifier les libellés sur la toolbar */
  _lang["Login"] = "CONNEXION";
  _lang["Logout"] = "DÉCONNEXION";
  /* modifier les libellés sur le menu */
  $('a.mainmenu[href="/login"]').text("CONNEXION");
  $('a.mainmenu[href^="/login?logout"]').text("DÉCONNEXION");
});
et modifier les textes en majuscule pour les libellés désirés aux lignes 14, 15, 17 et 18.
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1062
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Dim 30 Oct 2016 - 21:51

thumleft Et changer ACCUEIL en FORUM, c'est possible ?

Gloups
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par MasDan le Lun 31 Oct 2016 - 1:31

@lilas a écrit:Et changer ACCUEIL en FORUM, c'est possible ?

Insérer
Code:
  $('a.mainmenu[href="/"]').text("FORUM");

entre les deux dernières lignes de votre code javascript.
Code:
  $('a.mainmenu[href^="/login?logout"]').text("DÉCONNEXION");
});
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1062
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour la navigation

Message par lilas le Lun 31 Oct 2016 - 20:46

cheers Merci à vous MasDan et à votre collègue MlleAlys.
Tout est parfait pour moi.
Belle nouvelle semaine d'automne forum
victoire
avatar

lilas
*****

Féminin
Messages : 805
Inscrit(e) le : 07/08/2004

http://lefofodemacopine.forumactif.com/
lilas a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

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


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