Insérer un nouvel onglet

[colin_paturel]

Détails techniques

Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://citrosphere.forumpro.fr/

Description du problème

Bonjour,

Je souhaite ajouter un onglet entre "Messages et OFF" dans la barre des onglets comme sur la photo. J'ai fais des recherches sur le forum sur les onglet, mais je ne trouve pas vraiment ce que je recherche. Ce nouvel onglet que je souhaite insérer est pour ouvrir directement le site internet de notre Club, donc un lien direct qui serait dans cette barre d'onglet.
Merci de votre aide.

[AlanBike]

Bonsoir,

Allez sur votre PA à affichage/en tête et navigation.
Dans le menu "barre de navigation", créez votre nouveau bouton, positionnez le et le tour est joué.

Cordialement

[colin_paturel]

Bonjour AlanBike et merci pour l'info.

J'ai fait donc comme vous me dites et j'obtiens bien le texte mais au niveau de l'affichage ce n'est pas très "fun", vois image écran ci-dessous :



Il y a bien le texte "Site WEB du Club", le lien URL fonctionne, mais je n'ai pas le décor des autres onglet c'est à dire le fond en gris, les bords arrondis.... J'ai même tenté de mettre la même image que les autres onglets 'empy.gif' (avec un copier-coller de l'adresse) et dans ce cas mon onglet "Site WEB Du Club" ne s'affiche plus...

J'ai donc réussi à faire la première partie, il ne me reste qu'à mettre le décor de l'onglet comme les autres, et là je ne sais pas le faire, merci de votre aide

[AlanBike]

Re,

Sorry pour le retard, mais c'est dimanche
>Pas oublier de lire le point B) avant de commencer.

A) ALors, lorsque vous créez un nouveau bouton:
1. mettez un titre dans "menu"
2. mettez une image de bouton contenant un texte, comme vos autres boutons.
3. ne mettez rien dans "texte"
4. mettez l'url de votre site web dans "url de redirection"
5. mettez les permissions de qui peut voir le bouton
6. cochez dans "affichage" pour que le clic sur le bouton ouvre une nouvelle fenêtre.
Ensuite, vérifiez sur le PA à affichage/en tête et navigation que c'est bien coché oui à "Afficher seulement des images dans la barre des liens"

B)Juste une question(vu que c'est dimanche, je suis dur à la détente):
Si c'est une barre de navigation personnalisée, il faut introduire cette image et le lien de redirection dans le code. La méthode du dessus fera "déborder" le nouveau bouton.
Si tel est le cas, à voir avec un codeur.
Il vous faudra mettre la code de votre barre de navigation ici, pour qu'on vous aide dans les changements.

Cordialement

[colin_paturel]

Merci Allan, je viens de faire étape par étape ta méthode, en effet cela fonctionne mais comme tu le dis, le bouton déborde (pas très beau à voir...)

Je vois que dans les autres boutons, ils prennent une image qui est "empty.gif", est-ce qu'il est possible de la récupérer quelque part ?

Ensuite faut trouver la police de caractère et la couleur du texte...

Pour le code, je ne sais pas comment le voir et le montrer, là je ne sais pas faire du tout

[lmc38510]

Bonjour "colin_paturel"

Si cela peu t'aider "empty.gif" signifie " absence de cliché "

Sous "invision" les clichés sont renseignés dans le "CCS" en mode affichage normal + mode Hover (survolé)

Code:

#i_icon_mini_index{width:85px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0110.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0110.png) no-repeat 0 -32px;}
#i_icon_mini_gallery{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0310.png) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0310.png) no-repeat 0 -32px;}
#i_icon_mini_calendar{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0210.png) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0210.png) no-repeat 0 -32px;}
#i_icon_mini_portal{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0410.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0410.png) no-repeat 0 -32px;}
#i_icon_mini_faq{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0510.png) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0510.png) no-repeat 0 -32px;}
#i_icon_mini_search{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0610.png) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0610.png) no-repeat 0 -32px;}
#i_icon_mini_members{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0710.png) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0710.png) no-repeat 0 -32px;}
#i_icon_mini_groups{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0810.png) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0810.png) no-repeat 0 -32px;}
#i_icon_mini_profile{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0910.png) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0910.png) no-repeat 0 -32px;}
#i_icon_mini_message{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1010.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1010.png) no-repeat 0 -32px;}
#i_icon_mini_new_message{width:86px; height:30px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_110.png) no-repeat 0 0;}
#i_icon_mini_new_message#hover{ background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_110.png) no-repeat 0 -32px;}
#i_icon_mini_logout{width:41px; height:32px; background:url(https://i65.servimg.com/u/f65/11/95/30/70/re_1110.png) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(https://i65.servimg.com/u/f65/11/95/30/70/re_1110.png) no-repeat 0 -32px;}
i_icon_mini_register{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_010.png) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_010.png) no-repeat 0 -32px;}
#i_icon_mini_login{width:41px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1110.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1110.png) no-repeat 0 -32px;}

