Installation d'un fond de page "Image"
ACCUEIL <<< Partie "Page" <<<
En noir sur l'image
Les tableaux du DizPerso, ci-dessous, contiennent tous les attributs utilisés pour créer une page avec un effet de transparence, ce qui permet de voir au maximun l'image de fond de page.
Si toutefois, certains attributs ne sont pas présents dans votre assistant, en dessous de chaque tableau, vous trouverez le CSS correspondant que vous pouvez copier et coller dans la feuille de style en ouvrant le deuxième onglet "Modification directe du CSS".
Vous trouverez un diaporama de quelques photos pour fondn de page. Suivez ce [
lien]
Partie "Page"
Code CSS de cette partie
body
{
background : #FFFFFF;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080616042614.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
}
Le fond de la partie "Cadre" doit être rendu transparent car il recouvre pratiquement totalement la page, pour un autre exemple je mettrai l'image dans le cadre.
Pour mettre le fond transparent, background mettre comme valeur le "#" et pour l'image à la place d'une adresse background-image mettre comme valeur "http://". De cette façon l'attribut reste présent dans l'assistant mais avec une valeur nulle.
Partie "Cadre"
Code CSS de cette partie
#cadre
{
background : #;
background-image : url(http://);
background-repeat:repeat;
background-attachment:fixed;
border : 0px solid #000000;
}
Dans la partie "Contenu", il en est de même, mettre "
# " comme valeur de la couleur de fond et "
http://" pour image de fond. En plus j'indique la solution pour les bordures, si dans l'une des parties vous avez comme ci-dessous les 3 lignes, mettez la taille à "
0px". Si ces attributs sont dans le fichier CSS, sous la forme suivante : "
border: 1px solid #000000" mettez également "
0px".
Dans cette version avec photo, parfois la lisibilité est moins bonne donc déjà dans un premier temps, il faut changer la couleur du texte, j'ai rajouté l'attribut "color". Mais il y a mieux à faire, comme sur cette page un fond transparent au contenu, une astuce arrangera ce petit inconvénient dans de nombreux cas, voir en bas de cet article [
lien]
Partie "Contenu"
Code CSS de cette partie
#contenu
{
background : #;
background-image : http://;
background-repeat:repeat;
background-attachment:fixed;
border-width : 0px;
border-style : solid;
border-color : #009933;
color: #000066;}
Sur cette page la partie "Menu" n'est pas traitée pour la transparence, un autre article suivra à ce sujet.
Astuces...
- 1 - Comment insérer du code CSS dans une page...
Première solution
Chaque balise peut avoir son style, en insérant le CSS de cette façon :
<div style ="background : #; background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080618030622.gif); background-repeat:repeat; padding: 10px 5px 10px 5px; border : 1px solid #000000; color : #000066"> votre texte bla bla bla... </div>
Deuxième solution
Pour toutes les balises DIV du "Contenu" de la page :
Mettre ce code au début de la page, en mode HTML, après le titre ou un paragraphe vide.
<STYLE type=text/css>
<!--
#contenu div
{
background : #;
background-image : url(http://www.blog4ever.com/blogfichiers/205392/boximages/205392080618030622.gif);
background-repeat:repeat;
padding: 10px 5px 10px 5px;
border : 1px solid #000000;
color : #000066;
}
-->
</style>
D'autres possibilités existent selon la version de Blog4ever, elles feront l'objet d'un article complet sur le placement du code CSS dans un site/blog. Les 2 solutions ont le mérite d'être utilisées par tous, par contre rentrer du code à chaque balise ou chaque page devient vite fastidieux.
- 2 - Modifier les couleurs du formulaire des commentaires...
Liste des Astuces
Commentaires
Sylvie site : quoideneufauvillage@blog4ever.com | le 10/07/2008 à 23:59:56
Super votre blog. Je fais des recherches car je souhaiterais utiliser le diz perso de blog4ever mais je ne crois pas être assez efficace pour cela, je n'ai pas de connaissances en programmation, je dois m'entraîner avant de tout endommager !!!..On verra plus tard...C'est quand même sympa ce que vous avez mis en place pour les non initiés... Bonne continuation
PapyClic le 11/07/2008 à 00:31:03
Bonsoir Sylvie
Merci pour ton commentaire sympa... avec le DizPerso tu ne risque pas grand chose, en prenant la précaution de sauvegarder tes modifications du fichier CSS, comme je l'explique... tu peux aussi ouvrir un second blog pour tes essais. Si tu as besoin d'aide va sur le forum de Blog4ever, tu potes ta question dans catégorie "Aide DizPerso"
Dans ton adresse il y a une petite erreur le lien ne fonctionne pas, voilà ton adresse exacte:
h
ttp://quoideneufauvillage.blog4ever.com
Bonne continuation
Yzéra site : http://artpassion.blog4ever.com/blog/index-141012.html | le 19/09/2008 à 19:08:19
Merci pour ton aide j'ai bien lu les explications et je vais essayer .... j'espère que ca va fonctionner mais j'ai l'impression qu'il y a un problème sur mon DIz !! "j'va voir" merci beaucoup
yzéra site : http://artpassion.blog4ever.com/blog/index-141012.html | le 19/09/2008 à 19:19:27
J'abandonne, je ne comprends rien au code CSS, je n'arrive pas à savoir ou il faut le placer car ce que je vois dans ma page Css ne correspond pas à ce que je vois dans vos explications.Lorsque je mets l'adresse url dans le Diz et que je valide il ne la garde pas il garde seulement "http" et efface le reste . C'est terrible d'être aussi nulle !!! Merci tout de même.
PapyClic le 21/09/2008 à 11:34:37
Bonjour Yzéra
Donc tu n'as pas abandonné... et tu as réussi... bravo!!!
As-tu essayé de mettre la partie cadre en transparence comme je l'explique dans cet article?
Le fond de page serait plus visible, mais peut-être préfères-tu le fond noir.
Félicitations pour ton blog, pour la diversité, la quantité et surtout la qualité des photos.
Bonne continuation
Simba le 18/01/2009 à 08:52:17
Bonjour Papy Clic,
Je ne vais pas te dire le nombre de fois que j'ai consulté tes différentes rubriques ni que CSS & autre n'ont plus de secrets pour moi mais sincèrement merci et bravo !
Cependant, j'ai malgré tout un soucis et malgré les différentes recherches sur les différents forum d'aide, je n'ai pas trouvé de réponse.
J'ai une configuration similaire à celle présentée ici, mais je ne trouve pas la possibilité de changer le fonds pour les commentaires des visiteurs. L'article ok, le formulaire poster un commentaire ok, mais est-il possible de mettre un fonds uni ou tramé pour lesdits commentaires en gardant l'image en "toile" de fonds ?
Merci infiniment pour ta réponse et soit tranquille, ton lien ne disparaîtra pas de mes favoris ... trop indispensable !
PapyClic le 18/01/2009 à 10:06:44
Bonjour Simba
Tout d'abord, merci pour ton commentaire et tes appréciations sur DizTest.
Par contre, actuellement, l'espace des commentaires n'est pas gérable indépendamment de la partie "Contenu" du Diz Perso et comme il n'est pas délimité dans cette partie, impossible de faire une présentation différente, seul le formulaire est gérable.
Soit comme tous les formulaires avec une règle générale, soit dans un article en ajoutant au début d'un article, le code suivant :
<p> </p>
<style type="text/css">
#commentaire
{
bacground:#000;
color:#FFF;
}
</style>
C'est un exemple, mais d'autres attributs peuvent être rajoutés.
J'ai fait des suggestions à KL pour pouvoir gérer indépendamment en CSS, certains modules ou sections d'une page, l'espace pour les commentaires en fait partie.
Désolé de répondre négativement et n'ayant pas l'adressse de ton blog, je ne peux pas te rendre ta visite, ni te tenir au courant de la suite à mes suggestions.
Bonne continuation
Simba le 18/01/2009 à 11:05:59
Merci de la prompte réponse et désolé de ne pas l'avoir posté dans le forum d'aide "officiel" mais j'ai pensé que le libellé de question serait plus compréhensible dans l'exemple en ligne.
Ta réponse me suffit amplement et je t'en remercie, je suivrai les nouveautés sur 4ever et surtout, grâce à toute l'équipe j'ai de quoi faire !
Bonne continuation à toi aussi !
NH site : atelier-peintures.blog4ever.com | le 05/07/2009 à 08:15:54
Bonjour,hier j'ai voulu installer un fond d'image,j'ai reussi puis j'ai voulu changer la photo et tout est parti.Maintenant je n'est plus: image de fond dans page,cadre et haut.Pourquoi?
PapyClic le 05/07/2009 à 09:03:50
Bonjour NH
Tu as supprimé l'attribut pour l'image de fond dans les trois parties, il faut le remettre dans "Modification directe du CSS", le deuxième onglet du Diz Perso.
Mettre :
background-image : url(h ttp://);
Dans :
--> body
--> #haut
--> #cadre
Puis tu valides et ouvres le premier l'onglet, "Configuration assistée", tu retrouveras dans les tableaux, les attributs image de fonds, où tu pourras remettre les adresses des images.
Ce problème est dû que l'assistant supprime les attributs non renseignés, il faut toujours laisser une valeur même nulle aux attributs pour garder dans les tableaux.
Bonne continuation
cherrymaggy le 20/10/2009 à 15:08:38
bonjour! j'aurai aimer pouvoir faire comme ici un fond de contenu blanc transparent, mais je ne trouve pas sur ton blog comme il faut faire? pourrais tu m'aider?
merci
PapyClic le 20/10/2009 à 16:50:19
Bonjour
Comme je n'ai pas de lien pour voir ton blog, je ne sais pas quelle version tu as choisi mais en toutes versions, on peux mettre ce code dans DizPerso, la partie "Contenu" mettre :
- le fond en transparence avec comme valeur #
- l'adresse du fond image
- l'image en répétée
Voir dans astuces ci-dessus la deuxième solution, les lignes des attributs :
background
background-image
background-repeat
Soit tu mets les valeurs dans le tableau de l'assistant, soit tu copies les 3 lignes et tu les colles en "Modification directe du CSS" dans la règle #contenu
Voilà j'espère que tu réussiras ou tu ouvres un sujet sur le forum de Blog4ever.
Bonne continuation
Commentaires
Sylvie site : quoideneufauvillage@blog4ever.com | le 10/07/2008 à 23:59:56Super votre blog. Je fais des recherches car je souhaiterais utiliser le diz perso de blog4ever mais je ne crois pas être assez efficace pour cela, je n'ai pas de connaissances en programmation, je dois m'entraîner avant de tout endommager !!!..On verra plus tard...C'est quand même sympa ce que vous avez mis en place pour les non initiés... Bonne continuation
PapyClic le 11/07/2008 à 00:31:03
Bonsoir Sylvie
Merci pour ton commentaire sympa... avec le DizPerso tu ne risque pas grand chose, en prenant la précaution de sauvegarder tes modifications du fichier CSS, comme je l'explique... tu peux aussi ouvrir un second blog pour tes essais. Si tu as besoin d'aide va sur le forum de Blog4ever, tu potes ta question dans catégorie "Aide DizPerso"
Dans ton adresse il y a une petite erreur le lien ne fonctionne pas, voilà ton adresse exacte:
h ttp://quoideneufauvillage.blog4ever.com
Bonne continuation
Yzéra site : http://artpassion.blog4ever.com/blog/index-141012.html | le 19/09/2008 à 19:08:19
Merci pour ton aide j'ai bien lu les explications et je vais essayer .... j'espère que ca va fonctionner mais j'ai l'impression qu'il y a un problème sur mon DIz !! "j'va voir" merci beaucoup
yzéra site : http://artpassion.blog4ever.com/blog/index-141012.html | le 19/09/2008 à 19:19:27
J'abandonne, je ne comprends rien au code CSS, je n'arrive pas à savoir ou il faut le placer car ce que je vois dans ma page Css ne correspond pas à ce que je vois dans vos explications.Lorsque je mets l'adresse url dans le Diz et que je valide il ne la garde pas il garde seulement "http" et efface le reste . C'est terrible d'être aussi nulle !!! Merci tout de même.
PapyClic le 21/09/2008 à 11:34:37
Bonjour Yzéra
Donc tu n'as pas abandonné... et tu as réussi... bravo!!!
As-tu essayé de mettre la partie cadre en transparence comme je l'explique dans cet article?
Le fond de page serait plus visible, mais peut-être préfères-tu le fond noir.
Félicitations pour ton blog, pour la diversité, la quantité et surtout la qualité des photos.
Bonne continuation
Simba le 18/01/2009 à 08:52:17
Bonjour Papy Clic,
Je ne vais pas te dire le nombre de fois que j'ai consulté tes différentes rubriques ni que CSS & autre n'ont plus de secrets pour moi mais sincèrement merci et bravo !
Cependant, j'ai malgré tout un soucis et malgré les différentes recherches sur les différents forum d'aide, je n'ai pas trouvé de réponse.
J'ai une configuration similaire à celle présentée ici, mais je ne trouve pas la possibilité de changer le fonds pour les commentaires des visiteurs. L'article ok, le formulaire poster un commentaire ok, mais est-il possible de mettre un fonds uni ou tramé pour lesdits commentaires en gardant l'image en "toile" de fonds ?
Merci infiniment pour ta réponse et soit tranquille, ton lien ne disparaîtra pas de mes favoris ... trop indispensable !
PapyClic le 18/01/2009 à 10:06:44
Bonjour Simba
Tout d'abord, merci pour ton commentaire et tes appréciations sur DizTest.
Par contre, actuellement, l'espace des commentaires n'est pas gérable indépendamment de la partie "Contenu" du Diz Perso et comme il n'est pas délimité dans cette partie, impossible de faire une présentation différente, seul le formulaire est gérable.
Soit comme tous les formulaires avec une règle générale, soit dans un article en ajoutant au début d'un article, le code suivant :
<p> </p>
<style type="text/css">
#commentaire
{
bacground:#000;
color:#FFF;
}
</style>
C'est un exemple, mais d'autres attributs peuvent être rajoutés.
J'ai fait des suggestions à KL pour pouvoir gérer indépendamment en CSS, certains modules ou sections d'une page, l'espace pour les commentaires en fait partie.
Désolé de répondre négativement et n'ayant pas l'adressse de ton blog, je ne peux pas te rendre ta visite, ni te tenir au courant de la suite à mes suggestions.
Bonne continuation
Simba le 18/01/2009 à 11:05:59
Merci de la prompte réponse et désolé de ne pas l'avoir posté dans le forum d'aide "officiel" mais j'ai pensé que le libellé de question serait plus compréhensible dans l'exemple en ligne.
Ta réponse me suffit amplement et je t'en remercie, je suivrai les nouveautés sur 4ever et surtout, grâce à toute l'équipe j'ai de quoi faire !
Bonne continuation à toi aussi !
NH site : atelier-peintures.blog4ever.com | le 05/07/2009 à 08:15:54
Bonjour,hier j'ai voulu installer un fond d'image,j'ai reussi puis j'ai voulu changer la photo et tout est parti.Maintenant je n'est plus: image de fond dans page,cadre et haut.Pourquoi?
PapyClic le 05/07/2009 à 09:03:50
Bonjour NH
Tu as supprimé l'attribut pour l'image de fond dans les trois parties, il faut le remettre dans "Modification directe du CSS", le deuxième onglet du Diz Perso.
Mettre :
background-image : url(h ttp://);
Dans :
--> body
--> #haut
--> #cadre
Puis tu valides et ouvres le premier l'onglet, "Configuration assistée", tu retrouveras dans les tableaux, les attributs image de fonds, où tu pourras remettre les adresses des images.
Ce problème est dû que l'assistant supprime les attributs non renseignés, il faut toujours laisser une valeur même nulle aux attributs pour garder dans les tableaux.
Bonne continuation
cherrymaggy le 20/10/2009 à 15:08:38
bonjour! j'aurai aimer pouvoir faire comme ici un fond de contenu blanc transparent, mais je ne trouve pas sur ton blog comme il faut faire? pourrais tu m'aider?
merci
PapyClic le 20/10/2009 à 16:50:19
Bonjour
Comme je n'ai pas de lien pour voir ton blog, je ne sais pas quelle version tu as choisi mais en toutes versions, on peux mettre ce code dans DizPerso, la partie "Contenu" mettre :
- le fond en transparence avec comme valeur #
- l'adresse du fond image
- l'image en répétée
Voir dans astuces ci-dessus la deuxième solution, les lignes des attributs :
background
background-image
background-repeat
Soit tu mets les valeurs dans le tableau de l'assistant, soit tu copies les 3 lignes et tu les colles en "Modification directe du CSS" dans la règle #contenu
Voilà j'espère que tu réussiras ou tu ouvres un sujet sur le forum de Blog4ever.
Bonne continuation