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  [ 5 messages ] 
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é: 21 Mar 2012, 07:43 

Des coins arrondis pour les encadrés du forum ainsi que les bbcodes "QUOTE" & "CODE"
Précision:L'effet arrondis n'est pas pris en charge par InternetExplorer

Ces coins arrondis s'appliquent sur les encadrés du forum donc l'encadré de publicité google,ceux des forums/catégories,le "Qui est en ligne?" l'index et les modules comme Anniversaires et Statistiques et biensûr sur les tableaux bbcodes "Quote" & "Code".
Ainsi qu'une petite astuce rajoutée après quelque tests de ma part pour rétrécir les tableaux des BBCodes.

Avant de faire toute modifications qui vous semblent difficiles,Si vous pensez rater quelque chose pas de panique,enregistrez votre feuille de style CSS sur votre bloc-note par exemple.

On va commencer par les encadrés intérieurs du forum,nous allons arrondir les premiers coins qui sont carrés:
:arrow: Panneau D'administration :arrow: Style :arrow: Editer la feuille de style
Il faut chercher cette ligne en millieu de feuille:
/* Tables
------------ */
th {
color: {COLOR_FONTCOLOR3};
font-size: {COLOR_FONTSIZE2};
font-weight: bold;
background-color: {COLOR_FONTCOLOR7};
background-image: url('{IMG_CELLPIC3_SRC}');
white-space: nowrap;
padding: 7px 5px;


Une fois cette ligne trouvée,il faut y ajouter ce code à la suite de padding: 7px 5px;
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Et validez.
Rendu:
Image

Voilà les premiers coins intérieurs sont arrondis,maintenant il ne reste plus que les encadrés extérieurs.
:arrow: Panneau D'administration :arrow: Style :arrow: Editer la feuille
Ensuite il faut trouver cette ligne qui n'est pas très loin de la première que je vous ai donner(un peu en bas):
.tablebg {
background-color: {COLOR_TD_COLOR3};
border: 1px {COLOR_TH_COLOR2} solid;

Une fois trouvée,il faut y ajouter ce code juste après border: 1px {COLOR_TH_COLOR2} solid;
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Et validez.
Rendu:
Image
Ca y est ! ce dernier code qui complète votre feuille de style css arrondis vos coins.

Les coins arrondis pour les BBCodes "QUOTE" et "CODE"
Nous allons commencer par le bbcode "Quote" [quote=""][/quote],et plus précisément de la 1ere partie du tableau,pour ce faire:
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style
Il faut trouver cette ligne de code:
/* BBCode
------------ */
.quotetitle, .attachtitle {
margin: 10px 5px 0 5px;
padding: 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: {COLOR_TR_COLOR3};
color: {COLOR_BODY_TEXT};
background-color: {COLOR_TR_COLOR3};
background-image: url('{IMG_TR_BG3_SRC}');
background-repeat: repeat-x;
background-position: top;
font-size: {COLOR_FONTSIZE1};
font-weight: bold;
}

Il faut ajouter juste après font-weight: bold; et juste avant } ce code:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px

Et validez.

Ensuite il va falloir s'occuper de la deuxième partie du tableau,pour ce faire:
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style
Il faut comme vous le savez chercher cette ligne pas très loin en dessous de la première partie:
.quotecontent, .attachcontent {
margin: 0 5px 10px 5px;
padding: 5px;
border-color: {COLOR_TR_COLOR3};
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
font-size: {COLOR_FONTSIZE1};
line-height: 1.4em;
font-family: {COLOR_FONTFACE1};
background-color: {COLOR_TD_COLOR1};
color: {COLOR_FONTCOLOR1};
}


Il faut ajouter après de color: {COLOR_FONTCOLOR1}; et avant } ce code:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px

Et validez.
Rendu:
Image

Maintenant il reste le bbcode "Code",on s'occupe donc de la 1ere partie du tableau,toujours la même chose:
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style
Il faut chercher ce code:
.codetitle {
margin: 10px 5px 0 5px;
padding: 2px 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: {COLOR_TR_COLOR3};
color: {COLOR_BODY_TEXT};
background-color: {COLOR_TR_COLOR3};
background-image: url('{IMG_TR_BG3_SRC}');
background-repeat: repeat-x;
background-position: top;
font-family: {COLOR_FONTFACE1};
font-size: {COLOR_FONTSIZE1};
}

Il faut ajouter après font-size: {COLOR_FONTSIZE1}; et avant } le même code:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Et validez ensuite.

Deuxième partie du tableau,toujours dans la feuille de style:
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style
Cherchez cette ligne:
.codecontent {
direction: ltr;
margin: 0 5px 10px 5px;
padding: 5px;
border-color: {COLOR_TR_COLOR3};
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
color: {COLOR_FONTCOLOR2};
font-size: {COLOR_FONTSIZE1};
font-family: {COLOR_FONTFACE3};
background-color: {COLOR_TD_COLOR1};
}


Il faut ajouter après background-color: {COLOR_TD_COLOR1}; et avant } ce même code:
Code:
border-radius:6px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px; 

Puis validez,C'est terminer !
Rendu:
Image

Bon à savoir: Vous pouvez aussi ajouter un effet "ombré" comme expliquer sur ce tutoriel : tuto-appliquer-des-coins-arrondis-effet-ombre-sur-le-forum-t1395.html
Les codes juste pour l'effet ombré sont à placés dans chaques partie modifiée sur ce présent turoriel,après cette ligne -webkit-border-radius:6px; et avant }

A lire: Vous pouvez comme précisé plus haut modifier la taille, le style et la couleur de la bordure:
Style de bordure:
Cherchez cette ligne border-style: solid; et modifiez le solid par un de vos choix si vous voulez:

