*RESOLU* [PHPBB2] Mettre un Ribbon sur le titre de mes Catégories

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

Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonjour tout le monde 
J'ai trouver sur le net un site vraiment génial pour créer des ribbon Ici et je me demandais s'il était possible de placer ce genre de Ribbon sur le fond du titre des catégories de mon forum juste ici : 




Merci beaucoup de votre réponse, je vous souhaite une très agréable soirée <3


Dernière édition par Sick.l.Offrande le Mer 19 Juil 2017 - 16:55, édité 1 fois
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Bonjour Sick,

Philippe va avoir besoin :
1 de ton template index-body vu qu'il s'agit'une modification des titres des catégories
2 du html et du css fournit par le site



Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Okiiii ^^ 
Voila donc mon Template Index Body par contre je n'ai pas encore d'idée de couleur pour le Ribon, serais ce possible de la changer une fois qu'il sera poser ? (je souhaiterais le premier type de ribon)

Code:
{JAVASCRIPT}
<!--DEBUT WIDGET DERNIER MESSAGE-->


<div id="M14_last_sujets">
</div>
        <script type="text/javascript">
$.getScript('https://illiweb.com/rs4/97/frm//jquery/marquee/jquery.marquee.min.js');
$.get('/portal',function(data){$('#M14_last_sujets').html(jQuery(data).find('.marquee').parent().html());
$('.marquee').marquee();
$('.js-marquee-wrapper').css('margin-top', '150px');
$('.js-marquee-wrapper').css({"-webkit-animation-play-state": "paused","animation-play-state": "paused"});
      
});
        </script>  <script type="text/javascript">
$(document).ready(function() {
$('#M14_last_sujets_OP').delay(1000).fadeIn(200);
$('#M14_last_sujets_OP').click(function() {
$(this).fadeOut(200);
$('.js-marquee-wrapper').css({"-webkit-animation-play-state": "running","animation-play-state": "running"});
$('#M14_last_sujets').animate({left: '0px', opacity: '1'}, "slow");
$('#M14_last_sujets_Close').delay(500).fadeIn(200);

});
});
</script><script type="text/javascript">
$(document).ready(function() {
$('#M14_last_sujets_Close').click(function() {
$(this).fadeOut(200);
$('#M14_last_sujets').animate({left: '-=201px', opacity: '0'});
$('#M14_last_sujets_OP').delay(1000).fadeIn(200);
$('.js-marquee-wrapper').css({"-webkit-animation-play-state": "paused","animation-play-state": "paused"});
});
});
</script>

     <span id="M14_last_sujets_OP" title="Afficher les derniers sujets" style="display:none;">    
            <img src="https://i19.servimg.com/u/f19/11/26/21/37/pointi10.png" align="absmiddle" border="0" /> </span>  
  <span id="M14_last_sujets_Close"title="Fermer" style="display:none;">
    <img src="https://i19.servimg.com/u/f19/11/26/21/37/pointi11.png" alt="Fermer" align="absmiddle" border="0" /></span>    

  
<!-- BEGIN message_admin_index -->
<table class="forumline2" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
  
  <!--END suppression cadre PA NU-->
  
  
  
</table>
<!-- END message_admin_index -->
<br/>
  
<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

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

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle" align="right">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->
{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 <!-- END switch_delete_cookies -->
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </span>
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <!-- BEGIN switch_fb_connect_no -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

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

 <!-- BEGIN switch_fb_connect -->
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

 <tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- QEEL NEVER UTOPIA -->

<!-- BEGIN disable_viewonline -->
 

</div>
<center><img src="https://i19.servimg.com/u/f19/18/94/29/67/qeel_t10.jpg"><center/>
<div class="qeel">
  <table class="qeel_table"><tr>
    <br/><br/>
    <td><div class="colonne"><span class="qeel_contenu">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}<br /><br />
      {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}
      </span></div></td>
    <td><div class="colonne"><span class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table><br /><br />{LEGEND} :&nbsp;{GROUP_LEGEND}</span></div></td>
    <td><div class="colonne"><span class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}</table></span></div></td>
    </tr></table>