[colin_paturel]

Bonjour lmc38510,

Merci pour ta réponse, mais le seul truc que je comprends c'est "empty", mon niveau d'anglais me permet de savoir que cela veut dire vide

Pour le reste, et bien je crois que je vais être obligé de faire appel a un développeur professionnel car cela n'est pas dans mes compétences, je ne comprends pas le code informatique. C'est dommage que pour ajouter juste un petit onglet dans la barre de navigation cela soit aussi compliqué, mais bon on fera avec. Je vais voir si un prestataire ne peut pas intervenir et faire cet ajout d'onglet car moi seul je ne vais pas y arriver. Comme je suis un perfectionniste et que mon forum véhicule l'image d'une marque automobile, je ne veux pas "d'à peu près", je veux du parfait c'est à dire un onglet comme les autres et placé à gauche de "Off". Si je tente de le faire seul, je risque de faire du pas très beau et je ne le veux pas. Merci à tous de vos réponses pour tenter m'aider

[AlanBike]

Avant de clôturer, il n'y a rien de grave à réaliser.
Allez dans le PA à affichage/CSS et copier votre CSS ici entre balises code.
Un utilisateur averti repèrera facilement votre barre de nav et vous dira quoi ajouter et où.

Cordialement

[colin_paturel]

Bonjour AlanBike, merci de votre réponse,

Je ne sais même pas trouver la CSS, j'ai pourtant été dans le PA et Affichage, mais comment trouver la CSS ? C'est dans quel sous-menu ? Dans la frame de gauche de l'onglet Affichage du PA, rien ne parle de CSS ou alors je ne vois pas bien..

Je n'ai pas honte de le dire, mais je suis totalement nul, je sais faire deux ou trois trucs, mais là je suis totalement largué...

Et si je trouve la CSS, il faut que je la mette ici entre "balise code", c'est quoi des balises codes ? Je suis désolé, mais avec moi parmi vous, vous avez récupéré un boulet

[lmc38510]

.

Le CSS ce trouve dans PA - Affichage - Couleur -> Feuille de style CSS

Recherche les lignes comme mentionnées dans mon "post"

Toutes les lignes concernées commencent par "#i_icon_mini"
Tu les copies puis les colles dans ton message ... tu les surlignes ... ensuite clique sur la balise "Code" (à droite de celle "Citer")

à suivre


.

[colin_paturel]

Bonjour lmc,

Voila donc mon code, je vais essayer de l'inclure dans ce post.

Code:

#i_icon_mini_index{width:85px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0110.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0110.png) no-repeat 0 -32px;}
#i_icon_mini_gallery{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0310.png) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0310.png) no-repeat 0 -32px;}
#i_icon_mini_calendar{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0210.png) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0210.png) no-repeat 0 -32px;}
#i_icon_mini_portal{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0410.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0410.png) no-repeat 0 -32px;}
#i_icon_mini_faq{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0510.png) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0510.png) no-repeat 0 -32px;}
#i_icon_mini_search{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0610.png) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0610.png) no-repeat 0 -32px;}
#i_icon_mini_members{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0710.png) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0710.png) no-repeat 0 -32px;}
#i_icon_mini_groups{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0810.png) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0810.png) no-repeat 0 -32px;}
#i_icon_mini_profile{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0910.png) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_0910.png) no-repeat 0 -32px;}
#i_icon_mini_message{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1010.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1010.png) no-repeat 0 -32px;}
#i_icon_mini_new_message{width:86px; height:30px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_110.png) no-repeat 0 0;}
#i_icon_mini_new_message#hover{ background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_110.png) no-repeat 0 -32px;}
#i_icon_mini_logout{width:41px; height:32px; background:url(https://i65.servimg.com/u/f65/11/95/30/70/re_1110.png) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(https://i65.servimg.com/u/f65/11/95/30/70/re_1110.png) no-repeat 0 -32px;}
#i_icon_mini_register{width:86px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_010.png) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/rere_010.png) no-repeat 0 -32px;}
#i_icon_mini_login{width:41px; height:32px; background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1110.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(https://i64.servimg.com/u/f64/13/24/64/14/nav_1110.png) no-repeat 0 -32px;}

