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

Hiro'

Affichage du profil au survol de l'avatar - Sam 21 Sep 2013 - 21:52



Bonjour tout le monde !
Nouveau tutoriel, certainement plus utile que le précédent. Il s'agît ici de cacher assez simplement le profil à l'intérieur de votre avatar. Mystérieux, isn't it ? Mystérieux, peut-être mais relativement simple.

Tag html sur Never Utopia - graphisme, codage et game design - Page 7 ZEG3qYu

Ce tuto nécessite la modification des templates et de la fiche de style CSS. Vous devez donc être administrateur fondateur.
Ce tuto est valable pour un forum avec des avatars aux dimensions 200*400. Il est cependant assez simple à personnaliser. Tout est expliqué Wink


Merci à Sparrow à qui j'ai subtilisé le code CSS qu'il utilise ici.


Première partie : Templates.

Elles font peur, elles inquiètent, elles en imposent et font les fières avec leurs grands airs qui font que vous les trouvez totalement hors de votre portée. Pourtant, il va bien falloir y toucher ! Alors retroussez vos manches, et rendez-vous sur le template viewtopic_body.

Cernons la partie qui nous intéresse.

Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>


Que de variables ! Cependant, quand on regarde bien, on remarque que leur utilité est parfois quasi-transparente.

Kézako ?

  • {postrow.displayed.POSTER_NAME}. Celle-ci est très importante. Il s'agît du nom du posteur. Ne me dîtes pas que vous ne l'aviez pas deviné.
  • {postrow.displayed.POSTER_RANK}. Le rang du membre, si rang il y a. Juste en dessous, on a l'image associée à ce rang.
  • {postrow.displayed.POSTER_AVATAR}. Voilà celle qui nous intéresse particulièrement : l'avatar.
  • {postrow.displayed.POSTER_JOINED}. C'est la date d'inscription du membre.



Certaines variables importantes n'apparaissent pas, car englobées dans une autre.
On devinera cependant assez facilement que :

  • Le nombre de messages du membre est {postrow.displayed.POSTER_POSTS}
  • La date d'inscription du membre est {postrow.displayed.POSTER_JOINED}

Ce sont les deux qui nous intéresseront ici.

Bon, il est temps de le modifier ce template. Alors pour commencer, nous allons supprimer du code !
Vous pouvez donc supprimer tout ce qui est inclut entre :


Code:
<span class="postdetails poster-profile">

et
Code:
</span><br />



Qu'est-ce que j'ai supprimé ?
Tout le profil qui s'affichait à côté de votre message. C'est malin ! Il ne reste plus que votre pseudo. Heureusement que je suis là pour rattraper tout ça.


Voilà par quoi vous allez remplacer tout ça :

Code:
<div class="description4"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{postrow.displayed.POSTER_AVATAR}<div class="description4_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br /><div style="text-align:center; font-size:17px;">{postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.</div></div></div></div>
<br /><br />
{postrow.displayed.POSTER_RPG}


Une petite explication s'impose.

Kézako ?

  • description4 est un cadre. Dans ce cadre, vous avez affiché l'avatar du membre avec la variable { postrow.displayed.POSTER_AVATAR }.
  • Par dessus ce magnifique cadre vous avez rajouté un cadre nommé description4_contenu. C'est là que s'afficheront les éléments que vous aurez décidé d'afficher.



