Avoir plusieurs background pour differentes pages

alloure59 · March 13, 2014

Bonjour,

J'aimerais avoir plusieurs background dans ma boutique.

Il est facile de changer le background dans le global.css

Mais pour les autres pages comment on fait? (http://www.monsite.com/index.php?id_category=14&controller=category, http://www.monsite.com/index.php?id_category=25&controller=category)

Je suppose qu'il faut modifier le template du thème par défaut

Merci d'avance

YopixelAE · March 13, 2014

Bonjour,

Le global.css est appelé sur toutes les pages.

Et toutes les pages ont un body avec ID.

Ajoutez l'ID + le background dans le global.css

Exemple: body#index{background:monimage;}

body#category{background:monimage;}

Etc.

cyndi · March 17, 2014

Ou alors mettre des conditions dans la balise <Body>. Si ce sont des pages spécifiques.

alloure59 · March 18, 2014

yopixel

J'essaie quelque chose du genre:

body#id_category=4{

background:url('../img/bigstock-Tennis-racquet-shadow-26158541.jpg') no-repeat;

background-repeat:repeat-y

}

ou

body#4{

background:url('../img/bigstock-Tennis-racquet-shadow-26158541.jpg') no-repeat;

background-repeat:repeat-y

}

mais ça ne passe pas.

cyndi

tu dis de mettre des conditions sur la balise <body> as tu un exemple s'il te plait

Merci d'avance

YopixelAE · March 18, 2014

header.tpl

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $page_name =='category'}cat_{$category->id_category}{/if}{if $content_only} content_only{/if}">

global.css

.cat_4 {background:red;}

.cat_2 {background:blue;}

Edited March 19, 2014 by Yopixel (see edit history)

cyndi · March 19, 2014

Comme ceci :

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $page_name == 'index'}<div style="background:#FFFFFF;"></div>{else}<div style="background: #fff url('http://www.lachambrerouge.be/themes/mode/img/fond-lachambrerouge.jpg') center top no-repeat; background-attachment:fixed;"></div>{/if}

alloure59 · March 19, 2014

Malgré la condition proposée, mon background à la page catégorie 4 n'est pas modifié.

Je pense qu'il manque qualque chose

.header.tpl

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}{if $category->id_category == 4}catid4{/if}{if $content_only} content_only{/if} ">

global.css

/* positionnement ****************************************************************************** */
.catid4{
background:url('../img/bigstock-Tennis-racquet-shadow-26158541.jpg') no-repeat;
background-repeat:repeat-y
}

YopixelAE · March 19, 2014

Peut-être que la modification du .tpl n'est pas active (cf.cache), peut-être que la valeur CSS n'a pas la priorité, peut-être que l'image n'existe pas etc. etc.

Sans url difficile de savoir.

alloure59 · March 19, 2014

le cache est actif, l'image est actif. Je t'envoie l'url.

alloure59 · March 19, 2014

Cyndi

avec une page comme celle ci:

http://www.monsite.com/index.php?id_category=25&controller=category

l'index c'est 25 ou id_category=25 par rapport à ton exemple:

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $page_name == 'index'}<div style="background:#FFFFFF;"></div>{else}<div style="background: #fff url('http://www.lachambre...hambrerouge.jpg') center top no-repeat; background-attachment:fixed;"></div>{/if}

YopixelAE · March 19, 2014

(Pas de MP svp).

""le cache est actif""

Justement, il faut le désactiver afin que les modifications sur fichier tpl soient prises en compte !

alloure59 · March 19, 2014

malgré la désactivation du cache j'ai le même problème.

je t'envoie l'url comme il est écrit (Pas de MP svp)

http://www.jecorde.com/index.php?id_category=4&controller=category

je te laisse regarder avec le firebug, il y a deux classes category et catid4 dans le body id=category

YopixelAE · March 19, 2014

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}{if $page_name == 'index'}<div style="background:#FFFFFF;"></div>{else}<div style="background: #fff url('http://www.lachambre...hambrerouge.jpg') center top no-repeat; background-attachment:fixed;"></div>{/if}

C'est le code que vous avez inséré ?

Prenez le mien :

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}  class="{if $page_name =='category'}cat_{$category->id_category}{/if}{if $content_only} content_only{/if}">

Edited March 19, 2014 by Yopixel (see edit history)

alloure59 · March 19, 2014

c'est le votre que j'utilise pour le moment pas celui de cyndi

header tpl

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'}{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}{if $category->id_category == 4}catid4{/if}{if $content_only} content_only{/if} ">

global.css

.catid4 {
background:url('../img/bigstock-Tennis-racquet-shadow-26158541.jpg') no-repeat;
background-repeat:repeat-y
}

url : http://www.jecorde.com/index.php?id_category=4&controller=category

dans le firebug la classe catid4 existe bien mais est associé à une autre class category et un body id = category

YopixelAE · March 19, 2014

J'ai édité mes posts, avec correction, testé à l'instant.

Post #5

Edited March 19, 2014 by Yopixel (see edit history)

loulou66 · March 19, 2014

Coucou

il y a 2 fois CLass= dans ta balise body

il faut rajouter ce qu'a expliquer Yopixel a la balise body

essaye (avec le theme pas defaut)

<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if isset($page_name)}{$page_name|escape:'htmlall':'UTF-8'} {if $page_name =='category'}cat_{$category->id_category}{/if}{/if}{if $hide_left_column} hide-left-column{/if}{if $hide_right_column} hide-right-column{/if}{if $content_only} content_only{/if}">

si tu a un autre theme rajoute " {if $page_name =='category'}cat_{$category->id_category}{/if}" au bon endroit
(il y a un espace avant le 1er accolade)

@++

Loulou66

alloure59 · March 20, 2014

Merci à tous, j'arrive à modifier les images d'arriève plan sur les pages category.

Concernant toujours les background, grâce à un topic dans le forum, j'ai modifié l'image d'arrière plan au niveau du header à l'aide de:

header.tpl

       <div id="customheader" class="nostylesdefined">
		<div id="page" class="container_9 clearfix">

			<!-- Header -->

global.css

#customheader {
background-image: url(../img/fond8.jpg);
background-repeat:repeat-x;
left: 0px;
top: 0px;
width: 100%;
z-index: 10;}

Comment modifier le header background lorsqu'il n'est pas sur la page index ?

Les pages catégories ont des index ce qui a permis de modifier leur background en utilisant

la class catid{index_category} , catid4 ou ....

j'ai essayé un .catid4.customheader mais ça ne passe pas

loulou66 · March 20, 2014

Coucou

avec background-color: #chiffre en Hexa de la couleur => (noir=#000000 blanc =#FFFFFF etc...)

ou un nom predefini

voir http://www.smiliz.fr/couleurs.php

si tu veut que toutres les paged sauf la page index est le même background-color toujours dans le balise <body> du tpl tu peut rajouter

{if ($page_name !==index)}{ monbgcolor}{/if} toujours a l'endroit des class

et dans le css

.monbgcolor{background-color:#000000;} ( ou #000000 est la couleur que tu veut)

si tu veut un background-color différent pour chaque catégories

tu rajoute la déclaration dans chaque .catid du css avec le couleur que tu veut

@++

Loulou66

alloure59 · March 21, 2014

on ne s'est pas du tout compris loulou66

alloure59 · March 21, 2014

j'ai crée un background pour mes header , ce sont des images ( un background pour tous les header)

voir le tpl post 17.

De la même manière qu'il est possible de modifier lebackground des pages categories à partir de leur index

j'aimerais faire pareil pour mes header.

Avoir differents background header en fonction des pages categories.

Ici, le header n'a pas d'index.

comment associer un header à une page category pour modifier son background c'est la question?

loulou66 · March 21, 2014

Coucou

alors toujours avec la même variable $page_name plus bas dans le fichier header.tpl de ton theme tu as cette ligne

comme pour le body tu rajoute {if $page_name =='category'}cat_{$category->id_category}{/if} pour la class soit

<div id="header" class="grid_9 alpha omega {if $page_name =='category'}hcat_{$category->id_category}{/if}">

et tu crée dans global.css

.hcat_1{background-color:#000000;} pour une couleur

ou

.hcat_1 {background-image: url(../img/image.jpg)}; pour une image

et ceci pour toutes les catégories .hcat_1,.hcat_2 etc....

@++

Loulou66

alloure59 · March 21, 2014

Sincèrement merci

loulou66 · March 21, 2014

Coucou

your welcome ;p

@++

Loulou66

Avoir plusieurs background pour differentes pages

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in