Donc ! Pour mettre des cadres dans le menu, c'est pas très compliqué :
- Ouvrir sa feuille de style CSS.
- Ajoutez le paragraphe si-dessous :
}
.menu-data {
background-color: #code couleur du fond du menu; (ou #transparent si vous ne voulez rien)
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 15px;
text-align: center;
border: 2px solid #code couleur de votre bordure;
}
.menu-data hr {
display: none;
}
Math*
Quand je dis "frame de bas du blog", je parle de ce cadre, tout en bas du blog avec des liens vers les autres pages et plein de petits icônes rectangulaires.
Exemple :
- Ouvrir votre feuille de style CSS
- Chercher le paragraphe commençant par #bottom {
- Remplacer la ligne background: blablabla; par background: url(http://adresse de l'image) no-repeat;
- Enregistrer les modifications
L'affreux Bubus
Exemple :
- Ouvrir votre feuille de style CSS
- Chercher le paragraphe commençant par #bottom {
- Remplacer la ligne background: blablabla; par background: url(http://adresse de l'image) no-repeat;
- Enregistrer les modifications
L'affreux Bubus
Ici Buf qui vous parle, en direct de derrière mon ordi. J'aimerais aujourd'hui vous apprendre comment on met une photo dans le cadre du haut et du bas d'un article.
Exemple :
Exemple :
Pour mettre une image dans le cadre du haut (seulement pour les premiums) :
- Gère ton blog > Habillage de ton blog > Modifier la feuille de style CSS
- Une page apparaît avec un cadre
- Cherchez les mots "article-top".
- Une fois que vous l'avez trouvé, remplacez tout le paragraphe par ceci :
.article-top {
background: url('Tapez votre url ici');
font-family: Georgia,arial,helvetica,sans-serif;
color: #000000;
- Dans les parenthèse, n'oubliez pas de mettre l'adresse url de votre image.
- Si vous le souhaitez, vous pouvez en profiter pour changer la police et la couleur.
- Une fois que c'est fait, n'oubliez pas d'enregistrer ce que vous venez de faire au bas de la page.
Pour mettre une image dans le cadre du bas (seulement pour les premiums) :
- Gère ton blog > Habillage de ton blog > Modifier la feuille de style CSS
- Une page apparaît avec un cadre
- Cherchez les mots "article-bottom".
- Une fois que vous l'avez trouvé, remplacez tout le paragraphe par ceci :
.article-bottom {
background: url('Tapez votre url ici');
color: #000000;
font-family: Georgia,arial,helvetica,sans-serif;
- Dans les parenthèse, n'oubliez pas de mettre l'adresse url de votre image.
- Si vous le souhaitez, vous pouvez en profiter pour changer la police et la couleur.
- Une fois que c'est fait, n'oubliez pas d'enregistrer ce que vous venez de faire au bas de la page.
- Gère ton blog > Habillage de ton blog > Modifier la feuille de style CSS
- Une page apparaît avec un cadre
- Cherchez les mots "article-top".
- Une fois que vous l'avez trouvé, remplacez tout le paragraphe par ceci :
.article-top {
background: url('Tapez votre url ici');
font-family: Georgia,arial,helvetica,sans-serif;
color: #000000;
- Dans les parenthèse, n'oubliez pas de mettre l'adresse url de votre image.
- Si vous le souhaitez, vous pouvez en profiter pour changer la police et la couleur.
- Une fois que c'est fait, n'oubliez pas d'enregistrer ce que vous venez de faire au bas de la page.
Pour mettre une image dans le cadre du bas (seulement pour les premiums) :
- Gère ton blog > Habillage de ton blog > Modifier la feuille de style CSS
- Une page apparaît avec un cadre
- Cherchez les mots "article-bottom".
- Une fois que vous l'avez trouvé, remplacez tout le paragraphe par ceci :
.article-bottom {
background: url('Tapez votre url ici');
color: #000000;
font-family: Georgia,arial,helvetica,sans-serif;
- Dans les parenthèse, n'oubliez pas de mettre l'adresse url de votre image.
- Si vous le souhaitez, vous pouvez en profiter pour changer la police et la couleur.
- Une fois que c'est fait, n'oubliez pas d'enregistrer ce que vous venez de faire au bas de la page.
Ici Defouloir. Pour les doués de l' HTML ( ce qui serait contradictoire car ils ne viendraient pas ici ), vous pouvez toujours modifier le truc en y rajoutant des paramètres...
Il suffit encore une fois de choisir le mode ' afficher la mise en forme réelle de l'article ' et de placer les bandes suivantes :
Pour un text arrivant par la droite :
Pour un text arrivant par la gauche :
Pour un text oscillant de gauche à droite :
Il suffit encore une fois de choisir le mode ' afficher la mise en forme réelle de l'article ' et de placer les bandes suivantes :
Pour un text arrivant par la droite :
<marquee direction="right"> Text </marquee>
Pour un text arrivant par la gauche :
<marquee direction="left"> Text </marquee>
Pour un text oscillant de gauche à droite :
<marquee align="center" direction="left" behavior="alternate" width="85%"> Text </marquee >
Pour toutes ces mises en forme, veuillez sélectionner le mode
' afficher le code source HTML de l'article '
Cadre simple :
Dans la fenêtre code source, copier coller ceci :
<div style="text-align: center; background-color: rgb(3, 2, 0);"> TEXT </div>
En suite, changer la couleur de votre fond en changeant les ' numéros ' du code rgb. N'oubliez pas de mettre à la fin pour arrêter votre cadre.
Aperçu :
APERCU
Article avec photo en fond :
Dans la fenêtre code source, copier coller ceci :
<div style="margin: 10px; padding: 40px; background-image: url( Votre URL ); background-repeat: no-repeat;"> TEXT </div>
N'oubliez pas de mettre
à la fin pour arrêter votre cadre.
Paramêtre ' repeat '
Si vous ne voulez pas que l'image se repete : no-repeat
Si vous voulez que l'image se repete en hauteur : repeat-Y
Si vous voulez que l'image se repete en largeur : repeat-X
Aperçu :
APERCU
Attention ! Votre image doit être une adresse 'internet' c'est à dire commencant par http://.