</div>
<center><a href="http://www.never-utopia.com/" style="font-size: 10px;">QEEL - (c) Never-Utopia</a></center>
           <!-- END disable_viewonline -->
<!-- FIN QEEL NEVER UTOPIA -->
  
  
{CHATBOX_BOTTOM}
    </br>

</br>
<br clear="all" />
      <div class="titre_partenaire"> <span style="color: #FFB6C1!important;
    font-family: UnifrakturMaguntia, Verdana!important;
        font-size: 28px!important; text-shadow: 10px 10px 10px #000!important;"> Nos Partenaires </span> </div>
    <!--DEBUT PARTENAIRE-->
  <div class="partenaire_div">
    <!--LISTE DES BANNIERE-->
<a href="https://gaia.equideow.com/joueur/fiche/?id=36891819"><img src="https://i97.servimg.com/u/f97/19/54/37/96/selend13.jpg" alt= "Profil de Selendo"></a>
<a href="http://www.equideow.com"><img src="https://i97.servimg.com/u/f97/19/54/37/96/equide11.jpg" alt= "Equideow.com"></a>
<a href="http://services.service-webmaster.fr/topsites/entrer-32982-1452-44202.html"><img src="http://hdd1.service-webmaster.fr/fichiers-membres/files/file2011/32982-580ecbc29dd0c..jpg" alt= "Top-Forums Equideow!"></a>
<a href="http://ouranos.equideow.com/joueur/fiche/?id=39892902"><img src="https://i37.servimg.com/u/f37/19/54/37/96/sa_err10.jpg" alt= "Sa Erro"></a>
<a href="http://princessekitcat.deviantart.com"><img src="https://s23.postimg.org/jh58q8iyz/Bannie_re.png" alt= "PrincesseKitCat"></a>
<a href="http://www.endrothroad.net/"><img src="http://sd-2.archive-host.com/membres/images/79875038560126947/Endroth_Road/Bouton_88x312.png" alt= "EndrothRoad.net/"></a>
<a href="http://gaia.equideow.com/centre/forum/sujet?id=788175&sujet=1073854563"><img src="https://i58.servimg.com/u/f58/19/54/37/96/parten10.png" alt= "Le Sang de la Fôret/"></a>
<a href="http://lukameguriine.eklablog.fr/accueil-c29109710"><img src="http://zupimages.net/up/17/20/vfhc.png" alt= "LukaMeguriine"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=889859"><img src="https://img4.hostingpics.net/pics/287374LeGrandHavre.png" alt= "Sdihkdfg"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=26822764"><img src="http://zupimages.net/up/17/21/92v3.png" alt= "Mini BN"></a>
<a href="http://san-francisco-stable.forumgratuit.ch"><img src="http://www.zupimages.net/up/17/18/udkm.png" alt= "San Francisco Stable"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=30061623"><img src="https://imgfast.net/users/1315/32/44/34/album/th/achats10.jpg" alt= "Snow is very good"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=26795138"><img src="https://i58.servimg.com/u/f58/19/54/37/96/bann_y10.png" alt= "Yun"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=39654153"><img src="https://i58.servimg.com/u/f58/19/54/37/96/bannie10.png" alt= "Sacham60"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=37696759"><img src="https://i58.servimg.com/u/f58/19/54/37/96/bannie11.png" alt= "Melle-Nemo61"></a>
<a href="https://ouranos.equideow.com/joueur/fiche/?id=34417859"><img src="https://img15.hostingpics.net/pics/404025minibannlittledirewolf.png" alt= "Little Direwolf"></a>
<a href="https://ouranos.equideow.com/joueur/fiche/?id=38759747"><img src="https://i11.servimg.com/u/f11/19/54/37/96/d10.png" alt= "TheDarkGirl"></a>
<a href="https://ouranos.equideow.com/joueur/fiche/?id=32073566"><img src="https://i11.servimg.com/u/f11/19/54/37/96/kaelic10.png" alt= "Kaelice"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=27540562"><img src="https://img4.hostingpics.net/pics/391240partenariat.png" alt= "Sisters"></a>
<a href="https://gaia.equideow.com/joueur/fiche/?id=39275477"><img src="https://i11.servimg.com/u/f11/19/54/37/96/lili10.png" alt= "lili454"></a>
  </div>
  <!--FIN PARTENAIRE-->

  {AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->
  
<!--CADRE DROIT EQUIDEOW-->
<!--CADRE-->
<div class="M14_loadFOFO">
<div style="margin-top: 40px; right: 90px; position: fixed; transform: rotate(90deg);"> <img src="https://i37.servimg.com/u/f37/19/54/37/96/18010.png"> </div>
<span style="font-size: 14px; text-shadow: 3px 3px 3px #000; color: white; font-weight: bold;">Menu Equideow</span></br></br>
<span style="font-size: 11px; color: white!important; font-weight: bold!important;">
<a href="http://www.legrandhavre.com/c1-astuces-et-tutoriels-equideow"><div style="color:#fff!important; cursor: crosshair!important;">∆ Astuce et Tutoriels </div></a>
<a href="http://www.legrandhavre.com/f8-concours-jeux-equideow"><div style="color:#fff!important; cursor: crosshair!important;">∆ Concours et Jeux </div></a>
<a href="http://www.legrandhavre.com/f10-les-bonus-equideow"><div style="color:#fff!important; cursor: crosshair!important;">∆ Bonus Don </div></a>
<a href="http://www.legrandhavre.com/f12-creation-de-la-pomme-d-or"><div style="color:#fff!important; cursor: crosshair!important;">∆ Atelier Pomme d'Or </div></a>
<a href="http://www.legrandhavre.com/c7-service-personnalisation"><div style="color:#fff!important; cursor: crosshair!important;">∆ Avatars et Fiches </div></a>
<a href="http://www.legrandhavre.com/c12-les-services-live-equideow"><div style="color:#fff!important; cursor: crosshair!important;">∆ Les Services Live </div></a>
<center><img src="http://gaia.equideow.com/media/equideo/image/fonctionnels/60/pass_v1828806360.png"></center>
  <center><a href="http://www.legrandhavre.com/t455-statistiques-les-gagnants"><div style="color:#fff!important; cursor: crosshair!important; font-size: 14px!important; text-shadow: 3px 3px 3px #000;">Les Gagnants </div></a></center></span>
</div>
  
<!--DROITE VOIR LES AUTRE SUJET-->
<div class="plus_de_sujet"><a href="http://www.legrandhavre.com/search?search_id=newposts" target="_blank"><font color="white">Voir plus de Sujets</font></a></div>
<!--FIN DROITE VOIR LES AUTRES SUJET-->
  
<!--LIEN ACCEDER VOIR LES SERVICES-->
<div class="voir_les_service">
<a href="http://www.legrandhavre.com/t2554-listing-les-differents-services-du-havre"><img src="https://i58.servimg.com/u/f58/19/54/37/96/servic12.png" alt= "Accéder au Service du Havre"></a>
  </div>
  
<!--LISTE BOUTON GAUCHE FORUM-->
<!--ENCADREMENT BOUTON CADRE MARRON-->
  <div class="bouton_gauche_havre">
    <center><img src="https://i58.servimg.com/u/f58/19/54/37/96/bonus_10.png"></center>
    
  <div class="bouton_gauche"><img src="http://i39.servimg.com/u/f39/18/94/29/67/petite10.gif"> <a href="http://www.legrandhavre.com/f158-les-ovnis-des-cavaliers">Les Ovnis des Cavaliers</a></div></br>
  <div class="bouton_gauche"><img src="http://i39.servimg.com/u/f39/18/94/29/67/petite10.gif"> <a href="http://www.legrandhavre.com/f222-les-dons-des-membres">Ils donnent leurs Objets</a></div></br>
  <div class="bouton_gauche"><img src="http://i39.servimg.com/u/f39/18/94/29/67/petite10.gif"> <a href="http://www.legrandhavre.com/f159-devenir-membre-premium">Devenir Membre PREMIUM</a></div></br>
  <div class="bouton_gauche"><img src="http://i39.servimg.com/u/f39/18/94/29/67/petite10.gif"> <a href="http://www.legrandhavre.com/c20-salon-de-papotage">Salon de Papotage</a></div></br>
  <div class="bouton_gauche"><img src="http://i39.servimg.com/u/f39/18/94/29/67/petite10.gif"> <a href="https://www.facebook.com/legrandhavre/">Notre Page Facebook</a></div></br>
  
  </div>



<!--GRIMOIRE DES ASTUCES-->
<div class="grimoire_astuce"><a href="http://www.legrandhavre.com/t2212-officiels-listing-des-astuces"><img src="https://i58.servimg.com/u/f58/19/54/37/96/15010.png" alt= "Grimoire des Astuces"></a>
<div class="clique_astuce"><a href="http://www.legrandhavre.com/t2212-officiels-listing-des-astuces"><img src="https://i58.servimg.com/u/f58/19/54/37/96/astuce10.png" alt= "Cliquez Ici"></a></div>
</div>
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Il suffit de fournir le code de base. Autant en profiter vu que le générateur fourni l'essentiel. Pour la couleur, il y aura qu'une simple modif à faire.



Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Je vais tester sur cette couleur alors ^^ 

Code:
/* ribbon style */

 .ribbon-wrapper {
 position: relative;
 border-bottom: 0px solid #ccc;
 border-top: 10px solid #ccc;
 -moz-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
 -webkit-border-bottom-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
 -moz-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
 -webkit-border-top-colors: rgba(0, 0, 0, 0.02) rgba(0, 0, 0, 0.04) rgba(0, 0, 0, 0.06) rgba(0, 0, 0, 0.08) rgba(0, 0, 0, 0.10) rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.14) rgba(0, 0, 0, 0.16) rgba(0, 0, 0, 0.18) rgba(0, 0, 0, 0.20);
}
  .ribbon-front {
 background-color: #577912; height: 40px;
 width: 110px;
 position: relative;
 left:-10px;
 z-index: 2;
}

  .ribbon-front,
  .ribbon-back-left,
  .ribbon-back-right
{
 -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
 -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright,
  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
 position: absolute;
 z-index: 1;
 border-style:solid;
 height:0px;
 width:0px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-topright {
}

  .ribbon-edge-bottomleft,
  .ribbon-edge-bottomright {
 top: 40px;
}

  .ribbon-edge-topleft,
  .ribbon-edge-bottomleft {
 left: -10px;
 border-color: transparent #3A5407 transparent transparent;
}

  .ribbon-edge-topleft {
 top: -10px;
 border-width: 10px 10px 0 0;
}
  .ribbon-edge-bottomleft {
 border-width: 0 10px 0px 0;
}

  .ribbon-edge-topright,
  .ribbon-edge-bottomright {
 left: 100px;
 border-color: transparent transparent transparent #3A5407;
}

  .ribbon-edge-topright {
 top: 0px;
 border-width: 0px 0 0 0px;
}
  .ribbon-edge-bottomright {
 border-width: 0 0 0px 0px;
}

  .ribbon-back-left {
 position: absolute;
 top: -10px;
 left: -30px;
 width: 30px;
 height: 40px;
 background-color: #577912; z-index: 0;
}

  .ribbon-back-right {
 position: absolute;
 top: 0px;
 right: 0px;
 width: 0px;
 height: 40px;
 background-color: #000000; z-index: 0;
}

Code:
   <div class="ribbon-wrapper">
      <div class="ribbon-front">
         <!-- ribbon text goes here -->
      </div>
      <div class="ribbon-edge-topleft"></div>
      <div class="ribbon-edge-topright"></div>
      <div class="ribbon-edge-bottomleft"></div>
      <div class="ribbon-edge-bottomright"></div>
      <div class="ribbon-back-left"></div>
      <div class="ribbon-back-right"></div>
   </div>
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra et Stéphane,
pour les catégories ce sera le template index box:

Dans le template index_box:
Affichage/Templates/Général/index_box

il suffit de trouver cette ligne :
Code:
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">  {catrow.tablehead.L_FORUM} </th>

Supprimes et remplaces par :

Code:
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
                  <div class="ribbon-wrapper">
          <div class="ribbon-front">
                 
                   {catrow.tablehead.L_FORUM}&nbsp;  </div>
          <div class="ribbon-edge-topleft"></div>
          <div class="ribbon-edge-topright"></div>
          <div class="ribbon-edge-bottomleft"></div>
          <div class="ribbon-edge-bottomright"></div>
          <div class="ribbon-back-left"></div>
          <div class="ribbon-back-right"></div>
      </div>
</th>


Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis Ajout

Il faut simplement entourer la variable qui gère les catégories par la div du code html
qui va afficher le ruban:

Code:
      <div class="ribbon-front"></div>



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Je n'ai pas cette ligne dans mon index_box Milouze : / 

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
<!--CONTENU DERNIERE VISITE .. RETIRE-->
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> </div>
      </td>
      
   </tr>
</table>
<!----- DEBUT TUTORIEL DES ONGLES DE CATEGORIES--><!-- Container des onglets -->
<!--TITRE NAVIGATION-->
<div class="TITRE_NAVIGATION"> Navigation Forum </div><br/> </a><a><div class="explication_categorie">
Cliquer sur les boutons pour Naviguer dans les Diverses Catégories du Havre <img src="https://i97.servimg.com/u/f97/19/54/37/96/help_v10.png" alt="?" /></div><br/>
<!--ANCRE DES CATEGORIES-->
<script>
    $(function(){if(location.pathname!=='/')
    $('.tab_container').remove();
    });
  </script>


<center><ul id="tab" class="tab_container">
<a href="#M14_Cat_1"class="mainmenu">♯ Le Porche!</a>
<a href="#M14_Cat_2"class="mainmenu">♯ Monde d'Equideow</a>
<a href="#M14_Cat_3"class="mainmenu"># Le Vestiaires</a>
<a href="#M14_Cat_7"class="mainmenu"># # Nos Amis, Animaux !</a>
<a href="#M14_Cat_4"class="mainmenu"># Les Ecuries</a>
<a href="#M14_Cat_5"class="mainmenu"># Le Cheval, Une Passion..!</a>
</ul></center>

<!--FIN ANCRE DES CATEGORIE-->
<!--FIN-->
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

   
  </tr>
  <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <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">
         
                <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 
            </span>
        </h{catrow.forumrow.LEVEL}></td>
                  <td style="padding-left: 40px; text-align: right;" class="gensmall">
                    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.
                  </td>
                  </tr>
                  </tbody>
                  </table>
                 
                 
         <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 style="min-width: 150px;" class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <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><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot --><!-- END catrow -->
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,

tu as cette première ligne dans ce template:

Code:

<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table>

Il suffit d'entourer la variable des titres de catégories:

Code:

<table class="haut_cate"><tr valign="center"><td>
  <div class="ribbon-wrapper">
          <div class="ribbon-front">
                  {catrow.tablehead.L_FORUM}&nbsp;  </div>
          <div class="ribbon-edge-topleft"></div>
          <div class="ribbon-edge-topright"></div>
          <div class="ribbon-edge-bottomleft"></div>
          <div class="ribbon-edge-bottomright"></div>
          <div class="ribbon-back-left"></div>
          <div class="ribbon-back-right"></div>
      </div>
</td></tr></table>



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonsoir Milouze, 
Malheureusement cela n'as pas entouré le bon titre : / Ici

Voila mon inde_box
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
<!--CONTENU DERNIERE VISITE .. RETIRE-->
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> </div>
      </td>
      
   </tr>
</table>
<!----- DEBUT TUTORIEL DES ONGLES DE CATEGORIES--><!-- Container des onglets -->
<!--TITRE NAVIGATION-->
<div class="TITRE_NAVIGATION"> Navigation Forum </div><br/> </a><a><div class="explication_categorie">
Cliquer sur les boutons pour Naviguer dans les Diverses Catégories du Havre <img src="https://i97.servimg.com/u/f97/19/54/37/96/help_v10.png" alt="?" /></div><br/>
<!--ANCRE DES CATEGORIES-->
<script>
    $(function(){if(location.pathname!=='/')
    $('.tab_container').remove();
    });
  </script>


<center><ul id="tab" class="tab_container">
<a href="#M14_Cat_1"class="mainmenu">♯ Le Porche!</a>
<a href="#M14_Cat_2"class="mainmenu">♯ Monde d'Equideow</a>
<a href="#M14_Cat_3"class="mainmenu"># Le Vestiaires</a>
<a href="#M14_Cat_7"class="mainmenu"># # Nos Amis, Animaux !</a>
<a href="#M14_Cat_4"class="mainmenu"># Les Ecuries</a>
<a href="#M14_Cat_5"class="mainmenu"># Le Cheval, Une Passion..!</a>
</ul></center>

<!--FIN ANCRE DES CATEGORIE-->
<!--FIN-->
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<!--DEBUT RIBON-->
<table class="haut_cate"><tr valign="center"><td>
  <div class="ribbon-wrapper">
          <div class="ribbon-front">
                  {catrow.tablehead.L_FORUM}   </div>
          <div class="ribbon-edge-topleft"></div>
          <div class="ribbon-edge-topright"></div>
          <div class="ribbon-edge-bottomleft"></div>
          <div class="ribbon-edge-bottomright"></div>
          <div class="ribbon-back-left"></div>
          <div class="ribbon-back-right"></div>
      </div>
</td></tr></table>
<!--FIN RIBON-->


<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

   
  </tr>
  <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <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">
         
                <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 
            </span>
        </h{catrow.forumrow.LEVEL}></td>
                  <td style="padding-left: 40px; text-align: right;" class="gensmall">
                    {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.
                  </td>
                  </tr>
                  </tbody>
                  </table>
                 
                 
         <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 style="min-width: 150px;" class="row3 over" align="center" valign="middle" height="50">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

         <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><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot --><!-- END catrow -->


Merci beaucoup de ton aide <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ah effectivement,
supprimes alors ceci:
Code:
<!--DEBUT RIBON-->
<table class="haut_cate"><tr valign="center"><td>
  <div class="ribbon-wrapper">
          <div class="ribbon-front">
                  {catrow.tablehead.L_FORUM}  </div>
          <div class="ribbon-edge-topleft"></div>
          <div class="ribbon-edge-topright"></div>
          <div class="ribbon-edge-bottomleft"></div>
          <div class="ribbon-edge-bottomright"></div>
          <div class="ribbon-back-left"></div>
          <div class="ribbon-back-right"></div>
      </div>
</td></tr></table>
<!--FIN RIBON-->


Remplaces par:
Code:

<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table>

Plus bas recherches ceci:

Code:
 <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

Supprimes et remplaces par:
Code:


 <th colspan="4" nowrap="nowrap" width="100%" class="secondarytitle">
<div class="ribbon-wrapper">
          <div class="ribbon-front">{catrow.tablehead.L_FORUM}  </div>
          <div class="ribbon-edge-topleft"></div>
          <div class="ribbon-edge-topright"></div>
          <div class="ribbon-edge-bottomleft"></div>
          <div class="ribbon-edge-bottomright"></div>
          <div class="ribbon-back-left"></div>
          <div class="ribbon-back-right"></div>
      </div></th>


Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis Ajout



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonjour ^^ 
C'est sur le bon titre cette fois Milouze sauf que sa me cale le titre a gauche et sa me ne fait pas toute la longueur : / Le Grand Havre
Merci beaucoup à toi <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Recherches dans ta feuille des tyle le conteneur des titres de catégories:
Code:

.ribbon-front

et augmentes la valeur 110 ici:
Code:

width: 110px;

Je partirais d'ailleurs en pourcentage comme ceci:
Code:

width: 102%;



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Génial Milouze, cela fonctionne ! 
Mais serais ce possible de faire passer le ribon sous les feuille a gauche ? : / 
Merci beaucoup de ton aide <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,
Il faut trouver cette class Sandra et lui dire que l'affichage est prioritaire "en gros":

Code:
table.haut_cate:before

et ajoutes un z-index:
Code:

z-index: 999;



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Sick, juste un signalement. Au niveau de l'image du lierre, les liens ne sont plus cliquables.



Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Merci beaucoup ^^ sa a fonctionner a merveille ^^ 
S'il ne sont plus cliquable ce n'est pas grave =)
Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Merci beaucoup pour votre aide, 
je vous souhaite une très agréable journée et je met le sujet en résolus :)
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum