Page d'accueil à plusieurs onglets.

[shirabi]

Bonjours de voilà on m'as demander sur deux forum de faire quelque chose comme ça. ( c'est un modèle qu'on m'as donner).

Spoiler:

Pour l'instant je n'est l'accès qu'as un template sur les 2 forums donc je vous donnerais pour l'autre plus tard. Je crois que je dois vous donner le indexe-body, mais je ne suis pas sûr ^^".

Coordialement.

[shirabi]

Un petit UP

[Missindo]

tu veux quelque chose comme ça? http://new-life.fr-bb.com/

[shirabi]

Euh non plutôt comme ça http://rpg-bleach.forumgratuit.org/

[Missindo]

ha la je vois un peu moins désolé

[shirabi]

Up

[Lucas J.Adamson]

Bonjour,
Vous désirez des catégories en Onglets c'est cela? Plutôt en haut ou plutôt sur le côté à gauche?

EDIT: A gauche étant plus difficile à faire, à vous de choisir.

[shirabi]

En haut comme sur le lien que j'ai mis en faite ^^

[Lucas J.Adamson]

D'accord donc je vais détailler le plus possible:
Étape 1.

-> PA
-> Affichage
-> Structure et hiérarchie
-> Vous prenez celui entouré d'un rectangle vert sur l'image


Puis vous cliquez

Étape 2.

-> Avez vous modifié votre template "index-box" ?

[shirabi]

Non tout est neuf et la stucture est mise.

[Lucas J.Adamson]

Donc on reprend:

Étape 2.

-> PA
-> Affichage
-> Dans la catégorie "templates" vous cliquez sur "Général"
-> Vous cherchez le template "index_box" puis vous cliquez sur à droite du template.
-> Vous sélectionnez le template complet et le remplacez par celui-ci:

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>
<div class="my_cat"> <ul></ul> </div>


<div class="my_cat_body">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<table class="my_modified_table" width="100%" border="0" cellspacing="1" cellpadding="0">
  <div class="my_forum_name">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
      <tr>
        <td colspan="3" class="my_title" align="center"><div class="myfoo_title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{SPACER}" alt="" height="5" width="1" /></td>
      </tr>
      <tr>
        <td class="my_img" valign="top"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="" /></td>
        <td class="my_disc" width="300" valign="top" >{catrow.forumrow.FORUM_DESC}</td>
        <td class="my_stats" width="200" valign="top">
            Topics: {catrow.forumrow.TOPICS}<br />
            Posts: {catrow.forumrow.POSTS}<br />
            Dernier post: {catrow.forumrow.LAST_POST}<br />
         
        </td>
      </tr>
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
</div>

-> Vous faite puis vous cliquez sur le
-> Vous cherchez le template overall_header vous cliquez encore sur
-> Dans le template vous cherchez la balise </head> qui se trouve tout à gauche vers la fin (partez de la fin puis remonter doucement en regardant à gauche) et une fois la balise </head> repéré vous collez ceci.

Code:

<script type="text/javascript" src="http://www.yourjavascript.com/0374901133/script.js" ></script>

-> Vous faite à nouveau et

Étape 3.

-> PA
-> Affichage
-> Dans la catégorie "Images et couleurs" vous cliquez sur "couleur"
-> Vous arrivez sur une nouvelle page avec des couleur, en haut de cette page se trouve un onglet avec écrit "feuille de style CSS" (sur l'image c'est ou se trouve mon pointeur de souri)

