AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


208 résultats trouvés pour html

Invité

Catégories «Art Sport» - Dim 17 Mai 2015 - 16:32

{#}html{/#} {#}css{/#} {#}categories{/#} {#}auteur_Asphodèle{/#} {#}phpBB2{/#}



   

Catégories «Art Sport»

venez poster ici.

Alumine

Chatbox en panneau latéral - Ven 8 Mai 2015 - 18:58

#html #css #chatbox #transition #position_fixe #auteur_Alumine

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Chatbox en panneau latéral




PHPBB2 - Aperçu - code légendé - CSS et templates - affichage uniquement sur la page d'accueil


/!\ Avant toute chose regardez bien comment ça marche: à l'ouverture la chatbox fait se décaler tout le forum ! Ca ne fonctionnera pas bien avec un forum trop large.



Cocher des trucs


Vous pouvez aussi afficher la CB en haut et en bas de page si vous le souhaitez. Rendez-vous dans votre panneau d'administration > Modules > ChatBox > Configuration et cochez les trucs comme suit !
Activer la CB: OUI
Afficher les avatars: OUI
Affichage de la CB: NE PAS AFFICHER
(oui c'est bizarre de l'activer sans l'afficher... mais celle que l'on va rajouter n'est pas gérée par ce bouton )



Template index_body


C'est la structure HTML de la page d'accueil. (Affichage > Templates > général > index_body)
Juste après le {JAVASCRIPT} qui est au début, ajoutez ceci:
Code:

<div id="cb">
  <iframe src="/chatbox/index.forum" style="width: 350px; height: 100%;" frameborder="0" cellspacing="0"></iframe>
</div>


Validez, publiez ! Donc là on vient de rajouter une chatbox supplémentaire uniquement sur la page d'accueil.



CSS


Affichage > Couleurs > feuille de style CSS
Ajoutez tout ça à votre code ! Tout est légendé pour que vous puissiez facilement changer les couleurs et les polices.
Code:
/*CHATBOX, par Alu pour Never-Utopia********************************************************************/
#cb, body{-webkit-transition:margin 2s ease, right 2s ease; transition:margin 2s ease, right 2s ease;}
#cb{height:100%; position:fixed; right:-350px; bottom:0; z-index: 999;}

body.chatbox{
  font-family:'sans-serif';/*police*/
  font-weight:200;/*epaisseur police(normal:enlever la ligne)*/
}
#chatbox_footer, #chatbox_footer .catBottom{height:60px !important;background-color:#C4FF6B; /*couleur du bas de la cb*/}
#chatbox_header{width:100%; position:absolute;background-color:#C4FF6B; /*couleur du haut de la cb*/}
.chatbox_row_2{background: #F0F0F0; /*couleur de la rangée message foncée*/}
.chatbox_row_1, #chatbox{ background:#FFFFFF;/*couleur du fond de la cb et de la rangée message claire*/}
#chatbox_members{width:100%; height: 50px;border:none; background-color:#68BF56 !important;/*couleur de fond de la partie membres en ligne*/ color:white;/*couleur du texte*/}

/*phrases de connexion et déconnexion*/
.msg span[style*="green"] strong{color:#68BF56; font-variant:small-caps; font-weight:normal;}
.msg span[style*="red"] strong {color:black; font-variant:small-caps; font-weight:normal;}

/*remplacer le titre de la chatbox*/
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before {content:"Discussions ♪♫";font-weight:200}

/*affichage des avatars*/
#chatbox .cb-avatar > img { height: 66px !important; width: 30px !important;}
#chatbox .cb-avatar {
  float: left;
  margin-right: 4px;
  background-color:white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 40px !important;
  width: 30px;
  vertical-align: middle;
  overflow:hidden !important;
}

/*Ne pas toucher*/
.chatbox td.catBottom{border:none !important;}
#chatbox{top:80px; left:0; bottom:50px;}
#chatbox_header .catBottom{height:30px;}
.chatbox_row_2, .chatbox_row_1{margin:5px 4px 4px; border-radius:2px; box-shadow: inset 0px 0px 30px 0px #EFEFEF;}
.text-styles td{vertical-align:top;}
.chatfootertable{display:block;width:100%; top:13px; position:relative;}
.text-styles td:last-child{display: block !important; position:absolute;right:10px; top:-27px;height:20px;}
.text-styles td:last-child label{display: none;}

.away-users li{display:inline;font-weight:400 !important;color:white !important;}
body.chatbox strong{font-weight:400; font-variant:small-caps;letter-spacing:1px;}
#chatbox .date-and-time {font-size:9px;}
#chatbox_members .member-title{color:white;font-weight:400;font-variant:small-caps;}
#chatbox > p {border-bottom: 1px solid #d5dde5;}

/*bouton de la chatbox*/
.bouton{
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  text-align:center;
  color:#FFFFFF;/*couleur du texte*/
  padding:5px 10px;
  border-radius:2px;
  border:none;
  font: 600 20px 'Amatic SC';/*police*/
  letter-spacing:2px;/*espacement des lettres*/
  text-shadow:0 1px 0 green;/*ombre du texte*/
  background-color:#68BF56;/*couleur de fond*/
  box-shadow: 0px 3px 0px 0px #3D992B;/*ombre*/
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease-in-out;
}
.bouton:hover {background-color: #54B341;/*couleur de fond au survol de la souris*/}
.bouton:active {box-shadow: 0px 1px 0px 0px #3D992B;padding-top:6px; padding-bottom:4px;}/*au moment du clic*/


Voilà... Donc là logiquement la chatbox est invisible. Normal on n'a pas encore mis le bouton qui permet de l'ouvrir !



Bouton


Vous pouvez le mettre où vous voulez, et même le mettre plusieurs fois si vous voulez. Le plus simple est de le mettre dans votre message de page d'accueil. (Affichage > Page d'accueil > Généralités) La partie script contient le javascript qui fait fonctionner l'apparition / disparition de la chatbox. Les deux boutons, ouvrir et fermer, s'intervertissent quand on clique. A vous ensuite d'intégrer et de customiser ce bouton via le CSS pour l'intégrer à votre forum (=
Code:
<script type="text/javascript">
function ouvrircb(name){
  document.getElementById('ouvrir_cb_'+name).style.display='none';
  document.getElementById('fermer_cb_'+name).style.display='block';
  document.body.style.marginRight='350px';
  document.getElementById('cb').style.right='0';
  }
function fermercb(name){
  document.getElementById('ouvrir_cb_'+name).style.display='block';
  document.getElementById('fermer_cb_'+name).style.display='none';
  document.body.style.marginRight='';
  document.getElementById('cb').style.right='';
  } 
</script>
<div class="bouton" id="ouvrir_cb_1" onclick="javascript:ouvrircb(1);" style="width:150px;">Ouvrir CB</div>
<div class="bouton" id="fermer_cb_1" onclick="javascript:fermercb(1);" style="width:150px;display:none;">Fermer CB</div>
 



Et voilà, c'est installé ! Si vous rencontrez des problèmes n'hésitez pas à passer dans la section "problème avec mon code" pour qu'un codeur vous aide ! Je vous demanderai aussi de mettre un crédit à N-U quelque part sur votre forum.

Nyyx

Entête de RP ~ Classique - Dim 3 Mai 2015 - 23:54

#html #en_tête_rp #auteur_Nyyx


Hullo ! Voici mon premier codage, une entête de RP donc ! Soyez indulgents pitié, je débute. T-T

Histoire de prévenir, pour le titre (le texte quoi.) je me suis inspirée de ce petit chose adorable (clic) d'Ehawee ! *_* Merci beaucoup par ailleurs, et si ça dérange, je peux bien évidemment changer. Very Happy

Aperçu ▬ clic clic


Code:
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT|Great+Vibes&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
<span style="display: block; background: url(http://image.noelshack.com/fichiers/2015/18/1430414261-ezgif-1234029873.gif); width: 350px; height: 115px; margin: auto; border-top: 2px solid #b3a5a3; border-bottom: 2px solid #b3a5a3; box-shadow: 0px 0px 5px black;">

</span>
<div style="width: 330px; background-color: #b3a5a3; box-shadow: 0px 0px 5px black; padding-top: 12px; padding-left: 10px; padding-right: 10px; margin: auto; border-bottom-left-radius: 30px; border-bottom-right-radius: 32px; ">
<span style="display: block; font-family: vivaldi; font-size: 30px; color: #1f000c; text-shadow: 1px 1px 2px #1f000c; text-align: center; border-top: 1px dotted #68002a; width: 100%;">
<span style="color: #68002a; text-shadow: 1px 1px 2px #68002a; font-size: 40px; font-family: 'Great Vibes' ">T</span>itre du rp</span><span style="display: block; text-align: center; font-size: 10px; color: #efe5e9; font-variant: small-caps; letter-spacing: 2px; border-bottom: 1px dotted #68002a; width: 100%; ">ft. anneau nim et anne o'nym</span>

</div>
<span style="display: block; color:#68002a; font-size: 8px; text-align: center;">(c) Nyyx | <a href="http://www.never-utopia.com/">Never Utopia</a></span>

Nihil Scar Winspeare

Afficher la zone Lancés de dés dans une catégorie précise - Lun 16 Mar 2015 - 13:01

#html #javascript #jquery #Nihil_Scar_Winspeare #phpBB2 #punBB #Invision


Afficher la zone "Lancés de dés" seulement dans un forum en particulier



Ce code permet d'afficher la zone "lancer de dés" seulement dans certaines catégories / forums ! (version phpBB2)

Note : le code n'est pas sous hide, je tenterai de vérifier les commentaires donc si vous avez la moindre question pour une amélioration / une précision, n'hésitez pas. ♥

Ce code a été créé pour un forum en phphbb2, mais il fonctionne aussi sur PunBB et Invision :)


Rendu



Pour en savoir plus sur le lancé de dés, je vous invite à lire le Tutoriel officiel de ForumActif ainsi que le Tutoriel par Halloween sur Never Utopia ♥


Par défaut, le lancé de dés est disponible dans tous les sujets de votre forum.
Mais, parfois on ne l'utilise que dans une zone précise du forum, et on n'en a pas besoin partout.
Cette option permet de masquer la zone "Lancé de dés" par défaut puis l'afficher seulement dans un forum / catégorie :)
/!\ Attention, je parle ici de l'ensemble de zone lancé de dé, pas d'afficher seulement un dé en particulier Wink

Ce code peut-il totalement empêcher le lancé de dés dans les forums non autorisés ? Non. Dans les catégories où on ne souhaite pas avoir le lancé de dés, la zone est seulement masquée visuellement, les membres peuvent toujours y accéder dans le code source.


Attention, il ne faut pas accepter l'option "Activer le bbcode [ roll ] pour le lancé de dé"
En effet, cette option permet d'éditer un message pour changer le lancé de dé.


Connaissances



Avant de se lancer dans le code, on commence par réfléchir à ce qu'on sait :)

Où se trouvent la zone lancé de dé ? → dans les pages "Répondre" et quand on prévisualise un message de réponse.
On va donc commencer par regarder si on est bien sur une page pour poster un message. Quand on envoie un message, notre URL ressemble à ceci : https://www.never-utopia.com/post

Comment savoir dans quelle catégorie / forum on est ? → le fil d’Ariane
Quand on répond à un sujet, on a le fil d'Ariane en haut.
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 66RzZUX
Ce fil d’Ariane est constitué de liens qui permettent de naviguer sur le forum, et on peut donc regarder si les liens sont dans notre liste des forums "autorisés" ou non.

Fonctionnement



Donc, si on suit la logique, voici ce qu'on peut faire :
(il y a souvent 100 manières de faire la même chose. Ici j'ai fait un choix d'appréhender le problème comme ça, mais on aurait pu s'y prendre autrement Very Happy)


  1. On établit une liste de forums et catégories où le lancé de dés est autorisé.
  2. On va vérifier si le chemin de la page sur laquelle on se trouve est bien /post.
  3. On regarde une zone de lancé de dé sur la page (si la zone n'est pas là, ça ne sert à rien de continuer le reste du code) et si elle est là, on la cache.
    Pourquoi ne pas cacher l'élément par défaut tout simplement (en CSS), puis l'afficher à certains moments ? Par ce que si la personne a le javascript désactivé ou bien qu'il y a une erreur de JS dans la page... Notre JS pour afficher la zone de lancé de dé juste aux bons endroits ne fonctionnera pas.

  4. On récupère les liens du fil d’Ariane.
  5. On regarde si l'un de ces liens est présent dans notre liste "Fora / catégories autorisés".
    → si oui : on affiche la zone lancé de dés



Template posting_body


PA > Affichages > Templates > Poster & Messages privés

On va commencer par entourer toute la zone dans une div, pour pouvoir la sélectionner ensuite en javascript.

On va repérer toute la zone qui correspond au lancé de dé, elle commence ici :
Code:
<!-- BEGIN switch_roll_dice -->


Et se finit ici
Code:
<!-- END switch_roll_dice -->


Tout le code au milieu ne s'affiche que si le lancé de dé est activé :)

On va donc remplacer
Code:
<!-- BEGIN switch_roll_dice -->

Par :
Code:
<!-- BEGIN switch_roll_dice -->
    <div class="js-roll-dice">
    <!-- modification pour le javascript "afficher le lancer de dés seulement sur certaines pages" -->


Et ensuite
Code:
<!-- END switch_roll_dice -->


Par
Code:
 </div> <!-- fermeture de .js-roll-dice -->
<!-- END switch_roll_dice -->


On valide, on publie, et normalement, il n'y a aucun changement visuel.

Javascript


PA > Modules > Html & Javascript
On crée un nouveau javascript activé sur toutes les pages avec un nom clair.

Je vous mets l'ensemble du code :
Code:
/*
 * Tuto lancé de dés
 * Masquer la zone lancé de dés partout sauf dans certains forums
 *
 * version : phpbb2
 * Never Utopia
 */
$(function () {
    if (document.location.pathname === "/post") {

        /* url des parties autorisées
         * MODIFIER ICI
         * */
        /* url des parties autorisées */
        var exceptions = [
            "/f6-banniere-concours-ga",
            "/f3-presentations",
            "/c5-arene"
        ];
        
        var $dices = $(".js-roll-dice").hide();

        if ($dices.length < 1) return;

        $("a.nav").each(function () {
            if (exceptions.indexOf($(this).attr("href")) > -1) {
                $dices.show();
                return false;
            }
        });
    }
});


La version avec plus de commentaires :
Spoiler:


Rajouter les lien des catégories autoriseés


On modifie cette partie là :
Code:
/* url des parties autorisées */
var exceptions = [
    "/f6-banniere-concours-ga",
    "/f3-presentations",
    "/c5-arene"
];


Prenez l'url de votre catégorie exemple, et gardez juste la partie après le nom de domaine.
Ainsi si vous avez : https://www.never-utopia.com/f3-presentations
Il faut mettre "/f3-presentations".

De la même manière, si on a https://www.never-utopia.com/c21-communaute
On va mettre : "/c21-communaute".

Attention, il y a des virgules entre chaque lien, mais pas de virgule à la fin Wink

Exemples:


Toutes les sous catégories et sous forums à l'intérieur des liens que vous mettrez seront pris en compte. Ainsi si je mets "Communauté" dans les exceptions, tous les sous forums de cette catégorie auront la zone "Lancé de dés" affichée.


Conclusion



A partir de ce principe là, on pourrait aussi autoriser le lancé de dés partout, sauf sur certains forums (^-^).

Pour tout problème, je vous invite à vous rendre dans la section "Problème en codage".

A-Lice

Fiche de Pub Taupe - Dim 15 Mar 2015 - 20:22

#html #fiche_pub #page_html #auteur_A-Lice



Fiche de Pub Taupe


Suite à une demande de Moys voici une fiche de Pub avec transition pour les images du staff.

Je précise que l'arrière plan blanc correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :
HTML :
Code:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>div.staff {width: 100px; height: 75px; margin: auto; overflow: hidden; display: inline-block; margin-left: 5px;} .staff img {position: relative; bottom: 75px; transition: all 0.5s; width: 100px; height: 75px;} .staff:hover img {bottom: 200px; transition: all 0.5s;} .txt_staff {color: #9c887d; font-size: 14px; text-align: justify; overflow: auto; width: 80px; height: 55px; padding: 10px;}</style></head><body>
<div style="width: 530px; padding: 10px; margin: auto; background: #F5F5F2;">
  <img src="http://img15.hostingpics.net/pics/661225image791.jpg" style="width: 530px; height: 350px;" />
  <br /><br />
  <a href="Lien du forum" style="display: block; font-size: 35px; color: #9c887d; text-align: center;">Nom du forum</a>
  <br />
  <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; height: 16px; color: #F5F5F2; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Contexte</span>
  </div>
  <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Informations</span>
  </div>
  <br />
  <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
    Texte texte
  </div>
  <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
    Texte texte <br />x membres connectés
  </div>
  <br />
  <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Nouveautés</span>
  </div>
  <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
    <span style="position: relative; top: -6px;">Staff</span>
  </div>
  <br />
  <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
    Texte texte
  </div>
  <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
    <div class="staff"><div class="txt_staff">Texte ici
      </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
    <div class="staff"><div class="txt_staff">Texte ici
      </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
  </div>
  <br />
  <div style="background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
    <span style="position: relative; top: -6px;">Nous lier</span>
  </div>
  <div style="color: #9c887d; font-size: 11px; text-align: justify; height: 80px; overflow: auto; padding: 15px;">
    Texte texte texte
  </div>
<a href="http://www.never-utopia.com" style="display: block; text-decoration: none; font-size: 11px; text-align: center; color: #9c887d;">A-Lice | Never-Utopia</a>
</div></body></html>


Le code est à mettre dans le panneau d'administration, dans Module -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)


Et l'iframe pour poster :
Code:
<center><iframe src="Lien de la page HTML" border="0" frameborder="0" scrolling="no" style="margin: 10px;" width="570px" height="900px"></iframe></center>

Si vous venez à agrandir la taille de la fiche, pensez à le faire pour l'iframe aussi !


/!\ En cas de problème, c'est ici ou là que ça ce passe.

Onyx

Faire un design différent pour chaque catégorie (HTML et CSS) - Mer 4 Mar 2015 - 22:14

#html #css #categories #auteur_Onyx #phpBB2



Faire un design différent pour chaque catégorie (CSS uniquement)


Édit d'Onyx : Bien que les notions vues dans ce tutoriel fonctionnent, je vous conseillerais d'utiliser ce tutoriel de Nihil Scar Winspeare qui utilise une méthode plus simple et plus propre.


Vous savez qu'on peut faire une mise en forme pour les forums et les catégories... Mais saviez-vous que vous pouvez personnaliser chacune de vos catégories pour qu'elles soient tous différentes les unes des autres? Eh bien, c'est ce que ce tuto vous montrera ^^


Voici quelques exemple de ce qu'on peut obtenir :
Exemple 1
Exemple 2
Exemple 3


Voilà tout ce qu'on va voir qu'on peut personnaliser individuellement :
- Les titres de chaque catégorie.
- Le fond (design général) de chaque catégorie.
- Les titres de chaque forum.
- Le fond (design général) de chaque forum et de chaque partie de chaque forum.
- La description des forums.

Et tout ce qu'on ne peut pas personnaliser individuellement :
- La structure des catégories et des forums.
- Les images New/Old/Lock.
- La mise en forme (police et couleur) des liens vers les sous-forums.
- La mise en forme (police et couleur) du dernier message.
- La mise en forme (police et couleur) des statistiques (nombre de messages et de sujets)


Voici comment est séparé le tutoriel, soit nos grandes étapes à suivre :
1. Comment faire une disposition "générale" pour les catégories et forums. Aperçu.
2. Comment personnaliser chaque fond et titre de catégorie. Aperçu.
3. Comment personnaliser chaque fond et titre de forum. Aperçu.
4. Problèmes possibles


- La version du forum doit être "PHPBB2".
- La hiérarchie et la structure des catégories doivent être "Séparer sur l'index : moyen".
- Le niveau de ce tutoriel est intermédiaire/avancé.



1. Comment faire une disposition "générale" pour les catégories et forums


Rappel :
Ce tuto utilise PhpBB2 et la hiéarchie "Séparer sur l'index: moyen". Si vous êtes sur une autre version de forum ou que vous utilisez une autre hiéarchie, la procédure à suivre est un peu différente.

Avant tout, il faut construire une structure générale pour nos catégories et nos forums. Pour cela, vous pouvez utiliser les tutos déjà existants, des LS, vos propres compétences ou la structure que j'utiliserai pour vous montrer comment faire.

Normalement, avec la hiéarchie que nous avons choisie, les catégories sont faites avec des "table" et des "td". Néanmoins, outre le fait que l'usage des tableaux pour autre chose que mettre en forme des données est de plus en plus déconseillé, je trouve cela plus facile à comprendre visuellement lorsqu'on utilise des "div", alors l'exemple suivant vous montrera la structure des catégories à l'aide de "div". Cela ne vous empêche pas de bâtir vos propres catégories selon la méthode que vous préférez ^^

Donc voilà, en gros, comment les différentes parties du template Index_box sont structurées (les informations entre parenthèses sont des simple indications, ne les recopiez absolument pas dans votre template) :
Code:
(Autres trucs avant le début des catégories)

<!-- BEGIN catrow --> (Indique le début des catégories)

  <!-- BEGIN tablehead --> (Indique le début de la partie du haut de chaque catégorie)

    <div> (Ouverture de la div qui englobe toute la catégorie)

      <div> ( Ouverture de la div du titre de catégorie)
        {catrow.tablehead.L_FORUM}
      </div> (Fermeture de la div du titre de catégorie)

      <div> (Ouverture de la div qui englobe tous les forums)

  <!-- END tablehead --> (Indique la fin de la partie du haut de chaque catégorie)

  <!-- BEGIN forumrow --> (Indique le début de chaque forum)

        <div> (Ouverture de la div qui englobe un seul forum)
          Trucs à l'intérieur du forum
        </div> (Fermeture de la div qui englobe un seul forum)

  <!-- END forumrow -->  (Indique la fin de chaque forum)

  <!-- BEGIN tablefoot --> (Indique le début de la partie du bas de chaque catégorie)

    </div> (Fermeture de la div qui englobe tous les forums)

  </div> (Fermture de la div qui englobe toute la catégorie)

  <!-- END tablefoot --> (Indique la fin de la partie du bas de chaque catégorie)

<!-- END catrow --> (Indique la fin des catégories)


Une fois qu'on a notre structure globale de faite, on veut habituellement la mettre en forme. Pour cela, on on ajoute une "class" à chaque "div" (ou span, ou td, ou ce que vous préférez utiliser) et on s'en sert pour personnaliser chaque partie dans le CSS.

Pour ce qui est des éléments "à l'intérieur du forum" que je n'ai pas pris la peine de détailler, voici une petite liste rapide des différentes variables et de leur signification (avec PhpBB2 et la hiérarchie "Séparer sur l'index: moyen") :

VariableSignification
{catrow.tablehead.L_FORUM}Titre de forum
{catrow.forumrow.FORUM_FOLDER_IMG}URL de l'image Old/New/Lock. Habituellement, on prend on complet l'image qui contient cette variable lorsqu'on crée la structure des forums
{catrow.forumrow.U_VIEWFORUM}Lien d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_NAME}Le nom d'un forum à l'intérieur d'une catégorie
{catrow.forumrow.FORUM_DESC}Description de forum
{catrow.forumrow.switch_moderators_links.L_MODERATOR} {catrow.forumrow.switch_moderators_links.MODERATORS}Personnes qui peuvent modérer ce forum ou sous-forum
{catrow.forumrow.L_LINKS} {catrow.forumrow.LINKS}Liens des sous-forums d'un forum
{catrow.forumrow.TOPICS}Nombre de sujets dans un forum
{catrow.forumrow.POSTS}Nombre de messages dans un forum
{catrow.forumrow.avatar.LAST_POST_AVATAR}Avatar du dernier posteur
{catrow.forumrow.LAST_POST}Dernier message



Vous disposez de ces différentes variables en les entourant de "span", "div", "td" ou ce que vous préférez. Puis, vous fonctionnez pareil pour les personnaliser, à savoir en rajoutant des "class", puis en utilisant le CSS.

Il y a tellement de façons différentes de fonctionner qu'il n'y a pas de modèle précis... Néanmoins, pour le bien de ce tuto, il sera important d'entourer le titre de forum ainsi que le titre de catégorie d'un span ou d'une div (comme le titre de catégorie) et de lui donner une class précise.

De plus, il est important d'utiliser le plus possible des tailles "fixes". Si vous mettez certains éléments avec une largeur ou une hauteur en % ou que vous avez tendance à utiliser des "span" qui s'ajuste au contenu, cela risque de causer des problèmes par la suite.



Voici à quoi correspond la structure des catégories que j'utiliserai pour l'exemple du tuto et qui vous donnera cet aperçu :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
         
            <div class="forum_img_bloc">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
              </div>
           
              <div class="forum_lastmess_bloc">
                  {catrow.forumrow.LAST_POST}
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->


Ainsi que mon CSS (sans forum ou catégorie personnalisée) de base :
Code:
/*Bloc de catégories*/
.cate_bloc {
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


/*Bloc des titres de catégorie*/
.cate_title {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}
/*Titre des catégories*/
.cate_title h2 {
  margin: 0px;
  padding: 0px;
  font-size: 36px;
  color: #dfdfdf;
  font-family: 'Vivaldi';
  text-align: center;
}


/*Bloc de un forum*/
.forum_bloc {
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}
/*Bloc du milieu de forum*/
.forum_principal_bloc {
  width: 640px;
  margin: auto;
  padding: 2px 20px 10px 20px;
  background-color: #a3a3a3;
  border: 1px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-left: 3px solid #c4c4c4;
  border-radius: 30px;
}


/*Bloc de titre de forum*/
.forum_title_bloc {
  margin-left: -65px;
  height: 27px;
  margin-bottom: 5px;
  text-align: center;
}
/*Titre de forum*/
.forum_title_bloc a.forumlink {
  font-family: 'monotype corsiva';
  font-size: 24px;
  color: #dfdfdf!important;
  text-decoration: none!important;
  letter-spacing: 1px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre de forum survolé*/
.forum_title_bloc a.forumlink:hover {
  color: #dfdfdf!important;
  letter-spacing: 5px;
}


/*Bloc de image new-old-lock*/
.forum_img_bloc {
  float: left;
  height: 80px;
  width: 85px;
}


/*Bloc de la description*/
.forum_desc_bloc {
  float: left;
  margin-left: 25px;
  margin-top: -5px;
  height: 78px;
  width: 343px;
  border: 1px solid #dfdfdf;
  padding: 5px;
  border-radius: 10px;
  background-color: #c4c4c4;
  text-align: justify;
  font-size: 10px;
  overflow: auto;
}


/*Bloc du denier message et des statistiques*/
.forum_lastmess_stats_bloc {
  float: left;
  margin-left: 25px;
  height: 78px;
  width: 148px;
  text-align: center;
  background-color: #c4c4c4;
  border: 1px solid #dfdfdf;
  border-radius: 10px;
}
/*Bloc des statistiques*/
.forum_stats_bloc {
  margin: auto;
  margin-top: 5px;
  width: 140px;
  height: 18px;
  text-align: center;
  font-size: 11px;
  font-family: 'times new roman';
  margin-bottom: 5px;
  border-bottom: dotted 2px #dfdfdf;
}
/*Bloc du dernier message*/
.forum_lastmess_bloc {
  margin: auto;
  width: 140px;
  text-align: center;
  font-size: 12px;
  font-family: 'times new roman';
}


/*Bloc des sous forums*/
.forum_sousforums_bloc {
  margin: auto;
  height: 20px;
  overflow: auto;
  width: 580px;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  font-family: 'Times New Roman';
  background-color: #a3a3a3;
  border-bottom: 3px solid #c4c4c4;
  border-left: 1px solid #c4c4c4;
  border-right: 1px solid #c4c4c4;
  border-radius: 0 0 30px 30px;
  vertical-align: bottom;
  line-height: 20px;
}
/*Écriture des sous-forums*/
.forum_sousforums_bloc .gensmall {
  vertical-align: bottom;
  font-size: 12px;
  line-height: 20px;
  font-family: 'Times New Roman';
}




2. Comment personnaliser chaque fond et titre de catégorie


Avant de commencer cette étape, il va falloir que toutes les catégories, forums et sous-forums soient déjà créés.

Si vous voulez savoir pourquoi, c'est que pour personnaliser chaque catégorie, on va aller "ajouter" un deuxième fond de catégorie qui cachera le premier. Ce "deuxième fond" ne s'ajustera pas automtiquement à la hauteur de la catégorie, alors nous devront lui donner une hauteur nous-même. Et si jamais vous rajoutez des forums ou sous-forums dans votre catégorie, vous devrez ensuite ajuster de nouveau la hauteur.

Bref, il faut que toutes les catégories, forums et sous-forums soient déjà créés avant de continuer.



Pour cette étape, nous allons utiliser ce qu'on appelle "les positions" et "le z-index". Je vais vous expliquer certaines de leurs particularités au fur et à mesure qu'on les utilisera. Néanmoins, si vous voulez plus d'informations, je vous invite à aller sur cette étape de cursus.



La question est :
Comment personnaliser une catégorie spécifique... Alors que la seule chose qu'on peut accéder dans une catégorie spécifique, c'est son titre?

La réponse est :
En se servant justement de ce titre!

Bon, ok, c'est chelou dit comme ça >< Du coup, je vais vous montrer un screen qui vous montrera une catégorie normale :
Schéma de base

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Pas vraiment de profondeur)
- Par dessus, on a le titre de catégorie et les forums. (Pas vraiment de profondeur)


Ce qu'on va faire, c'est qu'on va mettre des éléments supplémentaires dans le titre de catégorie et on va aller les positionner pour cacher l'ancien design de la catégorie, comme ceci :
Schéma de ce qu'on veut avoir

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)


Ok... mais pourquoi tu parles de profondeur et de "z-index" dans ton image? Ça veut dire quoi?
Je veux "cacher" certains éléments (titre de catégorie normal et fond de catégorie normal) avec d'autres éléments. Pour faire cela, je dois m'assurer que mes éléments personnalisés soient "par dessus" les éléments normal. Pour cela, j'utilise le "z-index".


Et c'est quoi un "z-index"?
C'est une propriété de CSS qui indique justement la profondeur d'un élément. Cela nous permet de superposer comme on le veut des éléments. Plus un z-index est élevé, plus l'élément sera "par dessus". Plus le z-index est petit, plus l'élément sera "en dessous".

Donc si je veux que mon fond de catégorie de personnalisé soit "par dessus" mon fond de catégorie normal, il va falloir que je lui donne z-index plus gros que le fond de catégorie normal, tout simplement.



Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser le fond et le titre de catégorie de chaque catégorie, on va passer par le seul endroit où nous avons accès à une catégorie spécifique : le titre de catégorie.

Donc nous allons aller dans la catégorie que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de catégorie d'un span avec la class "cate1" pour pouvoir personnaliser la mise en forme de ce titre de catégorie.
Quant au deuxième span avec la class "catefond1", il va correspondre à notre fond de catégorie personnalisé.



Maintenant, on passe aux modifications du CSS! On commence par ajouter une position "relative" à notre fond de catégorie de base.

Errr... Une position?
Pour ce qui nous intéresse dans ce tutoriel, une position a 2 utilités.

Premièrement, cela nous permet d'utiliser le "z-index". En effet, le "z-index" ne fonctionne que si notre élément a une "position".

Deuxièmement, cela nous permet de faire du "positionnement". Et oui, les "positions" permettent de "positionner", c'est logique :hum:. Entre autres, la position "relative" laisse le bloc à son emplacement actuel. C'est donc la position que nous allons utiliser le plus souvent lorsque nous souhaitons simplement nous servir du "z-index". Mais, on va aussi utiliser la position "absolute".

La position "absolute" fait que l'élément se place toujours en haut à droite de son plus proche "parent" ayant une position "relative". Si un élément avec position "absolute" n'a aucun parent avec position "relative", il se met automatiquement en haut à droite de l'écran. En effet, la position relative permet de lancer un message qui dit "hé ho, je suis votre référence et votre dieu". Du coup, les éléments avec position "absolute" vont chercher parmi leurs "parents" et vont aller se placer par rapport au premier qui a la position "relative" qu'il sera capable de trouver.


Ici, on va vouloir que notre fond de forum normal serve de "référence" à notre fond de forum personnalisé lorsqu'on va vouloir le positionner. Du coup, on ajoute une position "relative" à notre fond de catégorie de normal :
Code:
/*Bloc de catégories*/
.cate_bloc {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}




Ensuite, si on se référe à notre schéma de tout à l'heure, on constate que nos forums doivent être par dessus notre fond de forum personnalisé. Plus précisément, on a besoin d'un "z-index: 2;". Et pour pouvoir utiliser un "z-index", il nous faut une "position". On va donc mettre un "z-index: 2;" et une "position: relative;" à nos forums :
Code:
/*Bloc de un forum*/
.forum_bloc {
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 700px;
}




Maintenant qu'on a positionné et ajusté la profondeur de nos éléments normaux, on va passer aux éléments "personnalisés". On va commencer par le titre de catégorie lui-même.

Pour cela, on copie/colle le CSS du titre de la catégorie de base, puis on va changer le nom pour ".cate_title .cate1".

Pourquoi ".cate_title .cate1"?
Tout à l'heure, nous avions entouré notre titre de catégorie d'un span avec la class "cate1". Du coup, nous mettons ".cate1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le titre de catégorie soit personnalisé partout et qu'il brise notre design, on met "cate_title" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
.cate_title .cate1 {
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}




La hauteur, les margins et la largeur n'étant pas pris en compte dans les éléments de type "inline" comme un "span". Alors si vous avez une hauteur, largeur ou des margins pour votre titre de catégorie, vous aller devoir transformer ajouter un "display: block;" pour transformer votre "span" en "bloc" et qu'il ait les bonnes dimensions. Si vous n'en avez pas, tant mieux pour vous, vous pouvez passer à la prochaine étape.

Présentement, cela me donne ceci :
Code:
.cate_title .cate1 {
  display: block;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}




En suivant notre schéma de base, on se rend compte que si on ne veut pas que notre titre de catégorie personnalisé soit caché par le fond de catégorie personnalisé, on va devoir faire la même chose que pour les forums et lui mettre un "z-index". Donc on rajoute un "z-index: 2;" et une "position: relative;" pour que le "z-index" fonctionne :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}




Voilà ce qu'on a pour le moment : aperçu.

C'est décalé T_T
Pas de panique, c'est normal ! Notre titre de catégorie normal a un padding de "10px". Comme notre titre de catégorie personnalisé est à l'intérieur, c'est normal que ce padding le décale. En plus, il y a une bordure à gauche, donc ça crée un décalage supplémentaire.

Pour régler ce décalage, on va se servir de "top" et le "left" pour le positionner correctement. Le "top" indique à quel distance du haut le bloc doit se placer et le "left" indique à quel distance de la droite le bloc doit se placer. Pour le haut, on veut annuler le padding de 10px, donc on va mettre "top: -10px;". Pour la gauche, on veut annuler le padding de 10px et aussi annuler le décalage de la bordure gauche de 3px. On va donc mettre un "left: -13px;".

Bref, à vous de calculer combien il y a de décalage en haut et à gauche à cause d'un "padding" ou d'un "border" et d'ajuster en conséquence avec "top" et "left". Si vous n'en n'avez pas, tant mieux, passez à l'étape suivante ^^

Pour moi, cela va donner ceci :
Code:
.cate_title .cate1 {
  display: inline-block;
  position: relative;
  z-index: 2;
  top: -10px;
  left: -13px;
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 40px;
  background-color: #a3a3a3;
  padding: 10px;
  border-left: 3px solid #c4c4c4;
  border-right: 3px solid #c4c4c4;
  border-radius: 20px;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne ce screen.

Et voilà pour le titre de catégorie!



Maintenant, on passe au fond de catégorie personnalisé. Ce qu'on veut faire, c'est venir ajouter un fond qui va venir "cacher" le fond de catégorie de base. Pour cela, on va commencer par copier/coller le CSS du fond de catégorie de base, puis on change le nom pour ".cate_title .catefond1".

Pourquoi ".cate_title .catefond1"?
Tout à l'heure, nous avions ajoutés un span avec la class "catefond1" dans notre titre de catégorie. Du coup, nous mettons ".catefond1" pour sélectionner cette class.

Quant au ".cate_title" juste avant, c'est parce que ce titre de catégorie n'existe pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de catégorie en haut de notre sujet. Comme on ne veut pas que le fond personnalisé de notre catéforie apparaisse partout et qu'il brise notre design, on met "cate_title" avant la class du fond de catégorie personnalisé. Comme ça, le fond apparait seulement lorsqu'il est dans une catégorie.

Donc pour le moment, cela ressemble à :
Code:
.cate_title .catefond1 {
  position: relative;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}




Bon, on ne voit rien du tout ><. C'est normal, puisque c'est un "span" à l'intérieur duquel il n'y a aucun texte. Dans les éléments de type "inline" comme un "span", les margins, la hauteur et la largeur n'est pas prise en compte. Alors, on va aller ajouter un "display: block;" pour transformer notre "span" en "bloc" et le faire apparaître :
Code:
.cate_title .catefond1 {
  display: block;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}




En suivant notre schéma de base, on se rend compte que notre fond de catégorie personnalisé doit être par dessus le fond de catégorie normal, en dessous des forums et en dessous du titre de catégorie personnalisé. Pour ça, on va devoir lui mettre un "z-index". Donc on rajoute un "z-index: 1;" :
Code:
.cate_title .catefond1 {
  display: block;
  z-index: 1;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}




Mais, mais, mais... Pourquoi ça ressemble à ce screen? C'est tout petit! Et c'est très très décalé T_T
Encore une fois, c'est normal Wink C'est tout petit parce qu'on ne lui a pas donné de "hauteur". Ça, on va s'en occuper en avant dernier.

Pour le décalage, il ne faut pas oublier qu'on est en position "relative"... Et qu'on est dans le titre, donc c'est normal que ça ne soit pas au bon endroit. Pour le positionner correctement, on va changer la position "relative" pour la position "absolute". Comme ça, le fond personnalisé va se placer dans le coin en haut à droite du fond normal. En plus, comme il y a un padding en haut de 20px et une bordure en haut de 5px, on va devoir ajouter un "top: -25px;". Comme il n'y a rien à régler du côté gauche, on se contente de mettre un "left: 0px;"

Cela va donner ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Mais c'est toujours trop petit, regarde T_T
Patience, j'avais dit qu'on devait lui donner une hauteur, non?

C'est à vous d'essayer des hauteurs jusqu'à ce que vous arrivez à la bonne. (ou vous pouvez le calculer avec un logiciel de graph ou un autre outil, à vous de choisir). Dans mon cas, il me faut une hauteur de 440px, ce qui donne ceci :
Code:
.cate_title .catefond1 {
  display: block;
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 0px;
  margin: auto;
  margin-bottom : 20px;
  margin-top: 20px;
  padding-top: 20px;
  width: 800px;
  height: 440px;
  background-color: #757575;
  border-top: 5px solid #a3a3a3;
  border-bottom: 5px solid #a3a3a3;
  border-radius: 30px;
  color: #000000;
}


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour le fond de catégorie!



Là, je viens de montrer comment faire pour personnaliser 1 titre de catégorie et 1 fond de catégorie. Pour les autres, c'est plus facile. Pour chaque catégorie que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="cate1">Titre de catégorie</span><span class="catefond1"></span>


Puis, vous recopiez le titre de catégorie personnalisé et le fond de catégorie personnalisé de la première catégorie en changeant le "1" de ".cate1" et de ".catefond1" par le chiffre que vous avez donné à votre autre catégorie et vous changez les couleurs ^^



3. Comment personnaliser chaque fond et titre de forum


Comment personnaliser le design d'un forum spécifique... Alors que la seule chose qu'on peut accéder dans un forum spécifique, c'est son titre et sa description de forum?

La réponse est :
En se servant justement du titre de forum ET de la description de forum ^^



Bon, un peu plus de détails ne feraient pas de mal, n'est-ce pas?

Jusqu'à présent, nous avons suivi ce schéma. Maintenant, nous allons suivre ce nouveau schéma.

Donc en ordre :
- On a toujours notre fond de catégorie normal. (Profondeur 0)
- Notre titre de catégorie de base n'est pas sur l'image, mais il est caché en dessous du fond de catégorie personnalisé. (Profondeur 0)
- Par dessus, il y a le fond de catégorie personnalisé qui va venir "cacher" notre fond de catégorie normal. (Profondeur 1)
- Quant à notre titre de catégorie personnalisé, on va aller le mettre par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums normaux sont par dessus le fond de catégorie personnalisé. (Profondeur 2)
- Nos forums personnalisés sont par dessus les forums normaux. (Profondeur 3)
- Le contenu de nos forums personnalisés (écriture) sont par dessus nos forums personnalisés (Profondeur 4)



Maintenant que vous avez une petite idée de ce à quoi cela va ressembler, on va commencer le travail \o/

Comme dit plus haut, pour personnaliser les forums et le titre de forum de chaque catégorie, on va passer par deux endroits. Pour le titre de forum personnalisé, on va passer par le titre de forum.

Donc nous allons aller dans le forum que nous voulons personnaliser et on va aller mettre ceci dans le titre :
Code:
<span class="forum1">Titre de forum</span>


Ce qu'on vient de faire?
On vient d'entourer notre titre de forum d'un span avec la class "forum1" pour pouvoir personnaliser la mise en forme de ce titre de forum.



Maintenant, on vient personnaliser notre titre de forum en utilisant le nom "a.forumlink .forum1".

Pourquoi "a.forumlink .forum1"?
Juste tout à l'heure, nous avions entouré notre titre de forum d'un span avec la class "forum1". Du coup, nous mettons ".forum1" pour sélectionner cette class.

Quant au "a.forumlink" juste avant, c'est parce que les titres de forums n'existent pas seulement sur la page d'accueil. Quand on entre dans un sujet, il y a le titre de forum en haut de notre sujet. Comme on ne veut pas que le titre de forum soit personnalisé partout et qu'il brise notre design, on met "a.forumlink" avant la class du titre personnalisé. Comme ça, le titre de catégorie est personnalisé seulement lorsqu'il est dans une catégorie.

Bref, cela nous donne ceci :
Code:
a.forumlink .forum1 {
}




Si on regarde notre schéma, on voit que l'écriture doit avoir un "z-index" parce qu'on veut qu'il soit par dessus les forums personnalisés. Par conséquent, on va leur donner un "z-index: 4;" et un "position: relative;" pour que le "z-index" fonctionne :
Code:
a.forumlink .forum1 {
  position: relative;
  z-index: 4;
}



Minute papillon, pourquoi on a pas rajouté de "display: block;" comme pour le titre de catégorie?

Tout simplement parce que nous n'avions ni largeur, ni hauteur, ni marges. Le titre de catégorie en avait et devait recevoir un "display: block;" parce qu'un "span" n'accepte pas la largeur, la hauteur ou les marges. Si on en a pas, cela ne nous sert à rien de mettre un "display: block;"


Et maintenant, il ne nous reste plus qu'à changer ce qu'on veut, soit les couleurs (principalement). Je ne vous montre pas de screen parce que la couleur que j'ai choisi ressemble trop à l'ancienne, mais vous comprenez le principe, non?

Et voilà pour le titre de forum!



Maintenant, on passe au design de forum. Pour cela, on va commencer par ouvrir notre template Index_Box ainsi que la description du forum que nous voulons personnaliser.

Puis, on va reproduire entièrement la structure d'un forum dans notre description. Pour vous aidez, vous pouvez tout simplement recopier la partie entre "forumrow" de votre template et enlever les variables telles que le titre de forum, la description de forum, les statistiques, etc...

Pour moi, cela donne ceci :
Code:
<div class="forum_bloc">
                            
   <div class="forum_principal_bloc">
                                   
      <div class="forum_title_bloc">
                          
      </div>
                                 
      <div class="forum_img_bloc">
                          
      </div>
                                 
      <div class="forum_desc_bloc">
                           Bla bla bla
      </div>
                                 
      <div class="forum_lastmess_stats_bloc">
                                        
         <div class="forum_stats_bloc">
                               
         </div>
                                        
         <div class="forum_lastmess_bloc">
                               
         </div>
                                      
      </div>
                                 
      <div style="clear: both">
            
      </div>
                     
   </div>
                            
   <div class="forum_sousforums_bloc">
                     
   </div>
                        
</div>


Ok... Mais pourquoi on fait ça?
Bah, on voulait changer le design de la partie "forum", non? Alors on va le refaire au complet, mais avec quelques petites modifications.

... Quelles modifications?
Eh bien, pour commencer, on va ajouter la class "forum_bloc1" au bloc qui entourne notre forum (le "forum_bloc").

Sa class va donc devenir celle-ci :
Code:
<div class="forum_bloc forum_bloc1">


... Et ça sert à quoi?
À tout plein de choses! On va se servir de cette nouvelle class pour aller placer notre nouveau design de forum "par dessus" l'ancien, entre autre.

Pour débuter, on va aller mettre une position "absolute" à notre class ".forum_bloc1" Et comme on veut que ça soit en haut à droite de son "parent" ayant la position "relative" le plus proche (bref, le bloc qui englobe le forum), on lui donne un "top: 0px;" et un "left: 0px;". Cela va donner ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}




Ok, je comprends un peu... Mais regarde ceci! À part le titre du forum et la description de forum, le contenu a disparu!
Outch >< Et si on regardait notre schéma pour voir s'il sait la solution?

Comme le schéma l'indique dans sa "note", si on veut que l'écriture et le contenu du forum soit "par dessus" le design du forum personnalisé... On doit lui donner un "z-index: 4;".

Bah oui, mais je ne peux pas changer ça, les variables sont directment dans le template... non?
Oui, c'est dans le template, mais on va quand même aller le changer.

Donc on se rend dans notre template, et on entoure d'un span avec la class "forum_up" toutes les variables (sauf le titre de forum et la description de forum) qui sont dans la section forum (dans le "forumrow"). Cela devrait donner ceci :
Code:
<!-- BEGIN catrow -->

  <!-- BEGIN tablehead -->
    <div class="cate_bloc">
      <div class="cate_title">
        {catrow.tablehead.L_FORUM}
      </div>
     
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
        <div class="forum_bloc">
         
          <div class="forum_principal_bloc">
           
            <div class="forum_title_bloc">
              <span class="forum_up">
                <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
              </span>
            </div>
         
            <div class="forum_img_bloc">
              <span class="forum_up">
                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </span>
            </div>
         
            <div class="forum_desc_bloc">
                {catrow.forumrow.FORUM_DESC}
            </div>
         
            <div class="forum_lastmess_stats_bloc">
           
              <div class="forum_stats_bloc">
                <span class="forum_up">
                  {catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets
                </span>
              </div>
           
              <div class="forum_lastmess_bloc">
                <span class="forum_up">
                  {catrow.forumrow.LAST_POST}
                </span>
              </div>
           
            </div>
         
            <div style="clear: both"></div>
          </div>
         
          <div class="forum_sousforums_bloc">
            <span class="forum_up">
              {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </div>
         
      </div>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
  </div>
  <!-- END tablefoot -->

<!-- END catrow -->




C'était long... Et maintenant?
Maintenant, on ajoute un "z-index" à cette nouvelle class.

On se rend donc dans notre CSS et on rajoute la class ".forum_up" avec le "z-index: 4;" et la "position: relative;" pour que le "z-index" fonctionne. Cela va donner ceci :
Code:
.forum_up {
  position: relative;
  z-index: 4;
}




Et cela nous donne cet aperçu.

Maintenant, on va enfin personnaliser les couleurs!

Pour cela, on regarde notre description et on copie toutes les class dans notre CSS, à l'exception du ".forum_bloc". Puis, devant chaque class, on ajoute ".forum_bloc1".


Pourquoi ".forum_bloc1"?

Parce qu'on veut que ce soit uniquement le design du forum qui a ".forum_bloc1" qui soit personnalisé. Au final, cela nous donne ceci :
Code:
.forum_bloc1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.forum_bloc1 .forum_principal_bloc {
}
.forum_bloc1 .forum_title_bloc {
}
.forum_bloc1 .forum_img_bloc {
}
.forum_bloc1 .forum_desc_bloc {
}
.forum_bloc1 .forum_lastmess_stats_bloc {
}
.forum_bloc1 .forum_stats_bloc {
}
.forum_bloc1 .forum_lastmess_bloc {
}
.forum_bloc1 .forum_sousforums_bloc {
}




Puis, vous changez les couleurs et tout ce que vous voulez. S'il y a des éléments que vous n'avez pas changé, vous pouvez tout simplement les enlever du CSS. Une fois les couleurs changées, cela me donne cet aperçu.

Et voilà pour les design de forum!



Là, je viens de montrer comment faire pour personnaliser 1 titre de forum et 1 fond de forum. Pour les autres, c'est plus facile. Pour chaque forum que vous voulez personnaliser, vous devez mettre le titre sous ce format, en changeant le "1" par le nombre que vous voulez :
Code:
<span class="forum1">Titre de forum</span>


Quant aux fonds de forums, vous recopiez la description de forum du forum déjà personnalisé et vous changez le 1 du "forum_bloc1" pour le chiffre que vous avez choisi.

Enfin, dans le CSS, vous recopiez le CSS propre au forum déjà personnalisé et vous changez les 1 par le chiffre que vous avez choisi. À savoir que rien ne vous empêche de changer le chiffre nul part et de reprendre le même design pour tous les forums d'une même catégorie, comme je l'ai fait sur cette image.



4. Problèmes possibles


Si vous avez fonctionné pareil comme dans le tuto et que vous avez mis une "deuxième class" au bloc de fond de forum dans la description et que les changements ne s'effectuent pas même après la personnalisation :
Cause très probable :
Il ne faut jamais oublier que le CSS se lit de "haut en bas". Le navigateur le lit dans le même ordre. Donc si vous avez mis la personnalisation de vos forums plus haut dans le CSS que le design de base... Le design de base sera considéré comme "plus important" parce qu'il est "après", donc "plus bas". Il vous suffit de couper votre CSS de vos forums personnalisé et de le mettre "après", donc "plus bas" que le CSS des forums de base.

Par exemple, ici, le texte resterait noir parce que la class personnalisée est "plus haut", donc "avant". Il faudrait l'inverser :
Code:
.nom_personnalisé {
  color: red;
}
.nom {
  color: black;
}



Les membres voient des gros décalements quand ils ont des résolutions d'écran différentes :
Cause probable :
Avec des résolutions d'écran différentes, si les tailles sont en %, la taille des éléments est différente. Pour la largeur, cela devrait majoritairment rester pareil, mais c'est 99% sûr qu'il y aura des décalements par rapport à la hauteur.
Pour régler ce souci, il suffit de travailler avec des hauteurs et des largeurs fixes. Exemple, 800px de largeur par 150px de hauteur pour un forum, etc...


Et... Bah rien, j'ai plus d'idées de problème possible à moins d'avoir mal compris le tuto en fait ><


Alors c'est tout! Si jamais vous avez des problèmes avec ce Tutoriel, n'hésitez pas à passer dans "Problème avec mon code" pour recevoir de l'aide.

À plus !

RozenBreizh

Astuce ▬ Mettre en place les logos de partenariat dans le footer. - Jeu 29 Jan 2015 - 12:10

#css #html #footer #auteur_Rozenbrez #toutes_les_versions #phpBB2


Bonjour, bonsoir:D

Ceci est mon premier tutoriel. Après la demande de Lisou pour afficher ces partenaires dans le footer, je me suis dit que j'allais le proposer.

Dans ce tuto je vais vous montrer comment placer ces partenaires en footer de deux manières différentes. Vous avez effectivement le choix de placer vos partenaires de sorte à ce qu'ils soient visible sur toutes les pages de votre forum ou uniquement sur l'index de celui-ci.

Alors commençons:)

/!\ Je rappelle que cette section existe en cas de problème!./!\


I. Visible uniquement sur l'Index du Forum.


✘ Mise en page avec scrollbare.

Aperçus d'un potentiel rendu.

Comme vous pouvez le voir sur le screen, sur la droite de votre box il y a une scrollbare. Et aussi, la box se trouve entre votre QEEL (Qui Est En Ligne) et votre légende des nouveaux messages, pas de nouveaux messages et forum verrouillé. Ainsi votre boxe et vos partenaires ne sont visibles uniquement que su votre index.

Le HTML :
Code:
<center><div class="titre_footer">Nos Partenaires Footer.</div><div class="partenaire_footer">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div></center>


Voici donc le bout de code qu'il vous faut. Il est à placer dans le template « index_body » après la « {CHATBOX_BOTTOM} »

Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer {
background-color:#fff;
width: 620px;
height: 50px;
border: 2px solid red;
overflow: auto;
}

.titre_footer {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


Et en fin le bout de CSS associé. Il est à mettre dans la feuille de style. Vous pouvez tout changer, améliorer, mettre des effets en plus, en moins.

/!\ Ce qui met en place la scrollbare est « overflow:auto; », donc n'y touchez pas ! /!\

✘ Mise en page avec défilement.


La mise en page consiste à faire défiler les logos de la droite vers la gauche. Pour cela dans votre code HTML vous devez entourer vos logos avec la balise suivante :
Code:
<nobr><marquee> ...</marquee></nobr>


Ce qui donne :


Et dans votre CSS vous n'avez qu'à régler la hauteur de votre boxe comme bon vous semble et de retirer l'overflow.

✘✘ Variante du défilement.

Comme vue précédemment le défilement se fait de la droite vers la gauche, mais que diriez-vous de varier le défilement, de faire en sorte que lorsqu'on passe sa souris sur un logo le défilement se stop – ce qui est fort appréciable pour une clikeuse de logo partenaire comme moi xD

✘✘✘ Variante simple.

Les variantes simples seront juste de changer le sens du défilement. Au lieu d'aller de droite à gauche, pourquoi ne pas aller de gauche à droite, de bas en haut et de haut en bas. Pour cela il faut mettre un attribut à votre balise. Celui-ci sera « DIRECTION », puis vous ajouterez la direction souhaité :

Vers la gauche :


Vers la droite :


Vers le haut :


Vers le bas :


Pour définir le sens de défilement vous avez le choix entre les quatre valeurs suivantes :
- left.
- right.
- up.
- down.

✘✘✘ Variante « aller-retour ».

«Ce que j’appelle un « aller-retour » c'est le fait que sa aille à gauche puis reviens à droite et ceci à l'infini. Pour définir une variante de défilement il faut ajouter un attribut à la balise marquee qui sera « behavior ». ce qui donnera
Code:
<marquee behavior="..."></marquee>
, ce qui donne :



Pour obtenir cet effet nous allons ajouter à notre balise l'attribut « alternate » :
Code:
<marquee behavior="alternate">...</marquee>
Personnellement je conseille cette variante lorsque vous avez un petit nombre de logo à faire défiler.

✘✘ Stop Souris.

Le stop souris consiste à faire stopper le défilement au passage de votre souris.

Néanmoins ! J'ai rencontré un soucis avec le Stop souris. Et en ayant discuter avec Nihil, elle m'a fait découvert que le Stop Souris ne fonctionne pas chez tout le monde et sur tous les navigateurs. Ayant fais le test moi-même, le stop souris fonctionne parfaitement bien sous le navigateur Google Chrome, mais pas sous le navigateur Mozilla Firefox. Alors que chez Samhain cela fonction très bien sous les deux navigateurs.


La aussi il faut ajouter, non pas un, mais deux attributs qui se suivent : « onmouseover="this.stop();" » « onmouseout="this.start();" », ce qui donne :
Code:
<marquee onmouseover="this.stop();" onmouseout="this.start();"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></marquee>


✘✘ Le temps de défilement.

Vous pouvez choisir de faire défiler vos partenaires lentement, ou au contraire rapidement. La aussi on ajout un attribut à notre balise de départ : « scrollamount ». Vous définissez une valeur numérique compris en 1 et 100. A 1 vos logos défilerons très lentement et plus vous vous rapprocherez de 100 vos logos défilerons vite.

Valeur numérique de 5 :


Valeur numérique de 30 :



II. Visible sur toutes les pages du Forum (phpBB2).

Comme promis, voici comment mettre en place votre footer partenaire de sorte à ce qu'il soit visible sur toutes les pages de votre forum. Vous devez aller dans le template « overall_footer_begin ».

Prenez le code qui suit et changé intégralement le template avec.
Le HTML :
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen"><div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->


Votre morceau de code reste inchangé à la première partie :
Code:
<div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
  <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>


Le CSS :
Code:

/** PARTENAIRE Footer**/
.partenaire_footer2 {
background-color:#fff;
width: 620px;
height: 100px;
border: 2px solid red;
overflow: auto;
}

.titre_footer2 {
width: 620px;
height: 25px;
background-color:#000;
border: 2px solid red;
color: #209CC9 !important;
display: block;
font-family: Times New Roman !important;
font-size: 20px;
text-align: center;}

/** FIN PARTENAIRE FOOTER **/


La encore vous pouvez personnaliser le footer comme bon vous semble, en utilisant toutes les variantes cité plus haut.

II. Mise en page avec une image de fond.

Vous pouvez personnaliser à volonté votre footer et donc lui donner une image de fond. J'ai fait du basique pour vous montrer : Screen ou en Live.

Pour cela rien de plus simple pour les codeurs en herbe que vous êtes Very Happy Dans votre CSS vous allez changer le :
Code:
background-color : #fff;

en
Code:
background : url('METTRE ICI L'URL DE VOTRE IMAGE');


Et voilà, vous avez une image en fond ! Ah j’allai oublier ! Si vous définissez une image de fond vous devez changer la hauteur et la largeur en fonction de la taille de votre image.

Ensuite vous allez voir que vos logos sont mal positionné. Pas de problème nous allons remédier à cela. Vous allez ajouter une div dans votre code, comme ceci :
Code:
<div class="partenaire_footer2"><div class="logo_partenaires">...</div></div>


Puis dans votre CSS, vous ajoutez :
Code:
.logo_partenaires { padding : 35px ; }


Vous réglez la valeur du padding comme bon vous semble en fonction de votre image :)

Et voilà, le tuto est terminé \o/

/!\ Je rappelle que cette section existe en cas de problème!./!\

Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

RozenBreizh

Fiche de publicité en iframe. - Lun 26 Jan 2015 - 19:59

#html #fiche_pub #page_html #auteur_Rozenbrez


Bien le bonsoir ou bonjour à toute la communauté :)

Je viens vous proposer une fiche de publicité en iframe pour celles et ceux que ça intéresse :)


Html&CSS ▬ PhpBB 2
Voici un aperçus de la fiche : Fiche de publicité. (screen) ou en live.
Un petit merci fera apparaitre le code Wink

/!\ Je rappelle que cette section existe en cas de problème!./!\



Merci de ne pas retirer le copyright.


Code HTML:
Code:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>NOM DE VOTRE FORUM</title>
  <link href='http://fonts.googleapis.com/css?family=Oldenburg|Oswald|Lobster' rel='stylesheet' type='text/css' />
<style type="text/css">
.body {width: 450px; height: 760px; background-color: #338e9b;}
.text {padding: 25px; width: 430px; height: 200px; text-align: justify; color: #000423; overflow: auto; font-size: 12px; padding: 5px;}
.tableau{width:240px;}
.tableau2{color:#809399;font-family:arial;font-size:13px;margin:5px;padding: 8px;text-align: justify;border-top:3px solid #1D4565;border-bottom:3px solid #1D4565;
 background-color:#000423;height:100px;overflow:auto;} 
</style>
</head>
<body>
<center>
  <div class="body">
    <a href="URL_DE_VOTRE_FORUM"><img src="IMAGE_DILLUSTRATION" /></a>
    <div class="text">Mettre votre contexte ou un texte accrocheur!</div>
    <center>
      <table>
        <tr>
          <td class="tableau">
            <div class="tableau2">
              Mettre des infos sur votre rpg.
            </div>
          </td>
          <td class="tableau">
            <div class="tableau2">
              Mettre des infos sur le forum en général ou des liens menant à votre contexte, règlement et autres annexes utiles..
            </div>
          </td>
        </tr>
      </table>
    </center>
    <center>
      <a href="URL_DE_VOTRE_FORUM" style="color: #000423 !important; text-decoration: none !important; font-size: 18px;">PHRASE D'ACCROCHE/LOGO DE PARTENARIAT</a>
    </center>
  </div>
  </center>
  </body>
</html>



Explications:
Le code est à placer dans une feuille HTML de votre forum. Pour cela allez sur votre Panneau d'Administration. Pour avoir accès à l'onglet "Modules" il faut basculer en mode "Avancé". Puis dans votre onglet "Modules" => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancée (HTML).

Les tableaux sont à rajouter/enlever comme bon vous semble avec le morceau de code suivant:
Code:

<center>
  <table>
    <tr>
      <td class="tableau">
        <div class="tableau2">
          ✘<a href="http://antartica-rpg.actifforum.com/contact" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">La Façonneuse.(contacter)</a>
          <br />
          ✘Ouvert depuis le 20/01/2015.
          <br />
        </div>
      </td>
      <td class="tableau">
        <div class="tableau2">
          ✘<a href="http://antartica-rpg.actifforum.com/t9-reglement-du-forum#9" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Règlement.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t3-petit-guide-du-debutant#3" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Guide du Débutant.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t4-background-1-la-vie-en-duerine" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Background #1.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t14-les-races-de-duerine" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Les Races.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t24-les-classes" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Les Classes.</a>
        </div>
      </td>
    </tr>
  </table>
</center>


Puis vous validez votre feuille. Ensuite vous prenez l'url de votre feuille "URL du lien" que vous allez placer dans le code suivant :
Code:
<iframe src="PLACER_LURL_DE_VOTRE_LIEN" width="XXpx" height="XXpx" border="none" frameborder="no"></iframe>


- width="XXpx" => vous devez mettre une largeur à votre iframe, je vous conseil de mettre 10 à 15 px en plus que ce que vous avez définie dans votre feuille.
- height="XXpx" => vous devez mettre une longueur à votre iframe, je vous conseil de mettre 10 à 15 px en plus que ce que vous avez définie dans votre feuille.

Et voilà vous avez une fiche de publicité en iframe qui ira sur tous les forums Very Happy

Alumine

Enlever / déplacer les petits liens moches du forum - Jeu 8 Jan 2015 - 20:49

#html #auteur_Alumine #phpBB2


Enlever / déplacer les petits liens moches
Templates - difficulté moyenne - PHPBB2


Quand on parle des petits liens moches, on parles de ces liens :
-Dernière visite le...
-La date/heure actuelle est ...
-Le nom du forum en tout petit
-Voir les nouveaux messages depuis votre dernière visite
-Voir ses messages
-Voir les messages sans réponses

Puis, juste au-dessus du QEEL:
-Sujets actifs du jour
-Top 20 des posteurs du jour
-Top 20 des posteurs du forum
-Supprimer les cookies du forum

Bref, tous ça, ainsi que ceux d'en bas :
Spoiler:


On va donc les enlever, ou les déplacer, à votre guise (=


Index_body
Donc là, on s'attaque au petit tas de liens du bas !

Rendez vous dans le template index_body ( Affichage > templates > général )

Et supprimez ceci, qui devrait se trouver des lignes 84 à 107 si vous n'avez encore rien modifié:
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>



Index_box

Et maintenant, on s'occupe de ceux du haut Very Happy

Donc dans le template index_box, lignes 1 à 17, supprimez ceci:
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>


Et là en principe, plus de petits liens casse-pieds...

Oui, sauf qu'il y en avait quand même des utiles !

Comment les déplacer ?

C'est là que ça devient compliqué ! Donc voilà la liste des liens que vous pouvez souhaiter remettre... Personnellement j'ai viré le titre du forum, le "dernière visite le" et j'ai mis les liens restants dans un onglet de mon QEEL nommé "options"


Code:
-Dernière visite le...                          <span class="gensmall">{LAST_VISIT_DATE}<br />
-La date/heure actuelle est ...          {CURRENT_TIME}<br /> 
-Le nom du forum en tout petit        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
-Voir les nouveaux messages depuis votre dernière visite  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
-Voir ses messages                          <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
-Voir les messages sans réponses    <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><br />

puis, juste au-dessus du QEEL:

-Sujets actifs du jour                    <a href="{U_TODAY_ACTIVE}" >{L_TODAY_ACTIVE}</a><br />
-Top 20 des posteurs du jour        <a href="{U_TODAY_POSTERS}" >{L_TODAY_POSTERS}</a><br />
-Top 20 des posteurs du forum    <a href="{U_OVERALL_POSTERS}" >{L_OVERALL_POSTERS}</a><br />
-Supprimer les cookies du forum  <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a><br />


Voilà, donc les petits < br / > à la fin des lignes, c'est l'équivalent d'un retour à la ligne, donc sur le dernier lien que vous mettez, vous pouvez l'enlever !

Bon ensuite, ça dépend ce que vous voulez faire de ce petit tas de liens, mais on peut déjà le mettre dans une div !
Ca donnerait ça :
Code:

<div>
<a href="{U_TODAY_ACTIVE}" >{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" >{L_TODAY_POSTERS}</a><br />
(etc...)
<a href="{U_OVERALL_POSTERS}" >{L_OVERALL_POSTERS}</a>
</div>


A vous de l'utiliser comme vous voulez (=


Ce serait sympa de poster un petit crédit à N-U quelque part sur votre forum !
cheers

Hancok

PA pour forum RP avec image - Sam 3 Jan 2015 - 11:35

#html #css #page_accueil #effet_hover #auteur_Hancok


Hello, je vais vous proposez ma deuxième PA. Dans celle-ci vous pourrez mettre un titre en image mais aussi une image en fond. Vous pourrez également changer l'onglet "RP du moment" par " top sites" c'est vous qui voyez. Maintenant place à l'aperçu et au code.

Voici un aperçu www et voici ce que donne l'infobulle www


Le code à mettre dans vos CSS:
Code:
 /*....Page d'accueil....*/
.cadre-principal {
  display:block;
  background-image:url(http://zupimages.net/up/16/21/fqiq.png);
  background-repeat: repeat;
  background-position: top center;
  width:820px;
  height:680px;
  margin-left:-5px;
  border-radius:15px 15px 15px 15px;
  border: 3px solid #8F4835;
  text-align: center;
}
.contexte {
float:left;
display:block;
background: #945539;
height:300px;
width:250px;
position:relative;
margin-top: 40px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.bloc1{ 
overflow:auto;
margin: auto;
width:235px;
height:270px;
text-align: left;}

.image {
float:left;
display:block;
background:# ;
background-repeat: no-repeat;
background-position: top center;
height:300px;
width:370px;
position:relative;
margin-top: 65px;
margin-left: 20px;
}

.bloc2{
width: 370px;
height: 300px;
margin: auto;
}

.crédit {
float:left;
display:block;
background: #945539;
height:120px;
width:110px;
padding:5px;
position:relative;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
margin-top: 40px;
margin-left: 20px;
text-align: left;
}
.lienutile {
float:left;
display:block;
background: #945539;
height:125px;
width:110px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: left;
}
.rpmoment {
float:left;
display:block;
background: #945539;
height:100px;
width:230px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: left;
}
.new {
float:left;
display:block;
background: #945539;
height:100px;
width:300px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.bloc3{
overflow:auto;
width:300px;
height:80px;
text-align: left;
margin: auto;}

.staff {
float:left;
display:block;
background: #945539;
height:100px;
width:180px;
padding:5px;
position:relative;
margin-top: 20px;
margin-left: 20px;
border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
text-align: center;
}
.partenaire {
float:left;
display:block;
background: #945539;
height:50px;
width:770px;
padding:5px;
margin-top: 20px;
margin-left: 20px;
position:relative;

border-top: 3px solid #8F4835;
border-bottom: 3px solid #8F4835;
border-radius:0px 0px 0px 0px;
}
.titre2 {
  color:#4A1C00;font-size:30px;
  text-align:center;text-shadow:1px 1px 0px #fff;font-style: italic;
  font-family: 'Great Vibes', sans-serif;
  font-weight: 700;
  margin-top:-20px;}
div.infobulle{
position: relative;
display: inline-block;

}

div.infobulle span{
display: none;

}

div.infobulle:hover{
background: none;
z-index: 999;
}

div.infobulle:hover span
{
display: inline;
position: absolute;
top: 10px; left: 6px;
}
div.infobulle span{
  background: #8F4835;
  width: 50px;
  height: 70px;
  border: 1px solid #fff;
  border-radius:10px 10px 10px 10px;
 
}
/*....fin page d'accueil....*/


Code à mettre dans votre page d'accueil (HTML):
Code:
     
<div class="cadre-principal">
                                                                       <link href="https://fonts.googleapis.com/css?family=Great Vibes" rel="stylesheet" type="text/css" />                                                                   
   <div>
            <img src="http://zupimages.net/up/16/21/b84x.png" />                         
   </div>
                                                                                                
   <div class="contexte">
                                                                                                         
      <div class="titre2">
                                                                                     Le concept                                                       
      </div>
                                 
      <div class="bloc1">
                                                                   Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.        Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.                 
      </div>
                                                           
   </div>
                                                                                  
   <div class="image">
                               
      <div class="titre2">
                                                                                                                                          
      </div>
                 
      <div class="bloc2">
                             <img style="width: 370px; height: 300px;" src="http://zupimages.net/up/16/21/1cbt.png" />             
      </div>
                                         
   </div>
                                                                              
   <div class="crédit">
                                                                                 
      <div class="titre2">
                                                                             Crédits                                                       
      </div>
                                                            <br />Forum @...  <br /> PA @<a href="http://www.never-utopia.com/" class="postlink" target="_blank" rel="nofollow">Hancok</a> <br /> Design @... <br /> Catégorie @... <br /> Qeel @... <br />                                                                                   
   </div>
                                                                      
   <div class="lienutile">
                                                                                                           
      <div class="titre2">
                                                                       Liens                                                     
      </div>
                                                    <br /><a href="lien du règlement">Le règlement</a>  <br /> <a href="lien des règles">Les règles d'écriture</a> <br /><a href="lien de la présentation">Présentation</a> <br />                                                                                                                                           
   </div>
                                                            
   <div class="rpmoment">
                                                                                   
      <div class="titre2">
                                                                               Les rp du moments                                                                     
      </div>
                                                                <a href="Lien du rp">Titre du rp</a>                                                             
   </div>
                                                                        
   <div class="new">
                                 
      <div class="titre2">
                                                                               Les nouveautés                                                                   
      </div>
                                                                                                         
      <div class="bloc3">
                                                               ¤00/00/00: .... <br />¤00/00/00: ...<br /> ¤00/00/00: ... <br />¤00/00/00:... <br />¤00/00/00 <br />¤00/00/00 <br />                                                 
      </div>
                                                                                     
   </div>
                                                                            
   <div class="staff">
                                                                               
      <div class="titre2">
                                                                           Le staff                                                                   
      </div>
                                                                                               
      <div class="infobulle">
                                                           <img src="http://img4.hostingpics.net/pics/171727ympapa.png" /><span>Pseudo  </span>*                                               
      </div>
                                                                                           
      <div class="infobulle">
                                                           <img src="http://img4.hostingpics.net/pics/423743roypa.png" /><span>  Pseudo</span>*                                               
      </div>
                                                                                             
      <div class="infobulle">
                                                           <img src="http://i39.servimg.com/u/f39/11/27/81/85/ava_pa10.png" /><span>  Pseudo  </span>                                                 
      </div>
                                                                           
   </div>
                                                                          
   <div class="partenaire">
                                                                           
      <div class="titre2">
                                                                             Les partenaires                                                                 
      </div>
                                                                                             
      <marquee direction="left" scrollamount="5" scrolldelay="3" onmouseover="this.stop();" onmouseout="this.start();">
                                                           <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Image hébergée gratuitement chez " border="0" /></a>-<a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a> <a target="_blank" href="http://www.never-utopia.com/" title="Hebergeur d'image"><img src="http://img4.hostingpics.net/pics/120350miniban.jpg" alt="Hebergeur d'image" border="0" /></a>                             
      </marquee>
                                                                           
   </div>
   <div class="clear">
   </div>
                                                                                
</div>


Attention pour l'image du titre ne pas dépasser la taille suivante (mais vous pouvez faire plus petit) pour ne pas déformer la PA: 800*80


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.

NyoTheNeko

[Invision & PHPBB2] Coder un cadre autour du forum en images - Ven 2 Jan 2015 - 12:58

#html #css #css3 #auteur_NyoTheNeko #phpBB2 #Invision


[Invision & PHPBB2] Coder un cadre autour du forum en images



Je comprends rien à ton titre...

Oui, le titre n'est pas le plus clair du monde, mais grâce à la gentillesse extrême de Gravity et Hismé, laissez-moi vous expliquer ce dont je veux parler! Ou plutôt même: vous montrer. En effet, voici donc ce que je vais vous apprendre à faire. Imaginez que Gravity vous fasse une superbe maquette comme pour la commande de Hismé pour Heiwa et que GASP! Mais il y a un cadre autour du forum! Voyez seulement:
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 1413738489-maquette1

Et là, vous vous demandez comment vous allez faire, parce qu'il y a un haut, un bas, et surtout, un motif de pierres qui doit se répéter... et si le motif ne se répète pas à la bonne hauteur, vous faite comment? Et là il faut toucher aux templates et tout ça, et ça va pa bien s'adapter à l'écran des gens avec une taille fixe, et ça va pas le faire et... FAUX!
En réalité, c'est très facile.

Bref, c'est peut-être un peu difficile de voir comment faire, c'est pourquoi j'écris... ce tuto! YOUPI! =D

Cependant, je vous conseille de lire le tuto sur les sélecteurs de Manumanu qui vous sera utile, vu que nous utilisons des :before et :after. Sinon, tout le reste sera expliqué.


Pour le PHPBB2


On commence tout de suite avec la plateforme la plus utilisée: le PHPBB2. Vous verrez, c'est aussi la plus "simple" des deux Wink

Le HTML


Il n'y a pas de HTML à faire. Vraiment, rien, nada. C'est pour ça que c'est si facile! Cependant, il y a quelques trucs que vous pouvez faire, simplement pour vous faciliter la vie par la suite. La plupart de ces choses n'ont même pas besoin de toucher du HTML.

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates.
Là vous allez sous Affichage -> Templates -> Général -> overall_header et vous suprimez ce petit bout de code:
Code:
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>


À la limite, vous pouvez également simplement supprimer les balises br dans ce code, mais si de toute façon vous ne voulez pas afficher la description et le nom du forum, autant les retirer complètement Wink


Le CSS


Là c'est le plus long! Évidemment, vous devez avoir les images à disposition pour le haut, le bas et le centre qui se répète.

Mais d'abord, commençons par le commencement. Première ligne du CSS:
Code:
/* Pour l'adaptivité du design par rapport à l'écran. */
.bodylinewidth {
  width: 100%;
}


Comme je l'ai écrit dans mon petit commentaire, cette ligne très simple permet de faire en sorte que l'intérieur du forum va s'adapter à la taille de l'écran, en prenant simplement toute la largeur du forum. Normalement, le bodylinewidth prend la largeur que vous lui avez indiqué dans Général -> Forum -> Configuration -> Largeur du forum (nombre ou %) :. Mais là, en gros, on lui dit de ne pas le rendre en compte.

Bon là, forcément, votre forum ressemble à plus grand chose, du coup on va redonner la largeur que l'on veut au forum en ajoutant ceci:
Code:
/* Permet que l'intérieur du corps de page soit plus petit que le cadre */
#page-body .three-col {
  margin: auto;
  width: 890px;
}

En gros, on redonne une taille "normale" à tout ce qui doit se trouver dans le cadre et on le centre.

Bon, tout ça c'est super, mais maintenant, il est temps de mettre en place la bannière et le forum. Voici donc le code très important:
Code:
/* Permettra de placer la bannière et le footer correctement. */
.bodyline {
  position: relative;
  z-index: 2;
  padding: 0px;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
}


Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire ne sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent n'est tout simplement pas dessus! Pas de panique, on va encore s'occuper de ça, mais d'abord, mettons en place le corps de page!

Code:
/* Le cadre du corps de page. */
#page-body {
  margin: auto;
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
}


Vous voyez donc que l'on change d'élément sur lequel on applique, mais en gros, on entoure le corps, on met un width: 100%; (pour s'adapter à toute largeur d'écran), et on fait se répéter le background seulement sur l'axe des y (donc verticalement). Maintenant, votre forum ressemble déjà un peu plus à l'encadrement que vous devriez avoir! Cependant, bien sûr, la bannière est encore au-dessus du logo, et le bas de votre forum ne touche pas le milieu. Embêtant, mais facilement corrigeable à l'aide des margin!

Cependant, avant de nous amuser avec les margin, changeons la taille du logo pour qu'il ait la bonne hauteur et largeur (toute la hauteur de la bannière donc).

Chez moi, ça donne ça:
Code:
/* Taille du logo "fictif" pour rendre la bannière clickable */
#i_logo {
  height: 933px;
}


Bien sûr, chez vous la taille peut être différente.

Il faut le faire avant de jouer avec les margin, car la hauteur du logo détermine aussi la taille de la margin: plus le logo est grand, plus le margin le sera aussi.


Reprenons donc le code que nous avions avant, et ajoutons-y des margin (les miennes sont tout à la fin de chacun des deux bouts de code):
Code:

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:before {
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: -955px;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.bodyline:after {
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  margin-top: -46px;
}


Mettez toujours les margin-top, margin-bottom, margin-left ou margin-right après les margin: tout court. En effet, sinon, votre margin-top/bottom/left/right ne sera pas prit en compte!


Ert voilà, votre forum est dans un joli cadre! =D

Cependant, si vous n'avez pas retiré la couleur du cadre de bodyline, vous remarquerez que le cadre n'arrive pas vraiment jusqu'au bout de votre page de navigateur... C'est normal, parce que le body a une marge, et le bodyline a un cadre!

On peut donc retirer tout ça en mettant ceci dans le CSS:
Code:
body {
  margin: 0px;
}

.bodyline {
  border: 0px solid;
}



Le Javascript


Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement!

Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 1420199588-untitled
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript,nommez-le quelque chose comme "Multiplication en taille du page-body" cochez sur toutes les pages.

Puis vous y mettez:
Code:
$(function() {
    $div = $('#page-body');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de page-body.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de page-body, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à page-body.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui est fait et tout simple pour PHPBB2!



Pour Invision


Invision est une des plateformes que j'utilise personnellement le plus, parce qu'il n'y a pas vraiment de tableaux. Du coup c'est la deuxième version que je vais vous montrer, et je ne vais pas vous montrer pour les autres versions. Désolée!

Le HTML


Ici, c'est légèrement plus difficile que pour le PHPBB2, car il y a deux templates sur lesquels on va devoir modifier quelque chose. En réalité, on ajoute une seule et même div, cependant, vu que la div s'ouvre sur overall_header, il faut la fermer sur overall_footer_begin !

Cherchez dans votre template overall_header ceci:
Code:
</div>
<div id="submenu">


Il vous suffit alors d'ouvrir une div entre deux en lui donnant une class, comme par exemple:
Code:
</div>
<div id="contour_forum">
   <div id="submenu">


Maintenant, dans overall_footer_begin, tout à la fin du template, vous avez ceci:
Code:
</div>
<!-- END html_validation -->


Rajoutez-y simplement une div fermante, comme ceci:
Code:
</div>
</div>
<!-- END html_validation -->


Et voilà qui est terminé pour la partie compliquée!

Pour la partie simple, nous avons pareil pour que le PHPBB2, donc je vous le remets ici:

La première: mettre une image transparente dans Affichage -> Images et Couleurs -> Gestion des images -> Mode Avancé -> Logo du forum. Peu importe sa taille, suffit qu'elle soit transparente, vu que la taille est modifiable dans le CSS Wink

La seconde: Centre le logo et la barre de navigation en allant dans Affichage -> Page d'accueil -> En-tête & Navigation et cocher "Centré" à Position du logo ET Position du menu.

Mettez également la bonne couleur de fond à votre forum, la même que celle qui sera autour de votre cadre, optimalement.

Maintenant, une autre chose que vous pouvez faire pour retirer des break intempestif, c'est de toucher aux templates. Je vous laisse jouer avec Razz


Le CSS


Plus compliqué tout de même que le HTML, le code reste cependant assez simple et similaire à sa version du PHPBB2, à quelque changements près!

Commençons tout de suite par mettre les images de bannière et de footer du forum:
Code:
/* Permettra de placer la bannière et le footer correctement. */
.container_IE {
  position: relative;
  z-index: 2;
  padding: 0px;
  background-color: #A5C9E9;
}

/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
}

/* Met en place le footer. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:after {
  background-image: url("http://img110.xooimage.com/files/b/0/1/footer3-4875eec.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 700px;
  width: 100%;
  margin: auto;
}


Expliquons donc ce code, parce que sinon, vous n'allez rien comprendre. (Enfin peut-être que si, mais avec explications c'est plus sympas x) )

Tout premièrement, on met en position: relative et un z-index plus haut ce sur quoi on applique le before et after. Cela va nous permettre après de le placer correctement (bien qu'on utilise pas d'absolute), surtout pour pouvoir faire passer le corps de page au-dessus du before et after sans trop de peine, notamment le logo.

Ensuite, vous remarquerez que le :before et :after ont tous deux un width: 100%; C'est tout simplement pour faire en sorte que cela s'adapte à l'écran. Pas beaucoup de surprise non plus au niveau du height, qui est simplement la hauteur de l'image de votre haut, respectivement bas du cadre du forum. Ne prenez donc pas les valeur que j'ai mise mais mettez celle de vos images, sinon ça ne va évidemment pas marcher!

Vous vous dites probablement que le content: '' et le display block ne sont pas important. Mais c'est tout le contraire. Un :before u un :after ne s'affichera tout simplement pas s'il n'y a pas de "content: '' " et le display block nous permet de le faire agir comme un div. Sinon, encore une fois, impossible de le voir s'afficher ainsi. Ils sont donc très importants, et à garder!


Cependant, vous verrez tout de suite un problème, notamment par rapport à la partie du haut de votre cadre... eh bien le logo transparent a un fond, tout d'abord, et il ne se met pas au-dessus de l'image de bannière!

On va donc tout de suite régler notre premier problème:
Code:
/* On met la bannière é la bonne largeur et au bon endroit */
#logostrip {
  max-width: 797px;
  margin: auto;
  height: 568px;
  background: none !important;
}

#logostrip img {
  width: 797px;
  height: 600px;
}

div#logostrip #logo {
  margin: 0px;
}


Expliquons rapidement son code. Sur Invision, le logo est dans deux div: #logostrip et #logo. #logo a une marge qui est mise automatiquement, une marge que je retire dans le CSS, et #logostrip doit être mit au centre (avec margin-auto). Je mets aussi une largeur et une hauteur à notre image du logo (pour qu'elle prenne toute la hauteur de la bannière et une bonne largeur. Et enfin, je retire la couleur de fond à notre logo, avec le background:none!

Maintenant, occupons-nous du corps du forum!
Code:
/* Mettre le fond au reste */
#ipbwrapper {
  margin: auto;
  width: 100%;
  padding: 0px;
}

/* On met le centre en place */
#contour_forum {
  width: 100%;
  background-image: url('http://img110.xooimage.com/files/6/3/e/bg2-4875f11.jpg');
  background-repeat: repeat-y;
  background-position: center;
  margin-top: 100px;
}


Ici c'est simple, on met un width: 100% à ipbwrapper pour qu'il s'adapte à la taille de l'écran et on retire tout padding, ensuite, on utilise la div qu'on a créée pour mettre l'image de fond qui se répète verticalement, en mettant un width de 100% pour qu'elle s'adapte à toute taille d'écran.

Maintenant, vraiment, on n'a plus qu'un seul problème: tout ce qui est à l'intérieur prend toute la largeur... vraiment pas pratique, et pas franchement ce qu'on veut!

Du coup, une seule solution: mettre une largeur max à tout ce qu'il y a à l'intérieur et un joli margin: auto pour que ça se centre:
Code:
/* On force le reste à être plus petit et rentrer dans le cadre. */
#submenu, #userlinks, #clearfix, #gfooter, p.center, #emptyidcc {
  position: relative;
  max-width: 790px;
  margin: auto;
  left: 3px;
}


Le left: 3px est mit parce qu'en réalité, sur Invision, tout est un tout petit peu décalé. Rien de bien grave donc, qui ne peut être corrigé avec un petit position: relative!

Et à présent, vient donc le moment de retirer tout trou béant entre le header et notre corps,ou le footer et notre corps. Dans mon cas, le footer est déjà collé au corps, donc je n'y touche pas (mais vous pourriez simplement ajouter un margintop négatif à .container_IE:after ), alors il me suffit de changer le .container_IE:before.

Cela donne donc ceci :
Code:
/* Met en place la bannière. Le width: 100% permet de rendre ça adaptif à a taille de l'écran */
.container_IE:before {
  z-index: 1;
  background-image: url("http://img110.xooimage.com/files/8/9/e/header4-487e0dc.jpg");
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 992px;
  width: 100%;
  margin: auto;
  margin-bottom: -711px;
}


Et voilà le CSS qui est terminé!


Le Javascript


Le Javascript pour Invision est le même que celui de PHPBB2 à un détail près: il s'applique sur #contour_forum ! Du coup, je copie-colle juste ce qu'il y a plus haut en changeant ce détail (parce que j'ai la flemme =P)

Bon c'est bien beau tout ça, vous avez un joli cadre et tout, mais... Le centre ne se répète pas correctement! Et si par malheur vous n'avez pas la bonne taille à l'intérieur du cadre, eh bien ça peut mal se répéter et mal "fusionner" avec le footer, et vous donner un truc comme ça:
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 1420199588-untitled
Pas génial hein?

Eh bien avec ce script, ce n'est plus un problème!

Allez sous Modules -> HTML & JAVASCRIPT -> Gestion des codes Javascript -> Créer un Nouveau Javascript, nommez-le quelque chose comme "Multiplication en taille du contour_forum " cochez sur toutes les pages.

Puis vous y mettez:
Code:
$(function() {
    $div = $('#contour_forum');
    var remainder = $div.height() % 201;
    var newHeight = $div.height() + (201-remainder);
    $div.css('height', newHeight);
});

Ici, le 201 correspond à la hauteur de mon image qui se répète au centre. Donc, si votre image ne fait que 100px, replacez le 201 par 100!


En gros, voilà ce que ce code dit, ligne par ligne.
- Prendre la div du nom de contour_forum.
- Calculer ce qui reste de la division entre la hauteur de ce div et 201 (qui est la hauteur de mon image de répétition).
- Ensuite, créer une nouvelle hauteur en prenant la hauteur actuelle de contour_forum, et en y ajoutant la différence entre 201 et le reste que je viens de calculer.
- Appliquer cette nouvelle hauteur à contour_forum.

Et tadaaa! ça se répète tout bien! =D

Et voilà qui sonne la fin de ce tuto! ^w^

Nihil Scar Winspeare

Bloc de partenaires décalés, zoom au survol - Mar 23 Déc 2014 - 0:42

#html #css #effet_hover #transition #auteur_Nihil_Scar_Winspeare


Hello hello,

Un petit libre service pour afficher la liste de ses partenaires, créé à la demande de 1charlotte qui a réalisé le schéma.

Informations


Rendu visuel :




  • Largeur du bloc : 791px.

  • Les images de partenaire font 88px * 31px.

  • 7 partenaires par ligne


Vous pouvez personnaliser le crédit vers Never Utopia, mais ne l'enlevez pas ♥


Les codes


Les codes ne sont pas sous hide, vous pouvez les tester directement.
Mais si vous le souhaitez, un merci est toujours accepté, personne ne vous mangera.
Et ça fait toujours plaisir (◕‿◕✿)


HTML :
Vous pouvez le placer où vous souhaitez dans vos templates, une page html, la PA...

Spoiler:


Le CSS
PA > Affichage > Couleurs > Feuille de style CSS

Spoiler:


En cas de problème ou de difficulté à personnaliser, il y a une partie "Un problème en codage" qui est là pour ça. ☺


Placement

Par exemple pour le mettre en dessous du QEEL et de la chatbox du bas, on peut le mettre dans le template index_body après les lignes
Code:
{CHATBOX_BOTTOM}
<br clear="all" />


Ce qui peut donner :
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 GJInaN2



On peut aussi mettre le code dans un message d'accueil (PA > Affichage > Page d'accueil > Généralités)
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 N0gIb0e

Onyx

Fiche de pub Multicolor - Sam 20 Déc 2014 - 23:43




Fiche de pub Multicolor


Voici une fiche de pub faite suite à la demande de Narakye.

Pour voir l'aperçu : cliquez ici.

Ce tutoriel est en 2 étapes :
> Création de la page html.
> Mise en place d'un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.

Pour utiliser ce tutoriel, il faut être fondateur ou administrateur de forum ou avoir accès à un endroit où vous pouvez héberger une page HTML.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Page HTML


Premièrement, nous doit créer une page HTML. Pour cela, on va dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des pages HTML

Ensuite, nous devons choisir l'option de création "Création en mode avancé (HTML)". Nous devons choisir un titre quelconque, puis s'assurer que les options suivantes sont cochées :

Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON

Dans le contenu, nous allons mettre notre page de pub.
Code:
<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Fiche de pub</title>
    <style type="text/css">
      /*Enleve les marges inutiles*/
      body {
        margin: 0px;
      }
     
      /*Liens de la fiche*/
      a {
        color: #ffffff;
        text-decoration: none;
      }
      a:hover {
        color: #000000;
      }
     
      /*Cadre de la fiche*/
      .pub_cadre {
        width: 738px;
        height: 770px;
        margin: auto;
        background-image: url('http://img11.hostingpics.net/pics/571798cadre.png');
        padding-top: 72px;
        text-align: center;
        font-family: arial;
        font-size: 13px;
        color: #545454;
      }
     
      /*Image du haut de la fiche*/
      .pub_image_top {
        position: relative;
        width: 450px;
        height: 310px;
        margin: auto;
        border-radius: 105px 105px 0px 0px;
        box-shadow: 0px 0px 10px #353535;
        z-index: 1;
      }
     
      /*Corps de la fiche*/
      .pub_body {
        position: relative;
        background-image: url('http://img11.hostingpics.net/pics/367932fond.png');
        width: 450px;
        height: 365px;
        margin: auto;
        padding-top: 15px;
        text-align: center;
        z-index: 2;
      }
     
      /*Bloc avec image qui glisse*/
      .pub_bloc1 {
        position: relative;
        width: 400px;
        height: 86px;
        margin: auto;
        border: 2px solid white;
        background-color: white;
        border-radius: 5px;
        text-align: left;
        overflow: hidden;
      }
      /*Texte derrière image qui glisse*/
      .pub_bloc1_text {
        width: 390px;
        height: 76px;
        background-color: #dfdfdf;
        padding: 5px;
        overflow: auto;
        text-align: justify;
      }
      /*Image qui glisse*/
      .pub_bloc1_img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 400px;
        height: 86px;
        border-radius: 5px;
        transition: all 1s;
        -webkit-transition: all 1s;
      }
      /*Glissement de image*/
      .pub_bloc1:hover .pub_bloc1_img {
        left: 450px;
      }
     
      /*Fond bleu du bloc qui change de contenu*/
      .pub_bloc2 {
        position: relative;
        width: 404px;
        height: 209px;
        background-image: url('http://img11.hostingpics.net/pics/130557fond2.png');
        border-radius: 5px;
        margin: auto;
      }
     
      /*Bloc qui change de contenu*/
      .contenu_pubonglet {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 363px;
        height: 169px;
        background-color: #dfdfdf;
        border-radius: 4px;
        padding: 5px;
        text-align: justify;
        overflow: auto;
        display: none;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
      }
     
      /*Barre bleu du bas*/
      .pub_bloc3 {
        width: 450px;
        height: 35px;
        margin: auto;
        background-color: #3f87e1;
        text-align: center;
      }
      .pub_bloc3 a {
        display: inline-block;
        font-size: 20px;
        font-family: monotype corsiva;
        margin: 8px;
        margin-left: 30px;
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //<!--
        function change_pubonglet(name)
          {
            document.getElementById('pubonglet_'+anc_pubonglet).className = 'pubonglet_0 pubonglet';
            document.getElementById('pubonglet_'+name).className = 'pubonglet_1 pubonglet';
            document.getElementById('contenu_pubonglet_'+anc_pubonglet).style.display = 'none';
            document.getElementById('contenu_pubonglet_'+name).style.display = 'block';
            anc_pubonglet = name;
          }
      //-->
    </script>
    <div class="pub_cadre">
      <img src="URL_DE_IMAGE_DU_HAUT" alt="Image haut" class="pub_image_top" />
      <div class="pub_body">
        <div class="pub_bloc1">
          <div class="pub_bloc1_text">
            Texte derrière l'image.
          </div>
          <img src="URL_DE_IMAGE_DU_MILIEU" alt="Image milieu" class="pub_bloc1_img" />
        </div>
        <span class="pubonglet_1 pubonglet" id="pubonglet_Initial" onmouseover="javascript:change_pubonglet('Initial');"></span>
        <img src="http://img11.hostingpics.net/pics/436524histoire.png" alt="Image histoire"  class="pubonglet_0 pubonglet" id="pubonglet_Histoire" onmouseover="javascript:change_pubonglet('Histoire');" />
        <img src="http://img11.hostingpics.net/pics/396239staffstats.png" alt="Image staff" class="pubonglet_0 pubonglet" id="pubonglet_Staff" onmouseover="javascript:change_pubonglet('Staff');" />
        <img src="http://img11.hostingpics.net/pics/598703merci.png" alt="Image merci" class="pubonglet_0 pubonglet" id="pubonglet_Merci" onmouseover="javascript:change_pubonglet('Merci');" />
        <div class="pub_bloc2">
          <div class="contenu_pubonglet" id="contenu_pubonglet_Initial">
            Passez sur les mots pour voir leur contenu ~
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Histoire">
            Contenu de l'onglet Histoire.
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Staff">
            Contenu de l'onglet Staff
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Merci">
            Contenu de l'onglet Merci
            Crédit : Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
          </div>
        </div>
      </div>
      <div class="pub_bloc3">
        <a href="LIEN_DU_REGLEMENT" target="_blank">
          Règlement
        </a>
        <a href="LIEN_DES_PREDEFINIS" target="_blank">
          Prédéfinis
        </a>
        <a href="LIEN_DE_NOUS_REJOINDRE" target="_blank">
          Nous rejoindre
        </a>
      </div>
    </div>
    <script type="text/javascript">
      //<!--
        var anc_pubonglet = 'Initial';
        change_pubonglet(anc_pubonglet);
      //-->
    </script>
  </body>
</html>


Une page HTML peut être modifiée en tout temps et les modifications qui y sont apportées sont aussi apportées là où vous avez posté l'iframe de la page HTML.



2. Iframe


Nous avons maintenant une page HTML contenant une fiche de pub. Sauf que si on la laisse là, ce n'est pas trop utile. Alors aux endroits ou nous vondrons mettre la fiche de pub, on va mettre un iframe contenant le lien de notre page HTML.

Quand on enregistre une page HTML et qu'on retourne dans la gestion des pages HTML, on a, dans la deuxième colone, ce qu'on appelle "URL du lien". C'est le lien de votre page HTML.

Pour l'iframe, il s'agit du code qui va suivre. Vous copiez/collez le "URL du lien" de votre page HTML là où c'est écrit en majuscules qu'il faut le mettre et vous postez l'iframe là où vous voulez l'utiliser ^^
Code:
<iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" style="margin: auto; display: block; border: none; width: 738px; height: 842px;"></iframe>



C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Akina-chan

Fiche de pub futuriste - Jeu 11 Déc 2014 - 14:57

#html #fiche_pub #effet_hover #auteur_Akina-chan


Coucou ! Je vous propose une fiche de pub :)

Un p'tit aperçu de celle-ci en image :
Tag html sur Never Utopia - graphisme, codage et game design - Page 5 8bw1

Elle te plaît ? Les codes sont à toi :)
Code:
<style type="text/css">.fond {width: 650px; background-image: url('http://zupimages.net/up/14/23/x35y.jpg'); border: 3px solid #ffffff; color: #ffffff; font-size: 20px; margin: auto;} .nom_forum {font-family: 'Audiowide', cursive; font-size: 40px; color: #ffffff; text-align: center; display: block;  margin-right: auto; margin-left: auto; margin-top: -10px;} .conteneur {margin: auto; position: relative; height: 100px; width: 100px; overflow: visible; display: inline-block;} .contenu_bulle {width: 100px; height: 102px; background: #004d50; opacity: 0; overflow: auto; -webkit-transition: 0.5s all linear; transition: 0.5s all linear; font-family: Unica One; font-size: 12px; text-align: justify; position: absolute; top: 0em;} .contenu_bulle:hover {opacity: 0.7;} .contenu_bulle a {color: #000000;}</style>
<div class="fond"><img style="width: 650px;" alt="image" src="http://zupimages.net/up/14/50/0p5m.png" />
  <span class="nom_forum">Atlantis Insurrection</span>
<table style="position: relative; top: -4em;"><tr><td style="width: 30%; font-family: 'Iceland', cursive;"><img alt="" border="0" src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />AI, c'est :
  <div style="border: 2px solid #004d50;"><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Bientôt 2 ans de RP ;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />103 Héros;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Le forum où vous créez votre Héros;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Un Univers sombre et dangereux;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Des Missions (MJ) et Intrigues;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Un Système de compétences;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Une gestion du gène ATA.</div><br /></td>
<td colspan="2" style="width: 70%; font-family: 'Iceland', cursive;"><img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Contexte :   
  <div style="border: 2px solid #004d50; height: 168px; overflow: auto;"> « Chacun d'entre vous s'est proposé pour cette mission et vous représentez une douzaine de pays. Vous êtes les les meilleurs et les plus brillants du monde et à la vue de cette aventure dans laquelle nous allons nous embarquer, vous êtes aussi les plus courageux.<br />J'espère que nous reviendrons tous un jour en ayant découvert un tout nouveau domaine à explorer pour l'Humanité, mais comme vous le savez tous, nous pourrions ne jamais revenir chez nous.<br />Je vous offre à tous une chance de retirer votre participation...<br />...<br />Commencez la séquence d'ouverture ! »</div>
<img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Actuellement sur AI :   
  <div style="border: 2px solid #004d50;"><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté; <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté; <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté; <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté.</div></td></tr>

<tr><td style="font-family: 'Iceland', cursive;" colspan="3"><img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Nous recherchons :
     
<div class="conteneur"><img style="border: 2px solid #004d50;" src="http://www.myfconline.com/character_avatars/9050_22528.gif" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://staceyuk.chaotic-creative.com/coppermine/cpg1416/albums/wpw-20080214/thumb_mckay_plain.png" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://img.photobucket.com/albums/v17/LoveEmpress/MyIcons3/lizabethdaily_2weekch_10.png" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://kaisa12.bloxode.com/images/miniature/113588688139.jpg" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://www.dreamwidth.org/userpic/164424/168770" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://www.hollow-art.com/files/bases/2014/08/20140810/19720/Rhona%20Mitra%20in%20Strike%20back-2517880.png" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div></td></tr>



<tr><td colspan="3" style="font-family: 'Iceland', cursive;"><img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Quelques liens :

<img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Contrat de confidentialité</a> <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Contexte</a> <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#"></a><a rel="nofollow" target="_blank" class="postlink" href="#"><span style="color: red;"> Se porter candidat </span></a><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Poser une question</a> <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Persos vacants</a>

<div style="text-align: center;"><a href="http://www.never-utopia.com/">Never Utopia</a></td></tr></table></div>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Audiowide|Iceland" />


Voilà ! Profitez bien <3

Onyx

Qeel à onglets fantasy - Sam 22 Nov 2014 - 0:07

#html #css #qeel #effet_hover #phpBB2 #auteur_Onyx


Qeel à onglets fantasy



Voici un petit LS d'un qeel à onglets que j'ai fait pour la demande de The One Pandemonium et que j'ai un peu remanié.

Pour voir l'aperçu, onglet "nains" actif : cliquez ici.
Pour voir l'aperçu, onglet "elfes" actif et survol de l'image du groupe : cliquez ici.

Ce LS est en trois parties.
  • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  • Puis, nous allons le mettre en forme à l'aide du CSS.
  • Enfin, nous allons voir comment changer les textes préprogrammés dans le qeel.


La largeur du Qeel est de 800 pixels et l'image des groupes (celle tout en bas) fait 800x200 pixels.


Mettre un crédit vers Never-Utopia est obligatoire.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





1. Corps du qeel (Template Index_Body)



Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 221 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' />
<div id="qeel">
 
  <div id="qeel_info_members">
    <span id="totaluser">{TOTAL_USERS}</span>
    <span id="totalpost">{TOTAL_POSTS}</span>
    <span id="newuser">{NEWEST_USER}</span>.
    <span id="totalonline">{TOTAL_USERS_ONLINE}</span>.
    <div id="userlists">
      <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
      <div  id="totalconn"><table cellspacing="0" cellpadding="0">{L_CONNECTED_MEMBERS}</table></div>
    </div>
    <div id="qeel_title">
      Qui va là?
    </div>
   
    <script type="text/javascript">
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nos");
      document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"guerriers");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"ont gagné");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"batailles");
      document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"bataille");
      document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et notre plus nouvelle recrue est");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Il y a");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"aventuriers qui parcourent nos terres, dont");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"aventurier qui parcourt nos terres, dont");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"guerriers");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"guerrier");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"fantômes");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"fantôme");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"inconnus");
      document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"inconnu");
      document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Guerriers présentement sur nos terres");
      document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés/,"Guerriers ayant été présents");
    </script>
  </div>
 
  <div id="qeel_bottom">
   
    <script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
    </script>
   
    <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onclick="javascript:change_qeelonglet('Groupe1');">
      <font color="#5e90c4">Groupe 1</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onclick="javascript:change_qeelonglet('Groupe2');">
      <font color="orange">Groupe 2</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onclick="javascript:change_qeelonglet('Groupe3');">
      <font color="#4dc740">Groupe 3</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onclick="javascript:change_qeelonglet('Groupe4');">
      <font color="#6e4819">Groupe 4</font>
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onclick="javascript:change_qeelonglet('Groupe5');">
      <font color="#c50c0c">Groupe 5</font>
    </span>
   
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
      <img src="url_image_groupe_1" alt="Image du groupe 1" />
      <div class="qeel_desc">
        Description du groupe 1
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
      <img src="url_image_groupe_2" alt="Image du groupe 2" />
      <div class="qeel_desc">
        Description du groupe 2
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
      <img src="url_image_groupe_3" alt="Image du groupe 3" />
      <div class="qeel_desc">
        Description du groupe 3
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
      <img src="url_image_groupe_4" alt="Image du groupe 4" />
      <div class="qeel_desc">
        Description du groupe 4
      </div>
    </div>
    <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
      <img src="url_image_groupe_5" alt="Image du groupe 5" />
      <div class="qeel_desc">
        Description du groupe 5
      </div>
    </div>
   
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>
   
  </div>
