Ocelline
Messages : 39 Age du personnage : 24 Date d'inscription : 03/01/2010
Feuille de personnage Ton Carnet:
| Sujet: Commande n'1 sur Templactif : Catégories pour Alohomera 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.kanak.fr/f1-votre-1er-forum"> ► Mon premier forum</a> <a href="http://ocelline-testdesign.kanak.fr/f1-votre-1er-forum"> ► Mon premier forum</a> <a href="http://ocelline-testdesign.kanak.fr/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
Dernière édition par Admin le Jeu 17 Mai - 14:10, édité 2 fois | |
|
Ocelline
Messages : 39 Age du personnage : 24 Date d'inscription : 03/01/2010
Feuille de personnage Ton Carnet:
| Sujet: Re: Commande n'1 sur Templactif : Catégories pour Alohomera Mer 25 Jan - 22:52 | |
|
Dernière édition par Admin le Mar 31 Jan - 18:54, édité 1 fois | |
|
Ocelline
Messages : 39 Age du personnage : 24 Date d'inscription : 03/01/2010
Feuille de personnage Ton Carnet:
| Sujet: Re: Commande n'1 sur Templactif : Catégories pour Alohomera Mar 31 Jan - 18:41 | |
| Hey
EDIT : -> Personnalisation des descriptions -> Modification du titre de catégorie. -> Nouveaux codes à mettre. | |
|
Ocelline
Messages : 39 Age du personnage : 24 Date d'inscription : 03/01/2010
Feuille de personnage Ton Carnet:
| Sujet: Re: Commande n'1 sur Templactif : Catégories pour Alohomera Jeu 17 Mai - 14:10 | |
| Codage mis en Libre Service :smile | |
|
Contenu sponsorisé
| Sujet: Re: Commande n'1 sur Templactif : Catégories pour Alohomera | |
| |
|