[CSS3] Des entêtes de forum comme avec vB3

[Elison]

Des entêtes de forum comme avec vB3
J'imagine que l'arrivée des nouveaux templates vB4 en a dérouté plus d'un, spécialement ceux qui avaient l'habitude d'avoir des entêtes de forum alambiqués.
Qu'en est-il avec vB4 ? Peut-on avoir qu'une seule image de fond dans les entêtes de forum avec ce nouveau système ?

Conception


Auteur du mod / Author Of mod: Elison
Version vBulletin Requise / Version vBulletin Required : vB 4.0.0
Testé / Tested: oui sous 4.0.2
Navigateurs testés et compatible : (dernière version) Firefox 3.6 / Google Chrome 4 / Safari 4 (Windows)
Mise à jour le: 27 février 2010

Installation

12702

Ce div en question comporte la class "forumhead" et la déclaration CSS se trouvent dans le template forumbits.css.

Pour réussir ce tour de force, qui est d'ajouter 3 images dans un seul container div, nous allons faire appel au CSS3 et à la souplesse de vB4.

Il est possible d'avoir deux possibilités de rendu. Soit vous utilisez une image d'arrière plan centrale de 2px de largeur avec une valeur de répétition "repeat-x", vous aurez ainsi un rendu identique sur toute la largeur. Soit vous utilisez une image graphique et là, il vous faudra une image d'arrière plan centrale de 1500px de largeur avec une valeur de répétition "no-repeat".

Pour ne pas craindre les futures mises à jour de version vB4, nous allons utiliser le template "additional.css".

Coller cette déclaration dans le template additional.css :

Avec une image de 1500px :



/* Origine:forumbits.css - + votre commentaire */
.forumhead {
border: 1px solid #bccddc;
background:url({vb:stylevar imgdir_misc}/enteteforum1.gif) bottom left no-repeat,
url({vb:stylevar imgdir_misc}/enteteforum3.gif) bottom right no-repeat,
url({vb:stylevar imgdir_misc}/enteteforum2.gif) bottom center no-repeat;
}Avec une image de 2px :



/* Origine:forumbits.css - + votre commentaire */
.forumhead {
border: 1px solid #bccddc;
background:url({vb:stylevar imgdir_misc}/enteteforum1.gif) bottom left no-repeat,
url({vb:stylevar imgdir_misc}/enteteforum3.gif) bottom right no-repeat,
url({vb:stylevar imgdir_misc}/enteteforum2b.gif) bottom center repeat-x;
}La propriété "background" a 3 valeurs différentes. Ne surtout pas oublier le les séparer par une virgule et non pas par un point virgule. Sauf pour la dernière valeur.

Ensuite, en fonction de l'image de gauche, il vous faudra donner de la marge à votre contenu "nom de forum".

Coller à la suite dans le template additional.css :


/* Marge du nom de forum */
.forumbit_nopost .forumhead h2,
.forumbit_post .forumhead h2 {
margin-left:150px;
}Selon la largeur de votre image de droite, il serait intéressant de réduire la marge du contenu "Dernier message".

Coller à la suite dans le template additional.css :


/* Marge Dernier message */
.forumbit_nopost .forumhead .forumtitle {
min-width: 72%;
}

Optionnel :

Si la hauteur de vos images est plus ou moins supérieure à 25px, il vous faudra paramétrer la hauteur de l'entête.

Coller à la suite dans le template additional.css :


/* Hauteur de l'entête de forum */
.forumbit_nopost .forumhead .forumtitle,
.forumbit_nopost .forumhead span,
.forumbit_nopost .forumhead .collapse,
.forumbit_post .forumhead h2 span {
padding-top: votre valeur (par défaut 4px);
}Afin d'éviter le décalage de "Dernier" et de "message" (voir capture ci-dessous), il est préférable d'ajouter la déclaration CSS suivante:

12745


.body_wrapper {
min-width: 635px;
}Ceci aura pour effet de fixer une largeur minimum du corps du forum.


Il ne vous reste plus qu'à envoyer les 3 images jointes dans votre dossier "image" de votre forum pour avoir un forum relooké.

Pensez toutefois que les images "enteteforum2.gif" (1500px) et enteteforum2b.gif (2px) auront le même résultat à l'affichage. L'image "enteteforum2.gif" est là juste pour vous donner un exemple.

Cette modification est une exclusivité pour VBR a utiliser sans modération !
Les images jointes sont de mon cru, vous pouvez les utiliser comme bon vous semble.

Capture + fichier zip

Contenu du fichier joint (zip) :


enteteforum1.gif (image coté gauche)
enteteforum2.gif (image centrale 1500px)
enteteforum2b.gif (image centrale 2px)
enteteforum3.gif (image coté droit)


Correctif pour VB4.07 et vb4.08

A Remplacer dans le template additional.css



/* Origine:forumbits.css - by Elison */
.forumhead, .threadlisthead {
border: 1px solid #bccddc;
background:url({vb:stylevar imgdir_misc}/enteteforum1.gif) top left no-repeat,
url({vb:stylevar imgdir_misc}/enteteforum3.gif) top right no-repeat,
url({vb:stylevar imgdir_misc}/enteteforum2.gif) top center no-repeat;
}
/* Marge du nom de forum */
.forumbit_nopost .forumhead .forumtitle a {
margin-left: 122px;
}
.threadlisthead span.threadinfo .threadtitle {
margin-left: 122px;
padding-left: 0;
}
.forumbits .forumhead h2 span.forumtitle {
width: 66.3%;
margin-left: 122px;
}
/* Hauteur de l'entête de forum */
.forumbit_nopost .forumhead .forumtitle,
.forumbit_nopost .forumhead span,
.forumbit_nopost .forumhead .collapse,
.forumbit_post .forumhead h2 span {
padding-top: 4px;
}
.body_wrapper {
min-width: 635px;
}
/* Origine:forumbits.css - by Elison */

Merci à Ombre pour son aide;)

[Ombre]

Bonjour, jolie ta modification, merci pour la partage :)

[Spider-Man]

Bonsoir et ,merci pour ce partage ceci est très bien réussi bravo ;)

[Allan]

Bonne personnalisation, merci du partage ;)

[Simon]

Et ce sans la moindre modification de template ! Merci du partage :)

[Elison]

J'avais oublié de donner la déclaration css pour réduire la marge du contenu "Dernier message". À ne pas oublier, sinon ça ne ferait pas joli. (sujet mis à jour)
Cette marge de 72% est déjà présente dans les captures.

[T H X]

félicitation, un très bon exemple des possibilités que donne vB4 :)

par contre, c'est la toute première fois que je vois l'introduction de trois background, dans une seule et même class, c'est "extraordinaire" ça, ça m'ouvre plein d'horizon cette technique :D

un grand merci ^^

[Elison]

félicitation, un très bon exemple des possibilités que donne vB4 :)

par contre, c'est la toute première fois que je vois l'introduction de trois background, dans une seule et même class, c'est "extraordinaire" ça, ça m'ouvre plein d'horizon cette technique :D

un grand merci ^^
J'ai comme l'impression que tu n'as encore rien vu de ce que va donner le CSS3 et le CSS en général sur vB4 :D

[Ombre]

J'étais intrigué sur le fait que tu n'utilise pas de repeat-x pour l'image centra "elison2gif" mais aussi de l'intérêt d'utiliser une si grande image, j'ai donc testé ta class, et effectivement mes doutes se sont révélé correct.

Voici la capture sur de grande résolution:

1271412715

Je te copie le correctif avec aussi une modification qui fera gagner du temps au membres qui voudraient adopté cette méthode:


/* Origine:forumbits.css - + votre commentaire */
.forumhead {
border: 1px solid #bccddc;
background:url({vb:stylevar imgdir_misc}/elison1.gif) bottom left no-repeat,
url({vb:stylevar imgdir_misc}/elison3.gif) bottom right no-repeat,
url({vb:stylevar imgdir_misc}/elison2.gif) bottom center repeat-x;
}Donc j'ai inclus le chemin relatif au dossier misc du style utilisé, ce qui permet d'indiqué ou placé les images, tes images sont en .gif et non en .jpg, j'ai donc corrigé cela.

J'ai aussi mis l'image elison2.gif en repeat-x comme expliquer plus haut, elle mériterais d'avoir une largeur bien plus petite 1px par exemple suffirais.

Un autre soucis visuel est visible sur les petites résolution:

12711

Ce n'est pas des plus important mais car peu de personnes navigue avec d'aussi petite résolution, la solution serait de mettre une largeur minimum à la claa body_wrapper par exemple, le header et footer ne serais pas toucher et le tout resterais sans défaut visuel:


.body_wrapper {
min-width: 635px;
}Bien entendu une valeur à ajusté selon votre forum, voici le rendu :

12712

Je garde le plus important pour la fin, je ne sais pas si ça vient de moi, mais pas possible de voir apparaitre les images aussi bien sous Firefox que sous Internet Explorer (windows)...

Pour ceux qui souhaiterais apprendre un peu plus des avantage du CSS3 le fameux site Alsacréation est une référence en CSS et à rédigé des articles (tutoriels) qui vous éclaira: http://www.alsacreations.com/tuto/liste/2-css.html

Que ce soit sur les effets d'ombrage, d'arrière plan multiple, et autres effet de survole, ou d'infobulle sur les images, vous allez vous régalez ;)

Merci en tout cas Elison encore une fois pour ce magnifique mode :)

[T H X]

bah j'ai déjà pluis ou moins survolé, mais disons qu'il n'est pas "vraiment" encore d'actualité :)

plein de choses ne sont pas implémentées aux navigateurs, c'est d'ailleurs dommage que les éditeurs ne réagissent pas plus vite laissant la possibilité de s'exprimer pleinement (enfin je dirais que les bons élèves sont Firefox et Google chrome à ce niveau)

[Elison]

Merci Ombre pour ton retour !

Effectivement, il va falloir que je fasse une précision de version. Lorsque je parlais d'entêtes alambiqués, je voulais dire "vraiment" alambiqué :D
C'est pour cela que je n'ai même pas pensé à mettre la valeur "repeat-x" sur la seconde image. J'ai surtout pensé en premier lieu aux graphistes passionnés qui voudrait se faire plaisir avec cette seconde image, style version furax, une image que tu ne peux pas répéter justement :) Je n'ai pas pris le temps d'en créer une pour mon exemple, j'en suis désolé. C'est clair que pour l'image que j'ai mis, une valeur de "repeat-x" avec une taille de 1px de largeur suffit !

Je vais de suite préciser ses deux versions possibles dans le sujet. En tout cas, très bonne remarque Ombre. Je vais aussi ajouter les stylevar's pour le path et le format des images.
Autre chose, sur la longueur de cette seconde image. J'imagine que tu as agrandi la page de ton navigateur sur toute la longueur de ton 24 pouces. J'ai pas passé à le faire :D Il faut donc prévoir une seconde image de 1500px et 1200px pour les versions furax :D

Super judicieux d'ajouter la déclaration ! Je l'ajoute au mode.


.body_wrapper {
min-width: 635px;
}Les images n'apparaissent pas tout simplement parce que merdé grave sur le format des images :D

Correction de la version 2

Précision des deux versions possibles (image 2 design ou répétée)

Correction de la déclaration "forumhead" :

- Ajout de 3 stylvar


{vb:stylevar imgdir_misc}- Format des images (JPG en GIF)

Ajout d'une déclaration "body_wrapper" dans le template additional.css


.body_wrapper {
min-width: 635px;
}Remplacement du zip :

- nouveau dossier (image/misc)
- nouvelle image (elison3.gif) et suppression de elison3.jpg

[Ombre]

Le soucis sous IE et Firefox que j'ai ne viens pas du chemin ou de l'extension des images, j'avais remarqué cette erreur de format, mais j'ai pas eu le temps de creusé plus, quoi qu'il en soit, ça ouvre des horizon aux débutant, ils vont pouvoir bénéficié de plus de décoration pour leurs Ex THEAD :D

[Elison]

Je viens de faire de nouveaux essais sous (derniere version) Firfox / Chrome / Safari (windows) sa fonctionne ! Sous IE et Opéra (derniere version) j'ai rien moi aussi, mince ! Pour IE et Opéra je m'étais appuyé sur une source externe. Ça m'apprendra à ne pas vérifier par moi même la prochaine fois. Je corrige le sujet !

[Ombre]

C'est le soucis du CSS3 pas encore assez répandu sur différent navigateur, déjà qu'il y en à qui on du mal avec le CSS2.1 :D

[Elison]

../.. ça ouvre des horizon aux débutant, ils vont pouvoir bénéficié de plus de décoration pour leurs Ex THEAD :D
Exacte, et ils arrêteront peut être de rabâcher qu'avec VB4 on ne peut rien faire de beau :D

[Billyboule]

Ca donne vraiment bien, merci Elison.

[Lo']

Superbe modif Elison, merci pour le partage.

[anoni]

superbe ce que tu as fait byby

[shrek]

ca marche pa sur version 4.0.5

[Ombre]

Bonsoir, je viens de tester et c'est fonctionnel sous vb 4.0.5.