C'est comme ça qu'il fallait faire

[lmc38510]

C'est comme ça qu'il fallait faire

Hello "colin_paturel" ... excellent comme quoi ce n'est pas compliqué suffit de si mettre

Comme dit dans mon 1er "post" la barre de navigation dans le thème "Hitskin" que tu utilises qui est sous "Invision" (super thème d’ailleurs)
La particularité est que tout les clichés dans le "Panneau d'Administration" sont des "empty.gif" ... ils sont définis par le CSS ... en mode normal et survolés "hover" ... (CSS identique au mien posté plus haut)

Je m'absente ... de retour en fin de journée

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[colin_paturel]

Bonjour,

Je comprends votre impatience de clôturer ce sujet, mais la personne qui a la gentillesse de vouloir m'aider (lmc38510) va me donner les solutions d'ici quelques jours. Entre nos différents moments de libre, cela prend un peu de retard je le conçoit très bien.

Merci de ne pas mettre ce topic à la poubelle :no

Quand il sera résolu, il sera topé en "Résolu", ne vous inquiétez pas.

[Chacha]

Bonjour,

Je comprends votre impatience de clôturer ce sujet, mais la personne qui a la gentillesse de vouloir m'aider (lmc38510) va me donner les solutions d'ici quelques jours. Entre nos différents moments de libre, cela prend un peu de retard je le conçoit très bien.

Merci de ne pas mettre ce topic à la poubelle :no

Quand il sera résolu, il sera topé en "Résolu", ne vous inquiétez pas.

Bonjour,

Il n'y a aucune impatience !

D'habitude les personnes rouspètent car leur sujet est corbeillé après 7 jours sans réponse, ici on vous prévient, ce n'est pas bon ?

Merci de ne pas mettre ce topic à la poubelle :no

Pensez alors à faire un UP régulièrement, (max 1 par tranche de 24h), il ne sera donc plus fait de rappel.


Cordialement.

[colin_paturel]

Bonjour lmc !!

Voila, j'ai remis mon (moche) onglet "Site Web CITROSPHERE" :




Ce que je voudrais donc c'est qu'il soit entre "Messages" et "Off" et qu'il ai la même allure (image de fond avec les bords arrondis), et c'est cela que je sais pas faire

[lmc38510]

Bonjour "colin_paturel"

Merci pour la mise en place du bouton

Le fait de créer un nouveau bouton ne lui affecte pas d'identifiant "id = "

Exp: -> Pour le bouton "Forum" le code du bouton est clairement identifié id="i_icon_mini_index" et permet de lui affecter un CSS comme posté plus haut

Code:

<a class="mainmenu" href="/">
<img id="i_icon_mini_index" src="https://2img.net/i/fa/empty.gif" border="0" hspace="0" alt="Accueil" title="Accueil">
</a>

Pour ton nouveau bouton le code est:

Code:

<a class="mainmenu" href="http://www.citrosphere.fr/" target="_blank">
<img src="" border="0" hspace="0" alt=" Site Web CITROSPHERE" title=" Site Web CITROSPHERE">
</a>

Aucun identifiant n'est affecté au bouton... comme il est généré automatiquement par "{GENERATED_NAV_BAR}" ... il n'est pas possible d'intervenir sur le code de création ...

Par contre il y a beaucoup plus simple -> modifier le template "overall_header"
Insérer dans le code d'appel de la barre de navigation "{GENERATED_NAV_BAR}" soit avant (au début de la barre de navigation) soit après ( à la fin de la barre de navigation) un code affichant ton nouveau bouton
et lui affecté le CSS adéquate

va dans PA - Affichage -Templates -Général - overall_header"
dans "rechercher" tu met -> "submenu" tu dois trouver ceci:

Code:

<div id="submenu">
<ul>
<li class="clearfix">{GENERATED_NAV_BAR}</li>
</ul>
</div>

Confirme-moi l'exactitude du code ci-dessus ....
je te prépare la modif du template ainsi que le CSS correspondant
(quel texte veux-tu dans le bouton ... le plus court possible exp: "Le Site")