Personnaliser

  • La taille de l'avatar. Il suffit de repérer tous les 400 et les remplacer par votre hauteur, et tous les 200 et les remplacer par votre largeur. Attention ! Il y en a dans le HTML et dans le CSS. Il y a également un endroit où les dimensions ont perdus 10 px, vous devrez également enlever 10px à vos dimensions. Pourquoi ? Cela est du a un padding, une marge intérieure.
  • Le contenu caché. Dans cet exemple, il correspond à ceci :

    Code:
    {postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.


    Pour savoir ce que veulent dire ces variables, il faut lire le début du tutoriel.


  • Vous pouvez tout naturellement modifier les différentes variables de templates, le texte et la mise en forme appliquée.



Le template est modifié. Enregistrez-le et validez-le. Allez voir : le texte est superposé sur l'avatar. Le CSS peut entrer en piste !

Deuxième partie : CSS.

Bon, après le détail que j'ai fait pendant la première partie, vous devriez comprendre facilement ce code sans plus d'explications. Je le répète encore une fois : n'oubliez pas de modifier les dimensions de l'avatar pour qu'ils correspondent à ceux de votre forum.
Et le code fut.

Code:
.description4 {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
  transition:0.4s ease;
}

.description4:hover {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.description4_contenu {
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  transform: all;
  transition: 1s;
}

.description4_contenu:hover {
  opacity: 0.8;
  transform: all;
  transition: 1s;
}

Pour l'explication du code, je vous envoie à mon précédent tutoriel.
Et, c'est terminé !
Si vous vous êtes paumé en route ou si vous êtes un gros flemmard qui n'a pas tout lu, voici une dernière partie pour pouvoir voir le code tout beau tout propre.

Troisième partie : Pour les flemmards et les paumés. (patapey ?)

CSS :

Code:
.description4 {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
  transition:0.4s ease;
}

.description4:hover {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.description4_contenu {
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  transform: all;
  transition: 1s;
}

.description4_contenu:hover {
  opacity: 0.8;
  transform: all;
  transition: 1s;
}


Template viewtopic_body :

Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
 _atc.cwait = 0;
 $('.addthis_button').mouseup(function(){
 if ($('#at15s').css('display') == 'block') {
 addthis_close();
 }
 });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
        
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }
    
 return false;
};

//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap">
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>
 <td align="left" valign="middle" nowrap="nowrap">
 <!-- BEGIN switch_twitter_btn -->
 <span id="twitter_btn" style="margin-left: 6px; ">
 <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
 <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 </span>
 <!-- END switch_twitter_btn -->
 <!-- BEGIN switch_fb_likebtn -->
 <span id="fb_likebtn" style="margin-left: 6px; ">
 <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
 </span>
 <!-- END switch_fb_likebtn -->
 </td>
 <td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="bottom" nowrap="nowrap" width="100%">
 <span class="gensmall bold">
 <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
 <!-- BEGIN switch_plus_menu -->
  | .
 <script type="text/javascript">//<![CDATA[
 var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
 var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
 var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
 var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
 var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
 var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
 insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
 //]]>
 </script>
 <!-- END switch_plus_menu -->
 </span>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
 <tr align="right">
 <td class="catHead" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title">
 <h1 class="cattitle"> {TOPIC_TITLE}</h1>
 </td>
 <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
 <!-- BEGIN topicpagination -->
 <tr>
 <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END topicpagination -->
 {POLL_DISPLAY}
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <tr>
 <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
 </tr>
 <!-- END hidden -->
 <!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                  <span class="name"><div style="font-size:20px;text-align:center; margin-bottom:-20px;z-index:150;letter-spacing:2px;"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><br />
 <span class="postdetails poster-profile">
 
                                  
                                  <div class="description4"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{postrow.displayed.POSTER_AVATAR}<div class="description4_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br /><div style="text-align:center; font-size:17px;">{postrow.displayed.POSTER_NAME}.</div><center><i>{postrow.displayed.POSTER_RANK}</i></center><br /><br />{postrow.displayed.POSTER_POSTS} messages.<br />Inscrit le {postrow.displayed.POSTER_JOINED}.</div></div></div></div>
                                  
                                  <br /><br />
 
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}   <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options">
 {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>
 <td colspan="2" class="hr">
 <hr />
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->

 <div class="postbody">

 <div>{postrow.displayed.MESSAGE}</div>

 <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd>
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

 <!-- BEGIN switch_dl_att -->
 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
 <!-- END switch_no_dl_att -->
 </dt>

 <!-- BEGIN switch_no_comment -->
 <dd>
 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
 </dd>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <dd>
 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
 </dd>
 <!-- END switch_no_dl_att -->

 <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->

 <div class="clear"></div>
 <!-- BEGIN switch_signature -->
 <div class="signature_div">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature -->

 </div>
 <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
 <a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
 </td>
 <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle">
 {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 <!-- BEGIN first_post_br -->
</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
 <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
 </tr>
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
 <!-- BEGIN no_post -->
 <tr align="center">
 <td class="row1" colspan="3" height="28">
 <span class="genmed">{no_post.L_NO_POST}</span>
 </td>
 </tr>
 <!-- END no_post -->
 <tr align="right">
 <td class="catBottom" colspan="3" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="9%" class="noprint"> </td>
 <td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
 <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
 </tr>
 </table>
 </td>
 </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
 <tr>
 <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
 <!-- BEGIN topicpagination -->
 <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
 <!-- END topicpagination -->
 </tr>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <tr>
 <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
 </tr>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row2 postbody" valign="top">
 <!-- BEGIN link -->
 » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <h1 class="cattitle"> {L_FORUM_RULES}</h1>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="row2" colspan="2" align="center" style="padding:0px">
 <!-- BEGIN switch_user_logged_in -->
 <a name="quickreply"></a>
 {QUICK_REPLY_FORM}<br />
 <!-- END switch_user_logged_in -->
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
 <tbody>
 <!-- BEGIN show_permissions -->
 <tr>
 <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
 <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
 </tr>
 <!-- END show_permissions -->
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <!-- BEGIN show_permissions -->
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 <!-- END show_permissions -->
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
 <tbody>
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>

 <!-- BEGIN viewtopic_bottom -->
 <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
 <!-- END viewtopic_bottom -->

 <!-- BEGIN moderation_panel -->
 <td align="center">
 <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
 </td>
 <td align="center" width="250">
 <span class="gensmall"> </span>
 </td>
 <!-- END moderation_panel -->
 </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
 <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

 <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
 </form>
 </td>
 </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>


Voilà, j'espère avoir été clair. Merci d'avoir lu ce tutoriel et à beintôw Wink

Hiro'

Dynamiser la page "Membres" - Sam 21 Sep 2013 - 14:24



Bonjour tout le monde !
Aujourd'hui, je vous propose mon premier tutoriel. Il servira à dynamiser la page membres de votre forum.
Ce n'est pas forcément un tuto très utile en soi, mais le réaliser m'a permis de comprendre un peu mieux les templates.

À noter que ce tuto est fait pour la version de forum PhpBB2.

Ce tuto nécessite la modification des templates et de la fiche de style CSS. Vous devez donc être administrateur fondateur.
Ce tuto est valable pour un forum avec des avatars aux dimensions 200*400. En cas de problème pour le personnaliser, je suis à votre écoute.


Merci à Sparrow à qui j'ai subtilisé le code CSS qu'il utilise ici.


Première partie : Templates.

Le template à utiliser est le memberlist_body

La partie qui nous intéresse est celle-ci :
Code:
<td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>

Elle se trouve à la ligne 39. Supprimez tout ce qui se trouve entre les balises < td >, soit ceci :

Code:
<div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>

Qu'est-ce que j'ai supprimé ?
Vous avez supprimé le contenu de la case réservée à l'avatar. Nous allons très vite le remplacer.


Voilà le code que vous allez ajouter à la place de ce code.
Code:
<div class="description3"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{memberrow.AVATAR_IMG}<div class="description3_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br />{memberrow.USERNAME}.<br />{memberrow.POSTS} messages.<br />Inscrit le {memberrow.JOINED}.</div></div></div></div>

Examinons ceci en détail.
Kézako ?

  • {memberrow.AVATAR_IMG} est l'avatar du membre.
  • {memberrow.USERNAME} est le pseudo du membre.
  • {memberrow.POSTS} est le nombre de posts du membre.
  • {memberrow.JOINED} est la date d'inscription du membre.



Ce qui est contenu entre :
Code:
<div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;">
et :
Code:
</div></div></div></div>

Est ce qui va apparaître quand la souris passera sur l'avatar.

Personnaliser
Vous pouvez donc mettre ce que vous voulez. Cependant, ce tutoriel d'adaptera au résultat montré plus haut. Mais je suis ouvert à toutes vos questions si vous avez du mal à personnaliser votre template.


Le nom du poteur, son nombre de messages et sa date d'inscription sont donc affichés dans la case Avatar. Inutile de les afficher à nouveau dans les autres cases. Il faut donc supprimer la colonne "nombre de messages", la colonne "pseudo" et la colonne "date d'inscription".

Repérez cette partie-là :

Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">#</th>
      <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
      <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
      <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
      <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
      <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
      <th class="thTop" nowrap="nowrap">{L_PM}</th>
      <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
   </tr>
   <!-- BEGIN memberrow -->
   <tr>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>
      <!-- BEGIN switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
      <!-- END switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr>
      <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
   </tr>
   <!-- END switch_no_user -->
</table>

La première partie du code (c'est-à-dire jusqu'à ), c'est celle qui donne les titres des colonnes. Vous pouvez certainement les identifier facilement.


Kézako ?

  • {L_AVATAR} affichera "Avatar",
  • {L_USERNAME} affichera "Pseudo",
  • etc.



Maintenant que nous avons regroupé plusieurs données dans la case avatar nous pouvons les supprimer.

Les lignes à supprimer sont donc :
Code:
<th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
<th class="thTop" nowrap="nowrap">{L_JOINED}</th>
<th class="thTop" nowrap="nowrap">{L_JOINED}</th>

Personnaliser
Vous pouvez également remplacer le nom de la colonne avatar ({L_AVATAR}) par votre propre appellation. Il suffira de supprimer cette variable et d'y écrire à la place votre appellation, tout simplement.



Si vous validiez le template à ce moment là, le résultat ne serait pas à la hauteur de vos espérances. En effet, les titres des colonnes auront disparu, mais le contenu de ces colonnes sera resté intact, c'est là qu'intervient la seconde partie du code (c'est-à-dire après ).

Vous pouvez supprimer les lignes inutiles, à savoir :
Code:
<td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>

<td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>

<td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>

Ca y est, votre template est prêt ! Maintenant, attaquons-nous à la partie CSS !


Deuxième partie : CSS.

Allez, je sens que vous en avez marre, alors voici le code CSS :
Code:
.description3 {
  display: block;
  width: 200px;
  margin: auto;
  height: 200px;
  overflow: hidden;
  transition:0.4s ease;
}

.description3:hover {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.description3_contenu {
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  transform: all;
  transition: 1s;
}
.description3_contenu:hover {
  opacity: 0.8;
  transform: all;
  transition: 1s;
}

Kézako ?

  • description3 contient l'avatar. Comme au départ, l'avatar est en partie caché, il faut réduire ses dimensions (ici 200*200) et lui mettre un overflow:hiddenpour l'empêcher de dépasser. Ensuite, la partie description3:hover est celle où l'on indique que les dimensions changent au passage de la souris.
  • description3_contenu est ce qui va s'afficher au passage de la souris, ici le nom du membre, son nombre de message et sa date d'inscription. Cependant, il doit être invisible quand la souris n'est pas dessus, d'où le opacity:0 qui le rend totalement transparent. La partie description3_contenu:hover est celle qui va indiquer que au passage de la souris, l'opacity augmentera.



Vous savez tout ! Ah ? Vous vous êtes perdus en chemin ? Bon, je suis gentil et je vous donne le code terminé.


Troisième partie : Le code tout fini tout beau.

Remplacer le contenu du template memberlist_body par celui-ci :

Code:
<form action="{S_MODE_ACTION}" method="get">
<table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
   <tr>
      <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
   </tr>
   <tr>
      <td class="row1">
      <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
         <tr>
            <td width="100%">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
            {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
            {L_ORDER} {S_ORDER_SELECT}      
            {S_HIDDEN_SID}
            <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
         </tr>
      </table>
      </td>
   </tr>
</table>
</form>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thCornerL" nowrap="nowrap" height="25">#</th>
      <th class="thTop" nowrap="nowrap">Avatar</th>
      <!-- BEGIN switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
      <!-- END switch_th_group -->
      <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
      <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
      <th class="thTop" nowrap="nowrap">{L_PM}</th>
      <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
   </tr>
   <!-- BEGIN memberrow -->
   <tr>
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td>
      <td class="{memberrow.ROW_CLASS}" align="center">
                  <div class="description3"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{memberrow.AVATAR_IMG}<div class="description3_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br />{memberrow.USERNAME}.<br />{memberrow.POSTS} messages.<br />Inscrit le {memberrow.JOINED}.</div></div></div></div></td>
          
      <!-- BEGIN switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
      <!-- END switch_td_group -->
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
      <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td>
   </tr>
   <!-- END memberrow -->
   <!-- BEGIN switch_no_user -->
   <tr>
      <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
   </tr>
   <!-- END switch_no_user -->
</table>
<!-- BEGIN switch_pagination -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td><span class="nav">{PAGE_NUMBER}</span></td>
      <td align="right"><span class="nav">{PAGINATION}</span></td>
   </tr>
</table>
<br />
<!-- END switch_pagination -->

Ajoutez ce code à votre feuille de style CSS

Code:
.description3 {
  display: block;
  width: 200px;
  margin: auto;
  height: 200px;
  overflow: hidden;
  transition:0.4s ease;
}

.description3:hover {
  display: block;
  width: 200px;
  margin: auto;
  height: 400px;
  overflow: hidden;
}

.description3_contenu {
  position: absolute;
  width: 200px;
  height: 400px;
  overflow: 400px;
  background-color: #EFE9DD;
  font-size: 11.5px;
  font-family:'Georgia';
  color: #3E352E;
  text-align: justify;
  padding:0px;
  opacity: 0;
  transform: all;
  transition: 1s;
}
.description3_contenu:hover {
  opacity: 0.8;
  transform: all;
  transition: 1s;
}

Et voilà ! A vous de jouer !

Guide du template "index-box" (catégories) pour phpBB2 - Jeu 22 Aoû 2013 - 12:23



Bonjour,

Ce guide est sur la version de forum PhpBB2.

Je me permets de vous proposer un petit mode d’emploi du template index-box, tel que j’aurais bien aimé en trouver un sur internet lorsque j’ai commencé à travailler à la personnalisation de mon template.

Ce travail ne prétend pas être exhaustif et répondre à tout (car il y a encore des choses qui m’échappent). A ce titre, toutes les contributions pour l’améliorer seront grandement appréciées :). Il a pour objet de mieux aider à comprendre le fonctionnement du template, et donc à mieux comprendre les tutoriels de modification du template qui peuvent vous être proposés (pour éviter les copier coller bêtes et méchants).

Nous allons voir d’une part les différents éléments structurants de ce template, qui organisent les éléments sur la page. Et d’autre part, on s’intéressera aux différentes variables qu’il permet d’afficher.

Un p’tit merci suffit à faire apparaître la suite :).

Voici en premier lieu le template index-box de base de forumactif :
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>
 <th nowrap="nowrap" width="50">{L_TOPICS}</th>
 <th nowrap="nowrap" width="50">{L_POSTS}</th>
 <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></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"> </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">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </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}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>
 <td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>
 </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


1.  La structure du template

Contrairement à ce que l’on pourrait croire, les indications fournies entre crochets "<  !--TEXTE --  >" ne sont pas de simples commentaires, mais contiennent tous les éléments de structuration des pages de votre forum.


La toute première table du template, ci-dessous, correspond à la ligne au-dessus de votre première catégorie qui comporte le titre de votre forum et « voir les messages sans réponse » (quand vous n’êtes pas connecté) et aux trois lignes au-dessus de votre première catégorie (quand vous êtes connectés).

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>

Fait donc apparaître cela:


D'ailleurs, ce tableau comporte deux "commentaires" de type "switch_user_logged_in".
"switch_user_logged_in" : Les éléments contenus entre sa balise BEGIN et sa balise END n’apparaissent qu’à la connexion du membre au forum. Ils sont donc invisibles aux simples invités.

A la suite de ce premier tableau, toute l’organisation de la page sera régie par les commentaires.

" catrow" :  Il s’agit du bloc contenant l’ensemble des catégories, forums et sous-forums. Il débute visuellement sur votre page sous le tableau ci-dessus et termine au-dessus de la ligne « marquer tous les forums comme lus ».

"tablehead": Il s’agit de l’en-tête du tableau dans le design de base. Si dans « structure et hiérarchie » vous avez choisi le mode « conserver les catégories sur l’index », cela correspond alors à la première ligne, qui contient « forum, sujets, messages, derniers messages », ci-dessous en gris.

Si vous avez choisi l’option « séparer les catégories sur l’index », alors cette ligne affichera directement le titre de la catégorie au lieu du mot « forum », comme ci-dessous.


Lorsque vous souhaiterez personnaliser votre template, notamment pour ajouter un en-tête à vos catégories, c’est entre ces balises qu’il faudra positionner votre div d’en-tête.


"cathead": Cette ligne n’apparaît dans le tableau de base que lorsque vous avez fait le choix de « conserver les catégories sur l’index ». Il s’agit alors de la ligne bleue de ma première illustration, qui n’affiche que le titre de catégorie.
Si vous avez choisi de « séparer les catégories sur l’index », alors les informations contenues entre ces balises ne seront pas affichées.

"forumrow": Tout ce qui est affiché entre ces balises constitue les listes de forums et sous-forums qui seront affichés sur votre page d’accueil, en fonction du nombre de niveaux que vous avez choisi d’afficher dans « structure et hiérarchie ».

La première colonne du tableau contient l’image indiquant s’il y a ou non un nouveau message :
Code:
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </td>

La deuxième colonne contient le titre du forum, le descriptif du forum, les modérateurs du forum, et les liens vers les sous-forums (on reviendra sur le détail des variables dans la partie suivante).
Code:
<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}>
 <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
 <span class="gensmall">
 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 </span>
 </td>


A l’intérieur de ce bloc, ce sont les balises "switch_moderators_links" qui vont permettre l’affichage des modérateurs du forum. Si vous ne voulez plus les afficher, c’est donc ce bloc qui est à supprimer :
Code:
<!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->



Enfin, les trois colonnes suivantes affichent respectivement le nombre de sujets postés dans le forum, le nombre de messages postés dans le forum, et le dernier message posté dans le forum :
Code:
<td class="row3" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.TOPICS}</span>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.POSTS}</span>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>

"catfoot": N’ayant pas trouvé précisément à quoi correspond ce bloc, j’en déduis qu’en symétrie du bloc "cathead", son utilisation se fait en mode « conserver les catégories sur l’index ». Information qui reste à vérifier.

"tablefoot": Il s’agit du pied du tableau pour chacune des catégories lorsqu’elles sont séparées. Pour personnaliser une catégorie en lui rajoutant un pied de page, c’est entre ces balises qu’il faudra placer la div.

Si vous souhaitez créer un corps de catégorie qui dispose de son propre fond, il faudra impérativement ouvrir votre div de corps dans  "tablehead" et la fermer dans "tablefoot" afin qu’elle se positionne bien derrière les forums.


Résumons-nous :

Les éléments entre crochets "< !--TEXTE -- >", qui ressemblent à des commentaires, sont structurants pour l’organisation de la page et ne doivent donc pas être enlevés !

Les éléments se positionnent comme suit sur votre page :
Premier cas : vous avez choisi un affichage en mode « conserver les catégories sur l’index » :
Spoiler:


Deuxième cas : vous avez choisi un affichage en mode « séparer les catégories sur l’index » :
Spoiler:



2. La liste des variables du template index-box

Maintenant que vous savez à peu près comment se positionnent les éléments sur la page, intéressons-nous aux variables qu’appelle le template index-box.

{LAST_VISIT_DATE}:  « Dernière visite le [date/heure]» affiché au-dessus du forum, visible seulement lorsque le membre est connecté.

{CURRENT_TIME}:« La date/heure actuelle est [date/heure]» affiché au-dessus du forum, visible seulement lorsque le membre est connecté.

{L_INDEX}: Titre du forum global (du site internet, donc).

{NAV_CAT_DESC}: La description du forum qui se situe en-dessous du titre du forum sous la bannière.

{L_SEARCH_NEW}: « Voir les nouveaux messages depuis votre dernière visite », visible seulement lorsque le membre est connecté.

{L_SEARCH_SELF}: « Voir ses messages », visible seulement lorsque le membre est connecté.

{L_SEARCH_UNANSWERED}:« Voir les messages sans réponse ».

{catrow.tablehead.L_FORUM}: Affiche le titre de la catégorie dans le bandeau "tablehead" lorsque les catégories sont séparées sur l’index (cf. première partie) ou bien affiche simplement « forum » lorsque les catégories sont conservées sur l’index.

{L_TOPICS}: Affiche le terme « sujets » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

{L_POSTS}: Affiche le terme « messages » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

{L_LASTPOST}: Affiche le terme « derniers messages » dans la ligne de titre du tableau. Cet élément est généralement supprimé lorsque l’on commence à personnaliser le template.  

{catrow.cathead.CAT_TITLE}: Affiche le titre de catégorie lorsque les catégories sont conservées sur l’index, dans le bandeau "cathead" (cf. première partie).

{catrow.forumrow.FORUM_NAME}: Titre du forum au sein de la catégorie.

{catrow.forumrow.FORUM_DESC}: cette variable appelle le texte de description du forum, tel que rédigé dans la zone : « général », « catégories et forums ».

{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}: Affiche les modérateurs de chaque forum, en indiquant préalablement « modérateurs: ».

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}: Affiche les liens vers les sous-forums.

{catrow.forumrow.TOPICS}: Affiche le nombre de sujets postés dans le forum donné.

{catrow.forumrow.POSTS}: Affiche le nombre de messages postés dans le forum donné.

{catrow.forumrow.LAST_POST}: Affiche le dernier message posté dans le forum donné.

Enfin, une autre variable est assez utile à connaître :
< img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" / >: Cette variable appelle l’image de « nouveau message » ou « pas de nouveau message » pour chaque forum.

Normalement, avec ces éléments, vous pourrez déjà commencer à vous orienter plus aisément dans votre template :).

Asmareth

Sunny Day - Ven 16 Aoû 2013 - 15:25



Voici l'en-tête de RP assorti au modèle de fiche de RP "Sunny Day" :)




Titre du sujet

feat. Machin & Truc



(c) Codage par Asmareth pour Never Utopia


Code:
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css' />
   <div style="width:384px; margin: auto; background-color: #FFE173; padding-top: 10px; padding-left: 10px; padding-right: 10px; border-top-left-radius: 100px; border-top-right-radius: 100px; box-shadow: 2px 2px 5px #807868;">
   <span style="display: block; font-variant: small-caps; font-family: 'Bad Script', cursive; font-size:32px; font-weight: bold; letter-spacing: -4px; color : #695D3E; margin-bottom: -10px; text-align: center">
         Titre du sujet</span><span style="display: block; text-align : center; font-family: 'Bad Script', cursive; font-size:26px; color: #FFBC00; letter-spacing: -5px; text-align:center;">
         feat. Machin & Truc   </span>
      </div><span style="display: block; margin-left : auto; margin-right: auto; width: 400px; height: 120px; background: url(http://26.media.tumblr.com/tumblr_m2ubovhj4d1r65ymxo3_500.gif) center center; border: 2px solid #FFE173; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; box-shadow: 2px 2px 5px #807868;">
   </span>
   <span style="display: block; margin-top: -25px; text-align: center; color:#FFBC00; font-size: 7px;">(c) Codage par Asmareth pour <a href="http://www.never-utopia.com/" style="color: white;">Never Utopia</a></span>

T_Time

Titre en CSS + pointillés - Ven 12 Juil 2013 - 16:45


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


Salut les pirates !

Nous voici ici pour un élément de codage que je tiens à partager. Je me souviens avoir passé une bonne après-midi à essayer d'assembler toutes les balises (merci les tutos fournis par google !) afin de donner quelque chose de potable.

Voir l'exemple.

CSS
Code:
.nombalise {
font-family: Georgia;
text-align: right;
color: #666666;
border-bottom: 4px dotted #999999;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
font-style: bold;
}



HTML
Code:
<blockquote><div class="nombalise">Titre</div>

Ce qu'il y a à écrire.</blockquote>



Vous pouvez remplacer le nom de la div, ici nombalise, par le mot clé de votre choix. Assurez-vous de ne faire aucune erreur en retapant le nom !


Merci de mettre un crédit à Never Utopia.

Bonne journée ! Very Happy

Astuce pour ôter le saut de page avec l'utilisation du target - Lun 10 Juin 2013 - 19:53


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


On utilise souvent le target pour les ancres ou pour les onglets.

Cependant, il arrive souvent que lorsqu'on clique sur l'onglet, il s'affiche quelque chose de détestable, désagréable et de parfaitement agaçant : un saut de page plus ou moins important.

Il existe une solution pour lui couper les vivres. :)

Une astuce pour être précise. Je l'ai utilisé => sur cette fiche . C'était pour une commande = ne pas s'en inspirer merci :).

Vous remarquerez que le saut de page n'existe plus lorsqu'on passe de la carte d'identité aux liens.



En premier, débutez avec votre html.

Vous mettez :
Code:
<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>


Vous rajoutez autant de cette partie que vous avez d'onglet en changeant leur numéro :
Code:
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet02" class="votreclassonglet" >Nom Onglet 1</a>



Ensuite, à la suite du code précédent, vous préparez la div qui accueillera les contenus des onglets comme ceci :
Code:
  <div class="votre_class_contenu">


Pour les contenu d'onglets, la manipulation n'est pas dure. Il faut surtout surtout faire attention que l'id ne porte pas le nom de l'id onglet. Si vous le faite, cela ne marchera pas. ^^

Bref, voilà :
Code:
    <div id="votre_onglet1">Contenu onglet 1</div>

    <div id="votre_onglet2">Contenu onglet 2</div>


Une fois que c'est fait, vous ajoutez 2 fermeture de div pour fermer le bloc du contenu des onglets et le bloc qui contient tout :
Code:
  </div>
</div>



Le html est terminé. Cela devrait donner quelque chose comme ceci :
Code:
<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>

  <div class="votre_class_contenu">
    <div id="votre_onglet1">Contenu onglet 1</div>
    <div id="votre_onglet2">Contenu onglet 2</div>
  </div>

</div>



Il reste le css :) :
Code:
/*Fait disparaître les ancres*/
#conteneur_information a.ancre {display: none;}

/*Styliser les onglets*/
.votreclassonglet {
}

/*Bloc qui contient les contenus d'onglets*/
.votre_classe_contenu {
}

/*Contenu onglet 1*/
#votre_onglet1 {
}

/*Contenu onglet 2*/
#votre_onglet2 {
}

/*Cache les contenus d'onglets*/
#votre_onglet1 {display: none;}
#votre_onglet2 {display: none;}

/*Fait apparaître les contenus d'onglet*/
#conteneur_information a#votre_onglet01:target ~ .votre_class_contenu #votre_onglet1{display: block;}
#conteneur_information a#votre_onglet02:target ~  .votre_class_contenu #votre_onglet2{display: block;}


Si vous avez des questions, je serais ravie de vous répondre :)

Comment faire un effet au survol (comment fonctionne le hover) - Lun 27 Mai 2013 - 12:02



Hello, je viens aujourd'hui vous expliquer les animations au survol.
Cela vous permettra de créer les votres et non de copier-coller l'animation qui vous plait au cas par cas.
Pour cela vous aurez besoin de deux choses : un forum, et l'accès à sa partie administration.
Prêt ?

Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.



I : Créer une class :

La class est un code que l'on peut mettre sur une div, un span ou tout autre balise html comme ceci :
Code:
<div class="utopia">    code texte ou image        </div>
<span class="utopia">    code texte ou image        </span>
<img class="utopia" src="   url de l'image    "/>

