Un peu de CSS pour améliorer l'esthétique de vos forums ne fait jamais de mal. Celui-ci vous permet d'arrondir les coins de vos forums, il est évidement que les couleurs et pixels sont modifiables à souhaits pour obtenir des résultats personnalisés. Le code ci-dessous est long car certaines lignes ne s'adressent qu'à des navigateurs précis qui ne prennent pas encore en compte ces données (il s'agit du CSS3). Internet Explorer ne prend pas (encore) ce code CSS en compte, les coins apparaitront donc droits sous ce navigateur !

VOIR LA DEMO

.forumline { background-color: #B1C6C7; -moz-border-radius: 0px 0px 14px 14px; -o-border-radius: 0px 0px 14px 14px; -htm-border-radius: 0px 0px 14px 14px; -webkit-border-radius: 0px 0px 14px 14px; border-bottom: 8px #B1C6C7 solid; border-top: 1px #B1C6C7 dotted; border-right: 1px #B1C6C7 solid; border-left: 1px #B1C6C7 dotted; }

A insérer dans : PA -> Apparence -> Couleur -> Feuille CSS

Tout d'abord, de quoi il s'agit? : Cette astuce vous permettra de faire un forum plus ou moins opaque, selon votre goût, et avec les couleurs choisies. Pour cela, l'utilisation du css seul suffit.

Vous allez aller dans : PA > Affichage > Images & Couleurs > Couleurs > Feuille CSS
... et inclure le code suivant :
.forumline {background-color: transparent; background-image: url(adresse de l'image de fond); background-repeat: repeat; }
Remarque : Si vous souhaitez que votre fond se répète seulement sur la largeur, mettez "repeat-x" à la place de "repeat", et si vous voulez qu'il se répète qu'en hauteur mettez "repeat-y".

N'oubliez pas également d'effacer les codes couleurs présents dans votre palette de couleur du forum. Il s'agit ensuite de mettre une image de fond en PNG dans l'emplacement de l'image de fond, que vous aurez préalablement fait sous photoshop. Cette petite image se répètera dans votre forum sous les catégories. Comme je suis gentil, je vous ai fait déjà quelques images ;) Voici donc un pack contenant des images de diverses couleur et de diverses opacités.

Détail :
- le nom des fichiers indique la couleur + opacité (exemple : vert25 = fond vert d'opacité 25%)
- couleurs présentes : blanc, noir, bleu, orange, rouge, vert, violet + transparent
- opacités : 25%, 50%, 75% pour chaque

Télécharger le pack : Cliquez ici !

Dans le même principe, vous pouvez mettre une image de fond de votre choix !

Voir la version du tuto' rédigée par WhiteClover

Pour aujourd'hui je vous propose une astuce qui vous sera certainement utile si vous optez pour un design de type site internet avec une bannière qui s'affiche dès le haut de page de votre forum. Il faut donc supprimer l'espace qui se trouve tout en haut, entre le cadre principal de votre forum et le haut de page :

Voir l'illustration

Pour cela il vous suffit de coller le morceau de code suivant dans votre feuille de style CSS

table.bodylinewidth { position: relative; top: -9px; }

Explication du code :
Ligne 1 : le nom de la classe que l'on va modifier. Elle se trouve dans les templates, elle désigne le cadre principal contenant tout le forum.
Ligne 2 : initialise les modifications apportée à la classe
Ligne 3 : positionnement de la classe, relativement à la position naturelle de celle-ci (un peu pompeux je l'avoue). Si vous remplacez relative par absolute, le positionnement se fera depuis le coin supérieur gauche de votre écran... je vous le déconseille !
Ligne 4 : positionnement depuis le haut de la page. Soit un recule de 9 px ici. On aurait pu écrire aussi bottom: 9px;
Ligne 5 : fin des modifications apportées à la classe.

Vous pouvais régler le nombre de pixels en fonction de vos besoins.

De la même façon, si vous souhaitez enlever l'espace du bas de votre forum :

table.bodylinewidth { position: relative; bottom: -9px; }

Ou bien déplacer le cadre principal du nombre de pixel de votre choix sur la gauche ou la droite :

table.bodylinewidth { position: relative; left ou right: -[le nombre de pixel de votre choix]px; }

Aujourd'hui je vais vous expliquez comment personnaliser vos titres de catégorie/forum ça dépend de comment vous appelez ça xD.

Niveau: FacileAperçu: Ici | Optimisé pour Firefox & ChromeTuto by Sui' & Sparrow

Voir le tuto (vous devez poster à la suite dans le sujet pour voir le contenu du premier message)

Apprenez à mettre de la couleur, des effets et des bordures à vos titres de sous-forum comme ci-dessous :

Voir le tuto

Voici donc un tuto encore attendu^^ pour apprendre ma méthode (qui n'est peut-être pas la meilleure et certainement pas la seule) pour mettre des cadres autour des tables de sous-forums.

Petit exemple sur le screen de de thème pour les cadres : Illustration

Voir le tuto (vous devez poster à la suite dans le sujet pour voir le contenu du premier message)

Voici un tuto' pour supprimer les colonnes des messages et sujets prenant de la place en largeur sur l'accueil pour les remplacer par une simple ligne à l'intérieur même du bloc du sous-forum.

Petit exemple : Illustration

Voir le tuto

Voir la version du tuto' rédigée par Lucky Numb£r

Ce tutoriel vous expliquera comment personnaliser vos forum, oui j'ai bien dit forum ^^ certains les nomment "sous-forum" mais il s'agit en faite de forum qui se situe à l’intérieur d'une catégorie (enfin nous embrouillons pas la dedans hein?)

Petit exemple : Illustration

Voir le tuto

Donnez une mise en forme esthétique aux statistiques présentes dans chaques catégories sur l'accueil de votre forum.

Petit exemple : Illustration

Voir le tuto

Faites une mise en forme des vos catégories par onglets : des onglets seront présents au dessus de vos catégories et les sections apparaitront par survol ou par clic sur les onglets. Est également présent dans le tuto' un astucieux générateur d'onglets entièrement crée par vic_le_faucheur.

Petit exemple (sur un site) : Illustration

Voir le tuto

Ce petit tutoriel vous permettra tout simplement de personnalisé le contenu de votre colonne "Dernier Message", il faudra juste un petit passage dans les templates.

Petit exemple : Illustration

Voir le tuto

Voici un tutoriel qui vous permettra d'embellir vos sous forums souvent fades. Ce code se copie dans le CSS de votre forum et est personnifiable à tout moment.

Voir le tuto

On se demande toujours à quoi elles servent, car avec nos personnalisations ces bordures nous empoisonnent la vie sans rien apporter... Alors certes, on pourrait tout simplement en changer la couleur, mettre des bordures en pointillées... mais pour le coup je vous laisserai faire du zèle tout seul en bidouillant les codes^^

Voici donc dans un premier temps le code complet (me semble-t-il) permettant d'enlever toutes les bordures des barres de titres (qu'elles soient en bas, en haut, ou sur les côtés), y compris dans le portail ou les pages FAQ ou Membres.

.row3Right { border: none !important; } .thHead { border: none !important; } .thCornerL, .thCornerR, .thTop { border: none !important; } .thLeft, .thRight { border-left: none !important; border-right: none !important; } .catLeft, .catRight { border: none! important; } .catHead { border: none !important; } .catBottom { border: none !important; }

Voila un tout petit code afin de vous permettre l'affichage des descriptions des catégories d'une façon originale.

Voir l'aperçu

Voir le tuto

Voici le code à placer dans votre CSS pour appliquer une ombre à tous vos liens., en remplaçant "X" par la valeur souhaitée.

Voir le tuto

Permet d'enlever les bordures du bas des catégories sur la page d'accueil et sur les sujets.

Voir le screen

Voir le tuto