AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

[HTML & CSS] Catégories du forum

[HTML & CSS] Catégories du forum   posté le :
Bonjour ! Oui voilà, j'ai finis par arrêter de m'arracher les cheveux sur ce codage de catégorie, je ne pense pas que j'y arriverai un jour. Du coup je m'en remets à vous.
Voilà le lien de mon forum et à quoi il ressemble actuellement: Clique ici !
La couleur de fond du forum est #EACFB7. la couleur de fond des catégories est #C7A383 et j'aimerai également y avoir des touches de #356266 dans les titres (La première lettre du titre ou le soulignement par exemple )
J'aimerai également que les titres des catégories soient dans la police Lobster en premier choix. En second Great vibes et s'il le faut vraiment en dernier choix Georgia. Et qu'elles soient bien visibles. Que ce soit essentiellement elles qui décorent la première page du forum. Pourquoi pas dans ce style là:


Le reste, les forums et sous-forums, pas besoin d'y toucher si vous n'en avez pas envie =D

Le code de mon template (J'ai finis par supprimer l'autre Elu désolée >.< Quand je le bidouille maintenant il fait absolument pas ce que je veux.)
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" width="100%" border="0" cellspacing="1" cellpadding="0">
 <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">&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 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>
 <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">
            <!-- 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>
 </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 -->