</div>


Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par deux manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe.

Les noms des groupes ressemblent à ceci :
Code:
<span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onclick="javascript:change_qeelonglet('Groupe5');">
      <font color="#c50c0c">Groupe 5</font>
    </span>


Quant aux descriptions des groupes, elles correspondent à ceci :
Code:
<div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
      <img src="url_image_groupe_5" alt="Image du groupe 5" />
      <div class="qeel_desc">
        Description du groupe 5
      </div>
    </div>





2. Mise en forme (CSS)



Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/





3. Personnaliser les textes (Template Index_Body)



De base, ForumActif a des phrases déjà formatées pour le qeel.
Par exemple, il y a "Nous avons X membre enregistré", "Nos membres ont posté un total de X messages" ou encore "L'utilisateur enregistré le plus récent est NOM".

Dans mon qeel, j'ai modifiés ces phrases pour que cela donne "Nos X guerriers" "ont gagné X batailles" et "et notre plus nouvelle recrue est Admin".


Mais peut-être que vous n'aimez pas ces phrases ou que vous voulez les adapter autrement. Alors direction le template "Index_body"!

Vous trouverez à plusieurs endroits des parties de code qui ressemblent à ceci :
Code:
<script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"et notre plus nouvelle recrue est");</script>


Ce sont ces bouts de codes qui viennent modifier les phrases préfabriqués de ForumActif. Donc pour commencer, il faut tout d'abord regarder sur quelle phrase préfabriquée le code agit.

