43 résultats trouvés pour toutes_les_versions

Bonjour/Bonsoir !

Suite à mon topic sur la suppression des légendes ( https://www.never-utopia.com/t42118-supprimer-les-legendes ), Chk Marvel m'a donné l'idée d'une petite astuce pour remplacer ces fameuses légendes par une image.


Toujours dans les templates index_body (pour l'accueil) et viewforum_body (pour l'intérieur des catégories), vous trouvez la partie entre :

Code:

<!-- BEGIN switch_legend -->

et

Code:

<!-- END switch_legend -->

que vous supprimez.

A la place, vous insérez la balise

Code:

<img src="URL DE VOTRE IMAGE" border="0" alt="" />

Vous enregistrez et publiez votre template. Vous pouvez bien sûr personnaliser cette partie grâce au CSS, ou encore insérer du texte ou tout autre contenu (ça peut être sympa pour les partenaires par exemple).


Pour ceux qui veulent utiliser le CSS, il vous suffit d'encadrer votre contenu ajouté par

Code:

<span class="votre_titre">VOTRE CONTENU</span>

et de personnaliser dans votre CSS avec

Code:

.votre_titre {
      Vos personnalisations
   }

MAJ Responsable (Onyx) :
Une autre façon d'arriver au même résultat beaucoup plus facilement est d'aller dans le Panneau d'administration > Onglet "Général" > Messages & email > Configuration > Afficher la légende du statut des messages > non.

---

Bonjour ou Bonsoir,

Voilà une petite astuce pour supprimer les légendes de votre accueil et de l'intérieur de vos catégories. Ce que j'entends par légende, ce sont ces zones où on trouve les icônes de nouveau message, message verrouillé, etc...

Légende de l'accueil:

Légende intérieure des catégories:

Alors pour la légende de l'accueil, ouvrez votre template index_body et supprimez tout ce qui est entre ce Begin et ce End :

Code:

<!-- BEGIN switch_legend -->
Contenu quelconque à supprimer
<!-- END switch_legend -->

Vous le supprimez simplement et n'oubliez pas de publier le template.

Pour la légende de l'intérieur des catégories, ouvrez votre template viewforum_body et supprimez le passage entre ce Begin et ce End :

Code:

<!-- BEGIN switch_legend -->
Contenu quelconque à supprimer
   <!-- END switch_legend -->

Encore une fois, n'oubliez pas de publier.

Voilà, j'espère que cette petite astuce vous sera utile !

Bonjour à tous,
Étant donner que je me tourne complètement vers le codage, j'ai eu l'envie de faire ce petit tutoriel qui pourrait aider beaucoup de débutant. Ainsi je vais essayer de vous apprendre au moins quelques bases assez importantes dans le domaine du HTLM et CSS. Rien de bien très glorieux en effet mais au moins, cela vous sera très utile pour tous vos projets à l'avenir. Comme je n'ai pas vue de tutoriel sur le forum concernant la balise Div, je m'y met donc. Bonne lecture en espérant que vous apprécierez.
Pour voir la leçon, un petit merci s'impose =)
Qu'est-ce qu'une " DIV" ?

La balise < div> ( signifiant division ) est utilisé pour diviser des documents ou éléments en plusieurs sections. Ces dernières seront alignées de différentes façon selon le style où le css utiliser. ( D'après mes recherches sur google, cette balise avait sur les premiers navigateur pour unique attribut : Align. ) Aujourd'hui la balise < div> est celle qui est le plus utiliser et désormais, plusieurs attribut lui on été attribué.

En voici quelque unes :

id="..." : sert d'identificateur global.
class="..." : une liste de classe séparer par des espaces.
style="..." : une information locale de style
align="..." : contrôle l'alignement : left, right, center et justify

Sachez aussi que la balise < div> est très similaire à la balise < span> mais < div> a sa propre distinction importante : elle peut encadrer tout un bloc d'un élément mais elle occasionne toujours un saut à la ligne ce qui peut parfois gêner pour ceux qui n'en connaissent pas tout les rouages. Elle peut contenir des paragraphes, des titres, des tableaux, et même d'autres divisions. Ce qui fait de < div>, la balise idéale pour marquer différentes sortes de blocs tel qu'un chapitre, un résumé ou une note.

Maintenant que vous savez à quoi sert cette balise, nous allons apprendre ensemble comment en créer une de toute pièce.

Tout d'abord il nous faut une balise < div> Ce qui vous donnera ceci :

Code:


<div>  TEXTE </div>

Mais ça ne nous donne pas grand chose vu qu'elle n'a ni attribut, ni de css. Nous allons donc y remédier en lui donnant l'attribut qui pourra beaucoup vous aider dans la création de vos fiches où autres.

Code:

<div class="..."> TEXTE </div>

Encore une fois vous ne verrez pas de changement car votre attribut n'a pas d'élément créer dans votre CSS. Pour ce faire, allez sur votre forum et faites ceci : Panneau d'administration > Affichage > Couleur > Feuille de Style CSS.

Dans votre fiche vous allez créer l'élément qui ira avec votre attribut. Pour ce faire, voici ce que nous devons faire.

Code:

.nom de votre element {
...
}

<div class="nom de votre element"> Texte </div>

Exemple :

Code:

.skyleen {
...

}

<div class="skyleen"> TEXTE </div>

Votre < div> est créer et votre base de CSS aussi. Maintenant il faut décorer votre < div> via des éléments de css.


Exemple :

Code:

.skyleen {
width : 200px;
height: 20px;
background: #ffffff;
center;color: red;

}

<div class="skyleen"> TEXTE </div>

Ce qui vous donne ceci :


Mais il faut vous rappeller ce qui se passe si vous mettez deux < div> côte à côte.



Automatiquement elles iront à la ligne. Pour remédier vous devrez ajouter deux éléments.
Celle-ci à votre élément de css :

Code:

{float : left; }

et celle-ci à la fin de votre balise :

Code:

<div style="clear:both"></div>

Ce qui doit vous donner ceci au totale :

Code:

.skyleen {
width : 200px;
height: 20px;
background: #ffffff;
center;color: red;
float : left;

}

<div class="skyleen"> TEXTE </div>
<div style="clear:both"></div>

Exemple :

 

Et voilà ! Vous savez créer une balise < div> et vous savez aussi comment éviter le retour à la ligne. Merci beaucoup pour avoir lu tout ceci et pardon pour mon manque de temps à corriger tout ce charabia. A bientôt :)

Hello x)

A la demande de Michiyo et comme promis je poste le tutoriel permettant de réaliser un onglet dans le même type que celui-ci (le truc en jaune à gauche qui s'ouvre en hover ^^) mais qui s'ouvre au clic et non au survol. De plus, histoire de faire les choses entièrement, j'ai fait en sorte que le bouton "ouvrir" se change en "fermer" une fois ouvert ! (tant qu'à faire hein...)

Voici donc l'aperçu :




Vous avez donc là un espace que vous pourrez agrandir au besoin pour y mettre ce que vous souhaitez : top site, liens, news... à la limite et avec la bonne taille vous pouvez même y glisser votre CB ! x)



Installation HTML

Pour commencer, aller dans vos templates (Affichage), et ouvrez celui nommé "overall_header" (ou "haut de page").

Repérez ce code (ligne 201) :

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Et ajoutez juste après lui le code de votre petite boite à onglet :

Code:

