Forum de support officiel

Forum d'entraide et support officiel des forums Forumprod.com


Heures au format UTC + 1 heure [ Heure d’été ]



Poster un nouveau sujet Ce sujet est verrouillé, vous ne pouvez pas éditer de messages ou poster d’autres réponses.  [ 3 messages ] 
Auteur Message
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 16 Mai 2012, 02:53 

Comment éditer la feuille de style CSS

Déjà , qu'est-ce-que CSS ? Cascading style sheets => http://fr.wikipedia.org/wiki/Feuilles_d ... en_cascade

:arrow: Il faut passer en mode Avancée dans votre panneau d'administration en haut à droite :
Image
Ensuite :
PA => Styles => Editer la feuille de style CSS
Une capture >>> ICI <<<

Chaque partie de votre feuille de style CSS correspond à des " class " et " id " qui eux contiennent des " propriétés " (codes).
Un code avec une classe est représenté de cette manière :
Code:
.class {
.....
...
}

Et avec un id :
Code:
#id {
.....
...
}

En " compressant " un peu on peut aussi très bien obtenir ceci et ça fonctionne :
Code:
#id{.....}

Code:
.class{.....}

Et bien sur en modifiant les " ...." par des propriétés css,que l'on va voir plus bas.
Dans du code HTML on peut repérer ces class et id :
Citation:
id="..."

Citation:
class="..."


Vous devez être attentifs quand vous touchez à vos CSS car une erreur peut-être fatale ou déformer votre forum,il est conseiller de faire des essais avant sur un forum de tests par exemple ou d'enregistrer votre feuille de style complète sur bloc-note sur votre ordinateur histoire de préserver ce document.

Vous pouvez vous aider avec les différents sites d'aide et de références aux CSS :
http://www.w3schools.com (EN) => Ce site permet d'avoir un rendu du code qui vous intéresse.
http://www.siteduzero.com/tutoriel-3-13 ... -css3.html (FR)
http://slaout.linux62.org/html_css/css.html (FR)

Une liste simplifiée de propriétés CSS
La couleur du texte :
Code:
color: ....;

On change les points par soit une couleur représentée par un mot en anglais : red/black/blue ...,
soit par un code couleur : #000000,#555555 etc..
ou encore par avec un code couleur comme ceci : rgb(0, 133, 241), rgb(5, 456, 305) ...

La gras :
Code:
font-weight: ....;


La police d'écriture :
Code:
font-family: ....;


Aligner du texte :
Code:
text-align ....;


La décoration sur du texte :
Code:
text-decoration: ....;


La taille du texte :
Code:
font-size: ....:


La couleur de fond d'un élément :
Code:
background-color: ....;


La répétition d'un background :
Code:
background-repeat: ....;


La longueur d'un élément :
Code:
width: ....;


La largeur d'un élément :
Code:
height: ....;


Haut
  Profil 
 
Membre super
Membre super

Inscription: Jan 2011
Messages: 1141
Points: 1096
Sexe: Masculin
Age: 25
Posté: 16 Mai 2012, 15:24 

Bonjour, pas seulement des class mais aussi des id qui sont reconnaissables par les #.

Les class et id sont visibles dans le code source de vos forum( CTRL + U sous Firefox) avec les formes
Code:
<div id="main">........... 
ou
Code:
<span class="class">......... 


Je ne sais pas si ce tuto montre vraiment comment éditer la feuille CSS car ça implique plus que ça


Haut
  Profil 
 
Chef des aideurs
Chef des aideurs
Avatar de l’utilisateur

Inscription: Déc 2011
Messages: 1061
Points: 1293
Localisation: France
Sexe: Masculin
Posté: 19 Mai 2012, 06:01 

Bonjour , je me permet de reprendre votre phrase qui est celle-ci :
Willy_00a a écrit:
Je ne sais pas si ce tuto montre vraiment comment éditer la feuille CSS car ça implique plus que ça

Bien évidemment que ceci n'explique pas comment éditer la feuille de style au niveau du codage etc..(les CSS c'est tellement vaste qu'il y a une multitude de choses),par contre ceci explique qu'il faut passer en mode avancée pour pouvoir y accéder ainsi que des connaissances en CSS si on veut y toucher.
Je me permet de reprendre ma phrase tirée du sujet d'un membre,d'où la rédaction de ce tuto et je pense que vous allez comprendre un peu mieux ;)( ici )
(Un sujet où visiblement vous aviez participer...)
wadjh a écrit:
Bonjour, c'est fais exprès oui et non car c'est vrai que le support n'a pas vocation à être un forum de codage dans le sens ou on privilégie les tutoriels simples pour ne pas faire trop compliquer..(d'ailleurs pour ça que je poste toujours mes tutos dans Tutoriaux & astuces des membres ^^ )
Par contre un tuto simple c'est à dire dans quel endroit éditer la feuille de style CSS je peux le faire...

Ce tuto était fais pour évoquer la façon d'accéder aux CSS sur son forum avec quelques petits détails mais sans avoir une tonne de choses compliquées.Par ailleurs je ne poste jamais de sujets à vocations d'être difficiles aux membres dans cette section(visiblement c'est le 1er) et pour finir j'ai bien vérifier si il y avais un doublon et vous savez que très bien que non. :wave: :wave: :wave:


Haut
  Profil 
 

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

Modérateur:

Aideurs

Permissions de ce forum:

Vous ne pouvez pas poster de nouveaux sujets
Vous ne pouvez pas répondre aux sujets
Vous ne pouvez pas éditer vos messages
Vous ne pouvez pas supprimer vos messages
Vous ne pouvez pas joindre des fichiers
Poster un nouveau sujet Ce sujet est verrouillé, vous ne pouvez pas éditer de messages ou poster d’autres réponses.  [ 3 messages ] 


cron
Créer un forum | © phpBB | Entraide & support | Forum gratuit