Pour cela, nous allons regarder le début du code où il y a :
Code:
document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.



Ce qu'il y a entre parenthèses correspond l'id de la phrase qui est affectée.
Le "newuser" veut donc dire que cela affecte la phrase :
"L'utilisateur enregistré le plus récent est NOM".


Dans ce qeel, chaque phrase préfabriqué à son propre id. Les voici :


newuser : "L'utilisateur enregistré le plus récent est NOM"

totalpost : "Nos membres ont posté un total de X messages"

totaluser : "Nous avons X membre enregistré"

totalonline : "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité"

loggedlist : "Utilisateurs enregistrés : NOM"

totalconn : "Membres connectés au cours des 24 dernières heures : NOM"


Maintenant fois qu'on sait qu'elle phrase est affectée, nous allons la modifier.

Donc, on va à la fin de la ligne de code qu'on parlait tout à l'heure et on trouve le :
Code:
replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");


On met la partie qu'on veut remplacer entre les / / par ce qui la remplace entre les " ".

C'est tout aussi simple que cela! À savoir que s'il y a des phrases au pluriel ET au singulier, il faut s'assurer de bien modifier les deux options.


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un code" ou dans "Personnalisations" si vous avez de la difficulté à le personnaliser.

À plus !

Fangs

Menu déroulant moderne (HTML & CSS3) - Lun 10 Nov 2014 - 22:41

