Forum de support officiel

Forum d'entraide et support officiel des forums Forumprod.com


Heures au format UTC + 1 heure [ Heure d’été ]



Poster un nouveau sujet Répondre au sujet  [ 1 message ] 
Auteur Message
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 28 Mar 2012, 03:08 

Suite des coins arrondis: "Règles d'un forum" / les tableaux d'éditions & les boutons.

Ce petit tutoriel vise à vous montrer les coins arrondis sur le reste des tableaux,exemple dans l'interface d'édition d'un message ainsi que sur le tableau des règles d'un forum(configurable à partir de votre panneau d'administration>Styles>Modifier les couleurs,pour les couleurs basiques du texte,de la bordure ainsi que du fond.)
Applicable aussi sur les boutons du forum.
Si vous avez le moindre doute,que vous pensez faire une erreur ne paniquez-pas enregistrez votre feuille de style CSS complète sur bloc-note avant toute modifications.

Arrondis sur les règles d'un forum:

On va donc commencer par ce tableau là,pour l'effet arrondis allez dans:
:arrow: Panneau d'Administration :arrow: Styles :arrow: Editer la feuille de style CSS
Ensuite il faut trouver la lignée de code qui génère le tableau des règles donc celle-ci:
Code:
.forumrules {
    background-color: {COLOR_FORUMRULES_BG};
    border-width: 1px;
    border-style: solid;
    border-color: {COLOR_FORUMRULES_BORDER};
    padding: 4px;
    font-weight: normal;
    font-size: {COLOR_FONTSIZE3};
    font-family: {COLOR_FONTFACE1}; 

Et y ajouter ce code ci-dessous bien aligné:
Code:
border-radius:10px;
-
moz-border-radius:10px;
-
webkit-border-radius:10px; 

Vous pouvez modifier le 10px si vous le voulez mais sachez que plus le nombre en px est grand plus l'effet arrondis se vois et inversement plus il est petit moins l'arrondi s'applique.
Vous pouvez aussi modifier l'épaisseur de la bordure en modifiant dans cette ligne: border-width: 1px; le 1px par 5px par exemple.
Vous pouvez si vous le voulez ajouter un effet ombré en appliquant de deuxième code ci-dessous:
Code:
-moz-box-shadow:0px 0px 10px 7px #777777;
-webkit-box-shadow:0px 0px 10px 7px #777777;
box-shadow:0px 0px 10px 7px #777777;                       

Les modifications en rapport l'effet ombré sont: ici
Il n'est pas possible depuis votre panneau d'administration de surligner le texte: "Règles du forum:" dans le tableau des règles,pour ce faire:
Il faut chercher cette lignée ci-dessous:
Code:
h3 {
    font-size: 13px;
    font-weight: bold;
    font-family: {COLOR_FONTFACE2};
    line-height: 120%; 

Et y ajouter cette ligne à la suite vos codes si vous le voulez:
text-decoration: underline;

Arrondis sur les tableaux d'éditions:
Première partie:
Il faut retourner dans votre feuille de style CSS:
:arrow: Panneau d'administration :arrow: Styles :arrow: Editer la feuille de style CSS
Puis cherchez cette lignée de code:
Code:
textarea {
    background-color: {COLOR_TD_COLOR1};
    color: {COLOR_BODY_TEXT};
    font-family: {COLOR_FONTFACE1};
    font-size: {COLOR_FONTSIZE2}; 
    line
-height: 1.4em;
    font-weight: normal;
    border: 1px solid {COLOR_BODY_TEXT};
    padding: 2px; 

Il faut y ajouter ce code ci-dessous:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Deuxième partie:

Il va falloir retourner dans la feuille de style CSS et chercher cette ligne ci-dessous:
Code:
.post {
    background-color: {COLOR_TD_COLOR1};
    border-style: solid;
    border-width: 1px; 

Et y ajouter ce code ci-dessous:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Arrondis sur les boutons:
Première partie:
Pour appliquer l'effet arrondi il faut bien entendu retourner dans la feuille de style CSS:
:arrow: Panneau d'Administration :arrow: Styles :arrow: Editer la feuille de style CSS
Puis il faut chercher cette lignée ci-dessous:
Code:
input {
    color: {COLOR_BODY_TEXT};
    font-family: {COLOR_FONTFACE1};
    font-size: {COLOR_FONTSIZE2};
    font-weight: normal;
    padding: 1px;
    border: 1px solid {COLOR_BODY_TEXT};
    background-color: {COLOR_TD_COLOR1}; 

Et y ajouter ce code ci-dessous:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Il est possible aussi de changer la couleur de fond des boutons,pour ce faire modifiez dans cette ligne background-color: {COLOR_TD_COLOR1}; le {COLOR_TD_COLOR1} par le code couleurs que vous voulez.
La couleur du texte des boutons est changeable aussi,modifiez dans cette ligne: color: {COLOR_BODY_TEXT}; le {COLOR_BODY_TEXT} par le code couleurs que vous voulez.
Idem pour l'épaisseur de la bordure,modifiez le 1px dans border: 1px solid {COLOR_BODY_TEXT}; par 5px par exemple.
Vous pouvez bien entendu appliquer l'effet ombre en appliquant le code dans le tutoriel: >>>ici<<<

Deuxième partie:
Toujours dans la feuille de style CSS:
:arrow: Panneau d'Administration :arrow: Styles :arrow: Editer la feuille de style CSS
Il faut trouver cette lignée ci-dessous:
Code:
.btnbbcode {
    color: {COLOR_BODY_TEXT};
    font-weight: normal;
    font-size: {COLOR_FONTSIZE2};
    font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;
    background-color: {COLOR_TR_COLOR2};
    background-image: url('{IMG_TR_BG2_SRC}');
    background-repeat: repeat-x;
    background-position: top;
    border: 1px solid #666666;               

Et y ajouter le même code que pour les autres,celui-ci:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

C'est terminé!

Une légende pour vous aider:
Interface d'édition:
Image
Image
Pour les boutons:
Image
Le tableau Règles d'un forum:
Image

En éspèrant que ces explications vous ont étés utiles pour les petites finitions arrondis de vos tableaux.

ImageSuite du tutoriel rédigé pour le forum de support de ForumProd.


Haut
  Profil 
 

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Modérateur:

Aideurs

Permissions de ce forum:

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers
Poster un nouveau sujet Répondre au sujet  [ 1 message ] 


cron
Créer un forum | © phpBB | Entraide & support | Forum gratuit