Salutation !
Bon je ne suis que nouvelle ici mais je pense pouvoir t'aider.
*
ETAPE 1 : Tout d'abord, vas copier/coller ceci dans ta feuille CSS.
Pour l'atteindre : Panneau d'administration > Affichage > Couleurs > Feuille CSS-----> Il faut donc y copier ceci :
- Code:
.BOITE1 {
width:167px; /*--Largeur à éditer en fonction de la taille de ton forum (en px ou %)--*/
height:116px;/*--Hauteur à changer en fonction de ton texte--*/
box-shadow:0px 2px 5px black; /*--Ombre de ta boite--*/
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
border-radius:10px; /*--Arrondi des QUATRES angles--*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
/*-----------------------------------------------Note :----------------------------------------
Pour préciser un angle par rapport aux autres il faut mettre "10px 10px 10px 10px"
et éditer celui ou ceux voulus.
---------------------------------------------------------------------------------------------*/
position:fixed; /*--Position de la boite : Fixe--*/
TOP : 100px; /*--Position à partir du haut--*/
RIGHT: 5px;
Background-color:#e3e8a9; /*--Couleur de fond : supprimer pour mettre en transparent--*/
padding:5px;/*--Marge intérieure générale--*/
padding-top:4px;/*--Marge intérieure du haut, éditée "à la place" de la bordure générale--*/
text-align:justify; /*--Alignement du texte : "right" -> droite ; "left" -> Gauche ; "justify" -> justifié . --*/
Color: BLACK ; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
}
.CADRE1{
height:26px;
margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
box-shadow:0px 2px 5px black;
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
padding:5px;
background-color: #fc5b5b ;
color: #0eb092 ; /*--Couleur du texte :
Note : le vert donné n'était pas le bon donc à éditer si ça ne convient pas--*/
font-family: GEORGIA ; /*--Typo du titre souhaité--*/
font-size: 14px ; /*--Taille de la typo--*/
text-shadow:1px 1px 2px black;
/*--Note : le contraste vert-rouge était trop fort je me suis permise de rajouter une bordure d'ombre au texte
Ce qui aidera à lire le vert par dessus le rouge normalement. A supprimer si inconvenant.--*/
}
Note : Tu pourras retourner dans ta feuille css plus tard pour éditer les couleurs si tu le souhaites. Je t'ai mit des explications pour que tu ne sois pas perdu(e) mais en gros tu peux supprimer tout ce qui est entre /*-- et --*/ sans crainte si tu trouve que ça prend trop de place.
*
ETAPE 2 : Ensuite pour afficher ces cadres sur la page d'accueil, tu vas dans :
"
Affichage > Page d'accueil > Généralités".
Là
tu actives le mode HTML /!\ Attention : c'est important de le faire sinon cela va rater ^w^".
Ensuite,
tu y copies-colle ceci, peu importe que ce soit avant ou après la description de ta PA :
- Code:
<div class="BOITE1">
<div class="CADRE1"> TON TITRE ICI </div>
TON TEXTE ICI
</div>
Voilà, logiquement ça devrait fonctionner puisque je l'ai testé sur le mien ^^
A savoir :
1 : Tu n'as plus qu'à éditer le texte sur la page d'accueil et les couleurs sur le CSS si ça ne te convient pas.
2 : Comme tu peux le voir sur le code de la PA (page d'accueil), tu as deux titres : BOITE 1 et CADRE 1. Tu imagines donc bien que tu pourras créer un second cadre de cette manière en notant dans le css une nouvelle boite intitulée BOITE 2, par exemple. Si tu le fais, pense à changer la position de la boite sur ton écran histoire qu'elles ne se superposent pas.
3 : Sur l'édition de la page d'accueil, en mode HTML tu peux évidement travailler ta page d'accueil en dessous sans que ce code ajouté ne vienne empiéter dessus logiquement.