#css #css3 #html #navigation #effet_hover #auteur_Fangs #toutes_les_versions





Menu déroulant moderne

(HTML & CSS3)


Bonjour à tous ! :gentleman:

Alors, comme son nom l'indique, dans ce ls, je vais vous ai réalisé un petit menu déroulant très moderne pour vos forums et vos pages web. Il est uniquement fait à partir de HTML et de CSS3, la dernière version du CSS qui propose beaucoup de possibilités.

Ce ls est donc divisé en deux parties:

- Le codage HTML
- Le codage CSS

Sachez que ce menu déroulant, qui peut servir de barre de navigation, est totalement personnalisable ! Il suffit de changer les textes dans le HTML et de changer des paramètres dans le CSS, et pour les plus à l'aise en codage, modifier cette barre à l'infini et selon leurs envies !
Attention
Je vous rappelle que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci :toto:

Assez parlé, passons aux choses sérieuses.

Aperçu de la barre de navigation

Aperçu
Voici donc un petit aperçu de ce que cela donne:
barre de navigation ; barre au survol

Codage: HTML


Voici donc le code que vous pouvez disposer où vous voulez: dans une page web, une template ou dans un message. (Si vous publiez ce code dans une template, n'oubliez pas de la publier par la suite).

Code:

<center>
        
   <div class="barre_nav">
               
      <div class="nav_1">
                          
         <div class="nav_txt">
                    Titre 1<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />     
      </div>
               
      <div class="nav_2">
                          
         <div class="nav_txt">
                    Titre 2<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
               
      <div class="nav_3">
                          
         <div class="nav_txt">
                    Titre 3<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />
      </div>
               
      <div class="nav_4">
                          
         <div class="nav_txt">
                    Titre 4<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br /> 
      </div>
               
      <div class="nav_5">
                          
         <div class="nav_txt">
                    Titre 5<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
           
   </div>
</center>


Codage: CSS


Et voici donc le code CSS qui en découle ! :)

Code:

/* DEBUT BARRE DE NAVIGATION */
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  background: #091016;
  font-size: 20px;
  height: 25px;
  text-shadow:1px 1px 2px #000000;
  border-bottom: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  font-size: 15px;
  margin-left: 5px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  letter-spacing: 2px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
  width:960px; /* à adapter selon la largeur de votre forum */
  height:175px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 100px; /* à adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid #e6e7e7;
}
.nav_1 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:190px;
  height:25px; 
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:190px;
  height:25px;
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_4 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:190px;
  height:25px; 
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:190px;
  height:140px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_4:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_5:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}

/* FIN BARRE DE NAVIGATION */


Question ?

Si vous avez une question, je vous rappelle que cette section est disponible !

Voilà, voilà, je vous remercie. :)


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Merwyn Arehdel

Enlever la description du forum sous le header - Mer 29 Oct 2014 - 12:11

#html #auteur_Merwyn_Arehdel


Bonjour o/
J'ouvre un petit tuto si vous souhaitez supprimer la description de votre forum sous votre header.
C'est tout simple.
Vous avez besoin d'un accès aux templates.

Allez dans Panneau d'administration > Affichage > Templates > Général > Overall_header

Trouvez cette ligne :
Code:
 {SITE_DESCRIPTION}


et supprimez-la entièrement. (balises span comprises).

Validez puis publiez le template.

Aperçu avant l'opération :
Spoiler:


Aperçu après l'opération :
Spoiler:


C'est fait !

Kitty Galore

Mini fiche de pub simple (2 cases / gris-rouge) - Sam 4 Oct 2014 - 16:21

#html #fiche_pub #page_html #auteur_Kitty_Galore


Bonjour à tous,

Voilà une mini fiche pour ceux qui aiment comme moi les fiches petites mais efficaces.

Aperçu


Quelques informations :

- Les images se redimensionnent automatiquement sauf pour le logo de partenariat (bien sur...).
- Les couleurs personnalisables sont celles du fond et de la bordure du bas. A savoir que les 2 cases ainsi que leurs titres sont en transparence donc inutile de modifier leurs couleurs, elles s'adaptent automatiquement
- Il est possible de rajouter encore une icone pour les attendus pas plus.
- Merci de conserver le crédit.



Code:
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css' />
<div style="width:400px; margin:auto; background: #606060; border-bottom:3px solid darkred;"><img src="IMAGE DU HEADER" alt="entete" width="400" />
<div style="width:185px; height:210px; background:rgba(255,255,255,0.1); margin-left: 10px; margin-top: 10px;"><span style="font-family: 'Anton'; font-weight: lighter; text-transform: lowercase; color:rgba(0,0,0,0.4); font-size: 20px; text-align:center; margin-top: 20px; display: block;padding-top:10px; padding-bottom:10px;">News</span><span style="width:165px; height:150px; font-family:Trebuchet MS; font-size:11px; color: black; padding : 10px; overflow : auto; display: block; text-align:justify;">- news
- news
- news
- news</span></div><div style="width:185px; height:210px; background:rgba(255,255,255,0.1); margin-right: 10px; margin-top: -210px; float: right; "><span style="font-family: 'Anton'; font-weight: lighter; text-transform: lowercase; color:rgba(0,0,0,0.4); font-size: 20px; text-align:center; margin-top:10px; margin-bottom:10px; display: block;">Stats</span><span style="width:165px; height:100px; font-family:Trebuchet MS; font-size:11px; color: black; padding : 10px; overflow : auto; display: block; text-align:justify;"><b>Ouvert depuis le :</b> XX/XX/XXXX
<b>Messages :</b> XXXX
<b>Membres :</b> XX
<b style="color:pink;">~ Groupe :</b> XX
<b style="color:orange;">~ Groupe :</b> XX
<b style="color:red;">~ Groupe :</b> XX
<b style="color:purple;">~ Groupe :</b> XX
<b>Dernier enregistré :</b> Nom Prénom</span>
<div style="width:185px; height:50px; margin-top: -20px; font-family:Trebuchet MS; font-size:9px; color: black; text-align: center; text-transform:uppercase;">Attendus
<a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a></div></div>
<center><img src="IMAGE DU LOGO" alt="bouton partenariat" /></center>
[code]<a href="http://" target="_blank"><img src="http://" alt="bouton partenariat" /></a>[/code]
<a href="http://www.never-utopia.com/" style="font-size:8px; text-align:center; display:block; font-family:Trebuchet MS; text-transform:uppercase;">Lady sur Never-Utopia</a></div></div>

Onyx

Guide du template "index-body" (Qeel) - Jeu 2 Oct 2014 - 2:02

#qeel #html #auteur_Onyx #toutes_les_versions



Tuto - Guide du template "index-body" (Qeel)


Vous avez envie de modifier votre template Index_body ou de faire votre propre qeel, mais vous vous perdez dedans sans le comprendre? C'est... plus que normal. Si on y est pas habitué, il faut quasiment une carte pour arriver à s'en sortir pas trop mal et on ne dégote pas une telle carte au magazin du coin.

Tout cela pour dire que ce petit guide a pour but de vous guider dans le template pour que vous puissiez vous y repérer et identifier les différentes parties et variables, quelle que soit la version de votre forum ^^

