1 Favori
Sieben le 17 Déc 2021 à 12h55
Une fiche de publicité qui se couple bien avec un forum SF / futuriste.
Elle impose sa largeur, alors il ne devrait pas y avoir trop de soucis d'affichage sur les autres forums.

Je vous sépare CSS et HTML pour qu'il soit plus simple de la personnaliser.

Pour la partie HTML, pensez à retire les "br" du code. J'ai dû les ajouter pour le rendu sur ce site.

# Personnaliser le CSS
Pour modifier le CSS, deux écoles :
- Un éditeur de code (type Visual Studio Code ou Notepad++) pour vous y repérer plus facilement (d'autant que toutes les valeurs modifiables sont commentées pour vous aider à les repérer, cherchez ce qui est écrit entre /* et */).
- Installez le CSS sur votre forum (Panneau d'administration > Affichage > Couleurs > CSS), et postez la fiche HTML normalement dans un message. Ça vous permettra de tester les modifications de couleur/typos en temps réel, et d'en garder une trace sur votre forum :)
(Attention si vous installez le CSS dans votre panneau d'administration, veillez bien à ce que la coche "Optimiser votre CSS" soit sur "Non".)

Une fois que vos modifications sont faites, pour pouvoir utiliser cette fiche sur un autre forum, il va d'abord falloir passer le CSS sur un site qui le compresse (type https://csscompressor.com ).
Pour compresser le code, rien de bien compliqué : collez-le sur le site CSS Compressor, gardez le niveau de compression "Highest" (ça retirera tous les commentaires et espaces inutiles), cliquez sur "Compress" puis vous n'aurez qu'à récupérer le CSS généré pour votre fiche.

Pour utiliser votre code chez les partenaires, le CSS compressé sera à mettre entre balises <style> et </style> au tout début de votre message ! Ça donnera quelque chose comme :
<style>.administration a{color:#03EAEFCC;transition:all .5s ease-in-out;text-decoration:none}.administration a:hover{color:#cd07b3;letter-spacing:.1rem}.administration .credit{text-align:center;font-size:.7em}</style>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet"/>
<div class="administration"><div class="contenu"><img src="https://zupimages.net/up/20/01/ueqy.png" /><div><h1>Titre du Forum</h1><h2>Sous-titre du Forum</h2>
<div>
...
(ne copiez collez pas ce code, c'est juste un exemple)

PSD du filtre utilisé sur l'image' de fond, si ça vous intéresse : https://www.dropbox.com/s/l94xi2pbjlnr9u7/pad_fond.psd?dl=0
(Je suis pas bien doué en photoshop, il faut simplement remplacer l'image déjà en place par celle que vous souhaitez utiliser et voilà~)

Commentaires (2)

Avatar de Lawrage
VIP depuis le 06/03/2020
Lawrage le 17 Déc 2021 à 15h04
Merci pour ce joli code très futuriste !
Avatar de Milou
VIP depuis le 02/01/2023
Milou le 17 Déc 2021 à 23h53
Le fond de la fiche est original ! J'aime bien la simplicité de ton code (je parle du rendu, pas du code en lui-même, je m'y connais pas assez) mélangée avec une partie plus graph. Ca rend super bien !

Poster un commentaire

Vous devez être inscrit et connecté pour poster un commentaire.