Ici, j'ai nommé la class "utopia", mais sachez que vous pourrez toujours mettre le nom que vous souhaitez.

II : La feuille CSS :

En partie administration à présent, vous avez accès à une feuille CSS. Celle-ci se trouve dans :
Administration > Affichage > Couleur > Feuille CSS


Cette feuille css vous sert à créer tous les changements graphiques généraux de votre forum : les templates servant quant à eux à changer la disposition des éléments graphiques. Mais bon, concentrons nous sur cette feuille.
Ici, vous pouvez marquer ce que vous voulez ! Si c'est la première fois, ne soyez pas timide et pour les plus rodés, faites un peu de place sur cette feuille pour ajouter le code qui va suivre.

A : comment lier le code auquel j'ai donné un nom sur cette feuille ?
Sur cette dite feuille, marquez ceci :
Code:
.utopia{ }
.utopia:hover{}


B : A quoi sert tout ça ?

► Le point déjà :
Le petit point mit juste avant le nom de votre class sert à rappeler que justement, vous parler d'une class. Si on avait parlé d'une id (id="machin"), on aurait mit alors un # avant le nom "utopia" et non un "." .

► Le utopia ensuite :
utopia étant le nom qu'on a donné à notre class, on le marque évidement pour rappeler qu'on parle bien de cette class là.
!!! Attention : les majuscules comptent : étant donné que nous n'en avions pas mise dans notre post en marquant "
", n'en mettez pas ~

►Les { et } à présent :
La première ouvre les infos qu'il y aura dans le codage et la dernière clos tout ça. Vérifiez donc toujours d'avoir bien une { et une } à chaque codage fait sur la feuille css.

► la fonction :hover :
cette fonction indique qu'au survol (:hover) de la class (le point) utopia (balise nommée), il devra s'y passer ce qui est marqué entre les balise { et }.

Plus concrètement, voici un exemple pour une div :
Sur votre post, vous aurez donc :
Code:
<div class="utopia">Never Utopia</div>


et sur votre feuille CSS :
Code:
.utopia{
  width:200px;
  height: 100px;
  text-align:center;
  background-color:cyan;
  color:black;
  opacity:0.1;
  transition: 1s;
  transform: all;
}

.utopia:hover{
  width:170px;
  height:50px;
  background-color:black;
  text-align:50% 50%;
  font-family:impact;
  color:white;
  text-shadow: 0px 0px 5px cyan ;
  opacity:1;
  font-size:24px;
  border-radius:50px;
  box-shadow: 0px 0px 10px darkcyan;
  transition: 1s;
  transform: all;
}


Faites un essai en copiant-collant tout cela sur votre forum pour voir ce que cela fait une fois que vous survolerez ce code.
A noter que vous pouvez utiliser cette astuce dans vos post mais aussi pour le graphisme de la page d'accueil, pour vos liens, vos titres... tout ~


III : Quelques fonctions :

Comme vous l'avez constaté, on a utilisé plusieurs fonctionnalité dans la feuille css, dans les balises d'utopia. Ici, je vais vous en expliquer quelques unes.
notez cependant que si une fonction ne doit pas changer au survol, il est possible tout simplement de ne pas la noter dans le :hover pour qu'elle ne soit pas prise en compte. Dans le :hover pour vous simplifier la vie donc, ne notez QUE ce qui doit changer. (les transitions et le temps de transition sont à remettre si vous voulez une animation allant du :hover vers la div normal (quand votre souris quitte l'animation en gros)).

width : la taille en px ;
height : la hauteur en px ;
background : peut recenser toute les infos ci-dessous ;
background-color : #couleurpipette ou codecouleur ;
background-image : url('lien de l'image allant sous le texte');
background-position: largeur puis hauteur en px ou en % pour positionner l'image de fond;
background-repeat : répéter --> no-repeat (pas de répétition du background) repeat-x (répéter sur les cotés) repeat-y (répéter en haut et en bas)

color : couleur du texte;
text-shadow : ombre du texte;
box-shadow : ombre du cadre de la div;
border : bordure du cadre de la div;
border-radius : bord-haut-gauche(en PX) bord-haut-droite(en PX) bord-bas-gauche(en PX) bord-bas-droite(en PX) ((dans cet ordre et pas dans un autre) OU XXpx (en ce cas les quatres bord auront le même radius).
transform : détermine ce qui changera du :hover à la balise en état normal; all signifie tout.
transition : détermine le temps de la transition (animation);
opacity : détermine la transparence;

margin : détermine l'espace extérieur entre la div et ce qui est autour;
padding : détermine l'espace entre les objets inclus dans la div et les bords intérieurs;

Voilà voilà ^^

Plume de Chouette

En tête bulles beige, vert et bleues. - Ven 10 Mai 2013 - 14:19




Titre du RP

Citation





Code:
<div style="background: url('http://www.renders-graphiques.fr/image/upload/mini/element_graphique_8.png'); width: 70%; overflow: hidden; margin: auto; border: 3px solid #ADCF4F; border-radius: 50px; text-align: center;"><br /><link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css' /><div style="font-family:Parisienne;color:#96CA2D; font-size: 30px; letter-spacing: 0px; text-align: center; font-weight: normal; text-shadow: black 0px 2px 2px">Titre du RP</div>
<div style="font-style: italic; font-size: 12px; font-family: arial; color:#4BB5C1;"
Citation</div></div>



^^

Nesis

Fiche de Pub Blanc & Vert - Jeu 9 Mai 2013 - 18:49




Nom du Forum / Blog



Contexte

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.

Particularité du Forum

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.

Essentiel hors RPG


♠ Administrateur :
♠ Modérateurs :
♠ Graphiste / Codeur :
♠ Statistiques :
♠ Date de création :
Lien du forum

© FICHE DE PUB PAR AMYLITH -NESIS



Code:
<div style="background-color: #fff; width: 500px; border-radius: 20px 0px; border: 3px solid #8bb784; padding: 10px; margin: auto; text-align: center;">
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css' /><div style="margin: auto; font-family: Milonga; font-size: 30px; letter-spacing: 5px; text-align: center;color: #8bb784;text-shadow : 2px 2px 2px #82ac88; text-align: center;"> Nom du Forum / Blog 
</div>
<img src="http://img4.hostingpics.net/pics/536516330100.png" />

<div style=" font-family: Milonga; font-size: 25px; letter-spacing: 2px; text-align: center; color: #8bb784; text-shadow: 2px 2px 2px #82ac88;"> Contexte 
</div>
<div style="margin: auto; width: 450px; padding-left: 12px; padding-right: 12px; backgrond-color: #fff; text-align: justify; color: #8bb784; border-radius: 20px 0px; border: 3px solid #8bb784;box-shadow: 2px 2px 2px #8bb784;overflow: auto;">Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
</div>
<div style="margin: auto; font-family: Milonga; font-size: 25px; letter-spacing: 2px; text-align: center; color: #8bb784;text-shadow : 2px 2px 2px #82ac88;"> Particularité du Forum
</div>
<div style="margin: auto width: 450px; padding-left: 12px; padding-right: 12px; backgrond-color: #fff; text-align: justify; color: #8bb784; border-radius: 20px 0px; border: 3px solid #8bb784;box-shadow: 2px 2px 2px #8bb784;overflow: auto;">Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
</div>
<div style="margin: auto font-family: Milonga; font-size: 25px; letter-spacing: 2px; text-align: center; color: #8bb784;text-shadow : 2px 2px 2px #82ac88;"> Essentiel hors RPG
</div>
<div style="margin: auto width: 450px; padding-left: 12px; padding-right: 12px; backgrond-color: #fff; text-align: justify; color: #8bb784; border-radius: 20px 0px; border: 3px solid #8bb784;box-shadow: 2px 2px 2px #8bb784;overflow: auto;">
♠ Administrateur :
♠ Modérateurs :
♠ Graphiste / Codeur :
♠ Statistiques :
♠ Date de création :
♠  <a href="http://"> Lien du forum</a>
</div>
<div style="text-align: center;">© FICHE DE PUB PAR AMYLITH -NESIS </div>
</div>

Illusion

♦ Fiche de PUB - LS ♦ - Dim 5 Mai 2013 - 18:44



Hello c: ,

Je ne savais pas quoi faire tout à l'heure, alors j'ai fait une fiche de PUB ! Elle est pas merveilleuse maybon... Elle est colorée *o*. Voilà, donc si elle vous plaît, n'hésitez pas à la prendre ! Vous pouvez la modifier si vous le voulez, mais merci de toujours laisser le PUF !







Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.

• • •

Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.

• • •

Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.


code by Illusion (c)



J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a).

Code:
<div style="border-radius:25px; border-top: 1px dashed black; border-bottom: 1px dashed black; border-left:2px solid black;border-right:2px solid black; background-color: #e7eaf0; width: 470px; height:690px; text-align: left;"><br/><br/><div style="border-radius:25px; border: 1px dashed black; background-color: #eb4481; width: 300px; height:40px; margin: auto;text-align: center;"><span style="border-bottom:1px dashed black;font-size:15px; color: black;">VOTRE FORUM</span><br /><a href="URL DU FORUM"><i><span style="font-size:11px; color: black;">ADRESSE DE VOTRE FORUM</span></i></a></div>
<img src="http://i80.servimg.com/u/f80/16/46/34/02/mousta10.png" /><br /><br /><br /><div style="width:390px; height:100px; border-left:2px solid black; border-right: 2px solid black; border-radius: 25px; background-color: #f0e735; overflow:auto;margin: auto;"><img src="http://i80.servimg.com/u/f80/16/46/34/02/yellow10.png" title="Il était une fois" /><div style="margin-left:10px; color: black; text-align: left;">Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. </div></div><br /><div style="font-size:25px; color: black; text-align: center;">•    •    •</div><br /><div style="width:390px; height:100px; border-left:2px solid black; border-right: 2px solid black; border-radius: 25px; background-color: #99f035; overflow:auto;margin: auto;"><img src="http://i80.servimg.com/u/f80/16/46/34/02/green10.png" title="Les statistiques, et autres infos" /><div style="margin-left:10px;color: black; text-align: left;">Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.</div></div><br /><div style="font-size:25px; color: black; text-align: center;">•    •    •</div><br /><div style="width:390px; height:100px; border-left:2px solid black; border-right: 2px solid black; border-radius: 25px; background-color: #96b6f5; overflow:auto;margin: auto;"><img src="http://i80.servimg.com/u/f80/16/46/34/02/blue10.png" title="Le mot de la fin" /><div style="margin-left:10px;color:black; text-align: left;">Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.</div></div><br /><br /><div style="margin-right:10px; font-size:11px; text-align: right; color: black;">code by <a href="http://www.never-utopia.com/"><i>Illusion</i></a> (c)</div></div>

Capouccino

Tableau de pub \o/ - Jeu 2 Mai 2013 - 13:27



Bijour le peuple, ! Alors voilà un tableau de pub :3
Par contre il est un peu petit, lorsque j'aurais l'image de fond agrandie, je le referais en plus grand o/

En espérant que ça vous plaise ^^



Statistiques
- Non. Non. Non ! Je refuse de croire que c'était voulu ! Je le refuse ! tu secoues la tête avec énergie, retenant les larmes. Vous ne savez rien, vous ne savez rien ! Vous n'avez pas vu ce regard fou qu'était le sien ! Vous n'avez pas entendu ces paroles venimeuses qu'il prononçait ! C'était une haine sans pareille, une haine dénuée de sens. Il me haïssait pour une raison que j'ignore. Mais je refuse de croire en cette hypothèse ! Pas après tout ce temps passé à la haïr. Non. J'ai vécu trop d'années dans la souffrance et la haine...
Contexte
- Non. Non. Non ! Je refuse de croire que c'était voulu ! Je le refuse ! tu secoues la tête avec énergie, retenant les larmes. Vous ne savez rien, vous ne savez rien ! Vous n'avez pas vu ce regard fou qu'était le sien ! Vous n'avez pas entendu ces paroles venimeuses qu'il prononçait ! C'était une haine sans pareille, une haine dénuée de sens. Il me haïssait pour une raison que j'ignore. Mais je refuse de croire en cette hypothèse ! Pas après tout ce temps passé à la haïr. Non. J'ai vécu trop d'années dans la souffrance et la haine...
Prédéfinis
TEXTE
Infos
TEXTE
Boutons
TEXTE



Code:
<style>#img_halo, #img_halo2, #img_halo3{text-align:center;font-size:7px;width:45px;height:58px;margin:10px auto;position:absolute;z-index:1;overflow:hidden;}#img_halo{background-image:url('http://img96.xooimage.com/files/9/a/5/parchopetit2-3dd1fdf.png')}#img_halo2{background-image:url('http://img97.xooimage.com/files/9/6/d/parchopetit3-3dd20d0.png')}#img_halo3{background-image:url('http://img97.xooimage.com/files/b/3/2/parchopetit4-3dd2256.png')}#img_halo:hover, #img_halo1:hover, #img_halo2:hover, #img_halo3:hover{font-size:14px;z-index:2;height:350px;width:250px;margin-left:-60px;margin-top:-100px;margin-left:0;margin-right:0;background-image:url('http://img96.xooimage.com/files/e/8/8/parcho-1.5-3dd1e54.png')}#img_halo1, #img_halo4{text-align:center;font-size:7px;width:60px;height:30px;margin:10px auto;position:absolute;z-index:1;overflow:hidden;}#img_halo1{background-image:url('http://img96.xooimage.com/files/2/a/f/parcholongpetit1-3dd2481.png')}#img_halo4{background-image:url('http://img96.xooimage.com/files/2/a/f/parcholongpetit1-3dd2481.png')}#img_halo1:hover, #img_halo4:hover{background-image:url('http://img98.xooimage.com/files/0/f/6/parcholong-3dd23be.png');z-index:2;height:150px;width:250px;margin-bottom:0;margin-top:-100px;margin-left:0;margin-right:0;font-size:14px}.fond{background-position:0% 50%;background-image:url('http://img92.xooimage.com/files/9/1/d/pa-3-3d383ff.png');background-repeat:no-repeat;height:197px;}.tabcenter{margin-left:auto;margin-right:auto;}.texte{opacity:0;overflow:hidden;font-size:12px}.texte:hover{opacity:1;padding:15px;width:200px;height:280px;overflow:auto}.texte2{opacity:0;overflow:hidden;font-size:12px}.texte2:hover{opacity:1;padding:15px;width:200px;height:80px;overflow:auto}</style>

<div class="fond" style="color:#000000"><table style="height:150px;width:200px;padding-top:10px;padding-left:55px;"><td><div style="margin-bottom:35px"><span id="img_halo1">Statistiques
<div class="texte2">TEXTE</div></span></div></td><td><div style="margin-top:15px;margin-left:15px"><span id="img_halo">Contexte
<div class="texte">TEXTE</div></span></div></td><td><div style="margin-bottom:10px;margin-left:55px"><span  id="img_halo2">Prédéfinis
<div class="texte">TEXTE</div></span></div></td><td><div style="margin-left:55px;margin-bottom:45px"><span id="img_halo3">Infos
<div class="texte">TEXTE</div></span></div></td><td><div style="margin-top:70px;margin-right:10px"><span id="img_halo4">Boutons<div class="texte2">TEXTE</div></span></div></td></table></div>

Apokalip'z

Fiche de pub personalisable - Mar 26 Fév 2013 - 17:44



Coucou, voilà une fiche de pub que vous pouvez personnaliser grâce aux quelques astuce que je vais vous donner,...

voilà le rendu et le code:

Spoiler:



Code:
<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">


<center><a href="LIEN DE TON FORUM"><img src="LIEN DE LA BANNIERE OU MINI BANNIERE" alt="NOM DE TON FORUM"/></a></center>
<span style="font-family: Lucida Handwriting; font-style: italic; font size: 70px">
<center>NOM DU FORUM</center>
</span>


<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Nouvelles</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Statistiques</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Crédits Du forum</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<span style="border: 2px dotted #000000; font-size: 10px; background-color: #ffffff;">© Fiche Crée Par Natsu Dragneel de <a href="http://www.never-utopia/">Never utopia</a> </span></div>



Si vous voulez utiliser cette fiche veuillez ne pas Supprimer ou Modifier la partie Copyright Du code.


Si vous voulez modifier quelque chose au code voici quelques trucs en spoiler

Spoiler:

Remplacer le règlement de base par le votre pour les inscriptions - Sam 16 Fév 2013 - 13:06


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


Bonjour !

Vous souhaitez que lorsqu'un membre s'inscrit sur votre forum, il ne tombe pas sur le célèbre règlement de base forumactif :
Spoiler:


Il vous faut tout d'abord concevoir votre propre règlement dans :
Panneau d'administration > Général > Règlement & FAQ > Règlement supplémentaire

Rédigez votre règlement et validez.


Ensuite, allez dans les templates :
Affichage > Template > Général > Agreement

Et retrouvez cette variable :
Code:
{AGREEMENT}

Et supprimez là.

Enregistrez et voilà, vous aurez supprimé le règlement de base et il ne restera plus que votre règlement personnalisé !


Voici le rendu maintenant :
Spoiler:


Voilà, bonne modifications. :)