Voici ce que ce tutoriel va contenir :
  • 1. Visite guidée du template index_body sous PhpBB2
    • 1.1 Les variables de FA
    • 1.2 Le message de l'administrateur (PA)
    • 1.3 Connexion rapide
    • 1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc...
    • 1.5 Qeel
    • 1.6 La fin du template (légende des statuts de forum, etc...)
    • 1.7 Modifier les phrases des variables de FA

  • 2. Visite guidée du template index_body sous PhpBB3
    • 2.1 Les variables de FA
    • 2.2 Date/Heure/Dernière visite - Connexion rapide
    • 2.3 Le message de l'administrateur (PA)
    • 2.4 Qeel
    • 2.5 La fin du template (légende des statuts de forum, etc...)
    • 2.6 Modifier les phrases des variables de FA

  • 3. Visite guidée du template index_body sous Invision
    • 3.1 Les variables de FA
    • 3.2 Le message de l'administrateur (PA)
    • 3.3 Connexion rapide
    • 3.4 Qeel
    • 3.5 La fin du template (légende des statuts de forum, etc...)
    • 3.6 Modifier les phrases des variables de FA

  • 4. Visite guidée du template index_body sous PunBB
    • 4.1 Les variables de FA
    • 4.2 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies" et compagnie ainsi que le login.
    • 4.3 Le message de l'administrateur (PA)
    • 4.4 Connexion rapide
    • 4.5 Qeel
    • 4.6 La fin du template (légende des statuts de forum, etc...)
    • 4.7 Modifier les phrases des variables de FA


IMPORTANT : La version PunBB n'est pas finie (pratiquement pas touchée en fait), alors ne l'utilisez pas.



1. Le template index_body avec PhpBB2


En aperçu, ce template ressemble à ça :
Image à remplacer

En ordre, nous allons voir :
  • 1.1 Les variables de FA
  • 1.2 Le message de l'administrateur (PA) (En rouge/rose)
  • 1.3 Connexion rapide (En bleu)
  • 1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc... (En mauve)
  • 1.5 Qeel (En vert)
  • 1.6 La fin du template (légende des statuts de forum, etc...) (En jaune)
  • 1.7 Modifier les phrases des variables de FA

Comment se rendre dans le template :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > INDEX_BODY



1.1 Variables de FA


Il y a certaines variables de ForumActif qui contiennent des éléments déjà programmées par FA et qu'on ne peut pas mettre manuellement. Elles sont encadrées par des { } comme ceci : {VARIABLE_FA}

Cela ne vous dit toujours rien? Eh bien vous savez la liste des connectés au cours des 24/48/72 dernières heures? Eh bien c'est la variable {L_CONNECTED_MEMBERS}. Si cela n'était pas déjà programmé par FA sous cette forme, nous aurions un truc long comme le bras qu'on aurait peur de toucher au cas ou cela exploserait. À la place, on peut prendre la variable, la déplacer, l'encadrer ou lui mettre une mise en forme sans que cela ne nuise à son fonctionnement.

Voici la liste de la majorité des variables du template. À la fin de chaque section du tutoriel, il y aura un petit résumé des variables qu'on trouve dans ladite section pour vous permettre de mieux vous repérer ^^

