Commande n'1 sur Templactif : Catégories pour Alohomera

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

Messages : 40
Age du personnage : 18
Date d'inscription : 03/01/2010

Feuille de personnage
Ton Carnet:

Parchemin signé Ocelline le Mer 25 Jan - 22:48
Hey,

La commande de Potter's pour son forum Alohomera été réalisé par moi même par l'intermédiaire de Templactif.
Le rendu est le suivant avec opacité minimum/progressive :



Réalisé à l'aide de modification du template index-box : Modification du titre, de la position du bouton et fusion des colonnes des messages. Avec utilisation de bloc arrondis, de texte ombré ainsi que de fieldset.

Pouvoir parvenir à ce résultat nous devons mettre ce template là à la place du template index-box que vous avez actuellement :
Code:
 <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr>
      <td valign="bottom">

    <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> 
      </td>
  </tr>
</table>
        <!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>
              <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
                </tr></table><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       
          <!-- 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"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
     
  <tr>
      <!-- BEGIN inc --> 
     
      <!-- END inc -->
      <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}>
<table width="100%"><tr><td class="sep"  width="75%"><div id="forumdesc"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td  width="25%"class="sousfo"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
</script></td></tr></table>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
       
        </span>
    </td>
      <!-- BEGIN forum_link_no -->
  <td class="row3 over" align="left" valign="left" height="50" colspan="2">
<left><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></left>
    <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}<div class="forum-stats">{catrow.forumrow.POSTS} messages & {catrow.forumrow.TOPICS} sujets.</div></span></div>
    </td>
 <!-- END forum_link_no -->

  </tr>
  <!-- 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>
<div id="table_foot"></div>
</div><div class="catfoot"></div>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Avant de mettre votre image en titre de catégorie, il faut pour avoir une opacité progressive créer une page javascript sur FA et y intégrer ce code :
Code:
$(document).ready(function(){
                    $(".fading").fadeTo("slow", 0.3); // This sets the opacity of the thumbs to fade down to 30% when the page loads
                    $(".fading").hover(function(){
                    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
                    },function(){
                    $(this).fadeTo("slow", 0.3); // This should set the opacity back to 30% on mouseout
                    });
                    });

Tu enregistre et tu colle le code suivant dans : Général -> Forum -> Configuration -> Description du site :
Code:
<script type=text/javascript src=ICI MET LE LIEN DE TA PAGE JAVA></script>

Pour mettre une image entant que titre de catégorie il faut mettre ce code ci à la place du titre avec l'opacité progressive :
Code:
<img src="http://img710.imageshack.us/img710/561/administrationcodage.png" class="fading">

Le CSS à mettre dans la feuille de style est le suivant :
Code:
 /*---------------- LIENS CATEGORIES ----------------*/

a.forumlink:link, a.forumlink:visited {
font-family: Courrier New;
font-size:25px;
font-style: bold;
color: #6b3746;
display: block;
margin-left:10px;
text-shadow: #1A1918 0px 0px 10px;
margin-bottom:-20px;
font-weight: normal;
letter-spacing:-1px;
}

a.forumlink:hover, a.forumlink:hover:visited {
font-family: Courrier New;
font-size:25px;
font-style: bold;
color: #7D4444;
display: block;
margin-left:10px;
text-shadow: #1A1918 0px 0px 10px;
margin-bottom:-20px;
font-weight: normal;
  letter-spacing:-1px;
}

/*---------------- SOULIGNEMENT ----------------*/
a:hover {
text-decoration: none !important;
}
 
table tr td div span.petit
{
display: none;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}


/*---------------- AFFICHAGE DES CATEGORIES ----------------*/
 
/*---- Cette partie correspond à l'onglet "X messages dans X sujets" ------*/
.forum-stats{
  font-size:9px;
  padding:3px;
  text-align:center;
  width:180px;
  margin-top: 2px;
}

.lastm {
  background-color:#D8DCE5;
  font-size:8px;
  padding:3px;
  text-align:center;
  width:150px;
  -moz-border-radius:5px;
  -webkit-border-radisu:5px;
}


/*ligne de séparation entre description et sous-forums
.sep{
border-right: 1px solid #2E181B;/*épaisseur style et couleur de la ligne*/
} */
 
/*fond description
#forumdesc{
  background-color:transparent;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  color:#000000;
  font-size:11px;
  padding-top:2px;
  padding-bottom:-10px;
  margin-top:2px;
  text-align:center;
  width:400px;
  -moz-box-shadow-inset: 1px 1px 3px #000000;
}*/

#forumdesc {
  font-family:Arial;
  font-size:9px;
  text-align:justify;
}
 

/*---------------- SOUS FORUMS ----------------*/
.sousfo{
padding: 2px;/*marge intérieure*/
overflow: auto;
height:50px;
  position:top;
  font-size:7px;
}

a.sousfo{
  font-size:4px;
}


/*---------------- BORDS FORUM ----------------*/
.bodyline {
  border-left:0px solid #190C0E;
  border-right:0px solid #190C0E;
  padding-top:-15px;
  -moz-box-shadow: 0px 0px 10px #000;
}

.forumline{
  -moz-border-radius:5px;
}


/*---------------- SUPPRESSION BORDURES DE TITRES ----------------*/
.row3Right
{
border: none !important;
}
.thHead
{
border: none !important;
}
.thCornerL, .thCornerR, .thTop
{
border: none !important;
}
.thLeft, .thRight
{
border-left: none !important;
border-right: none !important;
}
.catLeft, .catRight
{
border: none! important;
}
.catHead
{
border: none !important;
}
.catBottom
{
border: none !important;
}


/*---------------- ESPACES FORUM ----------------*/
body{
margin-top: 0px;
margin-bottom: -30px;
}

#i_logo {
margin-top:-10px;
margin-left:-100px;
margin-right:-100px;
margin-bottom:-10px;
}



/*---------------- OMBRES ----------------*/
u{border-bottom: 1px dotted;text-decoration: none}
table tr td div span.petit
{
display: none;
}
a{
text-decoration:none;
text-shadow: black 1px 1px 2px;
}
a:hover{
text-decoration:none;
text-shadow: black 1px 1px 2px;
}


/*---------------- FOND DE CHAMP TEXTE ---------------*/
textarea {
background-image: #47252F;
}


/* BORDS FORUMS ARRONDIS

.forumline{
background-color: #B1C6C7;
-moz-border-radius: 0px 0px 14px 14px ;
border-bottom: 8px #B1C6C7 solid;
border-top: 1px #B1C6C7 dotted;
border-right: 1px #B1C6C7 solid;
border-left: 1px #B1C6C7 dotted;}

.forumline
{
background-color: transparent;
background-image: url(http://i41.tinypic.com/10hpxmx.png);
background-repeat: repeat;
padding-left: 20px;
padding-right: 18px;
border: none;
} */


/* CREER UN CADRE AVEC DES IMAGES DANS UNE TABLE

#table_head
{
width: 850px;
height: 47px;
background-color: transparent;
background-image: url(http://i44.tinypic.com/2h5si9s.png);
background-repeat: no-repeat;
}

#table_foot
{
width: 850px;
height: 47px;
background-color: transparent;
background-image: url(http://i41.tinypic.com/fxdk6g.png);
background-repeat: no-repeat;
} */


/* ENTETE ET FOOTER CATEGORIE

.cathead {
    width: 850px; height: 118px;
    margin: auto;
    background: url('http://i41.tinypic.com/bi1c74.png') top center no-repeat;
  }

  .catbody {
    width: 850px;
    margin: auto;
    background: url('http://www.pixyup.com/uploads/252043434ef77cef12e5d.png') center repeat-y;
  }

  .catfoot {
    width: 850px; height: 118px;
    margin: auto;
    background: url('http://i43.tinypic.com/k33ipk.png') bottom center no-repeat;
  } */

/Code pour le titre des catégories/

.secondarytitle {
  background-image: url('http://img15.hostingpics.net/pics/168207atgorpo1.png');
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: bottom left;
  height:300px;
  width:600 px;
  text-align: left;
  padding-left: 5px;}

Pour réaliser le même codage que les descriptions, insérez ce code dans vos descriptions :
Code:
<div style="width:100%;float:left;border:1px solid black;height:65px;padding:5px;margin-right:5px;margin-top:5px;text-shadow:2px 1px 3px white;-moz-border-radius:15px 15px 15px 15px;background-color:silver">Voilà ici tu pourras mettre une belle description. Stylé non ? Lorum Lepsum bouuh bouuh bouuh bouuh Pour que ton lien forum ... Sois bien en bas n'oublie pas d'adapter la hauteur à la description. Plus elle est longue mieux c'est si tu veux garder 100px de valeur sinon gare aux effets ptits cookis !<p><a href="http://ocelline-testdesign.forumactif.org/f1-votre-1er-forum"> ► Mon premier forum</a> <a href="http://ocelline-testdesign.forumactif.org/f1-votre-1er-forum"> ► Mon premier forum</a> <a href="http://ocelline-testdesign.forumactif.org/f1-votre-1er-forum;"> ► Mon premier forum</a> </p></div>

(c) 2012 Zanga Ocelline

Ne pas reproduire sans mon autorisation, codage qui n'est pas en Libre Service pour le moment.
Rappel des titrages de commande :
Rouge foncée : N'est pas en LS
Olive : Commande sans nouvelle
Vert : Est en LS
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar

Messages : 40
Age du personnage : 18
Date d'inscription : 03/01/2010

Feuille de personnage
Ton Carnet:

Parchemin signé Ocelline le Mer 25 Jan - 22:52
Hi !

Evaluation de Commande :

Commande prise en charge par le codeur Ocelline : Le 21/01/12
Commande rendue/finie par le codeur Ocelline : X
Présence de beug du codage : Non défini au 25/01/12
Commentaire du demandeur : C'est Super !
Lien de la commande : http://templactif.forumgratuit.org/t441-categories-urgentes-svp-ocelline-en-pause
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar

Messages : 40
Age du personnage : 18
Date d'inscription : 03/01/2010

Feuille de personnage
Ton Carnet:

Parchemin signé Ocelline le Mar 31 Jan - 18:41
Hey

EDIT : -> Personnalisation des descriptions
-> Modification du titre de catégorie.
-> Nouveaux codes à mettre.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar

Messages : 40
Age du personnage : 18
Date d'inscription : 03/01/2010

Feuille de personnage
Ton Carnet:

Parchemin signé Ocelline le Jeu 17 Mai - 14:10
Codage mis en Libre Service :smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé


Parchemin signé Contenu sponsorisé le
Revenir en haut Aller en bas

Commande n'1 sur Templactif : Catégories pour Alohomera

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» catégories pour séparer ses forums
» Changer image de la barre des catégories
» Cadre pour la description des catégories
» Bouton pour cacher les différentes catégories
» [Annulée] Demande de description des catégories.

Forum de test de Ocelline :: Le LS :: LS de codage-