Invité

Supprimer/personnaliser le cadre de vos annonces - Sam 9 Fév 2013 - 18:16

{#}html{/#} {#}auteur_Myste_Animus{/#}

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


Salut ! =)

J'ai parcouru le forum et je n'ai pas trouvé cette astuce alors je viens vous la proposer au cas où cela intéresse quelqu'un. Wink C'est assez simple et cela concerne la personnalisation voire la suppression du cadre qui entoure vos annonces sous le header.

Pour ceux qui ne sont pas encore trop familier avec les fonctionnalités de forumactif, cela se passe ici :
Panneau d'administration > Général > Messages et Emails > Annonces

Vous avez donc la possibilité de créer des annonces avec différentes options, comme un défilement, un affichage sur certains endroits de votre forum, etc. Bon c'est assez pratique pour mettre en avant une news ou d'autres petites choses mais personnellement, j'ai rencontré un petit problème esthétique avec cette fonctionnalité : le cadre tout moche qui reproduit celui des catégories et qui prend toute la largeur du forum même si l'annonce ne fait que 3 mots... Donc, j'ai cherché à supprimer ce cadre mais on peut aussi le personnaliser pour le rendre plus beau, tout dépend de vos goûts ! =)

Je vais donc vous montrer comment supprimer le cadre et vous donnerez une piste pour au contraire le personnaliser selon vos convenances.





Supprimer le cadre :

Pour supprimer simplement le cadre, rendez-vous dans :
Panneau d'administration > Affichage > Templates > Général > overall_header

Si votre template n'a pas subit trop de modifications, la ligne qui nous intéresse doit se trouver vers la 290 ème.

En tout cas pour vous repérer, cherchez cette partie :
Code:
<!-- 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 {CLASS_TABLE_TYPE} 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 -->


Dans ce code, c'est cette partie qu'on va cibler :
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0"  class="forumline">


Et pour supprimer le cadre, il suffit de supprimer ceci :
Code:
class="forumline"


Ce qui donnera :
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">


Enregistrez, puis validez votre template et plus de cadre ! =P




Personnaliser le cadre :

Il suffit de revenir sur l'astuce expliquée plus haut et au lieu de supprimer la partie :
Code:
class="forumline"


Changez-la par une autre class, comme ceci par exemple :
Code:
class="cadre_annonce"


Ce qui donnera :
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0"  class="cadre_annonce">



Ensuite, allez dans votre feuille CSS et ajoutez la class que vous venez de créer :
Code:
.cadre_annonce
{
Vos codes
}


Et normalement vous pourrez appliquer une taille, des effets, un fond, des couleurs, enfin tout ce que vous voulez à vos annonces.


Voilà, j'espère que cette astuce sera utile à d'autres que moi ! ^^

Arrogant Mischief

Mettre une image à la place des légendes - Lun 14 Jan 2013 - 20:15



Bonjour/Bonsoir !

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


Toujours dans les templates index_body (pour l'accueil) et viewforum_body (pour l'intérieur des catégories), vous trouvez la partie entre :
Code:
<!-- BEGIN switch_legend -->
et
Code:
<!-- END switch_legend -->
que vous supprimez.

A la place, vous insérez la balise
Code:
<img src="URL DE VOTRE IMAGE" border="0" alt="" />


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


Pour ceux qui veulent utiliser le CSS, il vous suffit d'encadrer votre contenu ajouté par
Code:
<span class="votre_titre">VOTRE CONTENU</span>

et de personnaliser dans votre CSS avec
Code:
.votre_titre {
      Vos personnalisations
   }



Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Arrogant Mischief

Supprimer les légendes - Lun 14 Jan 2013 - 16:12



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




Bonjour ou Bonsoir,

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

Légende de l'accueil:

Légende intérieure des catégories:


