Apparence des catégories

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

Résolu Apparence des catégories

Message par piernogood le Lun 19 Déc 2011 - 15:57

Bonjours,

Je chercherais à faire quelque chose de ce genre :

Voici le schéma à quoi sa doit ressembler :



Voila, si vous pouvez m'aider a faire quelque chose de ce style la s'il vous plait ?

Mon forum : http://themilitary.forumactif.com
Largeur du forum (nombre ou %) : 49%

Mon CSS :
Code:
body{ background-position: top center; background-repeat: repeat-x; } .navbar{background-color: transparent;margin: 0pxpadding: 0px;margin-top: -1px;border: none !important;} ul.navlinks{ border: none; } #search-box{ display: none; } #page-header{ margin-top: -17px; margin-bottom: -12px; } p{margin-bottom: 0em;} .panel{ background-color: transparent;margin: 0px;padding: 0px;} #page-body{ background-color: white;padding: 0px;padding-top: 16px !important;border-bottom: none;border-left: 2px dotted #017289;border-right: 2px dotted #017289;} #main-content{padding-left: 12px;padding-right: 12px;padding-bottom: 3px;} #page-footer{background-color: transparent;color: #000;background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/pied210.png');background-position: bottom ;background-repeat: repeat-x; height: 175px;width: 100%;margin:0px;padding: 0px;margin-top: -4px !important;border-left: 2px dotted #017289 ;border-right: 2px dotted #017289 ;} #page-footer ul.linklist{ background-color: transparent;
margin: 0px; padding: 0px; padding-bottom: 0px; } .copyright{ padding: 0px; } #page-footer .navbar{ background-color: transparent; background-image: none; margin: 0px; padding: 0px; } #page-footer span.corners-top { background-image: none; } #page-footer span.corners-top span { background-image: none; } #page-footer span.corners-bottom { background-image: none; } #page-footer span.corners-bottom span { background-image: none; } #headerbar span.corners-top { background-image: none; } #headerbar span.corners-top span { background-image: none; } #headerbar span.corners-bottom { background-image: none; } #headerbar span.corners-bottom span { background-image: none; } #page-header span.corners-top { background-image: none; } #page-header span.corners-top span { background-image: none; } #page-header span.corners-bottom { background-image: none; } #page-header span.corners-bottom span { background-image: none; } #i_icon_mini_calendar:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/214.png'); }
#i_icon_mini_portal:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/711.png'); } #i_icon_mini_groups:hover{ background-image: url('http://i10.servimg.com/u/f10/13/40/88/33/gro10.png'); } #i_icon_mini_profile:hover{ background-image: url('http://i10.servimg.com/u/f10/13/40/88/33/416.png'); } #i_icon_mini_members:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/314.png'); } #i_icon_mini_gallery:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/514.png'); } #i_icon_mini_faq:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/613.png'); } #i_icon_mini_search:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/812.png'); } #i_icon_mini_logout:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/910.png'); } #i_icon_mini_login:hover{ background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/114.png'); } #i_icon_mini_index:hover{
background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/acc10.png'); } #i_icon_mini_message:hover{ background-image: url('http://i10.servimg.com/u/f10/13/40/88/33/messag10.png'); } #i_icon_mini_register{ background-image:url('http://i15.servimg.com/u/f15/11/95/30/70/s_enre10.png'); width: 95px; height: 35px; } #i_icon_mini_register:hover{ background-image:url('http://i15.servimg.com/u/f15/11/95/30/70/1013.png'); width: 95px; height: 35px; } #i_icon_mini_new_message{ background-image:url('http://i15.servimg.com/u/f15/11/95/30/70/mp_new10.png'); width: 80px; height: 35px; } #i_icon_mini_new_message:hover{ background-image:url('http://i15.servimg.com/u/f15/11/95/30/70/1112.png'); width: 80px; height: 35px; } ul.topiclist .header{ height: 32px; padding-top: 6px; margin-bottom: -6px; } .table-title{ padding-left: 12px; } .post.row1{ background-color: #e1feff; } .post.row2{ background-color: #def5f7; } .forabg{ background-repeat: repeat; } .forumbg { background-repeat: repeat; }
a.button1, input.button1, a.button2, input.button2, button.button2 { background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/bouton10.jpg'); color: #000000; background-position: bottom; border: 2px inset #00626b; } a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover { background-image: url('http://i15.servimg.com/u/f15/11/95/30/70/bouton10.jpg'); background-position: top; border: 2px outset #00626b; } .module{ background-color: #def5f7; } .module .h3{ background-color: #fff; } .row{ border: 1px solid #00626b; } li.header dt{ padding-left: 10px !important; } li.header dd.mark{ padding-right: 17px !important; } table.table1 thead th{ color: #00303c; } .module .box-content{ border-style: dotted; border-width: 1px; border-color:  #535353 #6b6b6b #433f3f #212326; } #cp-main.ucp-main{ background-color: #def5f7; } #profile-advanced-layout{ float:none; margin: 0px; padding: 0px; width: 100%; } #profile-advanced-left{ float : none; margin: 5px; padding: 3px;
width: 70%; } #profile-advanced-right{ float: none; margin: 5px; padding: 3px; margin-bottom: 0px; width: 70%; }

Pour les Templates index_box et index_body utiliser celle par des faux, car la j'ai que fait des test sur celle la.

Merci de votre aide et de vos réponse,

Amicalement,
Filing


Dernière édition par piernogood le Mar 27 Déc 2011 - 20:43, édité 3 fois

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des catégories

Message par Invité le Lun 19 Déc 2011 - 16:24

Bonjour,

Il est ecrit dans les règles:
les sujets indiquant un lien ou un screenshot d'un autre forum afin de reproduire la même chose ne seront pas tolérés.

Merci de mettre votre sujet en conformité en proposant un schéma de ce que vous souhaitez réaliser. D'autre part, vous avez un sujet ouvert à propos de catégories en onglets, je ne suis pas sûre que les modifications soient compatibles entre elles. Si vous tenez absolument au système d'onglet, il serait judicieux de préciser ces nouvelles modifications souhaitées dans le sujet existant.

Cordialement

Invité
Invité


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

Résolu Re: Apparence des catégories

Message par piernogood le Lun 19 Déc 2011 - 16:44

Bonjours,

Voila, j'ai fait un schéma de ce que j'aimerais à quoi sa ressemble.



Pourquoi les modification avec les onglets jouerais t'elle sur le css ?

Et c'est prévenu également sur mon sujet pour les catégories a onglets.

Merci,

Amicalement,
Filing

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des catégories

Message par Invité le Lun 19 Déc 2011 - 17:36

Certains script de catégories en onglets s'appuient sur les balises <table> contenues dans le template Index_box. La modification que vous demandez ne pourra s'effectuer qu'à l'aide d'un tableau, je pense, donc risque de créer un dysfonctionnement des onglets.
Je ne vous cache pas que les catégories en onglets ne sont pas mon point fort, donc il y a très certainement une solution que je ne connais pas, je tenais juste à vous informer que vous n'ayez pas de mauvaise surprise Wink.

Cordialement.

Invité
Invité


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

Résolu Re: Apparence des catégories

Message par piernogood le Lun 19 Déc 2011 - 17:40

Ah voir, je pourrais toujours essayer de faire quelque chose en ayant les deux code. (donc celui pour l'apparence et l'autre pour les ongltes).

Au pire, le plus important pour moi serais l'apparence plutôt que les onglets Very Happy

J'attends des réponses ^^'

Merci de ta réponse.

Amicalement,
Filing

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des catégories

Message par piernogood le Mar 20 Déc 2011 - 17:39

Un petit up s'il vous plait ?

Amicalement,
Filing

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des catégories

Message par piernogood le Jeu 22 Déc 2011 - 11:20

up

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des catégories

Message par piernogood le Ven 23 Déc 2011 - 12:05

Un petit up ?

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence des catégories

Message par Invité le Sam 24 Déc 2011 - 16:31

Bonjour,

Voici une ébauche à retravailler:
Après avoir supprimer les colonnes en trop :
Code:
      <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>
et
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>
J'ai jouter des div autour des titres :
Code:
<div class="tfo"><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}></div>
des statistiques :
Code:
<div class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span></div>
du dernier messages :
Code:
<div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
J'ai mis un script pour placer les sous-forums en colonnes à coté de la description:
Code:
<span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
                          jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
</script>
Et j'ai ajouté un tableau pour mettre les choses en place:
Code:
<table width="100%"><tr><td width="85%"><div><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td  width="15%" class="sousfo"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
                          jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
</script></td></tr></table>
ce qui donne (partie modifiée dans le template):
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="4" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" 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"> </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="top">
                  <div class="tfo"><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}></div>
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                  <div class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</span></div>
         <table width="100%"><tr><td width="85%"><div><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div></td><td  width="15%" class="sousfo"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span><script type="text/javascript">
                          jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
</script></td></tr></table>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            </span>
      </td>
      
      
      
   </tr>
   <!-- END forumrow -->
Dans la feuille CSS, j'ai ajouté:
Code:
.tfo{
 -moz-transform:rotate(-17deg);
-webkit-transform:rotate(-17deg);
  transform:rotate(-17deg);
  border: 1px solid #000;
  position: relative;
  margin-bottom: -15px;
  width:100px;
}

.sousfo{
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 5px;
  -moz-border-radius: 20px;
  webkit-border-radius: 20px;
  border-radius: 20px;
}

.lastm{
  border: 1px solid #000;
  padding: 5px;
  -moz-border-radius: 20px;
  webkit-border-radius: 20px;
  border-radius: 20px;
  width:150px;
}

.stats{
  display: block;
  border-bottom: 1px solid #000;
  margin-bottom: 2px;
  text-align: right;
}
Le CSS est à personnalisé, et quelques ajustement à faire Wink.

Cordialement.

Invité
Invité


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

Résolu Re: Apparence des catégories

Message par piernogood le Mar 27 Déc 2011 - 20:43

Coucou,

Merci Isolde pour ton travail !

Amicalement,
Filing

piernogood
****

Masculin
Messages : 263
Inscrit(e) le : 13/01/2007

http://drakan.probb.fr
piernogood 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