Code Forum - Esthétique & Base

[Stephy]

Fond Forum
⇢ Fond, qui ne se répète pas. [CSS]

Code:

body {
 background-attachment: fixed; background-repeat: no-repeat; background-position: top center;
}

Fond du titre des sujets/forums
⇢ Le centrer et mettre une couleur/image en fond. [À mettre dans le titre du dit forum]

Code:

<center><span style=\"background-color: Couleur;\">Texte</span></center>

{ Explication
< center > : Centrer
"background-color: #******;\" : Couleur de fond
"background-image: url(\'URL DE L\'IMG\');\" : Image de fond


Soulignement & Surlignement des liens
⇢ Css

Code:

a:hover{
text-decoration: none;
background-color : couleur;
border-bottom: 1px dotted #couleur;
}

{ Explication
background-color : Couleur de fond
border-bottom : Ligne dessous de couleur

⇢ Pointillé sous les titres. [CSS]

Code:

a.forumlink {
  text-decoration: none;
  border-bottom: 2px dotted #couleur;
}

Barre de navigation
⇢ Petit rectangle avec une barre devant les textes. (Furuba style) [CSS]

Code:

a.mainmenu {
            background-color:#couleur;
            border-left: 5px solid #couleur;
            text-color:#couleur;
            text-transform:lowercase;
            padding-top:1px;padding-bottom:1px;
            }
a.mainmenu:hover{
            text-decoration: none;
            color :#couleur;
            border-left: 5px solid #couleur;
            }

Image carré en pop-up
⇢ Pour présenter le staff. Image pop-up quand on passe sur une autre.
[Message d'accueil]

Code:

<font color=\"MediumVioletRed\"></font> <a class=\"imginfo\"><font color=\"burlywood\"><img src=\"IMAGE PRINCIPALE\"/></font><span><table width=\"125\" cellspacing=\"1\" cellpadding=\"1\" border=\"0\"><tbody><tr><td style=\"text-align: center;\"><font size=\"1\">TEXTE PRINCIPAL</font><br/></td></tr><tr><td style=\"text-align: center;\"><a class=\"imginfo\"><img src=\"IMAGE DANS LA BULLE\"/></a></td></tr><tr><td style=\"text-align: center;\"><font size=\"1\">TEXTEDANSBULLE<br/></font></td></tr><tr align=\"center\"/></tbody></table></span></a>

[Feuille CSS]

Code:

a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l\'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d\'un bug IE */
  z-index: 500; /* on définit une valeur pour l\'ordre d\'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d\'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l\'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu\'il n\'y ait pas de retour à la ligne non-désiré */
  top: 30px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

Coin arrondis
⇢ Citation / Code / Spoiler, uniquement. [CSS]

Code:

.code {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-image:url(URL du Image de Fond CODE-préf. taille 200x200px en jpg);
padding:10px;
}
.spoiler {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-image:url(URL du Image de Fond CODE-préf. taille 200x200px en jpg);
padding:10px;
}
.quote {
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
background-image:url(URL du Image de Fond CODE-préf. taille 200x200px en jpg);
padding:10px;
}