La Feuille de style de nos BLOGS #2
Par FredLynx le mardi 29 mai 2007, 23:59 - Personnalisation de la feuille de Style - Lien permanent
Sans perdre de temps la deuxième partie, nous allons voir les différentes zones principales de la page index et leur Id. Elles sont présentées imbriquées où non comme dans la page html générée pour l'index de votre Blog.
Ci-dessous les principales zones de la page Index, ces zones sont pour la plus part délimitées par des balises <div>..</div> et leur élément ID (identifiant) associé.
C'est l'utilisation de ces ID qui permettra de modifier la position et l'apparence de toutes ces balises par l'intermédiaire des feuilles de style.
<div id="rj">
<div id="page">
<div id="top">
<p id="prelude">
<div id="wrapper">
<div id="main">
<div id="content">
<div id="sidebar">
<div id="blognav">
<div id="blogextra">
<div id="footer">
C'est l'utilisation de ces ID qui permettra de modifier la position et l'apparence de toutes ces balises par l'intermédiaire des feuilles de style.
Pour vous permettre de comprendre un peut mieux je vous laisse jouer...
Cliquez sur les pour visualiser les différentes zones sur cette page.
Cliquez sur les
pour visualiser les différentes zones sur cette page. <div id="rj"> <div id="page"> <div id="top"> <p id="prelude"> <div id="wrapper"> <div id="main"> <div id="content"> <div id="sidebar"> <div id="blognav"> <div id="blogextra"> <div id="footer">
Commentaires
Impressionant,...je suis assez nul en informatique, mais j'essai de faire des petite choses avec l'html...j'ai réussi à mettre du texte en couleur sur mon blog, à inséerer une vidéo dans un billet et j'aimerai bien savoir comment je peux mettre de la couleur dans le fond d'un billet ou un cadre coloré ?
Christian
Ce n'est pas tériblement sorcié quand on connait
En deux mots: Ces manips sont possibles grace à la feuille de style, mais il est aussi possible d'ajouter du style directement dans un billet, pour répondre à vos deux questions:
- Pour les bords de couleurs: border:1px solid #FF0000
- Pour la couleur de fond: background: #00FF00 none
- Pour la couleur du texte: color: #0000FF
Ensuite pour pouvoir insérer ce style il faut utiliser une balise "d'encadrement", la plus courante étant le DIV1px -> Epaisseur du trait en pixel (border-width)
solid -> Style de trait (border-style)
#FF0000 -> Couleur du bord Rouge (border-color)
#00FF00 -> Couleur de fond Verts
none -> Pas d'image de fond
#0000FF -> Couleur du texte Bleu
Exemple d'aplication:
Ce qui donne :
A savoir que pour intégrer un style il faut : style="...." et qu'entre chaque définition il faut séparer par ;
Pour en savoir plus sur: Border - background - color
NOTA: Il faut savoir que dotclear est un Blog "dernière génération", ce qui veut dire que l'exemple que je donne ci dessous sera un petit peut modifié par l'éditeur Xhtml puisqu'il vérrouille sur une version stricte du XHTML... Donc en regardant les trois liens ci dessus vous pourrez comprendre la transformation que fait dotclear. Le résultat généré par dotclear sera:
Merci pour ces éclairages qui ne sont encore que du charabia pour moi...mais je vais faire des essais et promis...je reviens vous poser des questions bêtes...
Merci pour votre savoir
Bien à vous, Christian
J'ai fais un test et ça marche bien...merci encore
où puis-je me procurer une grille des codes couleur et est-il possible de feutrer un peu le cadre ou de l'élargir ou de le rogner etc...
Bien à vous
Christian
Pour les bords tu peux juste les faire plus ou moins gros en jouant sur la taille du bord 1px 2px 3px etc... Tu peux aussi avoir des bords de différentes couleurs et épaisseurs ou pas e bord d'un côte avec épaisseur = 0px mais c'est tout.
Pour les couleurs tapes couleur html sur google et tu auras plein d'info.
Voilà, je suis en train de modifier ma feuille de style grâce à tes explications mais je bloque sur 2 points :
je voudrais enlever du haut la pub pour"créer gratuitement un blog" (pour mettre quelque chose d'un peu plus accrocheur).
2ème pb : le titre de mon premier billet se trouve sur l'image, comment puis-je le décaler ?
Pour ton premier billet il faut jouer sur la marge de la section main de ta feuille de style (voir ci dessous en rouge) change la valeur pour que le titre du premier billet soit assez bas (70px peut être +/-)
#main {
width: 474px;
float: left;
margin: 0px auto 10px auto;
}
Pour cacher le haut section ajoute
#rj {
...
visibility: hidden;
...
}
Pour info et pour tous j'ai préparé ça: Balises_XHTML
Merci pour ces infos et cette disponibilité : des réponses en moins d'1/4 d'heure, c'est vraiment magique !
Qu'est-ce que c'est bien cette "balises XHTML"
Merci...
Christian
Bonjour,
Mon compagnon m'a créé un superbe design pour personnaliser mon blog, mais lorsque nous l'appliquons, toute la colonne de droite disparaît !
On n'arrive pas à résoudre ce problème... Une idée ?
Merci !
Problème résolu ! Merci beaucoup pour les précieux conseils de ton blog !