Partagez|

[CREAPHY] Code de catégories #4

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

avatar

I am Pyphilia

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

MessageSujet: [CREAPHY] Code de catégories #4 Dim 3 Juil - 20:28



IMAGES: 130x100

CSS
Code:

/*CATEGORIES @ PYPHI(LIA)*/

.secondarytitle{
text-align:center;
}

.secondarytitle h2 { /*nom de la catégorie*/
display:block;
font-size:38px;
  width:100%;
  height:55px;
font-family: 'Pacifico', cursive;
}

.forumline{ /*bloc entourant chaque catégorie*/
  margin-bottom:20px;
  padding:0 20px 20px;
  background:rgba(255,255,255,0.6); /*couleur de fond*/
  border: 0px #ddd solid;
  border-width:5px 0;
}


#forum { /*un forum*/
  position:relative;
  margin:auto;
  text-align:center;
  font-family:arial; /*police*/
}

#forum > div {
  background:rgba(0,0,0,0.07);
  height:100px;
}

#forum > div .genmed{
  color:rgba(0,0,0,0.4); /*couleur du texte*/
}


.link_desc { /*bloc de description*/
  margin:5px;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:50%;
}

#desc { /*description*/
  display:block;
  width:97.5%;
  padding:5px;
  height:88%;
  overflow:auto;
  font-size:11px; /*taille de la police*/
  text-align:justify;
}

#img_sub { /*bloc image - sous-liens*/
  margin:5px;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:130px;
  overflow:auto;
  box-sizing:border-box;
  padding:5px;
  text-align:left;
  color:transparent;
}

#img_sub a { /*sous-liens*/
  display:block;
  margin-bottom:-17px;
  position:relative;
  z-index:3;
  opacity:0;
  text-transform:uppercase;
  color:#444; /*couleur*/
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

#img_sub img { /*image de news*/
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
  
}

#img_sub:hover img {
  opacity:0.2;
}

#img_sub:hover a {
  opacity:1;
}

#mt_avatar { /*bloc des messages/topics - avatar*/
  margin:5px;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  width:25%;
  text-align:center;
  text-transform:uppercase;
}

#mt_avatar span.gensmall { /*dernier messages*/
  margin:11% 4px 0; /*marges */
  display:block;
  font-size:9px;
}


#mt_avatar span.gensmall > strong {
  color:#444; /*couleur des nombres des topics/messages*/
}

#mt_avatar #mt { /*topics & messages*/
  position:absolute;
  bottom:0;
  left:0;
  text-align:center;
  display:block;
  padding:1px;
  width:100%;
  background:rgba(0,0,0,0.1); /*couleur de fond*/
  box-sizing:border-box;
  text-transform:uppercase;
  font-size:9px;
}

.lastpost-avatar img { /*avatar du dernier posteur*/
  width:45px;
  height:72px;
  border:solid #ccc 2px; /*bordure*/
  margin-left:4px;
  margin-top:4px;
  border-radius:0;
}

span.forumlink {
  position:relative;
  height:35px; /*à changer si la taille de la police change*/
  z-index:3;
  display:block;
  text-indent:30px; /*espace avant le lien*/
}

a.forumlink:before { /*avant le lien du forum*/
  content:'╳';
  font-size:14px;
  margin-right:10px;
}

a.forumlink{ /*lien du forum*/
  display:block;
  font-size:30px;
  text-align:left;
  font-weight: 100;
  text-transform:lowercase;
  font-family: 'Pacifico', cursive; /*police*/
  opacity:0.7;
  font-style:italic;
  letter-spacing:-3px;
  
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
}

index_box
Code:
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

<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" width="100%" border="0" cellspacing="1" cellpadding="0">
  <div class="secondarytitle">{catrow.tablehead.L_FORUM}</div>
  <!-- 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>
          <td id="forum" class="{catrow.cathead.inc.INC_CLASS}">
            <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 class="link_desc">
 
                  
 <div id="desc" class="genmed">{catrow.forumrow.FORUM_DESC}</div>
            </div>
            <div id="img_sub">
              <img class="img_cat" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </div>
                  <div id="mt_avatar">
            <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->
                    <div id="mt" class="gensmall"><strong>{catrow.forumrow.TOPICS}</strong> topic(s) &
                      <strong>{catrow.forumrow.POSTS}</strong> message(s)
                    </div>

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

[CREAPHY] Code de catégories #4

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-