Module de mises à jour

qu'est-ce que c'est ?

Oui, c'est ce gros bordel au-dessus. En fait je l'ai fait de la même manière que celui qui est à l'accueil.
A la base d'ailleurs, j'aurais dû faire un tuto sur l'autre mais j'ai décidé d'en faire un exprès pour ce tuto, ce tuto qui est très long d'ailleurs, ne m'en voulez pas trop. Mais, ne vous découragez pas en lisant ça, maintenant que j'ai réussi, je vais partager mon savoir avec vous de la manière la plus simple et la plus rapide qui soit ! :)

comment faire ?

Tout d'abord, il nous faut une image de base. Je vous en ai fait une exprès pour le tutoriel, vous vous rendez compte de la chance que vous avez ?! Donc on va travailler sur le deuxième exemple du haut car c'est celui-là que j'ai fait à l'occasion du tutoriel, l'image de base se trouve ici. En premiers lieux nous allons faire du CSS donc je vous invite à ouvrir la feuille de style dans Apparence > Modifier le thème > Ajouter du CSS.

Nous allons créer une class CSS, pour cela, suivez le modèle ci-dessous

Je vous explique. Deja, le nom de votre class se trouvera à la place de nomdevotreclass, vous pourrez le nommer comme vous voudrez, moi je le nommerai majbg lors de ce tutoriel, maj pour Mises à jour et bg pour Background.
Pour background-image, vous insérez l'url de l'image de base donnée plus haut entre les parenthèses.
background-repeat gère la répétition de votre fond, ici elle est désactivé car on a écrit no-repeat, pour l'activer il suffit de remplacer par repeat.
height et width correspondent respectivement à la hauteur et la largeur de votre image, ici elle fait 161 pixels de hauteur et 503 pixels de largeur, à vous de modifier ça selon l'image que vous utilisez.

Voila, nous avons fini de créer la première class qui encadre l'image, maintenant il faut créer celle qui encadrera le cadre avec scrollbar car c'est lui qui contiendra votre texte et les édits de vos MAJ.

Sautez une ligne dans votre feuille de style CSS et écrivez

Comme pour la premiere class, vous remplacerez nomdevotreclass2 par un nom de votre choix différent du précédent.
Pour ce tuto j'utiliserai le nom de scrollbox puisque l'on aura une sorte de boîte avec une scrollbar.
relative derriére position permet de placer votre ensemble correctement par rapport au reste de l'article, c'est à dire que si vous le mettez en haut, il sera en haut et ne passera pas par dessus votre texte en bas, pareillement si vous le mettez en fin d'article.
La valeur qui suit top déterminera la position de votre boîte par rapport au bord supérieur de l'image (A remplacer par bottom si vous souhaitez le faire par rapport au bas) et la valeur qui suit left par rapport au bord de gauche (A remplacer par right si vous souhaitez le faire par rapport au bord de droite). Les valeurs de l'exemple sont approximatives, à vous de jouer en changeant les chiffres pour trouver la bonne combine.

On va s'arrêter là pour le CSS, bien sûr, si certaines valeurs ne conviennent pas, rien ne vous empêchera de les modifier par la suite.

Maintenant, on va faire votre article. En fait, le seul truc que vous devez faire c'est votre cadre avec scrollbar, donc je vous invite à jeter un coup d'oeil au tutoriel à ce sujet. Pour la hauteur vous devrez mettre 132px et pour la largeur 300 car c'est la taille exacte du cadre gris dans lequel seront écrite les nouveautés.

Une fois fait, vous restez sur l'edition du code HTML et vous allez encadrer votre boîte avec scrollbar à l'aide des deux class que l'on a créées au préalable. Pour cela vous rajoutez au tout début de votre code HTML

Donc à la place de majbg (Qui permettra de mettre l'image de base en fond) et scrollbox (Qui encadre votre boîte avec scrollbar) vous metterez les nom de class que vous avez choisit si ce ne sont pas ceux-là.

Et bien évidemment, comme l'on à ouvert deux balises, il faut aussi fermer les deux.
C'est pourquoi vous allez rajouter tout à la fin de votre code HTML

Enregistrez un peu pour voir.. Alors, tout est bon ?
Non ? C'est décalé ? Et bien vous réouvrez votre feuille de style CSS, et vous jouez avec les chiffres afin de trouver l'emplacement idéal.

Si vous avez rencontrez des problèmes lors de ce tutoriel, n'hésitez pas à m'en faire part dans un commentaire, j'y répondrai dès que possible.