mettre une image de fond

ahdiddum · 27/11/2011 22:10:16

Salut,
Question de débutant.
Mon site a le template Indigo.
J'aimerais bien mettre une image de fond qui ne soit pas forcément la même selon les pages ; j'ai vu que certains y étaient arrivés.
Au pire si ce n'est pas possible avec une image, au moins changer la couleur par défaut.
Il me semble qu'avant il y avait un fichier style.css ou quelque chose comme ça. Je ne le retrouve pas.
Quelqu'un peut m'aider ?
D'avance merci

Dernière modification par ahdiddum (27/11/2011 22:10:35)

snypi · 27/11/2011 22:24:21

si tu est en local en farfouillant un peu tu vas trouver le bon !!
mais comme je ne maitrise pas l'outil skin j'ai peur de te dire une bétise
sinon tu à le fichier standart.css qui devrait etre celui que tu modifie
et pour ta question dans une page tu peut implémenter un fichier css juste pour cette page
donc un fichier css que tu créer en racine du site

un exemple de contenu pour une page:
   <?php $this->content['localcss'] .= "</style><link href='monstyle1.css' rel='stylesheet' type='text/css'/><style>";?>
un exemple de contenu pour une autre page:
   <?php $this->content['localcss'] .= "</style><link href='monstyle2.css' rel='stylesheet' type='text/css'/><style>";?>

ou alors directement du code css, comme par exemple
   <?php $this->content['localcss'] .= "\nbody {background-color:#eee4e2}\n"?>

et si tu ne met rien c'est le fichier standard.css qui fait sont boulot
++

Dernière modification par snypi (27/11/2011 22:26:36)

Super_chemist · 27/11/2011 22:51:24

Une autre méthode, plus simple que de passer par du php, c'est de passer par le fichier user.css. Sachant que chaque page est encadrée par un <div style="_mapage">, c'est facile de gérer différents background selon les pages...

Le user.css a priorité sur les autres fichiers css.

jpg · 27/11/2011 23:58:24

Super_chemist a écrit :

Une autre méthode, plus simple que de passer par du php, c'est de passer par le fichier user.css. Sachant que chaque page est encadrée par un <div style="_mapage">, c'est facile de gérer différents background selon les pages...
Le user.css a priorité sur les autres fichiers css.

C'est définitivement la bonne façon de faire
le fichier user.css est fait pour cela.

@ahdiddum: si le fichier user.css n'existe pas, il faut le créer à la racine du site, après tu peux l'éditer en passant normalement par le menu configuration de ZitePLUS.
A partir de la version 092, ce fichier existe toujours (vide par défaut).

a+
Jean-Paul

snypi · 28/11/2011 00:31:58

perso je vire la création des div automatique car pour le moment elle me dérange la plupart du temps dans mes panneaux latéraux
bon c'est pour le moment (je crois qu'il y a des évolutions de prévue)
et puis je trouve cela compliquer d'avoir à rajouter au fur et à mesure dans mon css le #nomdelapage pour personnaliser mon site
imaginons une structure socio culturel avec 3 thématique
le sport (couleur général bleu)
les activités créatives (couleur général rouge)
les activités corporelle (couleur général violet)
dans ces trois thématique on créer régulièrement des nouvelles sous pages pour présenter détaillé les activités par thèmes

mois je voit la galère à rajouter dans le css le nomdelapage à mon design personnalisé par thématique
alors qu'avec un css fait pour chaque thèmes et appelé à chaque page serait plus simple
en plus avec le champs vide que l'on peut insérer dans la création des pages cela peut être relativement simple à mettre en place pour un futur utilisateur lambda de lui créer un champs personnalisation de la page avec x choix
je pense toujours à celui qui vas récupérer le ziteplus et qui vas devoir le mettre à jours
c'est mon point de vue

jpg · 28/11/2011 00:42:32

Si tu as une couleur par thématique (et donc par ensemble de sous page), alors le plus simple est de créer un panneau PHP par thématique qui contient ton css => il sera automatiquement appelé (et donc ton css) chaque fois qu'une sous-page de cette thématique sera affichée.
Utiliser les champs paramétrable pour cela est bien sur possible ... mais c'est dommage de répéter manuellement à chaque sous page du thème le css alors que l'utilisation judicieuse de panneau peut faire cela automatiquement.
a+
Jean-Paul

snypi · 28/11/2011 00:58:09

oh oui bien joué
c'est encore mieux

ahdiddum · 28/11/2011 23:03:31

jpg a écrit :

@ahdiddum: si le fichier user.css n'existe pas, il faut le créer à la racine du site, après tu peux l'éditer en passant normalement par le menu configuration de ZitePLUS.

Salut et merci pour toutes ces réponses (le forum est très réactif )
J'ai créé un user.css vide (je suis en 0.91) je l'ai mis à la racine...mais quand je me connecte en admin et que je vais dans "configurer", je ne vois pas comment éditer le user.css ?
désolé d'être un peu boulet ...

Super_chemist · 28/11/2011 23:15:47

Il faut l'éditer à la main, en local, et l'uploader via ftp.

Et dans CONFIGURER, vérifie que le nom du fichier user.css est bien renseigné. De mémoire, il me semble que le champ est vide sur un ziteplus 091 de base...

jpg · 29/11/2011 00:06:18

Bonsoir,

En image:

?AKCw7e6Oj9H

a+
Jean-Paul

ahdiddum · 30/11/2011 19:59:47

Salut
Merci beaucoup pour toutes ces réponses ! oserais-je encore abuser de votre patience en vous demandant un exemple de user.css.
Car je ne sais pas quoi mettre dedans, en partant d'une base cela m'aiderait.

Super_chemist · 30/11/2011 20:23:46

Salut

Ben, c'est du css ! Ce post risque d'être un peu petit pour t'en enseigner toutes les bases !

En gros, vu tes messages précédents, tu peux commencer par ça:

#pg_mapage1
{
background-image : url(deco/image.png);
}

#pg_mapage2
{
background-image : url(deco/image2.png);
}

//etc...

Après, on peux faire plein de trucs ! Va voir par exemple sur le site du zéro http://www.siteduzero.com/tutoriel-3-13 … part_13663 si tu veux en apprendre plus.

A+

Dernière modification par Super_chemist (30/11/2011 20:24:09)

snypi · 30/11/2011 22:26:01

salut
si tu ne connais pas firebug : addon pour firefox
regarde cette vidéo à partir des 8 minute
http://www.dailymotion.com/video/xbtimg … fireb_tech

Dernière modification par snypi (30/11/2011 22:26:19)

ahdiddum · 30/11/2011 23:39:19

Merci à tous. Je suis comblé !

ahdiddum · 11/12/2011 19:27:50

Salut.
Firebug est un très bon outil pour les débutants comme moi.
Néanmoins je bloque pour arriver à mettre ma texture de page d'accueil de façon uniforme sur l'ensemble de la page, c'est à dire à gauche et à droite (à droite=menu dans le template indigo). Actuellement la texture est répartie dans un carré central correspondant au background-image de la page d'accueil, mais tous les côtés de la page restent blancs. J'arrive à changer leur couleur mais je n'arrive pas à leur attribuer une texture...
???

snypi · 11/12/2011 22:54:29

salut !
si tu as une url ou l'on peut voir le site cela nous aidera !

ahdiddum · 12/12/2011 15:56:00

Bien sûr !
http://assemblee.maconnais.free.fr/

snypi · 13/12/2011 09:49:26

salut !
je n'ai pas bien compris ton problème et le vois pas sur ton site
à tu vue ce post http://www.zitecms.org/zite/forum/viewtopic.php?id=988
très pratique pour comprendre la structure css de ziteplus

ahdiddum · 13/12/2011 15:48:39

J'ai bien vu ce post, excellent d'ailleurs
http://www.zitecms.org/zite/forum/viewtopic.php?id=988

Mon problème est que je n'arrive à mettre la texture lrock002.jpg que sur la partie centrale (#main) en mettant ceci dans mon user.css :

#pg_accueil
{
background-image: url(deco/lrock002.jpg) ;

Or je voudrais mettre la même texture sur les côtés : #mid, #side, #oppside et #bot et je ne vois pas comment faire.

En bidouillant avec Firebug j'ai découvert que je pouvais colorer les côtés en changeant les valeurs hexadécimales mais je n'ai pas trouvé comment mettre une texture.

Je ne sais pas si je suis plus clair ainsi

Dernière modification par ahdiddum (13/12/2011 15:50:37)

Super_chemist · 13/12/2011 17:04:29

Ben, il te suffit de faire ça

#mid, #side, #oppside, #bot
{
background-image: url(deco/lrock002.jpg) ;

Voire carrément de l'appliquer sur #page:

#page
{
background-image: url(deco/lrock002.jpg) ;
}

#page div //pour que tous les div inclus dans le #page soient transparents
{
background-image :none;
background-color: transparent;
}

C'est quoi le soucis?

ahdiddum · 13/12/2011 20:28:51

Super_chemist a écrit :

C'est quoi le soucis?

Ben, rien, à part que je suis une brèle en php :-p

Bon, merci bien pour ce code, le deuxième

#page
{
background-image: url(deco/lrock002.jpg) ;
}

#page div //pour que tous les div inclus dans le #page soient transparents
{
background-image :none;
background-color: transparent;
}

ne marche pas, du moins cela ne change rien chez moi,

le premier

#mid, #side, #oppside, #bot
{
background-image: url(deco/lrock002.jpg) ;

fonctionne partiellement (cf mon site -> http://assemblee.maconnais.free.fr/)
Je suppose que je dois affiner : pnl3, pnl6 ... ?

Dernière modification par ahdiddum (13/12/2011 20:39:09)

Super_chemist · 13/12/2011 20:59:49

C'est bizarre...
Tu penses bien à vider le cache de ton navigateur à chaque fois que tu modifies un truc dans le css?
Ctrl+F5 pour vider le cache, voire carrément dans les options de ton navigateur pour ben tout purger...

C'est une source d'erreur courante!

ahdiddum · 14/12/2011 15:50:54

oui, je pense bien à vider le cache. D'ailleurs l'aspect est le même depuis mon domicile où j'écris ce message.
Je me demande si le souci ne vient pas du fait que j'utilise le template Indigo qui n'a peut-être pas la même architecture ?

Super_chemist · 14/12/2011 18:04:25

Met un background-repeat : repeat; au #mid.
Et met les p en transparent.

C'est un souci quand on essaye d'adapter un design en ajoutant (écrasant) un design existant : il faut parfois écraser plein de choses qui se trouvent dans les css par défaut !
Pour mon site, j'en ai eu marre, et je suis parti de zéro en recréant un design. Je n'ai donc pas de user.css...

jpg · 14/12/2011 19:37:44

Attention,
la plupart des skin utilisent déjà eux-même la backgound-image.
C'est la cas du skin Indigo ou les balises body, pages et mid ont déjà leur propre background => mettre ton image va casser celui d'indigo (c'est le cas sur ton site actuel) ce qui n'est peut-être pas ce que tu veux
Autant changer la couleur de fond est très simple à faire avec un skin, autant changer la "texture" va surement être beaucoup plus compliqué
a+
Jean-Paul

ps: pourquoi ne pas pas mettre la texture seulement dans le main ? ça a l'air de rendre pas mal (testé avec firebug) et cela met en valeur le contenu de la page
Pour tester: dans le user.ccs

#main{
  background-image: url(deco/lrock002.jpg);
}

Dernière modification par jpg (14/12/2011 19:47:29)

Forum ZitePLUS

#1 27/11/2011 22:10:16

mettre une image de fond

#2 27/11/2011 22:24:21

Re : mettre une image de fond

#3 27/11/2011 22:51:24

Re : mettre une image de fond

#4 27/11/2011 23:58:24

Re : mettre une image de fond

#5 28/11/2011 00:31:58

Re : mettre une image de fond

#6 28/11/2011 00:42:32

Re : mettre une image de fond

#7 28/11/2011 00:58:09

Re : mettre une image de fond

#8 28/11/2011 23:03:31

Re : mettre une image de fond

#9 28/11/2011 23:15:47

Re : mettre une image de fond

#10 29/11/2011 00:06:18

Re : mettre une image de fond

#11 30/11/2011 19:59:47

Re : mettre une image de fond

#12 30/11/2011 20:23:46

Re : mettre une image de fond

#13 30/11/2011 22:26:01

Re : mettre une image de fond

#14 30/11/2011 23:39:19

Re : mettre une image de fond

#15 11/12/2011 19:27:50

Re : mettre une image de fond

#16 11/12/2011 22:54:29

Re : mettre une image de fond

#17 12/12/2011 15:56:00

Re : mettre une image de fond

#18 13/12/2011 09:49:26

Re : mettre une image de fond

#19 13/12/2011 15:48:39

Re : mettre une image de fond

#20 13/12/2011 17:04:29

Re : mettre une image de fond

#21 13/12/2011 20:28:51

Re : mettre une image de fond

#22 13/12/2011 20:59:49

Re : mettre une image de fond

#23 14/12/2011 15:50:54

Re : mettre une image de fond

#24 14/12/2011 18:04:25

Re : mettre une image de fond

#25 14/12/2011 19:37:44

Re : mettre une image de fond

Pied de page des forums