Voici un petit listing des styles de bordures:
La propriété de feuille de style border-style css peut prendre la valeur de :
- none, aucune bordure,
- dotted, bordure en pointillé (sauf internet explorer),
- dashed, bordure en tirets (sauf internet explorer),
- solid, bordure continue,
- double, bordure en double trait,
- groove, bordure en creux,
- ridge, bordure en saillie,
- inset, bordure en 3d lumière basse,
- outset, bordure en 3d lumière haute,
- inherit, hérite de son parent (css 2).

Taille de la bordure:
Il faut chercher souvent des lignes différentes mais qui ont toujours le mot border exemple:
border: 1px {COLOR_TH_COLOR2} solid; Modifiez le 1px par la taille voulue ou sinon
border-width: 0 1px 1px 1px; Modifiez tout les 1px partout si vous modifier la bordure.

Couleur de la bordure:
border-color: {COLOR_TR_COLOR3}; Modifiez le {COLOR_TR_COLOR3} par le code couleur voulu.

Le texte dans les tableaux des BBCodes:

La couleur du texte:
Il faut chercher cette ligne de code:
color: {COLOR_BODY_TEXT}; et modifiez le {COLOR_BODY_TEXT} par le code couleur que vous voulez.
Sinon cherchez cette ligne:
color: {COLOR_FONTCOLOR2}; et modifiez le {COLOR_FONTCOLOR2} par le code couleur que vous voulez.

La taille du texte:
Il faut chercher cette ligne:
font-size: {COLOR_FONTSIZE1}; et modifier le {COLOR_FONTSIZE1} par la taille en px (exemple:font-size: 15px;) Il y a en effet le mot COLOR mais pas d'importance,ceci est bien la bonne ligne.

La police d'écriture du texte:
Il faut chercher cette ligne:
font-family: {COLOR_FONTFACE1}; et modifier le {COLOR_FONTFACE1} par la police d'écriture que vous voulez exemple: font-family: comic sans ms; et pas de problèmes pour le mot COLOR ceci est la bonne ligne à modifier.

(Astuce) Rétrécir les tableaux des BBCodes :
Il est possible de rétrécir les tableaux selon votre désir,pour ce faire:
:arrow: Panneau d'administration :arrow: Style :arrow: Editer la feuille de style
Puis cherchez les lignes de codes que je vous ai données plus haut selon le bbcodes que vous voulez,exemple pour le tableau du BBCode "Code" il faut trouver cette lignée de code que vous avez modifier tout à l'heure:
.codetitle {
margin: 10px 5px 0 5px;
padding: 2px 4px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: {COLOR_TR_COLOR3};
color: {COLOR_BODY_TEXT};
background-color: {COLOR_TR_COLOR3};
background-image: url('{IMG_TR_BG3_SRC}');
background-repeat: repeat-x;
background-position: top;
font-family: {COLOR_FONTFACE1};
font-size: {COLOR_FONTSIZE1};
}

Ainsi que cette lignée de code:
.codecontent {
direction: ltr;
margin: 0 5px 10px 5px;
width: 80%;
padding: 5px;
border-color: {COLOR_TR_COLOR3};
border-width: 0 1px 1px 1px;
border-style: solid;
font-weight: normal;
color: {COLOR_FONTCOLOR2};
font-size: {COLOR_FONTSIZE1};
font-family: {COLOR_FONTFACE3};
background-color: {COLOR_TD_COLOR1};
}

Et y ajouter cette ligne: width: 00%; à la fin du contenu et en alignant correctement les lignes de code(modifier le 00 par le nombre désiré)
Il y aura sûrement un léger mais alors léger décalage entre le title et le content dans l'affichage du tableau, pour changer cela pas de soucis modifiez la ligne padding: 5px; dans le .codecontent { en mettant 4px au lieu de 5px.



ImageTutoriel et modifications basées sur le thème officiel du forum de support ForumProd.



En éspèrant que ces explications vous ont étés utiles,comme précisé au début si vous avez le moindre soucis avec ces codes enregistrez votre feuille de style complète avant toute modification.

Bon courage à tout le monde :thumbup:


Dernière édition par Vincent le 23 Mar 2012, 07:48, édité 12 fois.

Haut
  Profil 
 
Membre super
Membre super

Inscription: Jan 2011
Messages: 1141
Points: 1096
Sexe: Masculin
Age: 25
Posté: 21 Mar 2012, 09:49 

Bonjour,
Super Tuto Wadjh...


Haut
  Profil 
 
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 21 Mar 2012, 09:58 

Bonjour Willy,

Merci du compliment j'éspère qu'il sera utile..


Haut
  Profil 
 
Membre super
Membre super

Inscription: Déc 2010
Messages: 1779
Points: 295
Localisation: Larochelle/Lagord
Sexe: Masculin
Age: 52
Forum: http://pub-forum.forumprod.com
Posté: 21 Mar 2012, 14:56 

Bonjour, merci wadjh, beau tuto, l'on m'a donné un autre forum de pub auquel j'ai accès aux Templates, je ne l'ai pas fait parceque maintenant tous les forums le font, je tiens à rester basique et performant parce qu'apres je m'embrouille dans les codes aussi bien css qu'html, je ne me rapelle plus ou les trouver


Haut
  Profil Site Internet 
 
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

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

Bonjour skip,

Derien avec plaisir,merci pour ce compliment.
En effet beaucoup de forums le font et on s'y perd vite dans les codes,mais d'un côté c'est pas plus mal car sous IE cela ne fonctionne pas. ;)

Merci d'avoir pris le soin de lire ce tuto,bon courage Skiptonick !


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  [ 5 messages ] 


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