Alors pour la légende de l'accueil, ouvrez votre template index_body et supprimez tout ce qui est entre ce Begin et ce End :
Code:
<!-- BEGIN switch_legend -->
Contenu quelconque à supprimer
<!-- END switch_legend -->

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

Pour la légende de l'intérieur des catégories, ouvrez votre template viewforum_body et supprimez le passage entre ce Begin et ce End :
Code:
<!-- BEGIN switch_legend -->
Contenu quelconque à supprimer
   <!-- END switch_legend -->

Encore une fois, n'oubliez pas de publier.

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

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

Skyleen

Comment créer une DIV? - Mar 8 Jan 2013 - 18:35



COMMENT CREER UNE DIV?

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

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

En voici quelque unes :

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

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

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

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

<div>  TEXTE </div>


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

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


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

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

Code:
.nom de votre element {
...
}

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


Exemple :

Code:
.skyleen {
...

}

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


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


Exemple :

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

}

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


Ce qui vous donne ceci :
TEXTE


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

TEXTE
TEXTE


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

Code:
{float : left; }


et celle-ci à la fin de votre balise :

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


Ce qui doit vous donner ceci au totale :


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

}

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


Exemple :

TEXTE
 
TEXTE


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

Taktiik

Intégrer sa Chatbox où on veut comme on veut - Mar 27 Nov 2012 - 12:01


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


Intégrer sa chatbox Dernière mise à jour : 29 Avril 2013
Aperçu
Préparation
Détails


Aucun aperçu


Onglet "Chatbox" de la Page accueil
Afin d'avoir un affichage optimisé et exactement sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration.

X Modules>Chatbox>Configuration>Activer la Chatbox : Oui

Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 27/11/2012
Type : Astuce


V
oici une astuce dans laquelle je vous apprend à intégrer votre chatbox à votre Page Accueil, mais par la même occasion, n'importe où ! Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.

Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Partie HTML


Code:
<iframe src="/chatbox/index.forum" style="width: 750px; height: 320px;" frameborder="0"></iframe>


Vous pouvez alors ajuster les dimensions de la chatbox en modifiant les valeurs de largeur "width" et de hauteur "height". L'url ne change en aucun cas car elle affichera la chatbox du forum par défaut (c'est à dire celui sur lequel l'iframe a été apposé) Wink


Voila ! Very Happy
J'espère que cette astuce vous aidera à embellir votre forum =)
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

Sélène

Green or green - Sam 24 Nov 2012 - 21:55



Bonjour,

Voici une petite entête de rp avec le contenu intégré de votre rp :smile:




Τα Καβαλίερς είναι χάος



κυνήγι
Les cavaliers du chaos sont en marche




Code:
<center><fieldset style="border: 5px solid #D0D297; width:20px; border-radius: 10px 10px 10px 10px;"><legend><br><table border="0"><tbody><tr><td align="left"><br><div style="margin: auto; text-align: center; width: 100%;"><table><tbody><tr><td><div style="border:4px solid #D0D297;width:500px;height:220px;border-radius:100px 100px 100px 100px;background-image: url(http://24.media.tumblr.com/tumblr_m6o0wuo3jp1rzs6tmo1_500.gif)"></div>
<div style="text-align:center;margin-top:-28px; color: tan; text-shadow: #000000 1px 1px 3px; font-size: 35px;word-spacing:3px;font-family:Times new roman;">Τα Καβαλίερς είναι χάος



κυνήγι </div><div style="text-align:center;color:black;margin-top:-32px;font:comic sans ms;"> Les cavaliers du chaos sont en marche </div></td></tr></tbody></table></div></td></tr></tbody></table></legend>

</fieldset>

QEEL onglets latéraux contenu apparaissant "onClic" (focus - CSS) - Sam 24 Nov 2012 - 18:03



Bonjour, bonsoir,

Dans l'idée de la PA équivalente, voici le même principe de focus appliqué à un QEEL, lui aussi déjà rempli, vous n'avez plus qu'à installer et personnaliser son apparence, et en particulier les images qui l'encadrent.
Un petit aperçu tout d'abord :

Lien Forum Test

Il s'agit du premier QEEL du forum, au fond marron et avec la femme manga allongée au dessus.

Information importante : j'ai voulu ici utiliser le "focus" en alternative au "target" pour créer un effet au clic, et non au survol. Que ça vous parle ou non peu importe, sachez juste qu'il y a un "défaut" avec l'utilisation du focus, c'est que lorsqu'on clique aille ça l'enlève. Du coup, lorsque vous êtes sur le contenu de l'un des onglets et que vous cliquez sur la page, que ce soit à l'intérieur ou à l'extérieur, vous revenez sur le contenu par défaut. Je vous rassure cependant si vous comptez mettre des liens dans vos contenus, même si le fait de cliquer ramène au contenu par défaut le lien fonctionnera quand même.
Sachez le cependant avant de l'utiliser.


Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


Installation HTML

Ouvrez le template "Page d'accueil", également nommé "index_body".
Repérez le bloc contenu entre les lignes 175 et 223 : il est délimité par les marqueurs suivants :

Code:
<!-- BEGIN disable_viewonline -->
<!-- END disable_viewonline -->


Ils indiquent le début et la fin de l'ensemble du "Qui est en ligne". C'est tout ce qui se trouve entre ces deux marqueurs que nous allons remplacer par cela :

Code:
<div id="qeel_bloc">
 
<div id="qeel_head"></div>
<div id="qeel_body">

<div id="qeel">
  <div class="qeel_onglet1" tabindex="0">Derniers connectés
    <div class="qeel_contenu1"><div class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table></div></div>
  </div>
  <div class="qeel_onglet2" tabindex="0">Anniversaires
    <div class="qeel_contenu2"><div class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}</table></div></div>
  </div>
  <div class="qeel_onglet3" tabindex="0">Groupes
    <div class="qeel_contenu3"><div class="qeel_contenu">{GROUP_LEGEND}</div></div>
  </div>
  <div class="qeel_contenu4"><div class="qeel_contenu">{TOTAL_POSTS} ▬ {TOTAL_USERS} ▬ {NEWEST_USER}<br />
    {RECORD_USERS}<br /><br />
    {TOTAL_USERS_ONLINE}<br />{LOGGED_IN_USER_LIST}</div></div>
  </div></div>

<div id="qeel_foot"></div>
 
  </div>



Installation CSS

Pour la mettre en forme, allez dans votre feuille CSS pour y mettre le css ci-dessous :

Code:
/* QEEL ONGLETS LATERAUX ONCLIC FOCUS */