VariableSignification
{JAVASCRIPT}Contient la majorité du javascript du template.
{message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
{message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
{L_USERNAME}Est écrit "Nom d'utilisateur"
{L_AUTO_LOGIN}Est écrit "Connexion automatique"
{L_PASSWORD}Est écrit "Mot de passe"
{S_HIDDEN_FIELDS}Certains champs secrets utilisés pour la connexion, ne l'enlevez pas.
{switch_user_login_form_header.switch_social_login.L_OR}Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"
{CHATBOX_TOP}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en haut".
{BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
{L_MARK_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
{L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
{L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
{L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
{switch_on_index.switch_delete
_cookies.L_DELETE_COOKIES}		Est écrit "Supprimer les cookies du forum". Dans le lien qui le contient, vous trouverez {switch_on_index.switch_delete
_cookies.U_DELETE_COOKIES} qui est l'url du lien pour supprimer les cookies du forum.
{L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
{L_ONLINE_IMG}Url de l'image du Qeel
{TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
{TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
{NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
{TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
{RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
{LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
{L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM"
{L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
{L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
{LEGEND}Est écrit "Légende"
{GROUP_LEGEND}Légende des groupes visibles
{TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
{CHATTERS_LIST}Liste des membres sur la ChatBox
{CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
{L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
{L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
{L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"




1.2 Le message de l'administrateur (PA)


La première chose que l'on voit en arrivant dans le template, c'est {JAVASCRIPT}. On n'y touche pas, cela correspond à la majorité du javascript qui fait fonctionner ce template!

On continue et on arrive dans le message de l'administrateur (entre les lignes 2 à 17) qui ressemble à ceci :
Code:
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->


Cela correspond à ceci :
Image à remplacer

2 - Au tout début, nous avons «!-- BEGIN message_admin_index --» qui indique que c'est le début du message d'administrateur (PA).

3 - Puis, nous avons un tableau. Pour tout ceux qui n'aiment pas le fond de leur message d'administrateur, c'est là que vous pourrez agir en changeant le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "forumline".

4 - Nous avons ensuite le «!-- BEGIN message_admin_titre --» qui indique le début du titre de votre message d'administrateur.

5 à 7 - Le titre de votre message d'administrateur correspond à cette variable {message_admin_index.message_admin_titre.MES_TITRE}. Encore une fois, vous pouvez modifier la class de la cellule ou du span qui l'entoure pour personnaliser ce titre.

8 - Le «!-- END message_admin_titre --» indique la fin du titre de votre message d'administrateur.

9 - À la ligne suivante, le «!-- BEGIN message_admin_txt --» indique le début du contenu de votre message d'administrateur.

10 à 14 - Vous avez ensuite le contenu de votre message d'administrateur qui correspond à cette variable {message_admin_index.message_admin_txt.MES_TXT}. Vous pouvez modifier la class de la cellule ou du span qui l'entoure pour personnaliser ce contenu.

15 - Puis, le «!-- BEGIN message_admin_txt --» indique la fin du contenu de votre message d'administrateur.

16- Le < / table >  ferme le tableau du message d'administrateur.

17 - Le «!-- END message_admin_index --» indique que la fin du message d'administrateur.

Voilà !

Et pour ceux qui veulent un récapitulatif des variables de cette partie :
{JAVASCRIPT}Contient la majorité du javascript du template.
{message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
{message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)




1.3 Connexion rapide


Suite au message d'administrateur, nous avons la connexion rapide. Dans les options de notre forum, nous pouvons décider de ne pas l'afficher du tout, de l'afficher en haut de la page d'accueil ou en bas de la page d'accueil. Du coup, on le retrouve à deux endroits dans le template.

Cela ressemble à ceci :
Image à remplacer

Entre les lignes 19 à 59, il y a la connexion rapide du haut. De la ligne 88 à la ligne 128, ce sera la connexion rapide du bas. Histoire de ne pas se répéter deux fois, je vais expliquer seulement la connexion rapide du haut.

Bref, entre les lignes 19 à 81, le code de la connexion rapide ressemble à ceci :
Code:
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->


19 - Au tout début, nous avons le «!-- BEGIN switch_user_login_form_header --» qui indique le début de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- BEGIN switch_user_login_form_footer --».

20 - Nous avons alors le début du formulaire de connexion rapide < form >. Je vous conseille de le laisser comme tel.

21 à 22 - Nous avons le tableau qui contient le contenu de notre connexion rapide. Vous pouvez modifier la class du tableau afin d'en modifier l'apparence.

23 - Première cellule du tableau qui contiendra la connexion rapide qu'on voit habituellement.

25 - Nous avons un autre tableau imbriqué dans la première cellule de notre premier tableau. Ne demandez pas pourquoi, FA aime simplement trop ses tableaux...
Il est inutile de modifier la class de ce tableau puisqu'il n'a de toute façon pas de mise en forme déjà prédéfinie. Il est seulement là pour aligner les différentes parties de la connexion rapide.

26 - Première ligne du tableau imbriqué.

27 - La première cellule de cette ligne contient la variable {L_USERNAME} qui ne sert qu'à écrire "Nom d'utilisateur".

28 - La deuxième cellule de cette ligne contient la case < input > où nous pouvons inscrire notre nom d'utilisateur.

29 à 32 - La dernière cellule de cette ligne contient la  case < input > que nous pouvons cocher pour nous connecteur automatiquement et la variable {L_AUTO_LOGIN} qui ne sert qu'à écrire "Connexion automatique".

33 - Fin de la première ligne du tableau imbriqué.

35 - Deuxième ligne du tableau imbriqué.

36 - La première cellule de cette ligne contient la variable {L_PASSWORD} qui ne sert qu'à écrire "Mot de passe".

37 - La deuxième cellule de cette ligne contient la case < input > où nous pouvons inscrire notre mot de passe.

38 - La dernière cellule de cette ligne contient la  variable {S_HIDDEN_FIELDS} qui contient des champs secrets utilisés pour la connexion. Je vous conseille de ne pas essayer de modifier cette ligne. La cellule contient également le < input > qui correspond au bouton "connexion" sur lequel on clique pour se connecter. Essayez de ne pas le modifier non plus.

39 à 40 - Fin de la deuxième ligne du tableau imbriqué et du tableau imbriqué dans le tableau de connexion rapide.

41 - Fin de la première cellule du tableau de connexion.



43 - Le «!-- BEGIN switch_social_login --» indique le début de ce qui apparaît si la fonction "Facebook Connect" est activée.

44 à 46 - Nous voilà enfin avec une deuxième cellule à notre tableau. Elle contient la variable {switch_user_login_form_header.switch_fb_connect.L_OR} qui dit simplement "OU".

47 - Ouverture la troisième et dernière cellule du tableau.

48 - La div avec la class "social_btn" contiendra les informations facebook.

49 - Le «!-- BEGIN fb_connect --» indique le début de la partie du bouton facebook.

50 - La div avec la class "fb-login-button" est le bouton facebook.

51 - Le «!-- END fb_connect --» indique la fin de la partie du bouton facebook.

52 - On ferme la div avec la class "social_btn".

53 - On ferme la troisième et dernière cellule du tableau de connexion rapide.

54 - Le «!-- BEGIN switch_social_login --» indique la fin de ce qui apparaît si la fonction "Facebook Connect" est activée.

56 à 58 - Fermeture du tableau

59 - Le «!-- END switch_user_login_form_header --» indique la fin de la connexion rapide du haut. Si nous étions dans la connexion rapide du bas, cela serait plutôt «!-- END switch_user_login_form_footer --».

Voilà!

Pour ceux qui veulent un petit récapitulatif des variables de cette section :
{JAVASCRIPT}Contient la majorité du javascript du template.
{message_admin_index.message_admin_titre.MES_TITRE}Titre du message d'administration (PA)
{message_admin_index.message_admin_txt.MES_TXT}Contenu du message d'administration (PA)
{L_USERNAME}Est écrit "Nom d'utilisateur"
{L_AUTO_LOGIN}Est écrit "Connexion automatique"
{L_PASSWORD}Est écrit "Mot de passe"
{S_HIDDEN_FIELDS}Certains champs secrets utilisés pour la connexion, ne l'enlevez pas.
{switch_user_login_form_header.switch_social_login.L_OR}Pour ceux qui ont activé l'option "Facebook connect", il est écrit "OU"




1.4 Les liens "Marquer tous les forums comme lus", "Supprimer les cookies", etc...


Directement à la suite de la connexion rapide du haut, nous avons deux petites variables aux lignes 61 et 62 qui sont extrèmement importante. Du moins, la deuxième l'est! Voici à quoi cela ressemble :
Code:
{CHATBOX_TOP}
{BOARD_INDEX}


82 - La variable {CHATBOX_TOP} est la chatbox qui apparaît si on a choisit de l'afficher en haut.

83 - La variable {BOARD_INDEX} est le coeur de notre forum. Cela contient les catégories/forums et la liste des sujets. Bref, il ne faut surtout pas l'enlever!


Voilà pour ce petit interlude. Maintenant, passons aux options qui sont habituellement juste en bas des catégories, à savoir entre les lignes 63 et 86. Ces options inclues le "Marquer tous les forums comme lus", "Sujets actifs du jour", "Top 20 des posteurs du jour", "Top 20 des posteurs du forum" et "Supprimer les cookies". Voici à quoi cela ressemble :
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>


63 à 65 - Le début du tableau des options dont la première cellule est alignée à gauche.

66 - Le «!-- BEGIN switch_user_logged_in --» indique le début d'une section que seul les utilisateurs connectés peuvent voir.

67 - Cela contient la variable {L_MARK_FORUMS_READ} où il est écrit "Marquez tous les forums comme lus". Dans le lien qui contient cette variable, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.

68 - Le «!-- END switch_user_logged_in --» indique la fin de la section que seul les membres connectés peuvent voir.

69 à 71 - Normalement, le «!-- BEGIN switch_delete_cookies --» à la ligne 90 devrait indiquer le début de la section "Supprimer les cookies du forum" et le «!-- END switch_delete_cookies --» devrait indiquer la fin de cette section. Cela date de l'époque où nous n'avions pas encore l'option d'activer ou de désactiver la supression des cookies. Maintenant que nous pouvons l'activer/désactiver, cette section ne sert plus à rien. Vous constaterez d'ailleurs que quoi que vous y mettiez, rien n'apparaît sur le forum.

72 à 74 - Fin de la première cellule de gauche et début de la cellule de droite avec le < span > qui met en forme le contenu.

75 - Cela contient la variable {L_TODAY_ACTIVE} où il est écrit "Sujets actifs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien pour accéder aux sujets actifs du jour.

76 - Cela contient la variable {L_TODAY_POSTERS} où il est écrit "Top 20 des posteurs du jour". Dans le lien qui contient cette variable, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du jour.

77 - Cela contient la variable {L_OVERALL_POSTERS} où il est écrit "Top 20 des posteurs du forum". Dans le lien qui contient cette variable, vous trouverez {U_OVERALL_POSTERS} qui est l'url du lien pour accéder au top 20 des posteurs du forum.

78 - Le «!-- BEGIN switch_on_index --» indique le début de zone de l'index des cookies.

79 - Le «!-- BEGIN switch_delete_cookies --»  indique le début de zone des cookies.

80 - Cela contient la variable {switch_on_index.switch_delete_cookies.L_DELETE_COOKIES} où il est écrit "Supprimer les cookies du forum". Dans le lien qui contient cette variable, vous trouverez {switch_on_index.switch_delete_cookies.U_DELETE_COOKIES} qui est l'url du lien nos permettant de supprimer les cookies du forum.

81 - Le «!-- END switch_delete_cookies --»  indique la fin de zone des cookies.

82 - Le «!-- END switch_on_index --» indique la fin de zone de l'index des cookies.

83 à 86 - La fermeture de la cellule de droite et du tableau.

Voilà !

Pour ceux qui veulent un récapitulatif des variables utilisées :
{BOARD_INDEX}Tout ce qu'il y a entre le message d'administrateur et le qeel. Autrement dit, cela contient le coeur du forum, comme les catégories, les forums et la liste des sujets.
{L_MARK_READ}Est écrit "Marquez tous les forums comme lus". Dans le lien qui le contient, vous trouverez {U_MARK_READ} qui est l'url du lien pour marquer tous les forums comme lus.
{L_TODAY_ACTIVE}Est écrit "Sujets actifs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_ACTIVE} qui est l'url du lien qui mène aux sujets actifs du jour.
{L_TODAY_POSTERS}Est écrit "Top 20 des posteurs du jour". Dans le lien qui le contient, vous trouverez {U_TODAY_POSTERS} qui est l'url du lien qui mène au top 20 des posteurs du jour.
{L_OVERALL_POSTERS}Est écrit "Top 20 des posteurs du forum". Dans le lien qui le contient, vous trouverez {U_OVERALL_POSTERS} qui est l'urorul du lien qui mène au top 20 des posteurs du forum.
{switch_on_index.switch_delete
_cookies.L_DELETE_COOKIES}		Est écrit "Supprimer les cookies du forum". Dans le lien qui le contient, vous trouverez {switch_on_index.switch_delete
_cookies.U_DELETE_COOKIES} qui est l'url du lien pour supprimer les cookies du forum.




1.5 Qeel


Suite aux liens spéciaux, nous avons la fonction de connexion rapide qui revient encore une fois comme nous l'avions déjà mentionné. Puis, nous arrivons à la partie qui vous intéresse le plus, à savoir le Qeel.

Vous le trouverez entre les lignes 130 et 178. Cela devrait ressembler à cela :
Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <td class="catHead" colspan="2" height="28">
      <!-- BEGIN switch_viewonline_link -->
      <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
      <span class="cattitle">{L_WHO_IS_ONLINE}</span>
      <!-- END switch_viewonline_nolink -->
      </td>
   </tr>
   <tr>
      <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
      <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></td>
   </tr>
   <tr>
      <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span></td>
   </tr>
   {L_CONNECTED_MEMBERS}
   {L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->


Dans les explications qui suivent, vous trouverez les indicateurs suivants qui veulent dire :

*row1
Si vous voulez modifier la mise en forme de cette cellule, vous pouvez changer le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "row1".

**gensmall
Si vous voulez modifier la mise en forme des variables de cette cellule, vous pouvez changer le nom de la class du span qui entoure les variables pour une class que vous aurez personnalisée ou même enlever carrément la class "gensmall".


130 - Au tout début, le «!-- BEGIN disable_viewonline --» nous indique le début du qeel. Si nous désactivons les statistiques, tout ce que sera dans cette section n'apparaîtra pas.

131 - Début du tableau du qeel. Vous pouvez changer le nom de la class pour une class que vous aurez personnalisée ou même enlever carrément la class "forumline".

132 à 133 - Début de l'entête du qeel. Vous pouvez changer le nom de la class de la cellule pour une class que vous aurez personnalisée ou même enlever carrément la class "catHead".

134 - Le «!-- BEGIN switch_viewonline_link --» nous indique le début de la zone du titre du qeel sous forme de lien.

135 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?" et qui est à l'intérieur du lien dont l'url est la variable {U_VIEWONLINE} qui vous permet d'accéder à la localisation des IP des membres.
Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class du lien et du span qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "cattitle".

136 - Le «!-- END switch_viewonline_link --» nous indique la fin de la zone du titre du qeel sous forme de texte.

138 - Le «!-- BEGIN switch_viewonline_nolink --» nous indique le début de la zone du titre du qeel sous forme de texte.

139 - La variable {L_WHO_IS_ONLINE} qui contient le texte "Qui est en ligne?".
Si vous voulez modifier la mise en forme du "Qui est en ligne?", vous pouvez changer le nom de la class du span qui l'entoure pour une class que vous aurez personnalisée ou même enlever carrément la class "cattitle".

140 - Le «!-- END switch_viewonline_nolink --» nous indique la fin de la zone du titre du qeel sous forme de texte.

141 à 142 - On ferme la ligne de l'entête.

143 - On ouvre la première ligne qui va contenir la cellule l'image du qeel et la première cellule des statistiques.

144 - Cellule qui contient l'image du qeel. La variable {L_WHO_IS_ONLINE} correspond à l'url de l'image du qeel. Nous pouvons modifier cette image directement dans les images de la section affichage de notre panneau d'administration.
*row1

145 - Première ligne de la première cellule des statistiques. Cela contient la variable {TOTAL_POSTS}, soit la phrase "Nos membres ont posté un total de X messages" qui correspond au nombre de messages postés sur le forum.
*row1
**gensmall

146 - Deuxième ligne de la première cellule des statistiques. Cela contient la variable {TOTAL_USERS}, soit la phrase "Nous avons X membre enregistré" qui correspond au nombre d'utilisateurs inscrits sur le forum.

147 - Troisième ligne de la première cellule des statistiques. Cela contient la variable {NEWEST_USER}, soit la phrase "L'utilisateur enregistré le plus récent est NOM" qui correspond à l'utilisateur inscrit le plus récent.

148 - On ferme notre première ligne du tableau.
149 - On passe à la deuxième ligne du tableau.

150 - Première ligne de la deuxième cellule des statistiques. Cela contient la variable {TOTAL_USERS_ONLINE}, soit la phrase "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité" qui correspond au nombre d'utilisateurs présents sur le site, dont les inscirts, les inscrits invisibles et les non-inscrits.
*row1
**gensmall

151 - Deuxième ligne de la deuxième cellule des statistiques. Cela contient la variable {RECORD_USERS}, soit la phrase "Le record du nombre d'utilisateurs en ligne est de X le JOUR_DE_LA_SEMAINE JOUR MOIS ANNÉE - HH:MM" qui correspond au record du nombre d'utilisateurs présents sur le site en même temps.

153 - Troisième ligne de la deuxième cellule des statistiques. Cela contient la variable {LOGGED_IN_USER_LIST}, soit la phrase "Utilisateurs enregistrés : NOM" qui correspond aux utilisateurs inscrits connectés en ce moment sur le forum.

154 - On ferme la deuxième ligne du tableau.

155 - La variable {L_CONNECTED_MEMBERS}, soit la phrase "Membres connectés au cours des XX dernières heures : NOM" qui correspond aux utilisateurs inscrits connectés au cours des dernières heures sur le forum.
ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

156 - La variable {L_WHOSBIRTHDAY_TODAY}, soit la phrase "Aucun membre ne fête son anniversaire aujourd'hui" ou "Membres fêtant leur anniversaire aujourd'hui : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire aujourd'hui.
ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

157 - La variable {L_WHOSBIRTHDAY_WEEK}, soit la phrase "Aucun membre ne fête son anniversaire au cours des 7 prochains jours" ou "Membres fêtant leur anniversaire au cours des 7 prochains jours : NOM" qui correspond aux utilisateurs inscrits qui fêtent leur anniversaire au cours des 7 prochains jours.
ATTENTION: Cette variable a certaines particuliarités qui seront expliquées à la fin de cette partie.

158 - Ouverture de l'avant dernière ligne du tableau.

159 - Cellule qui contient la variable {LEGEND}, soit le mot "Légende :" et la variable {GROUP_LEGEND} qui correspond aux groupes visibles.
*row1
**gensmall

160 - Fermeture de l'avant dernière ligne du tableau.

161 - Le «!-- BEGIN switch_chatbox_activate --» indique le début de la zone des statistiques qui n'apparaissent que si la CB est activée.

162 - Ouverture de la dernière ligne du tableau.
163 - Ouverture de la dernière cellule du tableau.

164 - Première ligne de la dernière cellule des statistiques. Cela contient la variable {TOTAL_CHATTERS_ONLINE}, soit la phrase "Il y a actuellement X utilisateur(s) sur la ChatBox : " qui correspond au nombre d'utilisateurs connectés sur la CB et la variable {CHATTERS_LIST} qui correspond aux pseudos des membres connectés sur la CB.
*row1
**gensmall

165 - Le «!-- BEGIN switch_chatbox_popup --» indique le début du lien pour rejoindre la CB.

166 à 171 - Script contenant le lien utilisé pour rejoindre la CB (Le [Rejoindre le Chat])

172 - Le «!-- END switch_chatbox_popup --» indique la fin du lien pour rejoindre la CB.

174 - Fermeture de la dernière cellule du tableau.
175 - Fermeture de la dernière ligne du tableau.

176 - Le «!-- END switch_chatbox_activate --» indique la fin de la zone des statistiques qui n'apparaissent que si la CB est activée.

177 - On ferme le tableau.

178 - Le «!-- END disable_viewonline --» indique la fin du qeel.



Particularités de certaines variables :

{L_CONNECTED_MEMBERS}, {L_WHOSBIRTHDAY_TODAY} et {L_WHOSBIRTHDAY_WEEK}

Vous le remarquerez peut-être, mais ces variables ne sont pas dans une cellule. Elles sont glissées entre deux lignes du tableau.
Pourquoi? Parce qu'en réalité, elles sont sous la forme suivante :
Code:
<tr><td class="row1><span class="gensmall">Membres connectés au cours des XX dernières heures : <a href="Lien vers le profil"><span style="color: couleur;"><strong>NOM</strong></span></a></span></td></tr>

<tr> <td class="row1><span class="gensmall">Aucun membre ne fête son anniversaire aujourd'hui <br> Aucun membre ne fête son anniversaire dans les 7 prochains jours </span></td></tr>



Et là, vous vous dites "Mais moi, il y a un fond bleu sur ma class "row1" et je veux le garder sur le reste de mon forum. Sauf que je ne le veux pas dans mon CSS... Comment je m'en débarasse?

Premièrement, si vous voulez créer votre propre qeel de A à Z en utilisant les variables, vous devrez faire attention d'encadrer ces variables d'un tableau «table» pour respecter la mise en forme.
Pour ce qui est de la mise en forme, il y a deux classes qui sont déjà intégrés à la variable. Pour modifier ces classes, il vous suffit de mettre une class au tableau que vous avez utilisé pour encadrer votre variable. Puis, dans votre CSS, vous mettez la mise en forme que vous voulez en allant directement modifier les classes "row1" et "gensmall".

Exemple dans le template :
Code:
<div id="qeel">
  <table class="nom_de_la_class_de_mon_tableau">
    {L_CONNECTED_MEMBERS}
  </table>

  <table class="nom_de_la_class_de_mon_tableau">
    {L_WHOSBIRTHDAY_TODAY}
    {L_WHOSBIRTHDAY_WEEK}
  </table>
</div>


Exemple dans le CSS :
Code:
/*Cellules des anniversaires et des derniers connectés*/
.nom_de_la_class_de_mon_tableau td.row1 {
  background-color: transparent; /*Met la couleur de fond transparent*/
  padding: 0px; /*Enlève le padding automatique des cellules des anniversaires et des derniers connectés*/
}

/*Écriture des anniversaires et des derniers connectés*/
.nom_de_la_class_de_mon_tableau span.gensmall {
  color: blue; /*Couleur du texte des anniversaires et des derniers connectés*/
  font-size: 12px; /*Taille du texte des anniversaires et des derniers connectés*/
  font-family: calibri; /*Police du texte des anniversaires et des derniers connectés*/
}


C'est fini!

Pour ceux qui veulent un petit récapitulatif des variables :
{L_WHO_IS_ONLINE}Est écrit "Qui est en ligne?" Lorsqu'il est dans un lien, vous trouverez {U_VIEWONLINE} qui est l'url qui mène à la visualisation (par IP) des membres connectés sur le forum
{L_ONLINE_IMG}Url de l'image du Qeel
{TOTAL_POSTS}Nombre de messages postés. Est écrit "Nos membres ont posté un total de X messages"
{TOTAL_USERS}Nombre de membres inscrits. Est écrit "Nous avons X membres enregistrés"
{NEWEST_USER}Dernier utilisateur inscrit. Est écrit "L'utilisateur enregistré le plus récent est NOM"
{TOTAL_USERS_ONLINE}Nombre et type d'utilisateurs en ligne. Est écrit "Il y a en tout X utilisateur en ligne :: X Enregistré, X Invisible et X Invité "
{RECORD_USERS}Record du nombre d'utilisateurs en ligne. Est écrit "Le record du nombre d'utilisateurs en ligne est de X le Dim 27 Juil - 13:24"
{LOGGED_IN_USER_LIST}Membres connectés présentement. Est écrit "Utilisateurs enregistrés : NOM"
{L_CONNECTED_MEMBERS}Membres connectés au cours des 24/48/72 dernières heures. Est écrit "Membres connectés au cours des XX dernières heures : NOM"
{L_WHOSBIRTHDAY_TODAY}Anniversaires du jour. Est écrit "Membres fêtant leur anniversaire aujourd'hui: NOM (AGE)"
{L_WHOSBIRTHDAY_WEEK}Anniversaires des 7 prochains jours. Est écrit "Membres fêtant leur anniversaire dans les 7 prochains jours: NOM (AGE)"
{LEGEND}Est écrit "Légende"
{GROUP_LEGEND}Légende des groupes visibles
{TOTAL_CHATTERS_ONLINE}Nombre de membres sur la ChatBoxEst écrit "Il y a actuellement X utilisateur(s) sur la ChatBox"
{CHATTERS_LIST}Liste des membres sur la ChatBox




1.6 La fin du template (légende des statuts de forum, etc...)


Suite au qeel, nous avons le reste du template, dont la légende des status de forum, la chat-box du bas, etc...

Cela se situe entre les lignes 179 et 196. Cela devrait ressembler à cela :
Code:
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}


179 - Au tout début, la variable {CHATBOX_BOTTOM} correspond à la chat-box qui vous avez choisi l'affichage "au bas de la page d'accueil".

180 - Saut de ligne qui termine tous les flottements à droite ou gauche.

181 - Le «!-- BEGIN switch_legend --» indique le début de la légende des statuts de forums (New/Old/Lock ou  "Nouveau/Anciens/Verrouillé).

182 à 183 - Début du tableau de cette légende

184 - Première cellule qui contient l'image de l'image New/Nouveau. La variable {FORUM_NEW_IMG} correspond à l'url de cette image.

185 - Deuxième cellule qui contient la variable {L_NEW_POSTS} qui correspond à la phrase "Nouveaux messages"

186 - Troisième cellule qui est vide pour créer un espace.

187 - Quatrième cellule qui contient l'image de l'image Old/Ancien. La variable {FORUM_IMG} correspond à l'url de cette image.

188 - Cinquième cellule qui contient la variable {L_NO_NEW_POSTS} qui correspond à la phrase "Pas de nouveaux messages"

189 - Sixième cellule qui est vide pour créer un espace.

190 - Septième cellule qui contient l'image de l'image Lock/Verrouillé. La variable {FORUM_LOCKED_IMG} correspond à l'url de cette image.

191 - Huitième cellule qui contient la variable {L_FORUM_LOCKED} qui correspond à la phrase "Forum Verrouillé"

192 à 193 - Fin du tableau.

194 - Le «!-- END switch_legend --» indique la fin de la légende.

196 - La variable {AUTO_DST} dont je ne suis jamais arrivé à trouver l'utilité... Par précaution, ne l'enlevez pas ^^

Voilà!

Pour ceux qui veulent un petit récapitulatif des variables :
{CHATBOX_BOTTOM}La ChatBox qui s'active si vous sélectionner la position "sur la page d'accueil en bas".
{L_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Nouveaux messages". Dans l'image juste avant, le {FORUM_NEW_IMG} est l'url de l'image "New"
{L_NO_NEW_POSTS}Fait partie de la légende des status de forum. Est écrit "Pas de nouveaux messages". Dans l'image juste avant, le {FORUM_NO_NEW_IMG} est l'url de l'image "Old"
{L_FORUM_LOCKED}Fait partie de la légende des status de forum. Est écrit "Forum Verrouillé". Dans l'image juste avant, le {FORUM_LOCKED_IMG} est l'url de l'image "Locked"




1.7 Modifier les phrases des variables de FA


Nous avons vu comment se rendre au template, les variables qui y sont utilisées et une visite en profondeur du template. Nous avons aussi vu que beaucoup de variables contiennent un texte déjà pré-programmé.
Mais comment garder les fonctionnalités d'une variable tout en changeant son texte? Eh bien c'est ce qu'on va voir ^^

Tous les exemples seront faits avec la variable {NEWEST_USER} dont le texte est "L'utilisateur enregistré le plus récent est NOM" et qui devient, grace à un javascript, "La nouvelle recrue est NOM"

Premièrement, nous devons avoir un moyen de sélectionner notre variable. Donc nous nous rendrons dans le template et nous entourerons notre variable d'un "span" ou d'une "div" à laquelle nous donnerons un "id" afin de l'identifier.

Exemple :
Code:
<span id="newuser">{NEWEST_USER}</span>


Ensuite, nous allons ajouter un petit javascript dans notre template. Ce javascript est séparé en deux parties :
1. Il repère le contenu du span/div qui contient l'id indiqué.
2. Il remplace un certain texte par un nouveau texte.

Le voici :
Code:
<script type="text/javascript">document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");</script>


À deux endroit dans le script,  on voit ceci :
document.getElementById('newuser')
Il faut s'assurer de mettre l'id que nous avons mis à notre variable dans les parenthèses et entre les ' '.

Vers la fin, nous avons :
replace(/L'utilisateur enregistré le plus récent est/,"La nouvelle recrue est");
Il faut mettre le texte à remplacer dans les parenthèses, entre les / /.
Il faut mettre le nouveau texte dans les parenthèses, entre les " ".

Voilà, vous savez comment modifier le texte de vos variables! À savoir que vous devez faire attention lorsqu'il y a des phrases au pluriel et au singulier afin de mettre un javascript pour chacune des options possibles.

Sparrow-style

Widgets dans un volet latéral ouvrant "onclick" (CSS avec target) - Mer 1 Oct 2014 - 14:24

#html #css #css3 #target #position_fixe #transition #auteur_Okhmhaka #phpBB2

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Widgets FA dans un volet coulissant



Présentation



Les Widgets sont des éléments pratiques pour mettre à disposition des informations aux membres directement sur la page d'accueil, malheureusement ils sont aussi assez encombrants et possèdent un inconvénient majeur : ils réduisent la largeur du contenu du forum, qui est tout de même plus important qu'eux en terme d'intérêt.
Du coup, ce LS va vous permettre d'afficher les Widgets de votre forum FA dans un onglet à ouvrir, à gauche du forum. Vous verrez en fin de LS comment le modifier pour afficher les Widgets à droite.

Exemple en images :




L'installation de ce code nécessite l'accès et la modification des Templates, et donc l'utilisation du compte fondateur.
Ce LS est prévu pour la version phpBB2.


Afficher les Widgets



Il faut bien sûr commencer par aller activer les Widgets. Pour cela allez dans l'onglet "Modules" de votre Panneau d'administration. Dans la première partie de liens de la colonne de gauche, dans "Portail & Widgets", cliquez sur "Gestion des Widgets du forum".
Pour "Afficher les widgets du forum" mettez bien sûr "oui".
Le LS utilise les widgets de gauche, dans un premier temps, donc mettez 200 dans la largeur du widget gauche et laissez 0 dans celui de droite.
Enregistrez.
Sur la même page pensez ensuite à personnaliser les widgets que vous souhaitez voir apparaitre. Vous avez tout les widgets FA en bas, il suffit de cliquer sur l'un, maintenir le clic et le faire glisser dans la colonne de gauche sur le schéma au-dessus. Pensez bien à enregistrer à chaque fois !

Vous pouvez modifier certains widgets indépendamment en cliquant sur Tag html sur Never Utopia - graphisme, codage et game design - Page 5 Editer, ce n'est pas possible pour tous cependant. Vous pouvez par contre modifier les permissions, c'est à dire le statut permettant de voir le widget (invité, membre, modérateur, etc...).
Vous avez également la possibilité de créer vos widgets personnalisés !



Modification du template



Afin de pouvoir inclure proprement le bouton d'ouverture et de fermeture du widget nous allons devoir modifier le template "haut de page", ou "overall_header" de son autre nom.
Voici tout d'abord tout le template, pour ceux qui ne l'auraient pas modifié et souhaiteraient juste un copier/coller :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
 
  <div id="open">

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

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

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

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                                                                          <div class="button_widgets">
                                                                            <a href="#open" class="open"></a>
                                                                            <a href="#close" class="close"></a>
                                                                            </div>
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>
</body>
</html>
<!-- END html_validation -->


Pour ceux qui ont déjà modifié le template pour autre chose, vous devez simplement réaliser les modifications que je vais vous donner ci-dessous. Cela vous permettra de ne pas perdre vos précédentes modif'.
Au passage, je signale que je donne le numéro des lignes selon le template de base, si vous l'avez déjà modifié ces numéros risquent d'avoir changé.


Ligne 249, juste après ce code :
Code:
<a name="top"></a>
   {JAVASCRIPT}

Ajoutez celui-ci :
Code:
<div id="open">


Ligne 345, juste avant la fermeture du body, donc juste avant ceci :
Code:
</body>
</html>
<!-- END html_validation -->

Ajoutez ça :
Code:
</div>


Pour finir, ligne 325, repérez ce code-là (qui est le code d'affichage des Widgets) :
Code:
<div id="{ID_LEFT}">
         <!-- BEGIN giefmod_index1 -->
            {giefmod_index1.MODVAR}
               <!-- BEGIN saut -->
               <div style="height:{SPACE_ROW}px"></div>
               <!-- END saut -->
         <!-- END giefmod_index1 -->
</div>

Et ajoutez juste avant lui ce code :
Code:
<div class="button_widgets">
 <a href="#open" class="open"></a>
 <a href="#close" class="close"></a>
 </div>


N'oubliez pas de valider votre template.


Le CSS



Code:
/* WIDGETS */

#left /* changer par right pour le widget de droite */
{
  position: fixed;
  top: 0;
  left: 0; /* changer par right pour le widget de droite */
  width: 235px !important;
  height: 100%;
  overflow: auto;
  border-right: 20px solid #ae3e2c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
  margin-left: -235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets
{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 0; /* changer par right pour le widget de droite */
  margin-top: -30px;
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  width: 60px;
  height: 150px;
  background: white; /* mettre ici image du bouton - taille ci-dessus 60par150 */
  -webkit-transition: 1s;
  transition: 1s;
}
.button_widgets a
{
  display: block;
  width: 100%;
  height: 100%;
}
.button_widgets .close
{
  display: none;
/* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
}
#open:target #left /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  -webkit-transition: 1s;
  transition: 1s;
}
#open:target .close
{
  display: block;
}
#open:target .open
{
  display: none;
}



Modifications



Image bouton - vous devez mettre une image de 60*150px pour votre bouton. Cette image est la même pour ouvrir et fermer, mais si vous souhaitez une image différente pour fermer vous devrez mettre une image en fond dans le bloc ".button_widgets .close", qui soit de la même taille que votre image onglet. Attention car l'image sera par dessus l'autre, donc si elle a de la transparence on risque de voir celle de base.
Si vous voulez du coup un bouton différent pour les deux avec transparence, le plus simple est d'enlever le fond de ".button_widgets" et mettre vos deux images en fond dans : ".button_widgets .open" (que vous devrez ajouter), et ".button_widgets .close", pour respectivement le bouton ouvrir et fermer.

Widgets à droite - si vous souhaitez utiliser ce système pour des widgets à droite, il vous faut tout d'abord activer vos widgets, bien placer vos éléments voulus dans la colonne de droite et indiquer 200px en largeur pour la colonne de droite et 0px pour celle de gauche. Puis, toutes les annotations CSS vont vous aider à modifier le code pour remplacer les "left" par "right" là où il faut, y compris pour les marges.

Widgets gauche ET droite - pour utiliser les deux côtés d'onglets, vous devez donc tout d'abord les activer tout les deux. Puis, là où vous avez mis une ouverture de bloc div id="open" ous devrez ajouter une seconde fois ce code en renommant le bloc, avec "open2" par exemple. Pensez également à mettre une seconde fois la fermeture du bloc en bas, là où vous avez ajouté "/div", il faut qu'il y soit deux fois.
Vous devez également mettre deux fois le code des boutons dans le template (le dernier donné), en changeant les noms là-aussi.
Il vous faut ensuite mettre le CSS de l'onglet gauche, puis une seconde fois ce CSS avec les modifications expliquées pour l'onglet droit.
Attention : dans le CSS de l'onglet droit pensez bien à remplacer le #open:target par un open2, de la même façon, si vous voulez des images de bouton différentes vous devrez les mettre en fond dans les blocs respectifs.


Si vous utilisez ce LS, modifié ou non, merci de mettre un Crédit à Never-Utopia en guise de remerciement Wink

Onyx

Signature à onglets - Jeu 25 Sep 2014 - 2:56

#html #messages #page_html #onglets #effet_hover #signature #auteur_Onyx



LS - Signature à onglets


Voici un petit LS de signature à onglets j'ai fait pour la demande de Madii-x.

Pour voir l'aperçu de l'onglet "Signature" : cliquez ici.
Pour voir l'aperçu de l'onglet "Cadeaux" : cliquez ici.
Pour voir l'aperçu de l'onglet "Moi" : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons créer notre signature dans une page html.
  • Puis, nous allons mettre l'iframe qui contient la page html dans notre signature.

  • Puisqu'on se sert d'une page html, il que vous ayez votre propre forum pour héberger la page html ou que votre administrateur accepte de le faire sur son propre forum.

  • Il ne faudrait pas que l'image de l'onglet "signature" dépasse 500x200 pixels.

  • L'image dans l'onglet "moi" a une hauteur de 180 pixels.
Merci de ne pas enlever le crédit vers Never-Utopia.



1. Le corps de la signature (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre signature.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)"
On choisit un nom, comme "Signature de NOM" par exemple.
Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature</title>
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />
<script type="text/javascript">
        //<!--
                function change_ongletii(name)
                {
document.getElementById('ongletii_'+anc_ongletii)
.className = 'ongletii_0 ongletii';
document.getElementById('ongletii_'+name).
className = 'ongletii_1 ongletii';
document.getElementById('contenu_ongletii_'+anc_ongletii)
.style.display = 'none';
document.getElementById('contenu_ongletii_'+name).
style.display = 'block';
                        anc_ongletii = name;
                }
        //-->
</script>
<style type="text/css">
/*Fond par HTML*/
body {
  margin: 0px;
}

/*Tableau qui entoure la sign*/
.signii {
  border: 1px solid #fe285a;
  width: 502px;
  height: 218px;
}
 
/*Onglets*/
.ongletii {
  background: #fe285a;
  height: 20px;
  font-size: 16px;
  color: white;
  font-family: abel;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #fe285a;
}
/*Onglet au survol*/
.ongletii_0:hover {
  cursor: pointer;
}
/*Onglet actif*/
.ongletii_1 {
  background: #c8254b;
}
 
/*Contenu des onglets*/
.contenu_ongletii {
  background: url('http://i39.servimg.com/u/f39/18/85/39/07/transi10.jpg');
  display: none;
  font-family: abel;
  color: #fe285a;
  font-size: 14px;
}
 
/*Contenu onglet SIGNATURE*/
.inside_1 {
  height: 200px;
}

/*Contenu onglet CADEAUX*/
.inside_2 {
  overflow: auto;
  height: 200px;
}

/*Contenu onglet MOI*/
.inside_3 {
  padding: 9px;
  padding-right: 0px;
  height: 182px;
}

/*Image dans contenu onglet MOI*/
.imgii {
  float: left;
  height: 180px;
  border: 1px solid #fe285a;
  margin-right: 10px;
}
 
/*Texte dans contenu onglet MOI*/
.textii {
  height: 172px;
  padding-right: 10px;
  text-align: justify;
  overflow: auto;
}

/*Liens dans contenu onglet MOI en bas*/
.linksii a {
  display: inline-block;
  color: #fe285a;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none!important;
  margin-right: 20px;
  margin-bottom: -8px;
}
/*Liens au survol dans contenu onglet MOI en bas*/
.linksii a:hover {
  color: #7a162d;
  font-size: 14px;
}
</style>
</head>
<body>
  <table align="center" border="0" cellpadding="0" cellspacing="0" class="signii"><tr>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('1er');" id="ongletii_1er" class="ongletii_1 ongletii">
        Signature
      </div>
    </td>
    <td width="34%">
      <div onmouseover="javascript:change_ongletii('2eme');" id="ongletii_2eme" class="ongletii_0 ongletii">
        Cadeaux
      </div>
    </td>
    <td width="33%">
      <div onmouseover="javascript:change_ongletii('3eme');" id="ongletii_3eme" class="ongletii_0 ongletii">
        Moi
      </div>
    </td></tr><tr>
    <td colspan="3">
      <div id="contenu_ongletii_1er" class="contenu_ongletii">
        <div align="center" class="inside_1">
          Contenu de l'onglet "Signature"
        </div>
      </div>
      <div id="contenu_ongletii_2eme" class="contenu_ongletii">
        <div align="center" class="inside_2">
          Contenu de l'onglet "Cadeaux"
        </div>
      </div>
      <div id="contenu_ongletii_3eme" class="contenu_ongletii">
        <div class="inside_3">
          <img src="URL DE L'IMAGE DE L'ONGLET MOI" alt=" " class="imgii" />
          <div class="textii">
            Texte de l'onglet moi.
          </div>
          <div align="right" class="linksii">
            <a href="LIEN VERS LE PROFIL" target="_blank">Profil</a>
            <a href="LIEN VERS LES MP" target="_blank">MP</a>
            <a href="http://www.never-utopia.com/t51249-signature-a-onglets" target="_blank">N-U</a>
          </div>
        </div>
      </div>
    </td></tr>
  </table>
<script type="text/javascript">
        //<!--
                var anc_ongletii = '1er';
                change_ongletii(anc_ongletii);
        //-->
</script>
</body>
</html>


Changer les images/texte
Si jamais vous voulez changer ce qu'il y a dans les onglets, c'est indiqué par "contenu de l'onglet signature", "contenu de l'onglet cadeaux", "URL DE L'IMAGE DE L'ONGLET MOI", "texte de l'onglet moi", etc... Je vous fais confiance pour vous y retrouver Wink

Modifier les onglets pour qu'ils changent au clic
Il vous suffit de trouver tous les endroits où il est indiqué "onmouseover" et de le remplacer par "onclick".

Comment modifier le style ou la mise en forme
Dans ce code, il y a aussi du CSS qui met en forme la signature. Si vous voulez modifier la police, les couleurs ou autres éléments de mise en forme, c'est là qu'il faudra le faire. Le CSS est entre les balises suivantes :
Code:
<style type="text/css">
VOTRE CSS EST ICI
</style>


Lorsque vous modifiez votre signature, il faut cliquer sur l'engrenage où c'est inscrit "HTML", pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.



1. Mettre l'iframe (espace signature)


Maintenant que la page HTML est créée avec votre signature à l'intérieur, on va aller la mettre dans votre profil à l'aide d'un iframe.

Pour cela, nous allons aller dans :
> PROFIL
> > SIGNATURE

Puis, nous allons mettre le code suivant :
Code:
<iframe src="LIEN DE LA PAGE HTML" style="display: block; margin: auto; height: 230px; width: 510px; border: none;"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, notre signature), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !

Onyx

Barre de navigation ouvrable - Mer 3 Sep 2014 - 7:51

#css #html #javascript #navigation #position_fixe #auteur_Onyx #phpBB2



Barre de navigation ouvrable


Salut !

Voici un petit LS d'une barre de navigation ouvrable au clic que j'ai remodelée à partir de la demande de Valou93. À savoir que j'ai utilisé du javascript pour ouvrir/fermer la barre, mais que vous pouvez utiliser ce tuto pour faire la même chose avec des targets qui vous préférez cette méthode.

Pour voir l'aperçu "fermé" : cliquez ici.
Pour voir l'aperçu "ouvert" au clic : cliquez ici.

Ce code est en deux parties.
  • Tout d'abord, nous allons installer la navigation (et le javascript qui la fait fonctionner) dans le template.
  • Puis, nous allons mettre en forme la navigation à l'aide du CSS.

Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.



1. Corps de la navigation (Template Overhall_Header)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Index_box" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > OVERHALL HEADER

Nous allons alors chercher l'ancienne navigation qui devrait être aux alentours des lignes 173 à 177 et ressembler à ceci :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>


Nous allons la remplacer par notre propre navigation, à savoir ceci :
Code:
<table id="navbloc" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">
      <div class="nav_links">
        {GENERATED_NAV_BAR}
      </div>
    </td>
  </tr>
  <tr>
    <td align="left">
      <span id="nav_ouvrir">Ouvrir la navigation</span>       
      <span id="nav_fermer" style="display: none;">Fermer la navigation</span>
    </td>
  </tr>
</table>
<script>document.getElementById("nav_ouvrir").onclick = function() {nav_open()}; /*Fonction pour ouvrir la navigation*/
document.getElementById("nav_fermer").onclick = function() {nav_close()}; /*Fonction pour fermer la navigation*/
function nav_open() {
  document.getElementById("nav_ouvrir").style.display = "none"; /*Fait disparition le bouton ouvrir*/
  document.getElementById("nav_fermer").style.display = "block"; /*Fait apparaître le bouton fermer*/
  document.getElementById("navbloc").style.top = "0px";} /*Fait baisser la navigation*/
function nav_close() {
  document.getElementById("nav_fermer").style.display = "none"; /*Fait disparition le bouton fermer*/
  document.getElementById("nav_ouvrir").style.display = "block"; /*Fait apparaître le bouton ouvrir*/
  document.getElementById("navbloc").style.top = "-32px";} /*Fait monter la navigation*/</script>



Donc, histoire de comprendre un peu ce qu'on a fait, nous allons regarder un peu le code que nous venons de rajouter :

  • Au tout début, il y a un tableau avec l'id "navbloc" qui nous permet de positionner notre navigation, de la même façon qu'avec la navigation normale.
  • Ensuite, dans la première cellule de notre tableau, nous avons la barre de navigation avec la class "nav_links".
  • Puis, dans la deuxième cellule, nous avons les deux boutons qui sont respectivements idenditifés avec les id "nav_ouvrir" et "nav_fermer". Le bouton "fermer" a un "display: none" pour qu'il soit invisible au départ.
  • Enfin, nous avons le javascript qui permet de fermer et d'ouvrir la navigation. Il y a déjà des explications directement dans le code, alors on va en rester là.



2. Mise en forme (CSS)


Si vous avez installé le code dans le template, vous voyez sans doute tout de suite que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre navigation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
   /********************************************* NAVIGATION *********************************************/
/*Fixe la navigation en haut cachée*/
#navbloc {
  position: fixed;
  z-index: 20;
  top: -32px;
  left: 0px;
  width: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

/*Barre de la navigation*/
.nav_links {
  background: #1A1815;
  border-bottom: 2px solid #000000;
  color: #88346B;
  height: 20px;
  padding: 5px;
}
/*Liens de la navigation*/
#navbloc a.mainmenu {
  font-family: monotype corsiva;
  font-size: 18px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
}
/*Liens de la navigation au survol*/
#navbloc a.mainmenu:hover {
  color: goldenrod;
  text-shadow: 1px 1px 1px #000000;
}

/*Boutons pour ouvrir ou fermer la navigation*/
#nav_ouvrir, #nav_fermer {
  display: block;
  width: 190px;
  margin-left: 15px;
  margin-top: -2px;
  background: #1A1815;
  border: 2px solid #000000;
  border-top: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: darkgoldenrod;
  text-shadow: 1px 1px 1px #000000;
  padding: 5px;
  font-family: Times New Roman;
  font-size: 20px;
  font-variant: small-caps;
  cursor: pointer;
  text-align: center;
}
/*Boutons au survol*/
#nav_ouvrir:hover, #nav_fermer:hover {
  color: goldenrod;
}
   /********************************************* FIN NAVIGATION *********************************************/



Pour ceux qui veulent savoir comme la barre fait pour s'ouvrir et se refermer, je vais juste donner quelques explications qui pourraient être utiles.

  • Dans le CSS du tableau "navbloc", nous avons l'attribut "top". Le "top" indique que le bloc de rechercher à -32px du haut de l'écran.
  • C'est sur cette variable qu'agit le javascript (que nous avons mis dans le template tout à l'heure).
  • Ce javascript reprend le même "top", mais en change la valeur pour "0px" lorsqu'on clique sur le bouton "ouvrir", ce qui redescend la navigation à 0px en haut de l'écran.
  • De façon semblable, lorsqu'on clique sur le bouton "fermer", cela change la valeur pour "-32px" et remet la navigation à -32px en haut de l'écran, ce qui la cache.
  • Du coup, si jamais vous souhaitez modifier les dimensions de la barre de navigation, il faudrait aller le modifier dans le CSS du tableau "navbloc" et aussi dans le javascript pour changer la valeur du "top".


C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez personnaliser le LS et que vous avez besoin d'aide.

À plus !


Merci de laisser un message pour donner vos impressions/commentaires/remerciements ^^

Databar

Fiche pub Rp Harry-potter - Mer 3 Sep 2014 - 5:27

#css #html #fiche_pub #auteur_Databar


Logo RPU - Webgraphx:



Tag html sur Never Utopia - graphisme, codage et game design - Page 5 Shot-210


Credits: Moi meme (ouai j'ai pas le meme pseudo je sais x)) pour le forum "RolePlay universe" Ne pas redistribué en LS sur d'autre forum sans mon accord, merci de laissé mes credits Razz


Alors commençons Razz

Le CSS



Code:

.fondfiche{
width: 700px;
height: 846px;
border: 2px solid #5E5E5E;
background: #1E1E1E;
}

.bann{
width: 700px;
height: 210px;
background: url('http://img110.xooimage.com/files/d/7/0/11111-47709ca.png');
border-bottom: 10px solid #D66E00;
}

.sep{
margin-top: 4px;
height: 4px;
width: 700px;
background: #D66E00;
}

.sepm{
margin-top: 4px;
height: 2px;
width: 700px;
background: #D66E00;
}

.box2{
height: 200px;
width: 222px;
font-size: 14px;
color: #5E5E5E;
margin-top: 40px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.enteteb{
width: 100%;
height: 20px;
background: #D66E00;
border-radius: 10px 10px 0px 0px;
padding-top: 2px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}

.box1{
height: 150px;
width: 222px;
font-size: 14px;
color: #5E5E5E;
margin-top: 30px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}
.conteneur{
padding: 2px;
width: 218px;
height: 117px;
overflow: auto;
}
.conteneur2{
padding: 4px;
width: 218px;
height: 155px;
overflow: auto;
}
.conteneurcont{
padding: 4px;
width: 440px;
height: 155px;
overflow: auto;
}
.navb{
height: 150px;
width: 222px;
margin-top: 30px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.cont{
height: 200px;
width: 448px;
font-size: 14px;
color: #5E5E5E;
margin-top: 40px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.partb{
margin-top: 8px;
}


.part{
height: 70px;
width: 672px;
margin-top: 40px;
font-size: 14px;
color: #5E5E5E;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.credt{
background: #111111;
text-align: center;
font-size: 16px;
color: #5E5E5E;
font-weight: bold;
margin-top: 20px;
border-top: 2px solid #D66E00;
}

.bmenu
{
width: 100%;
/*background: #202126;*/
/*border-bottom: 1px solid #005B89;*/
border-top: 1px solid #303034;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
    -webkit-transition : all 1s;
}

.bmenu:hover
{
width: 100%;
/*border-bottom: 1px solid #005B89;*/
border-top: 1px solid #303034;
background: #D66E00;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
    -webkit-transition : all 1s;
}

a:link{
text-align: center;
text-decoration: none;
color: #FFFFFF;
}

a:link:hover{
text-align: center;
color: #FFFFFF;
}

li {list-style-type: none;}



Html




Code:
<div class="fondfiche">
  <div class="bann"></div>
  <div class="sepm"></div>
  <div class="sep"></div>
<table style="padding: 10px;">
  <tr>
  <td><div class="navb"><div class="enteteb">Navigation</div>
      <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
    </div></td><td><div class="box1"><div class="enteteb">Actualité</div><div class="conteneur">
blablablblab<br/>
lablblabblablablb<br/>
lablablblablablblablblalablblablbla<br/>
blablablblab<br/>
lablblabblablablb<br/>
lablablblablablblablblalablblablbla<br/>
blablablblab<br/>
lablblabblablablb<br/>
lablablblablablblablblalablblablbla<br/>
</div></div></td><td><div class="box1"><div class="enteteb">Le Staff</div></div></td>
</tr>
<tr>
  <td colspan ="2"><div class="cont"><div class="enteteb">Contexte</div>
 <div class="conteneurcont">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel finibus lectus, non congue lorem. Nunc tincidunt dui sed justo viverra lacinia. Mauris finibus metus non erat suscipit, et blandit elit placerat. Vestibulum tempus dignissim posuere. Maecenas quam nulla, egestas sit amet libero eget, sodales mollis eros. Aliquam dictum eleifend lobortis. Fusce rhoncus quam et fermentum facilisis. Praesent iaculis molestie pharetra.

Integer eleifend, nibh vel faucibus dictum, lacus arcu semper ex, sed varius nulla sapien cursus lectus. Integer ut massa sed nibh venenatis porta. Morbi sit amet nunc at dolor vulputate sollicitudin. Fusce laoreet eu nunc vel ullamcorper. Proin vel varius mi, ornare convallis nunc. Vestibulum finibus leo et lacinia tempor. Ut aliquet, sem condimentum tempor semper, elit metus vestibulum quam, faucibus vehicula mi nibh pellentesque mi. Nam imperdiet porttitor quam, nec faucibus est pulvinar sed.

Suspendisse in diam pellentesque, fermentum arcu id, sagittis mi. Suspendisse vehicula condimentum felis, in egestas leo. Donec sed porta est. Fusce imperdiet vel ligula quis convallis. Integer ac elit non odio dictum imperdiet. Nulla libero justo, semper egestas enim vitae, varius commodo turpis. Vestibulum auctor placerat neque. Nunc quam mauris, lobortis nec scelerisque a, tincidunt eu leo. Duis consequat, nisl at pretium volutpat, nulla nisl volutpat lectus, vel varius quam ante non magna.

Quisque varius, sem vehicula iaculis blandit, nibh enim viverra tortor, vel ultricies mi orci a lectus. Nam ultrices dui tellus, a molestie felis interdum quis. Aenean est massa, vehicula sit amet feugiat quis, dapibus accumsan nunc. Quisque molestie vehicula ultricies. Aliquam sem orci, laoreet non tellus eget, aliquet porttitor sem. Curabitur vestibulum nisl nulla, at auctor turpis porttitor ac. Cras tincidunt lacinia neque. Sed malesuada dolor arcu, sit amet vehicula ante ornare eget. Integer quis magna sit amet lorem facilisis feugiat. Quisque elementum leo neque, non sagittis odio varius dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras facilisis, enim ac vehicula commodo, ex velit porta arcu, sed ultrices dui velit non arcu.

Ut cursus metus felis, at scelerisque tortor vestibulum rutrum. Morbi suscipit volutpat ligula, eu bibendum elit viverra ut. Curabitur mollis cursus felis nec lacinia. Ut mollis varius arcu eu placerat. Cras tellus nisl, lobortis id arcu quis, efficitur porta velit. Integer convallis augue eget lectus vulputate pulvinar et eget lectus. Nunc quis leo erat. </div>   
  </div></td><td><div class="box2"><div class="enteteb">Statistique</div>
  <div class="conteneur2">
Nombre de membre:<br/>
Nombre de Post: <br/>
Age du forum<br/>
Recrutement:<br/></div>
  </div></td>
</tr>
<tr>
  <td colspan ="3"><div class="part"><div class="enteteb">Partenaires</div>
 <div class="partb">  <marquee>
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
  </marquee> </div></td>
</tr>
  </table><div class="credt"><center>Crée par Databar - RPU 2014 - Libre service <a href="http://www.never-utopia.com" target="blank">Never utopia</a></center></div>
</div>


Je precise, les images lien mit sur la version de demo ne renvoie vers aucun forum ^^

A-Lice

Affaire classée - Sam 23 Aoû 2014 - 0:08

#html #fiche_pub #page_html #auteur_A-Lice



Affaire classée


Suite à une demande d'Angie Dalton voici une fiche de Pub Affaire classée.

Je précise que l'arrière plan vert correspond à mon forum.

Voici donc un aperçu : www


Et le code :
HTML :
Code:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' /></head><body>
<div style="width:650px; background-color: firebrick; border:1px solid black; margin:auto;"><div style="border-top-left-radius: 20px; border-top-right-radius: 20px; width:80px; background-color: firebrick; padding:5px; font-size:12px; color:black; border-top:solid 1px black; border-left:solid 1px black; border-right:1px solid black; text-align:center; transform:rotate(-90deg); position:relative; left:-59px; top:40px;">Pub</div><br/><br/>
<div style="width:93%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); transform:rotate(-1deg); border: solid 1px black; margin-left:auto; margin-right:auto; margin-top:-50px;"><div style="width:100%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); transform:rotate(-1deg); border: solid 1px black; margin:auto;"><div style="width:97%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); margin:auto; padding:10px; transform:rotate(2deg); border: solid 1px black; text-align:center;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div style="width:90%; text-align:justify; font-size:13px; color:black; padding:10px; margin:auto;"><span style="display:block; text-align:center; font-size:25px; color:black;">Fiche de Pub</span>
  <br/>
  <br/>
  <div style="width:580px; height:200px; margin-left:-25px; overflow:hidden;"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
  <br/>
<div style="margin:auto; width:90%; padding:10px; text-align:justify; background-color:firebrick; color:white; border:black 1px solid;"><span style="display:block; text-align:center; font-size:25px; color:BurlyWood; font-family: 'Pacifico', cursive; padding:10px;">Nom du forum et/ou lien</span>
    <div style="width:95%; border:2px black dashed;padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Contexte</span><br />
  Blabla du contexte.
    </div> <br />
  <div style="width:95%; border:2px black dashed; text-align:center; padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Staff</span><br />
      <div style="display:inline-block; padding:5px;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="padding:5px; display:inline-block;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="display:inline-block; padding:5px;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="padding:5px; display:inline-block;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div>
    </div><br />
    <div style="display:inline-block; margin-left:1%; width:31%; border:2px black dashed;padding:5px;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Stat's</span><br />
    Blabla.
      </div> <div style="display: inline-block; width:61%; border:2px black dashed;padding:5px;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Ce que tu veux</span><br />
  Blabla.
    </div> <br /><br />
    <div style="width:95%; border:2px black dashed;padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">En savoir plus...</span><br />
      <a href="">Blabla d'un lien</a><br />
      <a href=""><img src="" alt="" /></a>
     
    </div> <br />
  </div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" style="text-decoration:none; font-size:12px; color:black; text-align:center; padding:5px; display:block;">© A-Lice | Never-Utopia</a></div></body></html>


Cette fiche a été codé pour être mise en page HTML (Panneau d'administration -> Modules -> Gestion des pages HTML -> Création en mode avancé (HTML)) Et pour la partager, il faut le faire via iframe.


Iframe :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="710px" height="1450px"></iframe></center>


D'ailleurs, il faut adapter la hauteur (height) de l'iframe à celle de la Pub.


La suite de l'ensemble se trouve ici :


Règlement
Contexte
Présentation
Prédéfini
Liens
Récapitulatif
Contenu RP
Demande de Partenariat
Pub

/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

Affaire classée - Demande de partenariat - Sam 23 Aoû 2014 - 0:08

#html #css #fiche_pub #auteur_A-Lice



Affaire classée


Suite à une demande d'Angie Dalton voici une demande de partenariat Affaire classée.

Je précise que l'arrière plan vert correspond à mon forum.

Voici donc un aperçu : www


Et le code :
HTML :
Code:
<div class="fiche_part"><div class="etiquette_part">Demande de partenariat</div><br/>
<div class="fond1_part"><div class="fond2_part"><div class="fond3_part">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div class="txt_part"><span class="titre_part">Demande de partenariat</span>

<div class="img_part"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
<div class="bloc_part"><span class="titre2_part">Nom du forum</span>
Texte ici
</div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" class="credit_part">© A-Lice | Never-Utopia</a></div>



CSS :
Code:
.fiche_part {
width:650px;
background-color: firebrick;
border:1px solid black;
margin:auto;
}
.etiquette_part {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width:160px;
background-color: firebrick;
padding:5px; font-size:12px;
color:black;
border-top:solid 1px black;
border-left:solid 1px black;
border-right:1px solid black;
text-align:center;
transform:rotate(-90deg);
position:relative;
left:-100px;
top:80px;
}
.fond1_part {
width:93%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin-left:auto;
margin-right:auto;
margin-top:-50px;
}
.fond2_part {
width:100%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin:auto;
}
.fond3_part {
width:97%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
margin:auto;
padding:10px;
transform:rotate(2deg);
border: solid 1px black;
text-align:center;
}
.txt_part {
width:90%;
text-align:justify;
font-size:13px;
color:black;
padding:10px;
margin:auto;
}
.titre_part {
display:block;
text-align:center;
font-size:25px;
color:black;
}
.img_part {
width:580px;
height:200px;
margin-left:-25px;
overflow:hidden;
}
.bloc_part {
margin:auto;
width:90%;
padding:10px;
text-align:justify;
background-color:firebrick;
color:white;
border:black 1px solid;
}
.titre2_part {
display:block;
text-align:center;
font-size:25px;
color:BurlyWood;
padding:10px;
}
a.credit_part {
text-decoration:none;
color:black;
text-align:center;
padding:5px;
display:block;
}


Pour ceux qui désirent prendre l'ensemble du pack « Affaire classée », voici le CSS complet du pack, à ne copier qu'une seule fois pour toutes les fiches.


CSS :
Code:
.g_fiche {
width:600px;
background-color: firebrick;
border:1px solid black;
margin:auto;
}
.g_etiquette {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width:80px;
background-color: firebrick;
padding:5px;
font-size:12px;
color:black;
border-top:solid 1px black;
border-left:solid 1px black;
border-right:1px solid black;
text-align:center;
transform:rotate(-90deg);
position:relative;
left:-60px;
top:40px;
}
.g_fond1 {
width:90%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin-left:auto;
margin-right:auto;
margin-top:-50px;
}
.g_fond2 {
width:100%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin:auto;
}
.g_fond3 {
width:97%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
margin:auto;
padding:10px;
transform:rotate(2deg);
border: solid 1px black;
text-align:center;
}
.g_texte {
width:90%;
text-align:justify;
font-size:13px;
color:black;
padding:10px;
margin:auto;
}
.g_titre {
display:block;
text-align:center;
font-size:25px;
color:black;
}
.g_soustitre {
display:inline-block;
text-indent:30px;
font-size:16px;
}
a.g_credit {
text-decoration:none;
color:black;
display:block;
text-align:center;
padding:5px;
}
.g_img_cont {
width:100px;
height:100px;
padding:3px;
}
.g_img_cont2 {
margin-left:-30px;
width:565px;
}
.g_titre_lien {
display:inline-block;
text-align:right;
font-size:18px;
width:465px;
}
.g_bloc_lien {
margin:auto;
width:465px;
background-color:firebrick;
}
.g_txt_lien {
height:110px;
display:inline-block;
text-align:justify;
color:black;
overflow:auto;
width:350px;
padding-right:5px;
padding-top:5px;
}
.g_img_lien {
display:inline-block;
float:left;
padding:5px;
}
.g_titre_bord {
display:inline-block;
margin:auto;
width:210px;
text-align:center;
font-size: 18px;
padding:5px;
color:black;
}
.g_txt_bord {
display:inline-block;
margin-left:10px;
width:210px;
height:300px;
background-color:firebrick;
border:solid 1px black;
padding:5px;
overflow:auto;
color:white;
}
.g_txt_rp {
margin:auto;
width:90%;
padding:10px;
text-align:justify;
background-color:firebrick;
color:white;
border:black 1px solid;
}
.g_titre_rp {
display:block;
text-align:center;
font-size:25px;
color:BurlyWood;
font-family: 'Pacifico', cursive;
padding:10px;
}
.g_soustitre_rp {
display:block;
text-align:right;
color:burlywood;
font-size:12px;
border-bottom:dashed 2px burlywood;
font-family: courrier new;
padding:10px;
text-shadow:1px 1px 3px white;
}
.g_parole_rp {
display:inline-block;
color:BurlyWood;
text-indent:25px;
font-style:italic;
font-size:14px;
}
.g_img_part {
width:580px;
height:200px;
margin-left:-25px;
overflow:hidden;
}


Et le HTML qui y correspond :
Code:
<div class="g_fiche" style="width:650px;"><div class="g_etiquette" style="width:160px; position:relative; left:-100px; top:80px;">Demande de partenariat</div><br/>
<div style="width:93%;" class="g_fond1"><div class="g_fond2"><div class="g_fond3">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div class="g_texte"><span class="g_titre">Demande de partenariat</span>

<div class="g_img_part"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
<div class="g_txt_rp"><span class="g_titre_rp">Nom du forum</span>
Texte ici
</div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" class="g_credit">© A-Lice | Never-Utopia</a></div>


Un petit commentaire (un avis ?) suffit pour voir le code.

La suite de l'ensemble se trouve ici :


Règlement
Contexte
Présentation
Prédéfini
Liens
Récapitulatif
Contenu RP
Demande de Partenariat
Pub

/!\ En cas de problème, c'est ici que ça ce passe.


Revenir en haut

La date/heure actuelle est Lun 13 Mai 2024 - 11:14