.

[colin_paturel]

j'ai fais va PA - Affichage -...



mais je n'ai pas "Templates -Général - overall_header".... ou alors je ne vois pas...

[lmc38510]

tu n'as pas ceci ?

[colin_paturel]

Non je m'arrête à "Avatar"

[lmc38510]

Dans PA -Affichage - Thèmes - Choisir un thème j'ai ceci:



peux tu faire une copie d'écran du tient

[colin_paturel]

[quote="Chacha"]

Il n'y a aucune impatience !

D'habitude les personnes rouspètent car leur sujet est corbeillé après 7 jours sans réponse, ici on vous prévient, ce n'est pas bon ?

Merci de ne pas mettre ce topic à la poubelle :no

Pensez alors à faire un UP régulièrement, (max 1 par tranche de 24h), il ne sera donc plus fait de rappel.


Cordialement.

Si si, c'est très bien de faire le rappel, c'est très très bien, c'est juste la première fois pour moi que mon problème génère un topic aussi long. Lmc38510 est vraiment super cool, il va me faire un beau bouton !!

Je fermerai le topic avec "Résolu" quand cela sera fait, pas de souci !

[colin_paturel]

Dans PA -Affichage - Thèmes - Choisir un thème j'ai ceci:



peux tu faire une copie d'écran du tient

J'ai pris le même chemin "PA -Affichage - Thèmes - Choisir un thème" et j'ai :

[colin_paturel]

En prenant le user créateur du forum, je vois bien les Templates, pas de souci donc donc avec la visibilité dans le PA.

[colin_paturel]

J'ai fais comme tu m'a dis plus haut et j'ai bien trouvé le code :

Code:

<div id="submenu">
               <ul>
                  <li class="clearfix">{GENERATED_NAV_BAR}</li>
               </ul>
            </div>

[lmc38510]

.

Je te prépare les modifs et te passe cela demain



.

[colin_paturel]

Bouton en place, il manque juste à mettre l'effet survol, un grand merci à lmc38510 il est :youopi:

Donc topic pas encore tout à fait terminé, il reste juste à peaufiner

[lmc38510]

Bonsoir "colin_paturel"

Les modifications à apporter à ton bouton "lien Vers le Site Citrosphere.fr"

Tout d’abord le CSS pour le nouveau bouton (qui va remplacer celui précédement installé)

Mettre à la suite de cette partie de ton CSS :

Voir ci-dessous:

Code à insérer à la suite :

Code:

#icon_lesite{width:41px; height:32px; background:url(http://ahp.li/16a200186330ea9234c8.png) no-repeat 0 0;}
#icon_lesite:hover{background:url(http://ahp.li/16a200186330ea9234c8.png) no-repeat 0 -32px;}

Ensuite il faut modifier le template accès - PA - Affichage - Templates - Générales - overall_header -
rechercher la zone "submenu" dont le code est:

Code:

<div id="submenu">
<ul>
<li class="clearfix">{GENERATED_NAV_BAR}</li>
</ul>
</div>

et le modifier comme suis :

Code:

<div id="submenu">
<ul>
<li class="clearfix">
<center>
{GENERATED_NAV_BAR}
<!-- Debut Ajout bouton Le Site -->
<a class="mainmenu" href="http://www.citrosphere.fr/">
<img id="icon_lesite" src="https://2img.net/i/fa/empty.gif" border="0" hspace="0" alt="Le Site" title="Le Site Web Citrosphère">
</a>
<!-- Fin Ajout bouton Le Site -->
</center>
 </li>
</ul>
</div>

Ensuite "enregistrer" la modification sans oublier de publier ->

Voir la Modification sur le Forum ... le bouton "Le Site" sera double ... vérifier que celui le plus à droite réagit à la souris et redirige bien vers le site -> citrosphere.fr

si c'est bien le cas aller dans - Pa - Affichage - Entête & Navigation - et supprimer le 1er bouton créé

En cas de soucis n'hésite pas

[colin_paturel]

Je m'en occupe demain


Merci lmc

[colin_paturel]

Ok tout fonctionne bien, sauf que la barre de navigation est limitée en largeur, le dernier bouton est coupé.

Voir le forum ci-dessous :

http://citrosphere.forumpro.fr/

est-ce que quelqu'un sait de quoi cela provient !

Merci à tous !