-> Une fois sur cette page vous allez tout en bas (si il y'à déjà du texte vous sautez 3 lignes) puis vous collez ce code:

Code:

.my_modified_table{
  width: 80%;
  margin-left: 10%;
margin-right: 10%;
margin-top: 5px !important;

font-family: Verdana;
}

.my_forum_name{
  display:none;
}
.my_img{
width: 10%;
margin-left: 50px;
}
.my_disc{
width: 70%;
text-align:center;
font-size: 13px;
}
.my_stats{

 width: 20%;
text-align:center;
}

.myfoo_title{
  text-align:center;
  width: 100%;
  -moz-border-radius: 6px;
  border: 1px solid #EAEAEA;

}
.my_title{
  text-align:center;
  font-size: 14px;
font-family: Arial;
}

.my_cat_body{
border: 1px solid #EEE;
-moz-border-radius: 3px;

}

.my_cat ul{
margin:0;
padding: 0;
width: 800px !important;
}
.my_cat li{
margin-left: 2px;
}
.my_cat_style{
border-top: 1px #666 solid;
border-left: 1px #666 solid;
border-right: 1px #666 solid;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
text-align:center;
font-size: 11px;
padding-left:10px;
padding-right:10px;
display:inline;
background-color: #EAEAEA;
width: 200px;
font-family: Arial;
font-weight: bold;

}
.my_cat a{
text-decoration: none !important;
color: #000;
}

-> Vous faites encore puis vous allez voir votre forum, normalement tout fonctionne.

Une fois cela fais et mis en fonction (normalement au passage de la souris ça emmène à la catégorie sinon il faut faire un clic dessus) je vous apprendrez à en ajouter/supprimer et à changer leurs noms.

Cordialement.

[shirabi]

Pardon fausse alerte

Edit: Ok sa marche mais comment je fait pour modifier l'image des onglets ?

[Lucas J.Adamson]

Cela fonctionne?

[shirabi]

Oui parfaitement mais comment je fait pour modifier l'image des onglets car la ils sont pas beau.

[Lucas J.Adamson]

Je vais vous l'expliquez au fur et à mesure d'abord je vais vous apprendre à changer leur texte et à en ajouter/supprimer.

Tout d'abord donner moi le nombre d'onglet que vous voulez (C'est égal au nombre de catégorie que vous possédez) et le nom de chaque onglet nous allons les changer ensemble.

[shirabi]

Sa c'est déjà fait xD sa à pris automatiquement le nom de mes onglet ainsi que le nom et sa marche parfaitement quand je clique, regardez ici

Moi sinon il y en à 5 onglets. et les noms dans l'ordre.

Commencement
Karakura
Soul Society
Hueco Mundo
Zone [HRPG]

[Lucas J.Adamson]

Il me semblais mais je n'étais pas sur bon pour la couleur rien de plus simple,

->PA
-> Affichage
-> Couleur
-> Feuille de Style CSS

et je vous met un fond transparent.

Donc vous cherchez dans votre css:

Code:

.myfoo_title{
  text-align:center;
  width: 100%;
  -moz-border-radius: 6px;
  border: 1px solid #EAEAEA;

Que vous remplacez par:

Code:

.myfoo_title{
  text-align:center;
  width: 100%;
  -moz-border-radius: 6px;
  border: 1px solid #;

ensuite:

Code:


.my_cat_style{
border-top: 1px #666 solid;
border-left: 1px #666 solid;
border-right: 1px #666 solid;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
text-align:center;
font-size: 11px;
padding-left:10px;
padding-right:10px;
display:inline;
background-color: #EAEAEA;
width: 200px;
font-family: Arial;
font-weight: bold;

Que vous remplacez par:

Code:


.my_cat_style{
border-top: 1px #666 solid;
border-left: 1px #666 solid;
border-right: 1px #666 solid;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
text-align:center;
font-size: 11px;
padding-left:10px;
padding-right:10px;
display:inline;
background-color: #;
width: 200px;
font-family: Arial;
font-weight: bold;

Je crois avoir oublier un contour, tester avec cela, si il reste un peu de blanc prévenez moi, je sais de quoi il s'agit.

Cordialement.

[shirabi]

Voila ce que ça donne:

Spoiler:

[Lucas J.Adamson]

Que voulez vous changer sur cette image? Couleur texte? Cadre? Ou voulez-vous mettre une couleur en fond?

[shirabi]

Bah le cadre déjà comme dans le forum que je vous est donner en exemple. ainsi que le fond et la grosseur du texte à l'intérieur.

[Lucas J.Adamson]

Quel couleur de cadre voulez-vous? la même que celle proposé dans l'exemple? et le fond? pour la taille du texte remplacez
Ceci:

Code:

}
.my_title{
  text-align:center;
  font-size: 14px;
font-family: Arial;
}

Par:

Code:

}
.my_title{
  text-align:center;
  font-size: TAILLE DE VOTRE TEXTE px;
font-family: Arial;
}

En oubliant pas de remplacer: "TAILLE DE VOTRE TEXTE" par la taille voulu (actuellement la taille est de 14px) et quand vous effectuerez les changement ne supprimais pas le "px" après taille du texte et ne laissais pas d’espace entre la taille et le "px".

Cordialement

[shirabi]

Le fond de la même couleure que le cadre des forums blanc gris je crois et Pareil pour le fond, mais il faudrait que les cadre soit arrondis au bout.

[Lucas J.Adamson]

Je n'ai pas bien compris la couleur voulu pour le contour et pour le fond... Le fond blanc? et le contour gris? puis quand on clic sur la catégorie le contour devienne blanc c'est cela?

[shirabi]

Voilà comme ça pour tous:

Spoiler:

et quand on clique sur l'un il devien comme ça:

Spoiler:

[Lucas J.Adamson]

Je ne peux pas faire changer le fond au clic, juste le contour (pour changer le fond c'est un autre code CSS... et le temps que je le retrouve dans tous mes codes perso' il y en a pour un moment...) par contre je peux vous faire le tout blanc qui au clic deviens blanc avec une bordure noir.

[shirabi]

Vas pour ^^, mais faudrait aussi faire le cadre arrondit un peu.

[Lucas J.Adamson]

Le cadre est déjà arrondi... en haut si je me souviens bien...

[shirabi]

Le cadre des onglets non, et en plus si je change la taille pour les onglets, c'est pas le texte dans les onglet qui change mais le texte des nom de mes forums.

[Lucas J.Adamson]

Je vous propose un premier "jet" pas fini, juste car j'ai tenter de réaliser votre demande du fond changeant... remplacez tout votre css que je vous ai fourni par celui-ci.

Code:

    .my_modified_table{
      width: 80%;
      margin-left: 10%;
    margin-right: 10%;
    margin-top: 5px !important;

    font-family: Verdana;
    }

    .my_forum_name{
      display:none;
    }
    .my_img{
    width: 10%;
    margin-left: 50px;
    }
    .my_disc{
    width: 70%;
    text-align:center;
    font-size: 13px;
    }
    .my_stats{

    width: 20%;
    text-align:center;
    }

    .myfoo_title{
      text-align:center;
      width: 100%;
      -moz-border-radius: 6px;
      border: 1px solid #FFF8DC;

    }
    .my_title{
      text-align:center;
      font-size: 19px;
    font-family: Arial;
    }

    .my_cat_body{
    border: 1px solid #EEE;
    -moz-border-radius: 3px;

    }

    .my_cat ul{
    margin:0;
    padding: 0;
    width: 800px !important;
    }
    .my_cat li{
    margin-left: 2px;
    }
    .my_cat_style{
    border-top: 1px #666 solid;
    border-left: 1px #666 solid;
    border-right: 1px #666 solid;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    text-align:center;
    font-size: 11px;
    padding-left:10px;
    padding-right:10px;
    display:inline;
    background-color: #000000;
    width: 200px;
    font-family: Arial;
    font-weight: bold;

    }
    .my_cat a{
    text-decoration: none !important;
    color: #000;
    }

[Lucas J.Adamson]

Double poste:

Si vous regardez au niveau de ma souris vous remarquez un arrondi:


(Déso' du double poste mais un édit aurait fait un trop gros message.)