Les forums Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Compteur de visites gratuit
Annonces
CAForum est aussi un forum d'aide pour phpBB. Voici le lien du forum : https://forums.caforum.fr
Vous voulez créer un forum sans publicités tout en étant propriétaire de votre base de données ?
Contactez moi sur le forum !
CAForum infos
Derniers sujets
» » Bouton MP "Répondre" adapté à la version ModernBB
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 13:03 par NIK SIURI

» » Réduire la hauteur des catégories
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 12:59 par NIK SIURI

» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 12:35 par NIK SIURI

» » Afficher les avatars en forme rectangulaire
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 11:47 par NIK SIURI

» » Modifier la partie des stats en début de qeel
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 11:45 par NIK SIURI

» » Mettre une image au qeel
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 11:37 par NIK SIURI

» » Rendre l'image du header cliquable
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 11:34 par NIK SIURI

» » Elargir le cadre de la boite de smileys
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 11:33 par NIK SIURI

» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 10:29 par NIK SIURI

» » Catégories rétractables sur l'index
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Catégories de différentes couleurs
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 10:07 par NIK SIURI

» » Centrer l'avatar, le pseudo & le rang dans les messages
[Tuto] La feuille de style CSS Clock-10Mer 31 Jan 2024 - 10:06 par NIK SIURI

» » Modifier l'icône "On-line"
[Tuto] La feuille de style CSS Clock-10Mar 23 Mai 2023 - 19:15 par Kionk

» » Insérer des boutons "Haut" & "Bas" de forum
[Tuto] La feuille de style CSS Clock-10Mar 23 Mai 2023 - 11:40 par Kionk

Mars 2024
LunMarMerJeuVenSamDim
    123
45678910
11121314151617
18192021222324
25262728293031

Calendrier Calendrier

Le Deal du moment : -20%
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q ...
Voir le deal
749 €

[Tuto] La feuille de style CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash Dim 24 Fév 2019 - 23:34

  • MP
  • Zoom
la feuille de style - CSS



Vous avez un code CSS à appliquer sur votre forum, mais vous ne savez pas comment faire ?


Comment placer un code CSS dans la feuille de style de son Forumactif


En premier lieu, il va falloir ouvrir votre Panneau d’Administration en mode avancé, dans la majeure partie des cas le mode est déjà sélectionné, autrement il va falloir cliquer sur le bouton « Avancé ».

[Tuto] La feuille de style CSS Avance10

Rendez-vous ensuite dans l’onglet affichage.

Le chemin à suivre :

Panneau d'administration / Affichage / Images et Couleurs / Couleurs / Feuille de style CSS


Si vous n’avez jamais utilisé le style CSS pour votre forum ou que vous n’avez pas choisi un thème Hitskin avec une CSS, la feuille de style devrait être vide, ça ne veut pas dire que votre forum n’utilise pas de CSS puisque Forumactif applique une feuille de style à tout ces forums, cette feuille contiendra uniquement votre CSS personnalisé.

Si vous n'avez jamais utilisé de code CSS votre feuille de style ressemble à ceci :

[Tuto] La feuille de style CSS Empty_10



Personnaliser votre forum


Vous voulez personnaliser votre forum en utilisant différents codes CSS, il ve falloir les placer les uns à la suite des autres dans votre feuille de style.
Prenons par exemple un code pour avoir un fond de couleur bleu avec une apparence granuleuse, ce code par exemple :
Code:
/*background du forum*/
body {
  background: #BBD2E1 url("https://i.servimg.com/u/f40/19/99/61/05/noize-11.png");}

Il suffit de copier le code dans votre feuille de style, ainsi :

[Tuto] La feuille de style CSS Code10

En bas de la feuille de style il faudra cliquer sur  Valider 2  pour enregistrer le code et appliquer la modification sur votre forum



Les options CSS


En bas de page vous trouverez l'onglet Options du CSS

[Tuto] La feuille de style CSS Option10

En détails :

1/ Forcer le CSS de base du forum
En forçant le CSS par défaut, toutes les modifications que vous aurez apportés à la feuille de style seront ignorés. Cette option ne supprime pas vos modifications et ne s'affiche que lorsque vous avez appliqué un style personnalisé

2/ Voir le CSS de base de votre forum
En cliquant sur ce lien vous aurez accès à la feuille de style de base de votre forum

3/ Désactiver le CSS de base
Cette option s'adresse aux personnes ne désirant pas que le CSS de base soit chargé avant leur feuille de style personnalisé

Attention : Le fait de ne pas charger le CSS de base ne vous donnera pas accès à la modification simple des couleurs
Si des mises à jour sont effectuées au niveau du CSS, vous ne disposerez pas de ces dernières ce qui peut entrainer des bugs visuels


4/ Optimiser votre CSS
Cette option vous permet d'optimiser votre code CSS. Cela accélère le chargement de vos pages et améliore la navigation des membres sur le forum

Attention : Votre CSS doit être valide pour le bon fonctionnement de cette option

Important
Dans certain cas il est nécessaire de cocher NON à Optimiser votre CSS



Sauvegarder le CSS


En haut de page vous avez la possibilité de faire une sauvegarde de votre feuille de style, pour cela il suffit de cliquer sur le bouton " Sauvegarder le CSS "

[Tuto] La feuille de style CSS Sauveg10

Cela sauvegardera votre CSS, en un fichier.css, dans le répertoire de téléchargement, ou autre, de votre ordinateur

[Tuto] La feuille de style CSS Tealea10



Voilà, la feuille de style CSS n'a plus de secret pour vous





CAForum - Tuto réalisé par Splash

Mise à jour le 28.03.2020 par Splash
LilaCH

Membre
Membre
LilaCH

MessageLilaCH Dim 3 Mar 2019 - 9:15

  • MP
  • Zoom
Merci beaucoup !
chrisnvidia

Membre
Membre
chrisnvidia

Messagechrisnvidia Dim 3 Mar 2019 - 17:20

  • MP
  • Zoom
Merci beaucoup !
David1195

StaffModo
StaffModo
David1195

MessageDavid1195 Lun 4 Mar 2019 - 10:56

  • MP
  • Zoom
Merci beaucoup !
Contenu sponsorisé

MessageContenu sponsorisé

  • MP
  • Zoom

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum