The Bad Reality
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
The Bad Reality

Un rpg charmed basé sur un futur dévasté
 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment : -28%
Précommande : Smartphone Google Pixel 8a 5G ...
Voir le deal
389 €

The Bad Reality :: Hors Jeu :: Zone d'Administrations
 

 Code CSS

Aller en bas 
AuteurMessage
Prue Halliwell
Etre de Lumière
Prue Halliwell


Nombre de messages : 221
Pouvoirs : Eclipse, Télékinésie, Guérison
Date d'inscription : 22/10/2005

Code CSS Empty
MessageSujet: Code CSS   Code CSS EmptyVen 18 Déc à 4:34
Colonne en Page d'accueil
Code:
<TABLE cellSpacing=10 cellPadding=3 width="100%" align=middle>
<TBODY>
<TR>
<TD align=middle width=230></TD>
<TD align=middle width=300></TD>
<TD align=middle width=230></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center" width=230> CONTENU DE LA COLONNE 1</TD>
<TD style="TEXT-ALIGN: center" width=300>  CONTENU DE LA COLONNE 2</TD>
<TD style="TEXT-ALIGN: center" width=230> CONTENU DE LA COLONE 3 </TD></TR></TBODY></TABLE>

Pour modifier le " citer "
Code:
.quote{
font-family: Arial;
font-size: 11px;
color: #couleur de votre choix(écriture);
background-color: #couleur de votre choix(fond);
border: #couleur de votre choix(côtés);
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}

Pour modifier le " coder "
Code:
.code{
font-family: Arial;
font-size: 11px;
color: #couleur de votre choix(écriture);
background-color: #couleur de votre choix(fond);
border: #couleur de votre choix(côtés);
border-style: solid ;
border-left-width: 6px;
border-top-width: 0px;
border-right-width: 0px;
}

Pour arrondir le cadre du forum
Code:
.bodyline{border:10px solid #couleur;
        -moz-border-radius:10px; 
        border-bottom: 10px #couleur solid;
}

Mettre le nom des utilisateurs en majuscules
Code:
a {font-variant: small-caps;}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}

Le soulignement des liens

* Selon les codes CSS de base, tous les liens sont soulignés automatiquement. Ceci se révèle souvent peu esthétique, notamment dans le soulignement des pseudos sur la page d'accueil. Ce petit code supprimera cet inconvénient :
Code:
text-decoration: none;

Mais vous pouvez également personnaliser ce code en modifiant le type de soulignement que vous souhaitez. Voici les possibilités que vous offrent la balise "text-decoration" :
o underline, soulignement = version "normale"
o overline, surlignement = ligne au dessus du texte et non plus au dessous
o line-through, texte barré = équivalent des balises "strike"
o blink, clignotement du texte (Ne fonctionne pas avec Internet Explorer).
o none, sans rien.

# La transformation des lettres des liens

* Les liens entièrement en minuscules ou en majuscules, vous en avez peut-être croisés, ils sont très à la mode. Ces modifications sont réalisées avec la propriété suivante :
Code:
text-transform : none ;

Les différentes possibilités données par le code "text-transform" sont les suivantes :
o uppercase, texte entièrement en majuscules,
o lowercase, texte en minuscules,
o none, texte normal soit la première lettre en majuscule, le reste en minuscules.



# L'espacement des lettres et des mots des liens

* Voici également une modification à la mode ; forcer chaque lettre de chaque mot à s'espacer selon une valeur fixe. Les lettres ne sont donc plus accolées mais espacées. Pour se faire, il suffit de modifier la valeur numérique selon vos préférences dans le code qui suit :
Code:
letter-spacing:5px;

* Pour modifier l'espacement entre deux mots et non plus deux lettres, il s'agit d'un code relativement similaire :
Code:
word-spacing:15px;

Pour mettre un header en fond fixe
général > configuration > description du site
Code:
<style type=text/css> body { background-attachment: scroll; background-repeat: no-repeat; background-position: top center;} </style>

Pour créer une liste déroulante
Code:
<form>
<select style="width: 268px" onchange="location = this.options
[this.selectedIndex].value">
<option selected="selected">
Navigation rapide
</option>


<option value="url1-de-renvoi">
choix 1
</option>

 <option value="url2-de-renvoi">
choix 2
</option>

<option value="url3-de-renvoi">
choix 3
</option>

<option value="url4-de-renvoi">
choix 4
</option>

Pour retirer le soulignement des pseudo
Affichage - Images&Couleurs - Couleurs - Feuille de style CSS
Code:
a { text-decoration: none; }

Pour ne plus avoir le " dernière édition "
Code:
tr.post span.gensmall { display: none; }

Pour avoir les titres des catégories en couleur
A mettre directement dans le titre de la catégorie
Code:
<DIV style="BACKGROUND-COLOR: #Couleurbarre; TEXT-ALIGN: center"align=center><SIZE=Tailletexte><color=#Couleurtexte>NOMDELACATEGORIE</i></color></DIV>

Pour centrer les rangs
Ajouter
dans le titre du rang

