Partagez|

[CREAPHY] Code de Catégories #3

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


I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 19

MessageSujet: [CREAPHY] Code de Catégories #3 Dim 12 Oct - 22:32



CSS
Code:
/*CATEGORIES*/

@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: local('Nothing You Could Do'), local('NothingYouCouldDo'), url(http://fonts.gstatic.com/s/nothingyoucoulddo/v5/jpk1K3jbJoyoK0XKaSyQAZsYoLsUhJo8DEpooYVMXYU.woff) format('woff');
}

@font-face {
  font-family: 'Carrois Gothic';
  font-style: normal;
  font-weight: 400;
  src: local('Carrois Gothic'), local('CarroisGothic-Regular'), url(http://fonts.gstatic.com/s/carroisgothic/v3/GCgb7bssGpwp7V5ynxmWy2IHn70NeZKJ0uStDo7Dza8.woff) format('woff');
}

.hierarchy {
  display:block;
  text-align:left;
}

span.forumlink {
  display:inline-block;
  vertical-align:middle;
  padding-right:5px;
  height:37px;
}

span.forumlink  a.forumlink{ /*liens des forums*/
  display:inline-block;
  vertical-align:middle;
  text-align:center;
  padding:0 15px 0 15px;
  font-size:26px; /*taille de police*/
  letter-spacing:-2px; /*espacement entre les lettres*/
  font-family: 'Nothing You Could Do'; /*police*/
  text-transform:capitalize; /*majuscule à chaque première lettre*/
  font-weight:bold; /*gras*/
  color:#121212; /*couleur du texte*/
  font-style:italic; /*italique*/
  
}
.secondarytitle h2{ /*nom des catégories*/
  display:block;
  position:relative;
  width:101%;
  left:-0.5%;
  text-align:center;
  font-weight:200;
  font-size:25px; /*taille du texte*/
  font-family: 'Carrois Gothic'; /*police*/
  letter-spacing:3px; /*espacement des lettres*/
  background:#4b4444; /*coulur de fond*/
  color:#ACA7A7; /*couleur du texte*/
  text-transform:uppercase; /*texte en majuscule*/
}

#boite1, #boite2, #underlinks{ /*les trois boites, blocs*/
  display:inline-block;
  vertical-align:top;
  padding:5px 10px;
  margin:-5px 5px 15px;
  height:105px;
  background:#685755; /*couleur de fond*/
  border:0px #513e3c solid; /*bordure*/
  border-width:0 0 0 6px;
}

#boite1{
  width:55%;
  position:relative;
}
#boite2{
  width:18%;
  height:115px;
  padding-top:30px;
  box-sizing:border-box;
}

#underlinks{
  width:17%;
  position:relative;
  line-height:5px;
  text-align:center;
  padding:5px 3px;
}

#underlinks a { /*liens des sous forums*/
  display:block;
  width:100%;
  padding:6px 0;
  color:#aca7a7; /*couleur*/
  background:#513e3c; /*couleur de fond*/
  font-size:11px; /*taille du texte*/
  font-family: 'Carrois Gothic'; /*police*/
  text-transform:uppercase; /*majuscule*/
}

#img_ca{ /*Image news no news verr*/
  position:absolute;
  right:-18px; /*A CHANGER SELON L'IMAGE*/
  bottom:-31px; /*A CHANGER SELON L'IMAGE*/
}

#last{
  display:block;
  width:120px;
  text-align:center;
letter-spacing:-1px;
}

#last a {color:#303030;} /*couleur des liens des derniers sujets*/

#desc{ /*boite des description*/
  padding-left:2px;
text-align:justify;
display:block;
  font-size:11px; /*taille du texte*/
  line-height:12px;
height:100%;
  overflow:auto;
}

#mt{ /*topics and messages*/
  opacity:0.5;
  display:inline-block;
  vertical-align:middle;
  font-weight:200;
  letter-spacing:2px; /*espacement entre les lettres*/
}

/**FIN CATEGORIES**/

index_box
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 index" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr style="float:none;">
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM}&nbsp;</th>
      
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      
      <td class="{catrow.cathead.CLASS_CAT}" colspan="3" 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>
   </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">
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%">
        
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </span><span class="gensmall" id="mt">{catrow.forumrow.TOPICS} topic(s) &
           {catrow.forumrow.POSTS} message(s)</span><br />
          
         </h{catrow.forumrow.LEVEL}>
         <div height="100%" id="boite1">   <div id="img_ca"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                  </div>
         <span id="desc" class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        
         </div>
        <div id="underlinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         <div id="boite2"><span id="last" class="gensmall">{catrow.forumrow.LAST_POST}</span>
                  </div>
  
  
        <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 -->
   <!-- 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 -->
Revenir en haut Aller en bas
http://essay.forumgratuit.ch


I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 19

MessageSujet: Re: [CREAPHY] Code de Catégories #3 Ven 4 Sep - 13:52

2ème version

CSS
Code:

/*CATEGORIES BY pyphi(lia)@creaphy*/

a.forumlink{ /*Nom du forum*/
  font-size:23px; /*taille du texte*/
  letter-spacing:-1px;
  font-family: 'Source Sans Pro';
  display:block;
  height:15px;
  text-align:left;
  padding-left:40px;
  text-transform:uppercase;
  font-weight: 100;
  text-shadow:1px 1px 0 #ddd;
  margin-bottom:-5px;
 
  -moz-transition:all 0.6s;
  -webkit-transition:all 0.6s;
  -o-transition:all 0.6s;
  -ms-transition:all 0.6s;
  transition:all 0.6s;
}

.forumline .secondarytitle{
  text-align:center;
}

.forumline .secondarytitle h2 { /*Nom des catégories*/
  display:block;
  height:28px;
  font-size:35px; /*taille du texte*/
  letter-spacing:-1px; /*espacement entre les lettres*/
  color:#855E7C;
  font-family: 'Playball';
}


.description { /*Description du forum*/
  width:50%;
  display:inline-block;
  vertical-align:middle;
  box-sizing:border-box;
  padding:8px;
  margin:3px 6px;
  border-bottom:5px solid #5B527F;
  background:rgba(0,0,0,0.03);
  overflow:auto;
  text-align:justify;
  line-height:11px;
  height:100px;
}
 
.description::-webkit-scrollbar-track /*Scrollbar de la description, ne marche pas sur Firefox Mozilla*/
{
   border-radius: 10px;
   background-color: #F5F5F5;
}

.description::-webkit-scrollbar
{
   width: 9px;
   background-color: #F5F5F5;
}

.description::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   background-color: #ccc;
}

.sous_links { /*sous-forums*/
  width:20%;
  min-height:100px;
  margin:3px 6px;
  box-sizing:border-box;
  padding:6px 0px 38px;
  display:inline-block;
  vertical-align:middle;
  background:rgba(0,0,0,0.03) url(http://i.imgur.com/9vx7FIi.png) center center;
  color:transparent;
  position:relative;
  text-align:left;
  line-height:13px;
}

.sous_links a { /*liens des sous-forums*/
  display:block;
  padding:0 8px;
  box-sizing:border-box;
  font-size:10px;
  font-family:'Source Sans Pro';
  letter-spacing:1px;
  text-transform:uppercase;
  height:auto;
  margin: 0 0 -15px; /*pour ne pas que la virgule transparente ait une marge*/
 
  -o-transition:all 1s;
  -webkit-transition:all 1s;
  -moz-transition:all 1s;
  -ms-transition:all 1s;
  transition:all 1s;
}

.sous_links a:hover { /*liens des sous-forums au survol*/
  background:#5B527F;
  color:white;
}

.sous_links .m_t { /*messages et topics*/
  display:block;
  background:rgba(0,0,0,0.07);
  font-family:'Source Sans Pro';
  text-transform:uppercase;
  height:auto;
  position:absolute;
  bottom:0;
  left:0;
  text-align:center;
  box-sizing:border-box;
  padding:3px;
  width:100%;
}

.last_post { /* bloc du dernier messages*/
  display:inline-block;
  vertical-align:middle;
  text-align:center;
  position:relative;
  width:18%;
  height:100px;
  background:rgba(0,0,0,0.07);
  margin:3px 6px;
  box-sizing:border-box;
  padding:16px 3px 0;
}

.last_post .box_img {
  display:block;
}

index_box
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" style="text-align:center;" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="5" 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>
      
                  <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 description">{catrow.forumrow.FORUM_DESC}</span>
         
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
                          <span class="sous_links">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          <span class="gensmall m_t">{catrow.forumrow.TOPICS} topics &
                          {catrow.forumrow.POSTS} messages</span></span>
         
                 
         
   <div class="last_post">   
            <!-- 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>
         
          <span class="box_img">   <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </span>
          </div>
      </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 -->
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de Catégories #3

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Problème code catégories onglets
» Problème avec un code pour modifier l'affichage des catégories...
» [Annulée] Demande de description des catégories.
» ['Christa] Regrouper les catégories en Onglet
» Mettre ses catégories en onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-