#qeel_bloc
{
  height: 400px;
}
#qeel_head
{
  width: 980px;
  margin: auto;
  height: 151px;
  background: url(#);
}
#qeel_body
{
  width: 980px;
  height: 150px;
  margin: auto;
  background: url(#) repeat-y;
}
#qeel_foot
{
  width: 980px;
  margin: auto;
  height: 118px;
  background: url(#);
}
#qeel
{
  padding-top: 20px;
  padding-bottom: 20px;
}
.qeel_onglet1
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #d39b69;
  border: 1px solid #cf6f1d;
  box-shadow: 0px 0px 4px #493b32;
  -moz-box-shadow: 0px 0px 4px #493b32;
  -o-box-shadow: 0px 0px 4px #493b32;
  -htm-box-shadow: 0px 0px 4px #493b32;
  -webkit-box-shadow: 0px 0px 4px #493b32;
  font-weight: bold;
  color: #473d36;
  text-shadow: 1px 1px 0px #f0b27e;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet2
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  margin-bottom: 10px;
  background: #f1f0eb;
  border: 1px solid #d0d0cc;
  box-shadow: 0px 0px 4px #605750;
  -moz-box-shadow: 0px 0px 4px #605750;
  -o-box-shadow: 0px 0px 4px #605750;
  -htm-box-shadow: 0px 0px 4px #605750;
  -webkit-box-shadow: 0px 0px 4px #605750;
  font-weight: bold;
  color: #ba7b42;
  text-shadow: 1px 1px 0px #d4d3cf;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet3
{
  width: 150px;
  height: 20px;
  padding: 4px;
  margin-left: 0;
  background: #625c51;
  border: 1px solid #423328;
  box-shadow: 0px 0px 4px #3a372d;
  -moz-box-shadow: 0px 0px 4px #3a372d;
  -o-box-shadow: 0px 0px 4px #3a372d;
  -htm-box-shadow: 0px 0px 4px #3a372d;
  -webkit-box-shadow: 0px 0px 4px #3a372d;
  font-weight: bold;
  color: #d1d1cc;
  text-shadow: 1px 1px 0px #736f68;
  text-align: center;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:hover, .qeel_onglet2:hover, .qeel_onglet3:hover
{
  margin-left: 20px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_contenu1
{
  position: absolute;
  z-index: 1;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -40px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu2
{
  position: absolute;
  z-index: 2;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -80px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu3
{
  position: absolute;
  z-index: 3;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 200px;
  margin-top: -120px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
}
.qeel_contenu4
{
  position: absolute;
  z-index: 4;
  width: 700px;
  height: 150px;
  overflow: auto;
  margin-left: 204px;
  margin-top: -129px;
  background: #e6e6e6;
  border: 1px  solid #f5f4ee;
  box-shadow: 0px 0px 4px #38342d;
  -moz-box-shadow: 0px 0px 4px #38342d;
  -o-box-shadow: 0px 0px 4px #38342d;
  -htm-box-shadow: 0px 0px 4px #38342d;
  -webkit-box-shadow: 0px 0px 4px #38342d;
}
.qeel_contenu
{
  padding: 4px;
  color: #74685d;
  font-size: 11px;
  text-shadow: 1px 1px 0px #f7f6f0;
  text-align: justify;
  font-weight: normal;
}
.qeel_onglet1:hover .qeel_contenu1, .qeel_onglet2:hover .qeel_contenu2, .qeel_onglet3:hover .qeel_contenu3
{
  margin-left: 180px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.qeel_onglet1:focus .qeel_contenu1, .qeel_onglet2:focus .qeel_contenu2, .qeel_onglet3:focus .qeel_contenu3
{
  z-index: 10;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
}



Personnalisation

Pensez surtout à changer les images d'en-tête, de corps et de pieds du QEEL ! Celles-ci étaient pour le commande d'un forum, donc je les ai retirées du css afin que vous puissiez mettre les votre. Mettez l'adresse de vos images à la place des # présents dans le css, entre parenthèses.
- #qeel_head = image d'en-tête
- #qeel_body = image de corps qui se répète
- #qeel_foot = image de pieds
Attention aux tailles ! Vous pouvez voir que les blocs possèdent une largeur et pour certains une hauteur. N'oubliez pas de les modifier si votre image ne possède pas cette taille. La hauteur et la largeur des blocs doivent correspondre aux images.
Si vous ne voulez pas vous embêter avec trois images pour faire votre bloc, enlevez les blocs #qeel_head et #qeel_foot pour ne garder que le corps (#qeel_body) et mettez-lui une couleur de fond, bordures, ombres etc...
Pour le reste, il s'agit essentiellement de couleur, y compris pour les petits onglets.

En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)


S'il y a des problèmes, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Bloc flottant latéral ouvrant "onclick" (CSS avec target) - Sam 24 Nov 2012 - 0:19


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


Hello x)

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

Voici donc l'aperçu :

Tag html sur Never Utopia - graphisme, codage et game design - Page 7 JIoAHnh
Tag html sur Never Utopia - graphisme, codage et game design - Page 7 DGzyuYo

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



Installation HTML

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

Repérez ce code (ligne 201) :

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


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

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


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


Installation CSS

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

Code:
/* ONGLET DEVOILE EN CLIC */

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


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


Personnalisation

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

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

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

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

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

Taktiik

Navigation Latérale - Ven 23 Nov 2012 - 22:26

Note : Apparemment, il y aurait des bugs, ne pas utiliser pour le moment.



Barre Latérale de Menu : V 1.5 Dernière mise à jour : 06 Avril 2013
Aperçu
Préparation
Détails


W W W

Afin d'avoir un affichage optimisé et exactement comme sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration :

? Général> Configuration :
• Largeur du forum (nombre ou %) : 700

? Affichage> En-tête & Navigation :
• Afficher seulement des images dans la barre des liens : Non
• Forcer la barre de navigation à rester sur une ligne : Oui

Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à me MP ou m'envoyer un email : taktiik69@gmail.com, si j'oublie de répondre, et j'insiste à nouveau :

Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


Niveau : Facile
Fait : 23/11/2012
Type : Astuce


V
oici une astuce dans laquelle je vous donne un menu latéral de navigation rapide.
Je l'ai adapté grâce à Ce tutoriel pour que l'interaction des membres soit effective. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.
L'esthétique est basique et vous laisse libre choix pour la modifier Wink

Navigation





Menu avec possibilité de Ouvrir/Fermer


Partie Template

Vous devez donc remplacer votre template Overall_Header par celui-ci :

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');
         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}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {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>
  
   <div id="menu">
          <div>
              <a class="bouton" href="#">Fermer le menu</a><br />
          </div>
          
          <center><strong>Les News</strong></center>
   <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
          <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
            <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
          </span>
   </marquee>
          
          <center><strong>Liens rapides</strong></center>
          <center><em>Principaux</em></center>
          <a href="/index.htm">Accueil</a><br />
          <a href="/search">Recherche</a><br />
          <a href="/memberlist">Membres</a><br />
          <a href="/groups">Groupes</a><br />
          <a href="/profile?mode=editprofile">Profil</a><br />
      <!-- BEGIN switch_user_logged_in -->
   <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br />
   <a href="/login?logout" alt="connexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
          
      <!-- BEGIN switch_user_logged_out -->
   <a href="/login" alt="Connexion">Connexion</a><br />
   <a href="/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
          <br /><br />
        
          <center><em>Commandes</em></center>
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a>
            <br /><br />
            <br /><br />
            
            <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
              <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
          <a class="bouton2" href="#menu">Ouvrir le menu</a>
   </div>

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<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}

   <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>

            <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 {CLASS_TABLE_TYPE} 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 {CLASS_TABLE_TYPE} 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 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>
</body>
</html>
<!-- END html_validation -->
N'oubliez pas de remplacer les liens dans le code signalez par :" adresse de votre forum" Winkà partir de la l.218
Publiez votre template et dirigez-vous vers votre Feuille de style CSS =)!


Partie CSS

Maintenant, Ajoutez ce CSS au votre :

Code:
 #menu /*Menu latéral*/
{
  position: fixed;
  top: 0;
  left: 0;
  margin-left: -160px;
  background-color: #272727;
  border-right: 1px #ccc solid;
  font-family: Arial, serif;
  width: 150px;
  height:100%;
  padding: 10px;
  opacity : 0.8;
  -khtml-opacity:0.8;
  -moz-opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter : alpha(opacity=80);
  transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -htm-transition: all 1s;
  -webkit-transition: all 1s;
}

.bouton /*Bouton "Fermer le menu"*/
{
  display: block;
  text-align: center;
  background-color: #5d5d5d;
  border: 1px #ccc solid;
  color: #ffffff!important;
  font-weight: bold;
  text-shadow: none!important;
  margin: auto;
  margin-top: 20px;
  padding: 3px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -htm-border-radius: 30px;
  -webkit-border-radius: 30px;
}

.bouton2 /*Bouton "Ouvrir le menu"*/
{
  display: block;
  position: fixed;
  top: 0;
  left: 20px;
  text-align: center;
  background-color: #5d5d5d;
  border: 1px #ccc solid;
  border-top: 0px;
  color: #ffffff!important;
  font-weight: bold;
  padding-left: 10px;
  padding-right: 10px;
  text-shadow: none!important;
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -o-border-radius: 0 0 10px 10px;
  -htm-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
}

 #menu:target /*Ne pas modifier*/
{
  margin-left: 0;
  transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -htm-transition: all 1s;
  -webkit-transition: all 1s;
}

 #menu a /*Liens du menu*/
{
  z-index: 1;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  color: #5e5e5e;
}
Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-weight: bold;');
});





Menu qui reste toujours ouvert


Partie Template

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');
         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}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {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>
  
   <div id="menu">
          <center><strong>Les News</strong></center>
   <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'>
          <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;">
            <strong>~ xx/xx/xxxx :</strong> Blablabla<br />
          </span>
   </marquee>
          
          <center><strong>Liens rapides</strong></center>
          <center><em>Principaux</em></center>
          <a href="/index.htm">Accueil</a><br />
          <a href="/search">Recherche</a><br />
          <a href="/memberlist">Membres</a><br />
          <a href="/groups">Groupes</a><br />
          <a href="/profile?mode=editprofile">Profil</a><br />
      <!-- BEGIN switch_user_logged_in -->
   <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br />
   <a href="/login?logout" alt="connexion">Déconnexion</a>
      <!-- END switch_user_logged_in -->
          
      <!-- BEGIN switch_user_logged_out -->
   <a href="/login" alt="Connexion">Connexion</a><br />
   <a href="/register" alt="S'inscrire">Nous rejoindre</a>
      <!-- END switch_user_logged_out -->
          <br /><br />
        
          <center><em>Commandes</em></center>
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a><br />
          <a href="#" target="_blank">Lien</a>
            <br /><br />
            <br /><br />
            
            <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a>
              <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center>
   </div>

<div style="visibility:hidden">{GENERATED_NAV_BAR}</div>
  
<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}

   <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>

            <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 {CLASS_TABLE_TYPE} 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 {CLASS_TABLE_TYPE} 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 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>
</body>
</html>
<!-- END html_validation -->
Partie CSS

Code:
#menu /*Menu latéral*/
{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #272727;
  border-right: 1px #ccc solid;
  font-family: Arial, serif;
  width: 150px;
  height:100%;
  padding: 10px;
  opacity : 0.8;
  -khtml-opacity:0.8;
  -moz-opacity:0.8;
  -ms-filter: "alpha(opacity=80)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  filter : alpha(opacity=80);
}

 #menu a /*Liens du menu*/
{
  z-index: 1;
  text-transform: uppercase;
  font-size: 12px;
  text-shadow: 1px 1px 0 #000;
  color: #5e5e5e;
}
Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :
Code:
jQuery().ready(function(){
        var newmp = $("#i_icon_mini_new_message");
        if(!newmp.length) return;
        $("#mp").attr('style','color: darkred; font-weight: bold;');
});



Navigation




Voila ! Very Happy
J'espère que cette astuce vous aidera à embellir votre forum =)
Si vous avez des questions, n'hésitez pas à les poster Wink
Cordialement~~
Taktiik.

M.A.J :Astuce simplifié grâce à Alec Kuro. Merci à lui !

sébastien

Navigation rapide - Bloc flottant qui s'ouvre au survol - Ven 23 Nov 2012 - 17:01


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






Navigation rapide


Difficulté
Facile,il ne reste qu'à personnaliser
Outils
Aucun
Résultat
Avoir une navigation rapide pratique et discrète
correction du CSS
Sparrow-style
Crédit
© Never-Utopia



code HTML et CSS



Le code HTML est à mettre dans les annonces.
PA=>général=>messages et emails =>annonces

Pour les paramètres de l'annonce, vous choisissez :
> Activer les annonces : Oui
> Affichage des annonces : Toutes les pages
> Défilement : Désactiver

Puis vous mettez créez une annonce et y mettez ce code :
Code:
<div class="widget_flottant">
<span class="widget_flottant3">
<a href="http://l-anneau-des-dragons.1fr1.net/" class="postlink"><span style="font-size: 18px; line-height: normal; text-decoration: underline; font-weight: bold;">Index</span></a></br></br>
<u>Info</u></br>
<a href="lien" class="postlink"><strong>Règlement</strong></a></br>
<a href="lien" class="postlink"><strong>Backgroud</strong></a></br>
<a href="lien" class="postlink"><strong>Races jouables</strong></a></br>
<a href="lien" class="postlink"><strong>Compétences</strong></a></br>
<a href="lien" class="postlink"><strong>Modèle de fiche</strong></a></br>
<a href="lien" class="postlink"><strong>Cadre de topic</strong></a></br></br>
<u>HRP</u></br>
<a href="lien" class="postlink"><strong>Administration</strong></a></br>
<a href="lien" class="postlink"><strong>Taverne</strong></a></br>
<a href="lien" class="postlink"><strong>Archive</strong></a></br></br>
<u>RP</u></br>
<a href="lien" class="postlink"><strong>RP-1</strong></a></br>
<a href="lien" class="postlink"><strong>RP-2</strong></a></br>
<a href="lien" class="postlink"><strong>RP-3</strong></a></br>
<a href="lien" class="postlink"><strong>RP-5</strong></a></br>
<a href="lien" class="postlink"><strong>RP-6</strong></a></span>
<span class="widget_flottant2"><img src="http://i44.servimg.com/u/f44/15/54/03/92/anneau10.gif" border="0" alt="" />
</span>
</div>



Vous allez ensuite dans la feuille de CSS pour mettre le CSS :
Code:
.widget_flottant
{
  z-index: 999;
  position:fixed;
  top: 50px;
  right: 0px;
  width: 0px;
  height: 100px;
  transition: 1s;
  -webkit-transition: 1s;
  color: #dfdfdf;
  font-size: 12px;
  font-family: 'verdana';
}
.widget_flottant:hover
{
  width: 150px;
  height: 361px;
  transition: 1s;
  -webkit-transition: 1s;
}
.widget_flottant3
{
  display:block;
  text-align: center;
  margin: 0px;
  height: 361px;
  overflow: hidden;
  background: #7F7F7F;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 2px #000000 solid;
}
.widget_flottant2
{
  position: relative;
  float:left;
  display:block;
  margin: 0px;
  overflow: hidden;
  width: 33px;
  height: 175px;
  left: -33px;
  top: -320px;
  background-image: url(http://img15.hostingpics.net/pics/621948navrap.png);
  background-repeat: no-repeat;
}
.widget_flottant a {
  color: #c4c4c4!important;
}
.widget_flottant a:hover {
  color: #ffffff!important;
}



Personnalisation


Pour personnaliser ce code, je vous suggère d'aller lire ce sujet, il m'a aidé à construire le CSS de ce code. Il devrait pouvoir vous aider à le personnaliser.

Nom du sujet
.code { CSS: ???; }
Lien
https://www.never-utopia.com/t41098-code-css
Réaliser par
Shinomix




© Never-Utopia

Angelusia

Menu à deux niveaux - Sam 3 Nov 2012 - 13:21


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


Bonjour : )

Je vous propose mon premier tutoriel : le menu à deux niveaux.

Cela ressemble à ceci. : )