Pour avoir des bords arrondis
Code CSS 2yjykb7
Code:
.fullsample {
width: 250px;
border-radius: 10px 10px;
 -moz-border-radius: 10px;
background-color: #F00;
padding: 5px;
}

Pour changer le nom des inscrits, visiteurs :
Spoiler:

Signature supérieure à 500 caractères
Il suffit d'aller dans le panneau d'administration puis dans "Module"--"Création d'une nouvelle page HTML".
Cochez toujours les options avec "Non". Puis vous inserez votre texte avec les icones etc .. le tout en format HTML sinon ça ne marchera pas ^^.
Enregistrer et cliquer sur "revenir à l'administration des fiches HTML" ici vous trouverez le lien de votre fiche HTML. Il vous suffit ensuite d'aller dans profil -- Signature et d'insérer ce code ;
Code:
[center]<iframe name="ifram" SRC="LIEN DE TA SIGNATURE" scrolling="no" height="300" width="600" FRAMEBORDER="no"></iframe>[/center]
Revenir en haut Aller en bas
http://thebadsisters.superforum.fr
Prue Halliwell
Etre de Lumière
Prue Halliwell


Nombre de messages : 221
Pouvoirs : Eclipse, Télékinésie, Guérison
Date d'inscription : 22/10/2005

Code CSS Empty
MessageSujet: Re: Code CSS   Code CSS EmptyDim 20 Déc à 13:51
Pour décorer le forum
PA > Général > Forum > Configuration > Description du site

Petits flocons
Code:
<script src="http://astuforum.free.fr/js/neige_lettre.js"></script>

Flocons de taille moyenne
Code:
<script src="http://astuforum.free.fr/js/neige-mini.js"></script>

Petits flocons
Code:
<script src="http://astuforum.free.fr/js/snow.js"></script>

Petites boules de neige
Code:
<script src="http://s1.wordpress.com/wp-content/plugins/snow/snowstorm.js"></script>
Revenir en haut Aller en bas
http://thebadsisters.superforum.fr
Prue Halliwell
Etre de Lumière
Prue Halliwell


Nombre de messages : 221
Pouvoirs : Eclipse, Télékinésie, Guérison
Date d'inscription : 22/10/2005

Code CSS Empty
MessageSujet: Re: Code CSS   Code CSS EmptyLun 21 Déc à 4:49
Pour mettre le pseudo sous l'avatar
Alors tu vas dans affichage → templates → général
Va dans l'édition du template nommé viewtopic_body, puis supprime tout pour coller ça :
Spoiler:

Pour les menus verticaux et horizontaux en page d'accueil

Pour justifier automatiquement les messages
Affichage -> Images et Couleurs -> Couleurs -> Feuille de Style CSS
Code:
.postbody {
    display: block;
    text-align:justify;
}

Pour effet ombre sur les catégories
Code:
a.cattitle{
    text-transform: uppercase;
        font-size: 11px;
    color : #bbd1b6;
        text-shadow: #595858 1px 1px 1px;
    }
Pour la même chose sur les forums, il faut remplacer a.cattitle par a.forumlink

Pour créer une infobulle
Dans Panneau d'Affichage - Affichage - Couleurs - Feuille CSS
Spoiler:
Vous pouvez bien-sur modifier n'importe quelles valeurs.

* font-family: Tahoma, Verdana, Arial, serif, Georgia, Courier New; => police d'écriture
color: #576186; => couleur du texte
font-size: 12px; => taille de l'écriture dans l'infobulle
top: 60px; => positionnement de l'infobulle
background: #C0CDE5; => couleur de fond de l'infobulle
border: 3px solid #3E3D70; => largeur et couleur du cadre

Puis sur la page d'accueil ou dans le message
Code:
<a class="info">texte<span>texte info bulle</span></a>

Pour mettre une image de fond dans le QEEL :
Code:
.statistiques {
          border:0px;
          background-image: url("url de ton image de fond");
          background-repeat: no-repeat;
          background-position: center;
          height: hauteur-de-ton-image-de-fond px;}

.groupes {
          padding-left:7px;
          padding-bottom:7px;
          font-size:12px;
          font-weight: lighter;
          text-align:center;
          text-decoration: none !important;

Pour mettre un mot de passe à un sous-forum :
Code:
<div style="height: 3px;"></div><p align="center"><font size="1">Ton groupe, c'est lequel déjà ?</font>
</p><p>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tbody>
<tr>
<td><div align="center"><a href="LIEN de la PAGE HTML"><font color="COULEUR" size="TAILLE" face="ECRITURE">NOM DU GROUPE</font></a></div>
</p><p></p><div id="emptyidright"></div>
Page HTML pour les votes =>
Spoiler:

Mettre les écritures en majuscule :
affichage > couleurs > feuille de style CSS
Spoiler:

Ne plus avoir le dernière édition :
Code:
tr.post span.gensmall { display: none; }

Pour pattern dans la saisie des messages :
Code:
textarea

{color:#ADADAD!important; background-image: url(http://nsa11.casimages.com/img/2009/12/08/091208082807820111.png) ! important;}

Cadre autour des avatars :
Code:
.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 5px solid #63A6D1;}

Header ajusté au forum :
Code:
.bodyline {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}

.bodylinewidth {
margin: -10px auto -30px auto;
}

Pour personnaliser le " texte / liste " dans la feuille de personnage
Code:
textarea {color:#DC143C ; background-color:#FFFFFF ;}
La première couleur étant celle du texte, la deuxième étant la couleur de l'arrière-plan.

Pour mettre la chatbox sur le côté
Panneau d'Administration >> Affichage >> Généralités et dans contenu du message
Code:
<table style="position: fixed; bottom: 50px; left:
0px;background-color:
#000000;z-index:10000;"><tr><td><iframe
src="/chatbox/chatbox.forum?page=front&" id="chatboxpop"
scrolling="no" style="width: 600px; height: 400px; display: none;"
marginwidth="0" marginheight="0"
frameborder="0"></iframe></td><td
style="vertical-align: bottom;"><img
src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png"
onClick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"/></td></tr></table>
Changer les images pour ouvrir et fermer pour mettre les siennes


Dernière édition par Prue Halliwell le Lun 27 Sep à 8:22, édité 1 fois
Revenir en haut Aller en bas
http://thebadsisters.superforum.fr
Prue Halliwell
Etre de Lumière
Prue Halliwell


Nombre de messages : 221
Pouvoirs : Eclipse, Télékinésie, Guérison
Date d'inscription : 22/10/2005

Code CSS Empty
MessageSujet: Re: Code CSS   Code CSS EmptyJeu 1 Avr à 14:33
Image cliquable
1° -Créez votre image et enregistrer la.
2° -Ce rendre sur http://www.image-maps.com/
3° - dans "FROM YOUR PC" , Cliquez sur »PARCOURIR« et choisissez votre image.
4° - Cliquez sur START MAPPING YOUR IMAGE
5° - Cliquez sur » continue to next step «
6° - Cliquez sur rectangle, à droite.
7° -Selectionnez la partie de l'image ou il y'aura le lien.
8° -Ecrire le lien dans le cadre " Link for this map" et cliquez sur SAVE
9° - Repetez l'atape n°6 à 9 autant de fois qu'il fois qu'il faut et aux endroit ou les lien doivent apparaitre.
10° -Cliquez sur »GET YOUR CODE«
11° - Cliquez sur HTML CODE, copier et coller dans le message d'acceuil.

Liste déroulante en PA
Sur la PA
Code:
<div id="menu">
<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
</div>
CSS à personnaliser
Code:
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100px;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }

#menu ul li ul {
 display:none;
 }

#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }

#menu li ul {
 position:absolute;
 }

Barre de navigation à la Austen :
Code:
a.mainmenu {
  background-color:#000000;
  border:*px solid #000000;
  color:#FFFFFF;
  margin-left:-**px;
  padding-right:**px;
}

Signature deux icônes :
Code:
<blockquote><div style="width: 203px;"><img src="http://img9.xooimage.com/files/5/4/8/121deeb-1aa3e15.png"> <img src="http://img9.xooimage.com/files/5/4/8/121deeb-1aa3e15.png">
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</div></blockquote>

Pour enlever les marges :

Code:
.bodyline{
border-top: none !important;
border-bottom: none !important;
}
body {
margin: 0 auto;
}

Justification automatique :
Code:
.postbody {
    display: block;
    text-align:justify;
}

Bordure pour chaque catégorie du forum
Code:
.forumline {
-moz-border-radius: 10px;
margin-bottom:20px;
border-width: 5px;
}

Faire un tableau
Code:
<blockquote><blockquote>[table][td width"45%" valign="top"][justify]
ton texte 1
[/justify][/td][td width="10%"]<br>
[/td][td width="45%" valign="top"][justify]ton texte 2[/justify][/td][/table]
</blockquote></blockquote>
"td width="45%"" -> c'est la largeur de la colonne numéro 1. 45 est la place en pourcentage qu'occupera la colonne dans l'intégralité du tableau.
"td width="10%"" -> c'est l'espace entre les 2 colonnes.
"valign="top"" -> pour que la première phrase des deux colonnes commencent toutes les deux au même niveau, en haut.

Infobulle pour les sites
Code:
<a class="imginfo"><img src="TON LIEN D IMAGE"><span><table><tbody>
<tr><td style="text-align: center;"><a class="imginfo"><img src="TON LIEN D IMAGE"/></a></span></a></td></table></td></tr></tbody>

Ombre cadre avatar
Code:
.postdetails.poster-profile a img{
border: *taille du contour*px solid *couleur du contour* ;
margin: *taille de la marge*px;
-moz-box-shadow: 0px 0px *taille de l'ombre*px *couleur de l'ombre*;
}
Revenir en haut Aller en bas
http://thebadsisters.superforum.fr
Contenu sponsorisé





Code CSS Empty
MessageSujet: Re: Code CSS   Code CSS Empty
Revenir en haut Aller en bas
 
Code CSS
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Code Couleur

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
The Bad Reality :: Hors Jeu :: Zone d'Administrations-
Sauter vers:  
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser