(SELENE) Un mélange de plusieurs turoriels. [Catégories]

Rappel du premier message :

Bonjour

comme écrit dans le titre, ma demande est un peu un mélange de plusieurs tutoriel. La Base étant le tutoriel des catégories en deux colonnes sauf qu'en réalité, j'en veux qu'une et le tutoriel où l'on peut mettre des images au lieux des titres de catégories.

Elément à coder : [catégorie]
Adresse du forum : http://numendor-rpg.forumactif.com/
Description du résultat voulu : Ce que je voudrais est un mélange de plusieurs tutoriels présent sur votre site. Mais étant nulle en création de codage, je poste ici pour faciliter la tâche.
Voici un schéma de ce que je souhaiterais à savoir que la couleur grise est le fond du forum.
Normalement tout est indiqué de manière ç bien comprendre.
Pour les sous-forums ce que je souhaite c’est un effet coulissant. Dès qu’on clique sur « voir les sous-forums » que cela coulisse vers le bas et fasse apparaitre les noms des sous-forums. (De la même manière que le tutoriel proposant des catégories en deux colonnes.)

Couleurs ou tons : Fond noir et bordure blanche, je les changerais moi-même par la suite.
Images : Pour les dimensions…
Image de catégorie : 900*150
Taille de la zone « forum » 900*200
Autres précisions : Si vous avez des questions n’hésitez pas.
Je vous remercie d’avance.

Bonjour,

Je viens aux nouvelles. Ma commande n'est-elle pas trop compliquée?

Bonjour,

Pas du tout mais j'ai eu des examens cette semaine je n'ai pas pus m'y pencher sérieusement mais vous devriez avoir un résultat ce week-end

Bonjour,

Est-ce que vous avez une taille à me donner pour l'image de catégorie ? Car les positions des éléments tourneront autour d'elle et si je définis une taille que vous n'employez pas cela pourrait créer des beugs, et ça serait bien dommage !

Bonsoir.

Örmée a écrit:
Image de catégorie : 900*150

C'est cette info là qu'il te faut?

Oh oui excuse moi je ne l'avais pas vue autant pour moi

Pas de soucis :)

Coucou,

J'avais une question qui, justement traite de la taille de l'image de catégories.
La taille est-elle facilement changeable dans le template ou le CSS?
Car bon, disons que finalement mes modèle de taille 900*245 me plaisent plus.

Excuse-moi de déjà te faire faire des modifications alors que tu n'as même pas encore terminé. XD

Coucou,

Oui bien sûr, je peux changer dis-moi juste la nouvelle mesure que je modifie ça de suite

Coucou 900*245 :)

Merci beaucoup!

Bonsoir,

Voilà pour vous : http://ocelline-testdesign.forumactif.org/?tt=1

Bonsoir.


Merci déjà, en un premier temps, pour ta rapidité.

J'aurais quelques questions quant à ce que tu me propose.

*L'image qui s’atténue dans les sous-forum, on peut mettre une autre taille? (tout en gardant une limite pour rien déformer bien sûr.)
*Les espaces noirs entre l'image des sous-forum/titre et l'espace entre le nbr de sujets/raccourcis sous forum, peut on diminuer cette espace noir?

Voici une image : https://2img.net/r/hpimg11/pics/463766Sanstitr1556.jpg

*Peut on également réduire l'espace entre l'image de catégorie avec le sous-forum pour faire en sorte qu'elles se touches?
*Et une dernière chose, peut-on mettre un cadre d'une autre couleur sous le texte "dernier message posté etc".

Voilà, s'il y a des choses trop compliqué à changer, ce n'est pas grave :)

Bonsoir,

Oui bien sûr, vous pouvez mettre une autre image, l'idéal serait une hauteur de 100 pour s'aligner avec le bouton no new mais la largeur importe peu. Pour le cadre pas de soucis également, il suffit de m'indiquer la couleur

Voilà les modifications demandées : http://ocelline-testdesign.forumactif.org/

Bonsoir.

Alors voici la couleur pour le cadre : #31613F

J'ai dût mal m'exprimer dans mon dernier poste.
Je voulais réduire l'espace entre la petite image et les bords du sous-forum et faire coller la grande image de catégories aux forums.

Voici une image qui devrait être plus explicite.

https://2img.net/r/hpimg15/pics/282122Sanstitre.jpg

Bonsoir,

L'image de description vus souhaiteriez plutôt quel taille ? (le changement de taille pourrait réduire un de nos petits soucis

Bonjour,


475*100 :)

La hauteur vous convient ? Parce que sinon je peux faire plus, oui finalement ça ne gène pas le codage ^^

Ah c'est chouette alors car j'avais prit 100 par rapport à la contrainte du no-new

Alors se serait 475*110 :)

Hey !

Comme ceci ? http://ocelline-testdesign.forumactif.org/

Bonsoir,

Il reste encore quelques bugs.

*Le "2 messages dans 2 sujets" est masqué par l'image de description.
*Les sous-forums son trop rapprochés entre eux et le titre masquera les titres de sous-forums.
*L'image de catégorie réapparaît en grand lorsqu'on passe dans un sous-forum. Je pense qu'il existait un tutoriel qui expliquait comment mettre une image en catégorie et qui expliquait comment éviter ce problème en faisant rétrécir l'image lorsqu'il apparaissait comme lien dans les sous-forums.
*Serait-il possible d'augmenter la taille du cadre vert sur ses côtés gauche et droit pour ne pas que le texte colle?


Merci d'avance.

Bonsoir,