<div id="target_onglet"><div id="target_onglet2">
      <div id="onglet_clic">
      <span class="onglet_clic_navigation">
        <a href="#target_onglet" class="onglet_ouvrir"><img src="http://img15.hostingpics.net/pics/411044ongletouvrir.png" alt="lien" /></a>
        <a href="#target_onglet2" class="onglet_fermer"><img src="http://img15.hostingpics.net/pics/242659ongletfermer.png" alt="lien" /></a>
      </span>
      <div id="onglet_clic_contenu">
        <div id="onglet_contenu">
        Contenu de votre onglet.
        </div>
        </div>
    </div>
      </div></div>

N'oubliez pas d'enregistrer puis de valider votre template modifié !


Installation CSS

Allez ensuite dans votre feuille CSS pour y mettre le morceau de code css suivant, à ajouter au reste de votre css si vous en avez déjà :

Code:

/* ONGLET DEVOILE EN CLIC */

#target_onglet, #target_onglet2
{
  position: fixed;
}
#onglet_clic
{
  position: fixed;
  z-index: 999;
  width: 342px;
  height: 200px;
  margin-left: -310px;
  margin-top: 100px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#onglet_contenu
{
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 190px;
  color: #1e466c;
  font-size: 11px;
}
.onglet_clic_navigation
{
  display: block;
  float: right;
  width: 40px;
  height: 120px;
  overflow: hidden;
  background: url(http://img15.hostingpics.net/pics/974397ongletouvrir.png);
  margin-top: 40px;
}
.onglet_ouvrir
{
  position: absolute;
  z-index: 3;
}
.onglet_fermer
{
  position: absolute;
  z-index: 2;
}
#onglet_clic_contenu
{
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: #72a3cc;
  border: 1px solid #2f6ea5;
}
#target_onglet:target #onglet_clic
{
  margin-left: -10px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#target_onglet:target .onglet_ouvrir
{
  z-index: 1;
}
#target_onglet2:target #onglet_clic
{
  margin-left: -310px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

Votre boite est prête ! Voyons quelques points de personnalisation...


Personnalisation

1) Les tailles :
Si vous souhaitez modifier la taille de votre bloc vous devez modifier plusieurs mesure :
- la taille totale de la boite comprenant le contenu + le bouton (#onglet_clic)
- la taille de votre contenu lui-même (#onglet_contenu)
- l'importance de la marge négative qui fait disparaitre le bloc de la page lorsqu'il est fermé (#onglet_clic - margin-left: -310px;)

2) Les boutons ouvrir/fermer :
Ces boutons sont simplement des images, comme vous le verrez dans le html. Il suffit donc de faire vos propres boutons et de mettre leur adresse à la place des boutons actuels. Il est important que les deux fassent la même taille, mais ils ne se superposent pas donc vous pouvez jouer tant que vous voulez sur la transparence, y compris écrire juste le texte.
Si jamais vous souhaitez changer la taille des boutons, pas de souci (du moment que les deux ont la même) mais il faudra alors changer :
- le bloc comportant le bouton (.onglet_clic_navigation)
- adapter la largeur totale du bloc de la boite (#onglet_clic) car elle est égale à la largeur de votre contenu + la largeur de l'onglet (+ quelques pixels de réajustement)
- ...et si vous changez la largeur totale il faudra forcément changer le margin négatif qui rabat l'ensemble

Pour le reste, il s'agit juste de changement basique des couleurs de fond, de texte, de bordures... Vous pouvez aussi mettre une image de fond à la place de la couleur bleu du bloc du contenu.

Voilà ! J'espère que ça vous sera utile, c'est une alternative à celui qui se déplie en hover, et même si l'écriture du css est un peu complexe au départ (pour moi pas pour vous XD) c'est un fonctionnement simple et sans javascript.

En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code il n'en est pas moins conçu par quelqu'un d'autre, en l'occurrence moi puisque je l'ai rédigé en partant d'une feuille blanche, donc il est normal de ne pas simplement se l'approprier sans autre forme de respect. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça x)

IMPORTANT :

Tout d'abord, remercions l'auteur original du tutoriel : Miettes de School of Progress.
Lien vers son tutoriel : ici

Par respect pour son travail, j'utiliserai mes propres codes pour ce tutoriel, afin d'obtenir ce résultat.

1- Création de la barre dans le template

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
</table>

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Code:

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>

Ensuite, il suffit de recréer les liens de la manière suivante :

Code:

<a href="URL DE VOTRE FORUM" alt="NOM DU LIEN"><img src="VOTRE IMAGE" /></a>

Portail : url de votre forum/
Accueil (Index) : /forum
Calendrier : /calendar
Galerie : /gallery/index.htm
FAQ : /faq
Rechercher : /search
Membres : /memberlist
Groupes : /groups
Profil : /profile?mode=editprofile
Messagerie : /privmsg?folder=inbox
Inscription : /register
Connexion : /login
Déconnexion : /login?logout pour déconnecter directement et /login.forum?logout=true pour accéder à la page de déconnexion

Utilisateur connecté :

Code:

<!-- BEGIN switch_user_logged_in -->
Vos liens (MP et Déconnexion normalement, mais plus si vous voulez)
 <!-- END switch_user_logged_in -->

Utilisateur déconnecté :

Code:

<!-- BEGIN switch_user_logged_out -->
Vos liens (Inscription et Connexion)
 <!-- END switch_user_logged_out -->

Code:

<a href="URL/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>

Code:

<!-- BARRE NAVIGATION -->
<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
<div id="bar_nav">
 <div id="bar_nav_standard">
 <a href="/forum" alt="Accueil"><img src="URL" /></a>
 <a href="/faq" alt="F.A.Q."><img src="URL" /></a>
 <a href="/search" alt="Rechercher"><img src="URL" /></a>
 <a href="/memberlist" alt="Membres"><img src="URL" /></a>
 <a href="/groups" alt="Groupes"><img src="URL" /></a>
 <a href="/profile?mode=editprofile" alt="Profil"><img src="URL" /></a>
 </div>
 <div id="bar_nav_modul">
 <!-- BEGIN switch_user_logged_in -->
 <a href="/login?logout" alt="Déconnexion"><img src="URL" /></a><br />
 <a href="/privmsg?folder=inbox" alt="M.P."><img src="URL" id="mp"/></a>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_user_logged_out -->
 <a href="/login" alt="Connexion"><img src="URL" /></a><br />
 <a href="/register" alt="S'inscrire"><img src="URL" /></a>
 <!-- END switch_user_logged_out -->
 </div>
</div>
<!-- BARRE NAVIGATION -->

2- Partie CSS

Code:

/* BARRE NAVIGATION */

#bar_nav {
   position: fixed;
   z-index: 999;
   width: 100%;
  top: 0px;
   left: 0px;
   right: 0px;
   background:url('URL DE L'IMAGE') repeat-x;
}

#bar_nav_standard {
   float: left;
}

#bar_nav_modul {
   float: right;
}

3- Nouveau MP : JQuery

Code:

jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('src','URL DE L'IMAGE');
});

Merci de penser à un petit remerciement à Never Utopia ET School of Pub si vous utilisez ce tutoriel pour votre forum !

Navigation flottante

Ancres & Liens

Bonjour !

Voici un tutoriel sur les bloc de navigation comme vous trouvez parfois sur la droite ou la gauche des forum en "flottement", permettant d'aller en haut de page, bas de page, mais aussi à divers endroits du forum.
Tout d'abord, si vous recherchez simplement un tutoriel pour le "haut" et "bas", je vous oriente vers celui-ci qui vous suffira amplement.

Celui que je vous propose abouti à un résultat que vous pourrez voir sur ce forum test : il s'agit du bloc jaune à gauche, survolé il s'ouvre et vous propose 4 types de liens que je vais détailler dans le tutoriel.

- les ancres de base (haut et bas)
- les liens normaux (liens que vous voulez mettre à disposition, il peut s'agir du règlement, du contexte, etc...)
- les ancres crées (points de repères crées sur le forum)
- les ancres crées avec changement de page au besoin (c'est un lien + ancre qui fera que même dans une page au fin fond du forum, le lien vous amènera vers la catégorie choisie)

En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !

I/ Création du bloc : template + css

▬ Tout d'abord allons ajouter notre bloc dans le template overall_header. Repérez cette ligne de code, ligne 195 environ (et si vous n'êtes pas sur phpBB2, repérez simplement la balise body, même si elle ne ressemble pas à cela) :

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

En dessous, ajoutez votre code du bloc navigation :

Code:

    <div id="fast_links">
   
    <div id="fast_links_contenu">
      <a href="#top" class="fast_link">Haut</a>
      <a href="#" class="fast_link">Lien 1</a>
      <a href="#" class="fast_link">Lien 2</a>
      <a href="#ancre1" class="fast_link">Ancre simple</a>
      <a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>
      <a href="#bottom" class="fast_link">Bas</a>
      </div>
   
  </div>

=> mon contenu est un exemple des différents liens possibles, à vous de voir lesquels vous gardez ensuite.

Information : si votre forum comporte déjà des changements sur ce template, notamment une navigation en haut de page, placez ce bloc avant ou après la navigation mais les distances du css seront peut-être à adapter (notamment celle du "margin-top" ou "marge haute").

N'oubliez pas de valider votre modification.

▬ Allez ensuite dans votre feuille css et affichez le css suivant :

Code:

/* FAST LINKS */

#fast_links
{
  position: fixed;
  z-index: 999;
  width: 300px;
  height: 200px;
  margin-top: -200px;
  margin-left: -250px;
  background: url(http://img11.hostingpics.net/pics/672640fondnavig.png) center center no-repeat;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#fast_links:hover
{
  margin-left: -10px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#fast_links_contenu
{
  margin-top: 25px;
  margin-left: 25px;
}
.fast_link
{
  display: block;
  width: 200px;
  padding: 4px;
  background-color: #ebe4d0;
  font-weight: bold;
  border-left: 2px solid #a1883a;
  border-right: 2px solid #a1883a;
  text-align: center;
  font-size: 12px;
  text-shadow: 1px 1px 0px #ffffff;
}
.fast_link:hover
{
  background-color: #f8f6f0;
  border-left: 2px solid #f5d553;
  border-right: 2px solid #f5d553;
}

Informations : merci de changer l'image de fond, celle-ci étant utilisée sur un forum. Réalisez une image de même taille avec une illustration sur la droite pour faire l'onglet d'ouverture.

Validez votre css, adaptez au besoin les tailles/placement du bloc, ainsi que la mise en forme des liens normaux et survolés à votre goût.


II/ Les Ancres de base et liens simples

Il y a deux types de lien que vous pouvez mettre très facilement :

▬ les ancres de base qui ont pour adresse "#top" et "#bottom" mèneront en haut et en bas de votre forum. Elles sont déjà placées sur le template donc pas besoin de la toucher si vous les voulez. Vous pouvez les remplacer par des flèches si vous le souhaitez.

▬ les liens simples : c'est tout simplement les liens vers votre règlement, les présentations des membres, ou tout topic important de votre forum.

Conseil : changer ces liens signifie être sur le compte fondateur et aller dans le template, ce qui est donc fatalement plus compliqué de l'aller juste dans la PA. Du coup, il n'est pas réellement conseillé de mettre des liens que vous savez devoir changer à court terme, comme des concours, ou des événements ponctuels. Il est préférable d'afficher des liens génériques qui n'auront pas à être modifiés trop souvent. Après, c'est à votre choix x)

Ces deux types de liens sont très simples à mettre et ne demandent pas d'autres modification, je vous laisse donc les ajouter tranquillement. Pour cela bien sûr il faut retourner éditer le template overall_header en modifiant/ajoutant vos liens.


III/ Les Ancres crées

Bon, stop, un petit point de codage avant tout, pour les curieux ou simplement ceux qui ne veulent pas copier bêtement du code :
Qu'est-ce qu'une ancre ? C'est un point que l'un crée sur une page, sous forme d'un lien qui n'en est pas vraiment un (le texte ne peut mener à rien) et qui par la suite va nous permettre de créer un autre lien qui nous mènera vers ce point. C'est pas clair ? En gros si sur une même page vous avez un pavé de dix paragraphe, vous pouvez mettre une ancre à chaque titre de paragraphe, puis créer une navigation en haut de page dans laquelle chaque lien mènera à l'un des titres de paragraphe. Concrètement, on ne change pas de page, il s'agit d'un lien menant vers un élément de la page.

Vous l'aurez compris, il ne suffit pas de mettre un lien, il faut d'abord créer l'ancre elle-même. Pour cela, vous allez devoir vous rendre dans vos titres de catégorie. Pour plus de simplicité, on mettra les ancres sur les titres de catégorie car elles ne modifient pas ce titre, ça ne gêne rien.
▬ Allez donc dans votre titre de catégorie (celui que vous voulez placer en ancre), et affichez-le comme ceci :

Code:

<a name="ancre1">Votre 1ère catégorie</a>

"Votre 1ière catégorie" = le titre normal de votre catégorie.

Une fois fait, allez dans votre template overall_header et placez votre ancre en guise de lien comme ceci :

Code:

<a href="#ancre1" class="fast_link">Ancre simple</a>

Ce code est déjà présent puisque c'est mon exemple, mais veillez à ce que votre nom d'ancre soit le même ! Ici pour moi "ancre1" doit se retrouver aux deux endroits : dans le titre de catégorie ET dans le lien de la navigation.

Testez : le fait de cliquer sur ce lien dans la navigation amène à la catégorie voulue.


IV/ Les Ancres crées avec changement de page

Vous constaterez que ces ancres là ne fonctionnent que si vous êtes sur la page d'accueil, sans quoi ça vous ramène en haut du premier message par exemple, mais c'est tout. Si vous voulez que même ailleurs sur le forum ce lien vous ramène à la première page en vous centrant sur la catégorie choisie, il faut procéder autrement :
▬ le début reste le même, l'ancre a été placée, elle ne change pas.
▬ le lien à mettre dans la navigation doit comporter la page d'accueil de votre forum + l'ancre, comme ceci :

Code:

<a href="http://jesuisunelegende.forumactif.com/#ancre2" class="fast_link">Ancre avec changement de page</a>

Là aussi le code était déjà présent dans mon exemple. Vous pourrez essayer d'aller à l'intérieur du forum, au milieu d'un sujet et cliquer sur ce lien de la navigation rapide, il vous remettra sur la première page du forum sur la catégorie choisie.

D'autres ancres ? Plein d'ancres ?? Yep ! Vous pouvez en faire autant que voulu, sur toutes vos catégories, le tout est que chaque duo "ancre"/"lien d'ancre" aient le même nom ! Dans mon cas "ancre1, ancre2, etc... J'ai fait simple x), mais ça peut être vos noms de catégorie ou autre chose.
Il est cependant VITAL que ce nom ne comporte ni espace ni caractère spéciaux !

En cas d'utilisation de ce tutoriel, merci de mettre sur votre forum un CREDIT pour Never-Utopia. Ce geste de remerciement simple nous permet de "vivre" et de pouvoir vous apporter toujours plus d'aide ! Merci d'avance !

Bonjour à vous les gens : ici donc on va parler des ombres. Pour se faire... il va falloir réviser les maths car celles-ci opèrent avec ce qu'on appelait au lycée voir au collège : les abscisses et les ordonnées.



Leçon 1 : Définition :

• A----Les abscisses (x) : La ligne horizontale. Les valeurs à gauche du zéro sont négatives et à sa droite : positive. (Ex : -10, -5, 0, 5, 10).
  
• B-----Les ordonnées (y) : La ligne verticale. Les valeurs positives sont initialement en haut tandis que celles du bas sont négatives.
  
• C-----Image : Pour vous projeter, regardez une image tirée de wikipédia : Ici.
  
  

  Spoiler:

Marre de la théorie ? Je vous comprend... Bon passons à la pratique en commençant par les ombres dans un texte.

Leçon 2 : Ombres Typographiques :

• A-----Le style :
  Peu importe que vous employez "div" "span" ou "p", l'astuce restera la même. Pour définir le détail de ces balises on emploi à un moment ou à un autre "style".
  Ce qui peut donner :

  Code:

  <div style="">Votre texte ici</div>

  
  Ou encore :

  Code:

  <span style="">Votre texte ici</span>

  
  Ou sinon :

  Code:

  <p style="">Votre texte ici</p>

  
  Quoi choisir ? J'en sais rien, et ce n'est certainement pas ici que vous l'apprendrez.
  
  
• B-----Nom de l'ombre :
  
  Il s'agit donc de nommer l'ombre du texte et en anglais on dit donc tout bêtement à notre stupide ordinateur "text-shadow". Vous devriez donc à cette partie-ci de l'exercice obtenir ceci :

  Code:

  <p style="text-shadow: x y w couleur;"> Votre texte, ici.</P>

  
  Note : Evidement les "x y w" Vont être les données à appliquer pour personnaliser l'ombre.
  
  
• C-----Application :
  Prêt à y appliquer la théorie vu plus haut ?
  
  Si on prend l'exemple noté ci-dessus, X désigne donc les abscisses, Y : les ordonnées. Pour le W enfin c'est nouveau : ce sera la largeur, diamètre, l'épaisseur de l'ombre, appelez ça comme vous le voulez.
  
  ce qui donne ceci :
  Exemple type d'une ombre dans une boite.

  Code:

  <p style="text-shadow:2px 2px 3px black;"> Exemple type d'une ombre pour un paragraphe.</p> 

  
  
  

  Spoiler:

Voilà pour la typo d'un texte. On peut cependant aussi ombrer les boites... Et sur les boites j'oserai dire qu'il y a encore plus à dire. une fois que vous aurez bien assimilé la façon de procéder pour diriger une ombre (cf : Application des ombres typographiques), vous aurez alors de quoi vous amusez avec ce qui suit :

Leçon 3 : Ombres appliquées aux boites :

• A-----Ombre unique :
  
  *** Pour obtenir ceci :
  
  On utilise ceci :
  

  Code:

   Box-shadow: 0px 0px 5px black;

  
  
  
  
  

  Ombre
  sur
  Boite
  
  
  
• B-----Ombres multiples
  
  Eh oui ça existe ! Exemple avec notre cher carré qui détient ici deux ombres : une jaune et une bleue :
  
  
  
  
  *** Pour cela on utilise une simple virgule, puis on rajoute la donnée de la seconde ombre. Attention : La seconde donnée va sous la première et les couleurs se fusionnent donc mieux vaut mettre l'ombre la plus petite en première.
  *** En toute logique vous pouvez ainsi rajouter plus de deux ombres ^^
  
  Ce qui donne :

  Code:

  Box-shadow: 0px 0px 15px yellow,0px 0px 20px blue;

  
  
  
• C-----Ombre interne :
  
  Dernière astuce... x_x
  L'ombre interne est une ombre applicable aussi aisément qu'une ombre supplémentaire.
  Exemple avec une ombre rouge (la bordure noire est mise pour montrer sur l'ombre est bien interne) :
  
  
  
  
  Pour cela in faudra juste ajouter inset à l'ombre que vous souhaitez mettre en intérieur, ce qui donne :

  Code:

  box-shadow: inset 0px 0px 10px RED ;

  Mise avec les autres cela donnerai ceci :

  Code:

  Box-shadow: 0px 0px 15px yellow , 0px 0px 25px blue , inset 0px 0px 10px RED ;

Astuce des ombres terminées, j'espère que ça servira à quelques uns d'entre vous o/

Bonjour ^^

Je vous propose dans ce recueil d'explications de comprendre comment vous servir du JavaScript dans ForumActif.

Entendons-nous bien, ce recueil ne servira pas à vous apprendre le JS, mais plutôt à savoir comment appliquer le JS sur votre site/forum.

Si votre JS ne fonctionne pas, il se peut que la solution à votre problème se trouve ici. Par contre, ce sont des explications purement générales. Si vous avez besoin de poser des questions générales, vous pouvez ici, mais pour résoudre un cas particulier, il sera préférable d’ouvrir un sujet dans les demandes d’aide (ce sera plus clair ^^). Je mettrai sans doute ce sujet à jour au fur et à mesure des questions que je rencontrerai sur ce forum, d'autant que j'ai dû oublier quelques petites choses que je voulais dire.


1. JavaScript et jQuery : Mini-présentation

JavaScript, c'est un langage qui permet bon nombre de manipulations dans le cadre du navigateur internet. Les nouveautés CSS3/HTML5 lui volent petit à petit la vedette, notamment les transitions CSS3 au passage de la souris. Mais le JS reste encore très utilisé, car certaines manipulations sont encore hors de portée des deux autres ^^

jQuery, quant à lui, est une librairie JS. Autrement dit, jQuery utilise le JS pour créer des fonctions qui vous facilitent la vie. Un exemple est plus parlant :
En JS "pur", on dit : "je prends un bol dans le placard, le lait dans le frigo, je verse la bonne quantité de lait, je mets au micro-onde, je règle et lance le micro-onde et quand ça sonne, j'ouvre et je prends le bol chaud".
Avec jQuery, on dit : "je prépare un bol de lait chaud". Et derrière, sans qu'on ait à préciser quoi que ce soit, jQuery se charge pour nous d'ordonner toutes les petites étapes.
Plus simple, non?
À noter que jQuery EST du JavaScript à 100%. Ce n'est pas différent. Par ailleurs, jQuery n'est pas l'unique librairie JS disponible, même si la plupart des tutoriels l'utilise. Il y a également PrototypeJS par exemple ^^


2. Intégrer du JavaScript/jQuery

Pas mal de personnes sont perdues à ce stade-là. Où faut-il mettre le code?
En fait, la plupart du temps, on peut le mettre où on veut ^^ (pour les exceptions, j’y viens en 2.3). Par contre, la méthode d'intégration change selon l'endroit.

2.1. Dans le HTML
En mettant votre code JavaScript entre les balises script, vous pouvez mettre ça n'importe où dans le HTML. Dans un template, le panneau d'accueil, peu importe.

Code:

<script type="text/javascript"> CODE JAVASCRIPT </script>

Vous pouvez aussi intégrer des feuilles JS hébergées ailleurs, sur un autre site internet, toujours en utilisant la balise script, mais de la façon suivante :

Code:

<script type="text/javascript" src="http://www.monscript.fr/javascript.js"></script>

J'ai mis une adresse bidon, évidemment, à vous de mettre la votre. Sur certains tutoriels, vous risquez de croisez ce type d'exemple, mais avec ce qu'on appelle des liens relatifs (qui commencent par un slash ou un point), comme cela :

Code:

<script type="text/javascript" src="../javascript.js"></script>
<script type="text/javascript" src="/javascript.js"></script>

Ils ne fonctionneront pas sur votre forum (c'est valable avec n'importe quel type de lien relatif, comme une image, car les liens relatifs pointent sur le serveur du forum, or ces documents sont hébergés sur un autre serveur). Les liens doivent obligatoirement commencer par http.
Personnellement, je vous conseille plutôt de copier le contenu de ces pages JS (après les avoir ouvertes dans le bloc note ou tout autre éditeur) pour les intégrer dans les pages mises à disposition par FA. Cela vous permettra de ne pas être dépendant d'un site qui peut fermer, d'un document qui peut disparaître ou devenir indisponible pour une raison x ou y.

2.2 Dans une page JS
C'est la méthode que je préfère et conseille, car elle permet de bien différencier le JS du reste (tout comme je conseille de mettre le CSS dans la feuille de styles plutôt que dans le HTML). Du coup, si on veut modifier le JS on sait exactement où il se trouve, et si on veut changer quelque chose dans le HTML, on ne risque pas, par inadvertance, de toucher au JS.

Allez dans le panneau d'administration avancé, dans modules, puis dans gestion des feuilles JavaScript.
Là, choisissez d'activer la gestion des feuilles JavaScript (n'oubliez pas cette étape! à ne faire que la première fois, bien sûr)
Ensuite, créez-en une, copiez votre code JS et uniquement lui (pas de balise script).
Donnez un petit nom à la page pour la reconnaître, choisissez à quel endroit vous voulez que le code apparaisse/fonctionne, et enregistrez.
Et voilà o/

Par contre, c'est une modification relativement récente de FA. Si vous avez modifié votre template overall_header avant le 5 juillet 2011, il vous faut procéder à un changement. Dans le template, cherchez :

Code:

<!-- BEGIN google_analytics_code -->

Et ajoutez avant :

Code:

{HOSTING_JS}

Les pages JS, comme le template overall_header l’indique, seront donc intégrées au tout début de la page HTML.

2.3. Bug et Debug
Selon comment le code JS est fait, il doit parfois être absolument placé dans le HTML après les éléments HTML qu'il manipule. En effet, si le JS doit être exécuté directement au chargement de la page, il ne pourra pas agir sur les éléments HTML qui apparaissent après lui car ils ne sont pas encore chargés, ce qui cause des dysfonctionnements. Mais si le javascript est compris dans la fonction jQuery suivante, peu importe l'endroit :

Code:

jQuery(document).ready(function(){
  CODE JS
});

Cette fonction permet en effet d'attendre que les éléments HTML (le document) soient tous chargés (donc prêts, donc ready o/) avant de lancer le JavaScript. Vous pouvez éventuellement tenter de mettre votre JS dedans pour éviter d'avoir cette contrainte du positionnement du JS. Normalement, ça fonctionne, sinon il faut voir au cas par cas.

Toute cette affaire d'intégration du JS est importante. Quand vous avez un problème avec votre code, avant de voir quelle partie du code ne fonctionne pas, il faut être sûr et certain que le JS est correctement chargé, et souvent on n'en est pas sûr avec les pages JS. Le plus simple, c'est de décocher tous les emplacements d'apparition des pages JS que vous avez déjà faites, puis d'en créer une nouvelle qui sera la seule à apparaître et d'y mettre simplement le code suivant :

Code:

alert("test");

Si une fenêtre s'ouvre (et je ne parle pas d'une popup que votre navigateur risque de bloquer, aucun risque pour cela) en affichant le texte entre guillemets, c'est que le JS est bien chargé et que ça vient du code. Sinon, vérifiez votre intégration du JS.

Cette petite astuce du alert peut avoir d'autres utilités. Par exemple, si vous le mettez au début d'un JS (dans la balise script ou une page JS) et que ça fonctionne, mais que ça ne marche pas placé à la fin du code, il y a de fortes chances pour qu'un point-virgule, une parenthèse, un guillemet ou autre soit manquant. Mais si au contraire ça fonctionne, il vaudrait peut-être mieux chercher du coté du HTML. Une div mal fermée peut aussi causer des problèmes, de même qu'une classe mal nommée ou un id donné plusieurs fois !

Voilà quelques orientations de debugs pour les plus motivés à apprivoiser le JS (et pour faciliter le travail de ceux qui vous aideront /o/ si vous menez quelques uns de ces tests, précisez-le bien dans votre demande d'aide, la résolution n’en sera que plus rapide).


3. Utiliser jQuery ou un plugin jQuery

ForumActif intègre à l'heure actuelle la version 1.3.2 de jQuery. Vous n'aurez donc pas besoin de vous préoccuper de l'intégration de la librairie au forum. Par contre, la version la plus récente de jQuery est la 1.7.1 donc il se peut que certaines fonctionnalités avancées soient indisponibles. Cependant, l'essentiel est là. On peut supposer que FA préfère garder la version 1.3.2 à cause de sa stabilité et de sa sécurité.

3.1. Le mode "noconflict" de jQuery
Comme je l'ai expliqué plus haut, jQuery est une librairie de fonctions JavaScript. Pour faire appel à ces fonctions, on utilise le signe $. Partout où vous verrez le dollar, cela signifiera qu'on fait appel à une fonction JQuery. Malheureusement, jQuery n'est pas le seul à utiliser ce caractère. PrototypeJS l'utilise également. Et si on installe les deux librairies, le navigateur, en voyant le $, serait incapable de savoir à quelle librairie on fait référence. C'est pourquoi jQuery propose un mode "noconflict" qui utilise le mot-clé jQuery à la place du $. Et ce mode, pour plus de facilité, est directement activé sur ForumActif.
De ce fait, quand vous suivez des tutoriels jQuery pas forcément adaptés pour FA, il faut que vous veilliez à remplacer correctement le caractère $.
Exemple :

Code:

$('#monid').hide();

devient

Code:

jQuery('#monid').hide();

3.2. Intégrer un plugin jQuery
Un plugin, c'est en quelques sortes une mini librairie pour jQuery. Il sert à simplifier encore plus votre code. Vous vous souvenez de l'exemple avec le bol de lait? Eh bien, si on imagine que jQuery simplifie le JavaScript avec une fonction qui prépare le bol de lait, une autre qui fait les tartines de Nutella, et une autre qui prépare le plateau et le transporte, le plugin lui, va utiliser ces fonctions pour vous permettre de demander simplement un petit déjeuner au lit. Par contre, généralement, ce sont de petits programmes très spécifiques à une tâche particulière, donc limité bien que paramétrable. Dans notre exemple, vous pourrez paramétrer de prendre plutôt un thé et de mettre de la confiture à la place du nutella, mais vous ne pourrez pas décider d’ajouter subitement un verre de jus d’orange sur le plateau.

Ceci étant dit, un plugin est donc avant tout un script JS. Vous pourrez éventuellement trouver un lien à intégrer dans le HTML, mais souvent il est en téléchargement, dans un dossier zip ou seul. Vous trouverez un fichier qui porte généralement ce nom:

Code:

nomDuPlugin.min.js

Si vous ne pouvez pas/souhaitez pas l'intégrer dans un lien mais plutôt dans une page JS, c'est ce document qu'il faudra copier dans la page JS que vous créerez sur FA (voire le chapitre précédent).

Une fois cela fait, votre plugin est installé, et il ne reste plus qu'à l'utiliser. En général, des exemples sont mis à votre disposition, dans le dossier téléchargé ou sur le site web du plugin : testez-les en premier lieu avant de partir à l’aventuer =D

Il vous faudra parfois mettre du CSS, que vous pourrez modifier dans une certaine mesure, mais soyez prudents avec les modifications, certaines pouvant être critiques (et mettez le CSS dans panneau d'administration>affichage>couleurs>feuille de style CSS). Bon, en général, la couleur pose pas de souci, hein ^^

En tout cas, vous aurez forcément du JS et du HTML à intégrer. Ce code JavaScript se servira des fonctions du plugin installé pour exécuter ce que vous voudrez. C’est lui que vous pourrez modifier et paramétrer. Pour le JavaScript, créez simplement une nouvelle page JS et copiez votre code comme dit plus haut, en suivant attentivement les explications données avec et en n'oubliant pas de remplacer convenablement les $.

En général, il faut que vous respectiez certaines conventions dans votre HTML (utiliser une certaine structure, certaines classes, etc). Comme il ne s'agit que de HTML, vous pouvez le mettre à peu près n'importe où, dans un template ou un panneau d'accueil. Par contre, si les exemples vous présentent une page complète (avec les balises html, head, et body), ne prenez compte que du HTML présent entre les balises body (dans ce genre de cas, il se peut qu’entre les balises head, il y ait du CSS et/ou du JS… vous savez où les mettre, désormais : le css à sa place dans les feuilles de style, et le JS où vous voulez, le tout sans tenir compte du HTML qui se trouve autour dans la balise head). Il faut par contre bien veiller à respecter le modèle qui vous sera donné et bien sûr, s’assurer que le JS du plugin et le JS à paramétrer apparaissent.


Et voilà, ce sera tout pour l'instant =)
En espérant avoir été suffisamment claire pour vous aider... Et n'hésitez pas à poster pour voir et pour poser davantage de questions ^^ (ou même des précisions/rectifications, je suis loin de tout connaître =D)

Salut les membres :) !

Aujourd'hui je vous propose d'installer sur votre forum un système permettant d'avoir plusieurs bannières, changeantes à chaque page que vous visitez (et en actualisant les pages bien sûr).

Tout d'abord rendez-vous dans votre panneau d'administration puis dans la gestion des images.
(Panneau Ad. > Affichage > Gestion des images > Mode avancé)
Vous placerez la première bannière que vous aurez faite dans 'logo du forum'.

Ensuite, rendez-vous dans la gestion des pages HTML.
(Panneau Ad. > Module > Gestion des javascripts -tout en bas-)
Assurez-vous d'avoir activé vos javascript.
Créez un nouveau javascript et mettez-y comme titre 'Bannière Aléatoire'. Choisissez le placement "Sur toutes les pages".
Ensuite collez-y ce code :

Code:

$(function(){

  var banner = new Array();

  banner[0] = "URL IMAGE 1";
  banner[1] = "URL IMAGE 2";

  $("#pun-logo img,#i_logo,#logo img").attr('src', banner[Math.floor(Math.random()*banner.length)]);
});

L'url de l'image de "banner" 0 devra être celle de votre première bannière. Quant à l'url de "banner" 1, elle devra être votre deuxième bannière. Personnellement je vous conseil de faire les bannières de la même tailles, comme montrées dans l'exemple.

Vous pouvez bien sûr rajouter des bannières, il vous suffit de copier ce code :

Code:

banner[X] = "URL IMAGE";

En remplaçant X par le numéro de la bannière moins 1. Donc le X sera 2 pour la troisième bannière, le X sera 3 pour la quatrième bannière et ainsi de suite.

Vous pouvez bien entendu placer autant de bannières que vous voulez ! Vous pourrez bien entendu modifier les URLs comme bon vous semble. Enregistrez votre javascript et ce sera bon !

Si vous avez des questions, n'hésitez-pas ^^

Édit Onyx : Le LS a été refait de A à Z suite aux modifications du widget par Forumactif. Il fonctionne maintenant pour toutes les versions.

Bonjour à tous !

Comme vous le savez sans doute, Forumactif propose un certain nombre de widgets dont le plus connu est l'affichage des derniers sujets auxquels il y a eut une réponse. Ce tableau est bien pratique mais plusieurs d'entre nous aimeraient sans doute pouvoir l'utiliser ailleurs que sur le portail ou dans les widgets latéraux.

Étape 1 - Activer les widgets

Tout d'abord, vous devez activer les widgets.

Pour cela, rendez-vous sur :
> Panneau d'administration
> > Modules
> > > Portail et Widgets
> > > > Gestion des widgets du forum

Puis, vous vous assurez que le widget des derniers sujets est le premier widget en haut à droite (quitte à supprimer tous les autres).
Vous vous assurez que, dans le widget des derniers sujets, le défilement est activé.

---

Étape 2 - Mettre les derniers sujets où on veut

Nous allons maintenant allez où on veut placer les derniers sujets.

Puis, vous mettez le code suivant où vous voulez que les derniers sujets s'affichent :

Code:

<div id="derniers_sujets"></div>

---

Étape 3 - Installer le javascript

Nous allons ensuite mettre un javascript dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des codes Javascript

Vous vous assurez que la gestion des codes javascript est activée.

Vous créez un nouveau javascript.
Vous choisissez le placement "sur l'index" si vous voulez que cela s'affiche seulement sur la page d'accueil
Vous choisissez le placement "sur toutes les pages" pour l'afficher partout.

Vous collez ce javascript et vous enregistrez :

Code:

$(function(){
 
  /*Chemin pour phpBB3, Invision et PunBB*/
  var pour_phpbb3_invision_punbb = '#left .module:first .js-marquee:first';
 
  /*Chemin pour phpBB2*/
  var pour_phpbb2 = '#left .forumline:first .js-marquee:first';
 
  /*Aller chercher le contenu des derniers sujets avec les chemins*/
  var widget_derniers_sujets = $(pour_phpbb2 + ',' + pour_phpbb3_invision_punbb).html();
 
  /*On ajoute le contenu der derniers sujets dans le bloc où on veut qu'ils soient*/
  $('#derniers_sujets').html(widget_derniers_sujets);
 
});

---

Étape 4 - Allez mettre un peu de CSS

Enfin, on met ceci dans le CSS :

Code:

/*Fait disparaître la colonne des widgets*/
#left {
  display: none;
}
/*Personnaliser le contenu des derniers sujets*/
#derniers_sujets {
width: ;
}

Voilà, c'est tout ^^

Si jamais vous voulez que les derniers sujets défilent, je vous invite sur ce tutoriel.

Salut à tous !

Voici une méthode déjà connue mais bien pratique pour afficher une barre de navigation en rollover (avec image changeant au survol de la souris donc) très simplement, sans toucher aux templates, juste en modifiant le CSS de votre forum.
Cette astuce a le gros avantage de fonctionner sur toutes les versions de forum (du moins celles sorties pour le moment^^), ainsi que de pouvoir d'appliquer aux boutons de base et donc d'avoir le changement d'image pour les nouveaux MP par exemple^^

Principe :
Nous allons mettre les images directement via le css et afficher une image différente pour le lien "neutre" et le lien survolé.

• Commencez par enlever toutes les images de votre barre de navigation et allez dans :
Affichage > Page d'accueil > En-tête & navigation
Et sélectionnez "oui" dans "Afficher seulement des images dans la barre de navigation".

• Allez ensuite dans votre feuille CSS de forum (je rappelle qu'elle se situe dans "Affichage" > "Couleur" Onglet "Feuille CSS"). Je vous donne l'exemple pour le bouton "Accueil" (l'index, selon vos appellations) :

Code:

#i_icon_mini_index
{
background-image: url(adresse de l'image);
width: 80px;
height: 30px;
}
#i_icon_mini_index:hover
{
background-image: url(adresse de l'image);
}

Je vous explique ce que signifie ce code :
- l'information avec # c'est le nom du bouton accueil, pour résumer, les informations entre {} sont donc interprétées comme s'appliquant forcément à ce bouton là et pas un autre.
- le "background-image" c'est simplement l'image de fond du lien (rassurez-vous, le lien sera toujours là^^). Il vous faudra donc héberger l'image voulue et mettre l'adresse entre les parenthèses.
- width : c'est la largeur de l'emplacement de l'image, autrement dit celle de l'image elle-même.
- height : c'est la hauteur de l'image.
- la seconde partie avec le nom de la zone # suivie de "hover" désigne la même zone une fois survolée, il vous faut donc mettre dans "background-image" l'adresse de l'image devant apparaitre lorsque l'on passe sur le lien avec la souris.
Remarque : il n'est pas nécessaire de remettre la taille pour le "hover".

• Normalement, vous devez avoir votre bouton "Accueil" placé. Il s'agit maintenant de faire la même chose avec tout les autres ! Je vous donne simplement le nom de la "division" (zone de chaque bouton), à vous de refaire pareil que précédemment avec les images correspondantes.

Code:

Accueil : #i_icon_mini_index / #i_icon_mini_index:hover
Portail : #i_icon_mini_portal / #i_icon_mini_portal:hover
Galerie : #i_icon_mini_gallery / #i_icon_mini_gallery:hover
Calendrier : #i_icon_mini_calendar / #i_icon_mini_calendar:hover
FAQ : #i_icon_mini_faq / #i_icon_mini_faq:hover
Rechercher : #i_icon_mini_search / #i_icon_mini_search:hover
Membres : #i_icon_mini_members / #i_icon_mini_members:hover
Groupes : #i_icon_mini_groups / #i_icon_mini_groups:hover
Profil : #i_icon_mini_profile / #i_icon_mini_profile:hover
Message privé : #i_icon_mini_message / #i_icon_mini_message:hover
Nouveau message privé : #i_icon_mini_new_message / #i_icon_mini_new_message:hover
Se déconnecter : #i_icon_mini_logout / #i_icon_mini_logout:hover
S'enregistrer : #i_icon_mini_register / #i_icon_mini_register:hover
Se connecter : #i_icon_mini_login / #i_icon_mini_login:hover

En espérant que ce code vous serve !

Bonjour, Bonsoir, Salut, Yo, enfin voila x).

Après mainte recherche je vois qu'aucun tuto n'a été poster sur la barre de navigation fait uniquement pas CSS, alors je me lance pour vous l'expliquez.

Niveau: Facile Aperçu: Ici Tuto by Sui'

Alors nous allons commencer par le commencement logique :p.

Allez dans votre Panneau d'Administration -> Affichage -> En-tête et Navigation :

- Afficher seulement des images dans la barre des liens : Cocher Non
- Position du menu: Centrer
- Forcer la barre de navigation à rester sur une ligne : Cocher Oui

Enregistrez

Ensuite allez dans Affichage -> Couleur -> Feuille de Style

Mettez ce code à l'intérieur:

Code:

a.mainmenu img {
display:none;
}

a.mainmenu{
    text-decoration:none;
        padding: 1px 1px;
        margin: 0px;
        background: #Couleur;
        color: #000;
        border: 1px solid #Couleur;
}

Padding est la marge entre le texte et le cadre, le premier chiffre donnera l'espace entre le haut et le bas , alors que le second donnera l'espace à gauche et à droite.

Margin est l'espace entre tous les cadres, à vous de mettre la taille souhaiter.

Background est la couleur de fond de la cellule, à vous de mettre le code couleur voulu.

Color signifie la couleur du texte.

Border signifie la bordure sur le coup j'ai directement mis l'épaisseur de la bordure le style et la couleur, à vous de l'adaptez par la suite.


Maintenant nous allons rajouter un code qui changera l'aspect de la cellule au passage de la souris (Non obligatoire)

Code:

a:hover.mainmenu{
    text-decoration:none;
        padding: 1px 1px;
        margin: 0px;
        background: #000;
        color: #FFF;
        border: 1px solid #FFF;
}

Je n'est seulement changer que les couleurs, une nouvelle fois à vous de l'adaptez .

Maintenant comme je me doute vous avez tous cette barre de navigation coller à la publicité pour l'espacer il vous suffit juste de mettre ce code :

Code:

#page-body {
margin-top:15px;
}

A vous de modifier le nombre selon l'espace que vous voulez.

N'oubliez pas de Valider

Pour avoir des codes couleurs rendez vous sur le tuto de Mao : [url=/forumactif-f51/pour-mettre-un-peu-de-couleur-aux-forumsd-t11664.htm]Ici[/url]

Et oui c'est déjà fini x), j'espère que se tutoriel vous aura aider.

Si vous voyez des fautes ( doit y en avoir :o) et si vous avez des questions n'hésiter pas :).

Voila, si vous voulez une naviguation sur le côté et sans utiliser de widget qui déforme la page :

Vous prenez le code de la naviguation et vous le mettez dans ce code :

Code:


<table style="position: fixed; bottom: 50px; left: 0px;background-color: ;z-index:10000;"><tr><td>ICI METTEZ LES CODE DE VOTRE NAVIGUATION</td><td style="vertical-align: bottom;"><img src="" onClick="document.getElementById('chatboxpop').style.display=(this.src=='')?'block':'none';this.src=(this.src=='')?'':'';"/></td></tr></table>


Ensuite vous copiez le code juste en haut que vous aurez modifier et vous le mettez dans
"Panneau d'administration -> Affichage -> Page d'accueil -> Généralité" et vous mettez ce code

Ensuite vous allez dans "Panneau d'administration -> Affichage -> Templates -> Général"

Et dans tout les templates que je vais citer , vous mettez le code du haut que vous aurez modifier (tout en haut du template)
topics_list_box
viewtopic_body
viewforum_body


Ensuite publier et voila Je vous conseil d'éssayez sur un forum test avant
Le code du haut est un remix du code "Chat Box Latéral" Donc il y a encore des restes du code en question que j'ai pas tros voulu toucher (je veux pas créez de gros bug :§(zze: )

Voili Voilou

Bonjour, voici un code qui vous permettra de faire ceci :

Spoiler:

Ensuite, on va aller mettre la chatbox où vous voulez qu'elle soit.

Si vous voulez qu'elle apparaisse uniquement sur l'index, vous allez dans :
Panneau d'administration > Affichage > Page d'accueil > Generalité

Si vous voulez qu'elle apparaisse sur toutes les pages, vous allez dans :
Panneau d'administration > Affichage > Templates > Général > overhall_header
Et vous allez mettre le code juste sous la balise body. Pour phpBB2, la balsie body ressemble à ceci :

Code:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

---

Puis, vous mettez le code de la chatbox à l'endroit choisi.

Code normal de la chatbox :

Code:

<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>

Code de la chatbox avec transition fluide :

Code:

  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById('chatboxpop').style.left=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'0px':'-804px';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/>
      </td>
    </tr>
  </table>

---

Pour personnaliser, vous pouvez utiliser les codes ci-bas :

Code normal de la chatbox :

Code:

<table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: 0px; z-index:10000;"><tr><td style="background-color: #ffffff;"><iframe src="/chatbox/index.forum" id="chatboxpop" scrolling="no" style="width: 800px; height: 400px; margin: 2px; display: none;" marginwidth="0" marginheight="0" frameborder="0"></iframe></td><td style="vertical-align: bottom;"><img src="ADRESSE DE L'IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.display=(this.src=='ADRESSE DE IMAGE OUVRIR')?'block':'none';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMEE':'ADRESSE DE IMAGE OUVRIR';"/></td></tr></table>

Code de la chatbox avec transition fluide :

Code:

  <table cellpadding="0" cellspacing="0" style="position: fixed; bottom: 50px; left: -804px; z-index:10000; -webkit-transition: 1s; transition: 1s;" id="chatboxpop">
    <tr>
      <td style="background-color: #ffffff; padding: 2px;">
        <iframe src="/chatbox/index.forum" scrolling="no" style="width: 800px; height: 400px;" frameborder="0">
        </iframe>
      </td>
      <td style="vertical-align: bottom;">
        <img src="ADRESSE DE IMAGE OUVRIR" onClick="document.getElementById('chatboxpop').style.left=(this.src=='ADRESSE DE IMAGE OUVRIR')?'0px':'-804px';this.src=(this.src=='ADRESSE DE IMAGE OUVRIR')?'ADRESSE DE IMAGE FERMER':'ADRESSE DE IMAGE OUVRIR';"/>
      </td>
    </tr>
  </table>

Voilà !

---

Important : Faites attention aux " et aux ', sans cela le code ne fonctionne pas.

Histoire de ne pas avoir 2 ChatBox, allez dans : P.A > Module > ChatBox > Ne plus afficher.

Voilou !

Edit Sparrow : veillez à avoir deux adresses d'image DIFFERENTES pour l'ouverture et la fermeture de la CB. Si vous souhaitez mettre la même image, hébergez-la deux fois pour que les adresses soient différentes.

Salut salut,

À force de subir les demandes, je vous donne une fois pour toutes le code qui m'a servit à faire le Sélecteur de Thème, en vous expliquant en deux mots comment l'utiliser.

Tout d'abord, vous devez vous rendre dans votre template Overhall_Header et vous trouvez ceci :

Code:

</head>

Juste avant, vous mettez le javascript qui fait fonctionner le code :

Code:

  <script type="text/javascript">
    //<![CDATA[
      var scheme = getCookie('template1');
   
   
      if (scheme == 'NOM THÈME #1') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #1" />');
      }
      else if (scheme == 'NOM THÈME #2') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #2" />');
      }
      else if (scheme == 'NOM THÈME #3') {
        document.write('<link rel="stylesheet" type="text/css" href="URL CSS THÈME #3" />');
      }
   
   
      function changeskin(change) {
        var scheme = change;
        var name = 'template1';
        var pathname = location.pathname;
        var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
        var ExpDate = new Date ();
        ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
        setCookie(name,scheme,ExpDate,myDomain);
      }
   
      function getCookie(name) {
        var cname = name + "=";
        var dc = document.cookie;
        if (dc.length > 0) {
          begin = dc.indexOf(cname);
          if (begin != -1) {
            begin += cname.length;
            end = dc.indexOf(";", begin);
            if (end == -1) end = dc.length;
              return unescape(dc.substring(begin, end));
            }
          }
        return null;
      }
             
      function setCookie(name, value, expires, path, domain, secure) {
        document.cookie = name + "=" + escape(value) +
        ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
        ((path == null) ? "" : "; path=" + path) +
        ((domain == null) ? "" : "; domain=" + domain) +
        ((secure == null) ? "" : "; secure");
      }
    //]]>
  </script>

Ensuite, vous allez où vous voulez que le sélecteur soit et vous mettez le sélecteur lui-même :

Code:

        <div id="skinselector" style="margin: auto; text-align: center;">
            <form style="margin: auto; text-align: center;">
                <select onchange="changeskin(this.options[this.selectedIndex].value); window.location.reload();">
                    <option> Choisir un thème </option>
                    <option value="NOM THÈME #1"> NOM THÈME #1 </option>
                    <option value="NOM THÈME #2"> NOM THÈME #2 </option>
                    <option value="NOM THÈME #3"> NOM THÈME #3 </option>
                </select>
            </form>
        </div>

Par exemple, disons que vous voulez que le sélecteur soit directement après la navigation, vous allez dans le template "Overhall_Header" et placez le code après :

Code:

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Utilisation :

Vous l'avez donc compris, il faut utiliser UNIQUEMENT les feuilles CSS pour donner au forum son skin, c'est là que réside la difficulté de la tâche, car mettre un code en copier coller c'est facile, mais convertir un design normalement "automatique" en CSS c'est déjà plus difficile.

Pour créer une feuille de CSS, vous pouvez vous ouvrir un bloc-note tout ce qu'il y a de plus normal et y écrire votre CSS. Puis, lorsque vous le sauvegardez, vous écrivez ".css" à la place de ".txt" comme extension.

Une fois que vous avez fait vos différentes feuilles CSS, il faut les héberger. Pour cela, utilisez par exemple Archive-Host.

Enfin, une fois les feuille de CSS hébergées, vous prenez le lien donné et vous pouvez le mettre dans le code du sélecteur de thème.
Les informations à modifier sont en majuscules dans le code (celui du javascript ET celui du sélecteur lui-même), donc vous ne pouvez pas les manquer

C'est tout, bonne journée !

La question revenant relativement souvent, j'explique ici comment placer une image de bas de page sur vos forum.


Vous devez placer le code suivant (donnez à l'id le nom que vous voulez) :

Code:

<div id="newbottom">
</div>

Juste avant ce bout de code :

Code:

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>

(à la fin du templates donc.)


Une fois que vous avez cela, rien n'apparaitra sur votre forum, normal, vous avez juste signalé une division dans cet endroit, à vous de lui donner la forme voulue (taille, fond, etc...).
Pour cela, il vous faut aller dans :


Puisque vous avez crée une "div" avec un "id", il vous faudra commencer votre code par "#".

Code:

#newbottom
{
clear: both;
margin: auto;
width: 100%;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
height: 500px;
}

Explications :
clear: both => enlève de manière sûre les mises en forme de division précédentes (surtout lorsqu'il y a des "float" (flottement) à droite ou à gauche).
margin: auto : centre l'image si elle ne fait pas toute la largeur
width: 100% : largeur du bloc, si l'image ne prend pas toute la largeur, vous pouvez diminuez le width en % ou mettre une largeur en px.
background-image : c'est l'adresse de votre image de fond
background-repeat : la répétition du fond, ici elle ne se répètera pas, si vous voulez qu'elle se répète enlevez simplement la ligne, mais pour une image de pied de page c'est assez rare...
background-position: la position du fond, ici au centre
height: sa hauteur en pixel, ici 500px car j'ai pris en exemple les codes de N-U pour le thème actuel