Onclik Change Catégorie

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

Résolu Onclik Change Catégorie

Message par microstart le Ven 4 Mar 2011 - 23:30

Donc voilà voilà, déjà bonjour à ceux qui passeront ici Smile
Enfin bon je viens pour une demande assez spéciale qui sera pour mon forum: http://comics-universe-rpg.forums-rpg.com/

Et la où j'ai pu voir ce que je voulais : http://exceed-art.forumactif.info/

il s'agit en faite des onglets situés au dessus des catégories, je me doutais que c'était un onclik mais je ne m'attendais pas à ce que l'on puisse faire ça sur la structure du forum Wink
Cela pourrait m'être assez utile étant donné que le mien est très grand!

Donc voilà, je me doute qu'il y a du Javascript, et autre commande, mais même si j'arrive à comprendre rapidement, je ne suis pas assez qualifié pour faire ce qu'ils ont fait, donc c'était pour avoir de l'aide.

Merci d'avance.


Dernière édition par microstart le Sam 5 Mar 2011 - 15:48, édité 1 fois

microstart
Nouveau membre

Messages : 12
Inscrit(e) le : 19/08/2007

http://f-f-chronologic.forumsactifs.com/index.htm
microstart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onclik Change Catégorie

Message par Jiben le Ven 4 Mar 2011 - 23:36

Salut

Voici un générateur pour mettre les onglets comme sur ce forum :
http://shared-development.clanteam.com/onglets.php

Jiben
*****

Masculin
Messages : 968
Inscrit(e) le : 30/01/2010

http://lesmagesnoirs.forum2ouf.com/
Jiben a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onclik Change Catégorie

Message par microstart le Ven 4 Mar 2011 - 23:50

Oh Rapide, merci bien je vais tester ça Smile

microstart
Nouveau membre

Messages : 12
Inscrit(e) le : 19/08/2007

http://f-f-chronologic.forumsactifs.com/index.htm
microstart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onclik Change Catégorie

Message par microstart le Sam 5 Mar 2011 - 0:14

Me revoilà donc j'ai posté le tout:
Spoiler:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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


<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
<ul class="conteneur_onglets">
<li onClick="change_cat(1)" class="onglet actif" id="onglet_1">Comics Universe</li>
<li onClick="change_cat(2)" class="onglet " id="onglet_2">Journal Du Forum</li>
<li onClick="change_cat(3)" class="onglet " id="onglet_3">Taverne et Hors RPG</li>
<li onClick="change_cat(4)" class="onglet " id="onglet_4">Mode RPG</li>
<li onClick="change_cat(5)" class="onglet " id="onglet_5">Marvel World</li>
<li onClick="change_cat(6)" class="onglet " id="onglet_6">DC Universe</li>
</ul></div>');

var compteur_cat = 1;

function change_cat(numero)
{
if(document.getElementById('categorie_'+numero))
{
/* affichage de la bonne categorie */
$('table[id^=categorie_]').css('display','none');
$('table[id=categorie_'+numero+']').fadeIn();

/* affichage du bon onglet */
$('.actif').removeClass("actif");
$('.onglet[id=onglet_'+numero+']').addClass("actif");
}
}

function capture_cat()
{
if(compteur_cat == 1)
{
document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
}
else
{
$('#conteneur_barre_onglet').css("display","block");
document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
}

compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->


<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>
<!-- BEGIN forum_link_no -->
<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>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</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 -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Le truc c'est que je me retrouve avec une drôle de forme, ce qui ne m'étonne pas, j'aimerais donc pouvoir comme sur l'autre forum, les aligner puis après pouvoir changer les textes en images.

microstart
Nouveau membre

Messages : 12
Inscrit(e) le : 19/08/2007

http://f-f-chronologic.forumsactifs.com/index.htm
microstart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onclik Change Catégorie

Message par demeter1 le Sam 5 Mar 2011 - 2:44

Le plus simple est d'aller sur Never Utopia et de voir le tutoriel fait par Vic le faucheur. Le générateur est de sa conception. En plus de la modification du template, il faut installer du css dans ta feuille de style.

demeter1
+ Hyperactif +

Masculin
Messages : 8104
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onclik Change Catégorie

Message par tupac le Sam 5 Mar 2011 - 6:30

Bonjour

Voici le CSS qui va avec vos onglet a placer dans votre feuille de style.

Panneau d'administration:
1/ Affichage
2/ couleurs
3/ Feuille de style css
Spoiler:
Code:
.onglet{
color: #9aa277;                    /* couleur texte */
font-family: Georgia, Verdana, Arial, serif;            /* police écriture */
background-color: #;      /* couleur fond onglet */
background: url('url de votre image') no-repeat;
display:inline-block;
margin-right:4px;        /* marge entre les onglets */
margin-bottom:-20px;      /* marge entre onglet et catégorie */
padding:5px;        /* marge entre le texte et les bords de l'onglet */
border:1px solid #0F0505;      /* bordure onglet */
cursor:pointer;
-moz-border-radius: 7px 7px 7px 7px;    /* arrondi les angles */
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}

.actif { /*Onglet survolé*/
color: #fff;
background-color : #;
background: url('url de votre image') no-repeat;
margin-right:8px;
padding:5px;
border:2px solid #0F0505;
cursor: pointer;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border-radius: 7px 7px 7px 7px;
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onclik Change Catégorie

Message par microstart le Sam 5 Mar 2011 - 15:48

Super, ça marche très bien, j'irais quand même voir sur never utopia les différentes tuto qu'ils ont mit, encore merci à vous, je mets le sujet en résolu.

microstart
Nouveau membre

Messages : 12
Inscrit(e) le : 19/08/2007

http://f-f-chronologic.forumsactifs.com/index.htm
microstart a été remercié(e) par l'auteur de ce sujet.

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


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