Est-ce mieux ainsi : http://ocelline-testdesign.forumactif.org/?tt=1

C'est parfait, merci bien! :)

Hello,

Contente que ça vous plaise

Alors avant de vous donner les codes :

Dans votre PA faite Affichage -> Page d'accueil -> Structure et Hiéarchie et sélectionnez Séparer les Catégories sur l'Index -< Moyen puis validez.

Ensuite dans Images & Couleurs sélectionnez l'onglet couleur et supprimer les couleurs des tables des catégories soit Table Rangée Couleur 1 ,Table Rangée Couleur 2 et surbrillance , Table Rangée Couleur 3 et séparations

Et c'est partie pour les codes

Collez-ce template index-box :

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>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
                  <div class="box"><span class="genmed"><div class="nonew"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>{catrow.forumrow.FORUM_DESC}<div class="lastpost">{catrow.forumrow.LAST_POST}</div><div class="stat">
         {catrow.forumrow.TOPICS} Messages
      
   
                {catrow.forumrow.POSTS} Sujets - Texte changeable</div></span></div>   
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
         <div class="sous_forum">
    <span class="sforum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
    <span class="ouverture_sousforum">Voir les sous-forum</span>
  </div>
         </span>
      
      
      
      
           
   
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Voici le css à coller :

Code:

/*Catégories*/

.namefow{
  font-size:25px;
  text-transform:uppercase;
  color:white;
font-family: 'Unica One', cursive;
  text-align:center;
position:absolute;
margin-left:420px;
  margin-top:-8px;
  z-index:4

}

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

.box{
 background-color:black;
  width:850px;
  height:220px;
margin-top:-15px;
  border:1px solid white;
  border-radius:50px 50px 50px 50px;
  margin-left:85px;
  padding-bottom:-215px;
 
 
}

.cate{
 
 background:url('') top center no-repeat;
  width:550px;
  height:auto;
  margin-left:55px;
  margin-top:auto;
  margin-bottom:-10px;
 
 
}

.nonew{
 margin-top:40px;
  margin-left:20px;}

.descrimg{
  width:450px;
  height:100px;
  margin-left:150px;
  position:relative;
  margin-top:-95px;
  position:relative;
  z-index:2;
  overflow:hidden;
padding-bottom:65px;
}

.descrimg:hover{
  width:450px;
  height:100px;
  margin-left:140px;
  position:relative;
  margin-top:-95px;
  position:relative;
  opacity:0.1;
-webkit-transition: opacity 1s ease-in-out;/*chrome*/
-moz-transition: opacity 1s ease-in-out;/*mozilla*/
  transition: opacity 1s ease-in-out;/*autre navigateur*/
  color:white;

 

}

.stat{

  color:white;
  margin-left:300px;
  text-transform:uppercase;
  font-family: 'Unica One', cursive;
  font-size:12px;
  margin-top:10px;

}

.sforum
{
  position: relative;
  z-index: 3;
  display: block;
  height:0;
  width:693px;
    background:black;
  color: #b5b5b5;
  overflow: hidden;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
  border-radius:10px 10px 0px 0px;
  margin-left:132px;
  margin-top:1px;
margin-bottom:-1px;
}

.ouverture_sousforum
{
  position: relative;
  z-index: 2;
  display: block;
  float: right;
  width:700px;
  margin-right:105px;
  background:black;
  color: #b5b5b5;
  font-size: 11px;
  text-align: center;
  padding:-4px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
 
 
}

.sous_forum:hover .sforum
{
  height:20px;
  background:black;
  color: #b5b5b5;
  padding: 4px;
  overflow: auto;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
margin-bottom:-5px;
}

.lastpost{
  width:100px;
  height:100px;
  margin-left:700px;
  color:white;
  font-size:12px;
  text-decoration:none!important;
  margin-top:-125px;
  background-color:#31613F;
  width:100px;
  text-indent:5px;
  padding-left:5px;

}
 
        .nav img {
        width:500px!important;}

Dans les titres de catégorie :

Code:

<div style="margin-top:15px;"><div class="cate"><img src="ADRESSE_DE_L'IMAGE"> </div> </div>

Les titres de forum :

Code:

<link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'><div class="namefow"> Titre du forum </div>

Le code à mettre dans les descriptions :

Code:

<div class="descrimg"><img src="http://www.athair.com/wp-content/uploads/2010/12/deathwing.jpg"></div> <div style="color:white;z-index:4;width:450px;height:110px;margin-top:-159px;margin-left:150px">  L'amour est le seul poison qui peut venir à bout de mon coeur. Je te le révèle aujourd'hui car je sais que tu m'aimes et que tu ne me précipiteras pas de l'autre côté du monde. En tout cas ce n'est n'y aujourd'hui n'y demain. Lorem LupsumL'amour est le seul poison qui peut venir à bout de mon coeur. Je te le révèle aujourd'hui car je sais que tu m'aimes et que tu ne me précipiteras pas de l'autre côté du monde. En tout cas ce n'est n'y aujourd'hui n'y demain. Lorem Lupsum</div>

Bonjour,

Puis-je avoir de vos nouvelles ? Ce serait agréable de ne pas avoir bossé pour rien

Pas de nouvelles ? Mp de relance envoyé à Ormée

Bonsoir, et désolée de t'avais fait autant attendre.

J'ai fait les essais et tout me convient.
L'ensemble sera installé lors de la prochaine mise à jour du forum.

Mais le crédit est déjà installé.

Je t'enverrais un MP avec le résultat dés qu'il sera mit en ligne (certainement mi-janvier).

Merci pour ton travail. :)