Ce n'est pas difficile à faire.

Mais pour le voir, il faut le mot magique : )




Pour le recréer, il faut tout d'abord faire créer le Html du menu.

Qui se présente ainsi.

Code:
 <ul id="menu_horizontal">
          <li>
                             <a href="#">Menu 1</a>
             <ul class="sous_menu">
                <li>
                   <a href="#">Sous Menu A.1</a>
                    <ul class="sous_sous_menu">
                          <li><a href="#">Sous Sous Menu 1.1.1</a></li>
                         <li><a href="#">Sous Sous Menu 1.1.2</a></li>
                   </ul>
               </li>
               <li>
                   <a href="#">Sous Menu 1.2</a>
                    <ul class="sous_sous_menu">
                          <li><a href="#">Sous Sous Menu 1.2.1</a></li>
                         <li><a href="#">Sous Sous Menu 1.2.2</a></li>
                   </ul>
               </li>
               <li><a href="#">Sous Menu 1.3</a></li>
             </ul>
         </li>      
         <li>
                             <a href="#">Menu 2</a>
             <ul class="sous_menu">
                <li>
                   <a href="#">Sous Menu 2.1</a>
                    <ul class="sous_sous_menu">
                          <li><a href="#">Sous Sous Menu 2.1.1</a></li>
                         <li><a href="#">Sous Sous Menu 2.1.2</a></li>
                   </ul>
               </li>
               <li><a href="#">Sous Menu 2.2</a> </li>
               <li><a href="#">Sous Menu 2.3</a> </li>
            </ul>
         <li><a href="#">Menu 3</a></li>
      </ul>


Ensuite il faut faire le css.

Tout d'abord on va s'intéresser au fond.

On lui met un background, un width, une bordure et pourquoi pas des bords arrondis.

Ce qui nous donnerait.


Code:
ul#menu_horizontal {
background-color: Votre couleur;
 -moz-border-radius: votre taille;
  border:  votre taille votre couleur votre style;
  border-radius:  votre taille;
width: votre largeur;
height: votre hauteur;
}


On souhaiterait que le menu reste en horizontal et sans marge et aussi centré.

On rajoute ceci.

Code:
margin: 0 auto;
display: inline-block;


Maintenant, nous regarderons l'apparence du menu visible. On aimerait enlever les puces et faire en sorte qu'une couleur apparaisse en hover. On procède ainsi.

Code:
ul#menu_horizontal li {
list-style: none;
}

ul#menu_horizontal li:hover {
background-color: votre couleur;
display: block;
}


On peut s'intéresser à l'apparence. Pour cela, à votre goût vous pouvez soit mettre des marges, soit des paddings. Ce qui donnerait.

Code:
ul#menu_horizontal li {
float: left;
padding: votre taille;
font-variant: small-caps;
font-size: votre taille;
list-style: none;
 
}

ul#menu_horizontal li:hover {
background-color: votre couleur;
display: block;
}


ul#menu_horizontal li a{
color: votre couleur;
text-decoration: none;
padding: votre padding;
}


Cette fois, nous nous intéresserons maintenant au premier niveau. Il n'est pas si différent de ce que vous avez déjà réalisé au préalable. La chose qui le différencie, c'est qu'il faut faire gaffe qu'il apparaisse que lorsque on pose sa souris sur le menu visible.

Ceci se fait grâce à une manipulation que vous verrez dans le css.

Code:
ul#menu_horizontal li .sous_menu {display: none;}

ul#menu_horizontal li:hover .sous_menu {
display: block;
text-align: votre alignement;
position: votre position; (je vous conseillerais absolute)
margin-left: votre marge négative ou positive;
margin-top: votre marge;
width: votre largeur;
padding: votre padding;
background-color: votre couleur;
}


Nous arrivons à la dernière étape. Le niveau deux... Si on ne fait pas attention à son codage, il apparaîtra lorsque vous posez votre souris sur le menu visible. Et c'est ce que nous souhaitons éviter.

Pour éviter ce problème, je vous conseille de bien regarder la class. Il y a deux ul et deux li.

Code:
ul#menu_horizontal li ul li .sous_sous_menu {display: none;}

ul#menu_horizontal li ul li:hover .sous_sous_menu {
width: votre largeur;
display: block;
padding: votre padding;
text-align: votre alignement;
position: absolute;
margin-left: votre marge;
margin-top: votre marge;
background-color: votre couleur;
float: votre float;
}


Vous pourrez en faire un vous même et avec votre propre goût personnel. ^^

Media Queries - Adapter le CSS selon le type d'écran, l'appareil, etc. - Sam 6 Oct 2012 - 15:45


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


Salut !

MAJ Onyx 04/04/2017 : Le tutoriel a été modifié et bonifié grâce au tutoriel de alsacréations que vous pouvez également lire si vous le souhaitez ^^

Vous vous demandez sûrement à quoi peuvent servir les media queries ? C'est simple, comme écrit dans le titre au-dessus, ils permettent d'adapter la mise en page (css) selon le type d'écran, l'appareil utilisé, le type d'impression et autre.

Grâce à eux, on pourra avoir le même rendu d'une page web, d'un site ou d'un forum sur une tablette, un netbook (un mini ordinateur, donc un écran plus petit) et un ordinateur normal. En gros, les media queries règlent les problèmes d'affichages par rapport au types d'écrans qu'on utilise, ce qui est nettement plus agréable quand on est sur un forum par exemple.

Premièrement, regardons certains types de media queries possibles :
screen = Écran
handheld = Appareils mobiles ou de petite taille
print = Impression (parce que je suis une troll qui aime faire disparaître des choses quand les gens impriment, bwahahaha *Onyx se fait kicker*)
aural (CSS 2.0) / speech (CSS 2.1) = Synthèses vocales (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
braille = Plages braille (pour les personnes aveugles ou ayant un handicap visuel plus de détails ici)
embossed = Imprimantes braille (pour les personnes aveugles ou ayant un handicap visuel)
projection = Projecteurs
tv = Télévision (Pour ceux qui aiment les gros écrans et branchent leur ordinateur à une télévision par exemple)

Comme vous le constatez, les media queries nous permettent de voir quel média est utilisé pour regarder/utiliser votre site/forum.

Les media queries fonctionnent un peu comme si cela envoyait un message à votre appareil qui dit "est-tu un screen?" ou "es-tu une télévision?" et votre appareil répond par "oui" ou "non".

Vous pouvez même vous amuser à plus d'information dans les questions de media, comme "es-tu un screen ET as-tu une largeur d'écran de moins de 1024px?". Comment? On va le voir, ne vous inquiétez pas ^^

À noter que la plupart des mobiles sont frustrants et se considèrent comme "screen" à la place de "handheld", malheureusement.




Passons à la pratique, donc comment utiliser les médias.

Commençons en passant par notre CSS :
Code:
/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui ne dépassent pas 1024px*/
@media screen and (max-width: 1024px) {
  .nomdeclass {
    propriété: valeur;
  }
}


Le "screen" and (max-width: 1024px)" veut dire quel code sera appliqué quand si le visiteur utilise un screen (écran) dont la largeur ne dépasse pas 1024px.




On peut aussi adapter la mise en page à des écrans compris par exemple entre 1024px et 1280px.

Dans ce cas, notre code sera comme ceci :
Code:
/*CSS normal qui s'applique à n'importe quoi*/
.nomdeclass {
  propriété: valeur;
}

/*CSS pour les écrans qui dépassent 1024px et ne dépassent pas 1280px*/
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .nomdeclass {
    propriété: valeur;
  }
}


Grâce à ça, les problèmes d'affichage de la page en fonction du type d'écran utilisé peut être réglé pour que cela soit plus agréable à regarder ^^




Histoire de ne pas surcharger notre page de CSS, il est également possible d'utiliser une feuille de CSS externe.

Pour ce faire, vous ajoutez ce bout de code dans la balise "head" de votre template Overhall_header :
Code:
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="URL DE LA FEUILLE DE CSS" type="text/css" />


Comme vu plus haut, vous modifiez l'attribut "media" par ce que vous voulez affecter comme "screen and (max-width: 1024px)" ou "screen and (min-width: 1024px) and (max-width: 1280px)".
Vous mettez ensuite le lien de votre feuille CSS à la place de URL DE LA FEUILLE DE CSS.

Pour ce qui est de comment héberger une feuille de CSS, je vous réfère à ce tutoriel.




Quand on ajoute du CSS média à notre CSS de base, il ne faut pas oublier que c'est un ajout. Du coup, tout ce qu'il y a dans le CSS de base s'applique en premier et le CSS média va venir s'appliquer après le CSS de base.

Exemple :
J'ai une image à laquelle j'ai donné la largeur 500px et un bloc auquel j'ai donné un background bleu dans mon CSS de base.
Je ne mets rien dans le CSS média pour "écran de plus de 1280px".
L'image sera quand même à 500px de largeur et le bloc sera quand même bleu pour un "écran de plus de 1280px" parce que je n'ai pas indiqué le contraire dans mon CSS média.




C'est tout ce qui me passe à l'esprit, soyez indulgents envers-moi, c'est ma première fois ^^


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 21:51