Je vous remercie d'avance et s'il vous manque quelque chose n'hésitez pas à me le dire !
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: [HTML & CSS] Catégories du forum   posté le :
Coucoy Popy(ette) (j'en mange ce soir xD).

Alors, si j'ai bien compris, tu veux juste qu'on code les titres de catégorie pour qu'is ressemblent à l'image que tu nous as donnée ? Smile.
C'est tout ? Smile

PS : C'est tout à fait possible en Lobster Wink.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: [HTML & CSS] Catégories du forum   posté le :
C'était bon ? =D

Dans ce style là oui pour l'emplacement. Et si tu le veux bien, mais là j'ai pas vraiment d'idée pour ça, j'ai fais quelques test sur photofiltre qui n'ont pas été convainquant, j'aimerai une touche de bleus ( Le #356266) Afin d'avoir un certain contraste et que tout ne soit pas marron.
Mais ouais, j'ai de la peine à me faire une idée de ce qui est possible de faire sur forumactif. Je vois bien certains forums avec énormément de codage mais je les trouve trop lourd. J'aimerais, à la base, que le forum fasse "Simple, classique mais classe et pro' " si tu vois ce que je veux dire xD
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: [HTML & CSS] Catégories du forum   posté le :
Coucou Smile

Je peux avoir le CSS actuel auussi s'il te plait ? Wink
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: [HTML & CSS] Catégories du forum   posté le :
Hello,

Désolée oui en effet ce serait plus facile avec peut-être =3

Code:
/* AVATAR SUR CATEGORIE ET FORUM */
.lastpost-avatar img{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 60px;
margin-left: 40px;
}
/*PA*/
.nomfow {
  font-size: 20px;
  font-family: Lobster, Great vibes, georgia;
  text-align: center;
  color: #356266;
}

/*Titre des blocs*/
.titrep {
  display: block;
  text-align: center;
  width: auto;
  height: 22px;
  background-color: #C7A383;
  color: #EACFB7;
  border-bottom: 1px dotted #EACFB7;
  font-size: 20px;
  font-family: Lobster, great vibes, Georgia;
}

/*Contexte*/
.bloc2 {
  border: 1px solid #EACFB7;
  border-radius: 10px 10px 10px 0px;
  width: 245px;
  height: 110px;
  background-color: #C7A383;
  overflow: hidden;
}

.bloc2texte {
  width: 245px;
  height: 100px;
  font-size: 12px;
  font-family: arial;
  overflow: auto;
  padding: 3px;
  text-align: justify;
}

/*Nouveautés*/
.bloc3 {
  border: 1px solid #EACFB7;
  border-radius: 10px 10px 10px 0px;
  width: 245px;
  height: 110px;
  background-color: #C7A383;
  overflow: auto;
  font-family: arial;
  font-size: 12px;
}

/*partenaires*/
.infobulle {
  position: relative;
  z-index: 0;
}

.infobulle:hover {
  background-color: transparent;
  z-index: 50;
}

.infobulle span {
  position: absolute;
  background-color: #356266;
  opacity: 0.8; 
  color: black; 
  padding: 5px;
  visibility: hidden;
  text-align: center;
  line-height: 15px;
  font-family: arial;
  font-size: 12px;
}

.infobulle span img {  /*style des images dans l'infobulle*/
  padding: 5px;
}

.infobulle:hover span {    /*Style de l'infobulle*/
  visibility: visible;
  bottom: 20px;    /*Distance entre l'infobulle et le bas de la cellule*/
  left: 50px;    /*Distance entre l'infobulle et la gauche de la page*/
  width: 100px;  /*Largeur de l'infobulle*/
  border-radius: 5px;
}

.infobulle a {  /*Style des liens*/
  color: white;   
  text-decoration: none;
}

.infobulle a:hover {    /*style des liens au passage de la souris*/
  font-style: italic;
}

/* Fin de la P.A. */
/*ICONE ONLINE DANS LES SUJETS*/
.post .icones_profil .online{
  display: block;
    text-align: center;
}
/* COULEUR DANS CITATION */
.code {
color: black;
}
/* QEEL */
.QEEL {
width:100%; height:245px;
background:#EACFB7;
}
/* TITRE QEEL */
.tleQEEL {
padding:3px 5px 3px 0px;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3);
font-family:lobster,Verdana,Arial,Helvetica,sans-serif;
background:#C7A383;
text-align:right;
}
.tleQEEL a{
font-size:32px;
color:white;
}
/* IMAGE QEEL */
#i_whosonline {
position:absolute;
margin-left:-10px; margin-top:35px;
border-radius:200px;
border: 1px solid #FFFFFF;
width:200px; height:200px;
box-shadow:0 0 3px rgba(0,0,0,0.3);
background-image: url('http://i68.servimg.com/u/f68/19/36/45/80/qeel10.png');
}
/* STATISTIQUES QEEL */
.stsQEEL {
position:absolute;
margin-left:195px; margin-top:15px;
width:385px; padding:10px 0;
border-radius:10px;
background-color:#C7A383;
box-shadow:0 0 3px rgba(0,0,0,0.3);
text-align:center;
font-size:11px;
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
position:absolute;
margin-top:95px; margin-left:195px;
width:370px; height:65px;
border-radius:10px;
padding:10px;
overflow:auto;
background-color:#C7A383;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
font-size:11px;
}
/* 24H QEEL */
.dayQEEL {
position: right;
margin-left:675px; margin-top:15px;
width:175px; height:145px; padding:10px;
overflow:auto;
background-color:#C7A383
}
/* GROUPES QEEL */
.blocGQEEL {
width:100%; text-align:center;
background:#C7A383;
box-shadow:inset 0 0 25px rgba(0,0,0,0.3);
}
/* NOM GROUPES QEEL */
.blocGQEEL a {
display:inline-block;
padding:5px;
font-size:14px;
text-shadow:0 0 2px black;
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
position:absolute; z-index:2;
margin-top:77px; margin-left:570px;
width:145px; padding:10px;
font-family:Arial;
color:white;
background:#C7A383;
text-align:center;
transform:rotate(-90deg); -webkit-transform:rotate(-90deg);
}
.anvQEEL div {
position:absolute; z-index:3;
margin-top:-62px; margin-left:60px;
width:0px; height:145px; padding:10px;
overflow:hidden;
background:#C7A383;
text-align:justify !important;
opacity:0;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover div{
margin-top:28px; margin-left:-25px;
width:175px;
opacity:1;
overflow:auto;
}
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: [HTML & CSS] Catégories du forum   posté le :
Merci bien Smile

Alors, déjà essaie avec ça et dis moi :
Code:
.cattitle center{
   font-family: 'Lobster', cursive;
    font-size: 18px;
    color: #87591a;
    transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    background: linear-gradient(to bottom right, #87591a, #356266);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Tu as juste à ajouter ça dans ton CSS Wink

La résultat est : (en fait c'est un dégradé du marron au bleu)

Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: [HTML & CSS] Catégories du forum   posté le :
Coucou,
Je te remercie =D
Alors voilà ce que ça donne en fait.

Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: [HTML & CSS] Catégories du forum   posté le :
Oups, en effet, ccela vient d''un problème de compatibilité :/

Code:
.cattitle center{
     font-family: 'Lobster', cursive;
    font-size: 18px;
    color: #87591a;   
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

.cattitle center:first-letter{
   color: #356266;
}
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: [HTML & CSS] Catégories du forum   posté le :
Ah c'est super sympa j'aime beaucoup merci ! =D

Arf le soucis maintenant c'est que si on veut cliqué sur le premier forum, celui direct après le titre de la catégorie, on y arrive pas, ça clique seulement sur le titre de la catégorie. ( Je sais pas si j'arrive à me faire comprendre >.< ) Y'a moyen de changer ça avec un margin-top ou quelque chose du genre ?
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: [HTML & CSS] Catégories du forum   posté le :
Oui pas de soucis !
Il te suffit de rajouter cela :
Code:
    width: 205px;
    margin: auto;

Donc
Code:
.cattitle center{
    font-family: 'Lobster', cursive;
    font-size: 18px;
    color: #87591a;   
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
    width: 205px;
    margin: auto;
}

.cattitle center:first-letter{
  color: #356266;
}
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Re: [HTML & CSS] Catégories du forum   posté le :
Génial ! Merci beaucoup Elu'
C'est tout bon Wink
Popnoyt
avatar
Codeur UltrActif
Messages : 128
Coda'Points : 343
Date d'inscription : 03/10/2015

Re: [HTML & CSS] Catégories du forum   posté le :
C'est tout bon !
Tu peux laisser un petit message sur le livre d'or si tu souhaites Wink.
Eluknow
avatar
Administrateur
Messages : 2181
Coda'Points : 3888
Date d'inscription : 29/08/2013

Niveau en programmation
HTML/CSS:
3/3  (3/3)

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
A Toi de Coder - Forum de codage :: Corbeille :: Corbeille du forum-
Sauter vers: