Cliquer sur lien ---> changer fond site

**Tawfik** · 09/03/2015, 00h31

Re : Cliquer sur lien ---> changer fond site

J'ai lu la question mais pas de parametres de couleur dans la template.

**roland_d_alsace** · 09/03/2015, 00h40

Re : Cliquer sur lien ---> changer fond site

Ok Si tu veux garder ton template il faudra donc faire des modifs dans le template comme cela t'a été proposé.
Pour ma par je placerai un paramètre dans le template avec le nom de la feuille de style custom a charger.

**PhilJ** · 09/03/2015, 02h15

Re : Cliquer sur lien ---> changer fond site

Envoyé par Tawfik Voir le message

J'ai lu la question mais pas de parametres de couleur dans la template.

Une autre solution, comme déjà suggéré, est de cibler les pages via CSS. C'est une solution légère, simple à mettre en oeuvre, et n'impliquant absolument aucune modification ou duplication du template.

Vous pouvez facilement en faire l'essai en suivant ces indications :
—

Télécharger et installer 'Unique Pages' (ici : https://code.google.com/p/plg-system...1.zip&can=2&q=).
—
Ce tout petit plugin va injecter automatiquement une ou plusieurs propriétés (= en fait un ou plusieurs noms de classes) qui vont permettre de différencier chaque page, et donc de cibler chacune d'entre elles facilement via CSS.

—

Ouvrir le plugin pour le configurer. Les choix possibles sont les suivants :

Ajouter l'ID du lien de menu.
Comme vous savez sûrement, chaque lien de menu est repérable par un ID / n° unique. C'est la solution la plus « abstraite » dans la mesure où elle est numérique, mais c'est aussi la plus sûre pour cibler une seule page puisque les ID sont uniques.
—
Ajouter l'alias du lien de menu.
C'est aussi une bonne solution, sauf dans le cas où un alias est utilisé plusieurs fois dans des contextes différents, par exemple si on a à la fois menu1/alias1 et menu2/alias1, il y aura un risque de confusion.
—
Ajouter l'alias du lien de menu parent du lien de menu.
Cela peut être très utile dans certains cas. Éventuellement en combinaison avec l'ajout de l'alias du lien de menu — par exemple si toutes les pages pointées par tous les liens de menu ayant le même parent (= niveau1/page1, niveau1/page2, niveau1/page3...) doivent avoir la même couleur de fond. Ou encore pour éliminer le risque de confusion évoqué plus haut.
—
Ajouter le nom du menu auquel appartient le lien de menu.
Une bonne solution quand il y a plusieurs menus et que toutes les pages dépendant d'un même menu doivent avoir des propriétés communes.
—

Exemples :
—
1. On enclenche seulement le type 1 (ID du lien de menu).
  => Pour un lien de menu dont l'ID est 650, le code source devient :
  <body class="classe-du-template 650">
  —
2. On enclenche seulement le type 2 (alias du lien de menu).
  => Pour un lien de menu dont l'alias est page1, le code source devient :
  <body class="classe-du-template page1">
  ——
3. On enclenche seulement le type 3 (alias du lien de menu parent).
  => Pour un lien de menu dont le parent a pour alias niveau1, le code source devient :
  <body class="classe-du-template niveau1">
  —
4. On enclenche seulement le type 4 (nom du menu).
  => Pour un lien de menu appartenant au menu dont le nom est mainmenu, le code source devient :
  <body class="classe-du-template mainmenu">

—
Comme déjà mentionné, les types peuvent être combinés, ce qui peut se révéler bien utile.
Par exemple, pour cibler un lien de menu à la fois par son alias et par l'alias de son parent, on enclenchera les types 2 et 3.
=> Pour un lien de menu dont l'alias est page1 en sous-menu d'un parent dont l'alias est niveau1, le code source sera :
<body class="classe-du-template page1 niveau1">

—
Maintenant, supposons que nous voulions (au hasard) changer la couleur du fond en fonction de la page regardée, et supposons aussi que, pour le template utilisé, la couleur de fond par défaut soit définie par body. Dans ce cas, si nous voulons que la couleur de fond de la page page1 soit beige, il nous suffira d'écrire, dans notre fichier d'override (custom.css) :

body.page1 {

background: beige;

}

Bien entendu, s'il faut procéder autrement, ce ne sera pas plus compliqué, ni plus lourd, par exemple si la zone dont la couleur est à changer pour cette page a pour identifiant main, on écrira :

.page1 #main {

background: beige;

}

Etc.

Cordialement,

PhilJ

**c-line** · 09/03/2015, 08h33

Re : Cliquer sur lien ---> changer fond site

Je pourrais avoir l'URL de ton site ?

**Tawfik** · 09/03/2015, 12h29

Re : Cliquer sur lien ---> changer fond site

Bjr

Mon site en cours de réalisation : www.espaceinfo.tn

J'ai installé le plugin Unique Pages et j'ai choisi de cocher seulement la deuxième option.

Pour le lien 4SI (TIC) d'alias 4-si-tic j'ai ajouté dans le fichier custom.css le code suivant :

Code:

body.4-si-tic {
background: #CCCAAA;
}

Mais le code source suivant est-il correct : <body class="classe-du-template 4-si-tic"> ? Où je dois le mettre ?

**PhilJ** · 09/03/2015, 15h59

Re : Cliquer sur lien ---> changer fond site

Bonjour,

Envoyé par Tawfik Voir le message

J'ai installé le plugin Unique Pages et j'ai choisi de cocher seulement la deuxième option.

Parfait, mais pouvez-vous s'il vous plaît vérifier que le plugin est activé ? Il ne semble pas...

Pour le lien 4SI (TIC) d'alias 4-si-tic j'ai ajouté dans le fichier custom.css le code suivant :

Code:

body.4-si-tic {
background: #CCCAAA;
}

Ça n'ira pas je crois, car la couleur de fond de votre template est déterminée par le container #dd-main, et non pas par body. Donc un code du genre :

.4-si-tic #dd-main {

background: beige; /* Si vous voulez un fond beige pour cette page */

}

devrait convenir (à vérifier, mais pas avant de vous être assuré que le plugin 'Unique Pages' est effectivement activé).

A bientôt.

PhilJ

**Tawfik** · 09/03/2015, 17h26

Re : Cliquer sur lien ---> changer fond site

Le plugin est déjà activé.

Le code suivant est ajouté dans le fichier custom.css :

.4-si-tic #dd-main {background: red; };

Rien de nouveau

y-a-t-il une autre chose à modifier surtout dans le fichier template.css ?

**PhilJ** · 09/03/2015, 17h47

Re : Cliquer sur lien ---> changer fond site

Envoyé par Tawfik Voir le message

Le plugin est déjà activé. [...]

Pouvez-vous s'il vous plaît poster une copie d'écran de la configuration du plugin ? Pour cela, passez d'abord en mode avancé.

y-a-t-il une autre chose à modifier surtout dans le fichier template.css ?

Il vaut mieux ne pas intervenir sur cette feuille de style, ne serait-ce que pour éviter l'écrasement de vos modifications lors d'une mise à jour du template. C'est plutôt à faire dans un fichier de surcharge (à nommer par exemple custom.css).

**Tawfik** · 09/03/2015, 17h53

Re : Cliquer sur lien ---> changer fond site

voici :

**PhilJ** · 09/03/2015, 19h38

Re : Cliquer sur lien ---> changer fond site

Vu. Tout est bien...

Mais ce template n'est vraiment pas coopératif ! On le voit dans le code source (CTRL+U) des pages : la balise <body> ne change pas... alors qu'elle devrait :-\

Il vous reste la ressource d'essayer de définir une classe de page pour chaque lien de menu conduisant à des pages dont vous voulez que le fond soit coloré d'une façon spécifique, ou alors trouver une autre extension.

Pour ajouter une classe de page à un lien de menu : Votre menu > Lien de menu > Paramètres d'affichage de la page > Classe de page. Pour tester cette méthode, ajoutez dans ce champ un nom de classe quelconque, par exemple xxx. Enregistrez, puis rafraîchissez la page en question (touche F5), et regardez le code source (CTRL+U).

Dans ce code, recherchez la balise body : si elle se présente sous la forme <body class="xxx">, nous pourrons employer la méthode, sinon il va falloir en trouver une autre, mais je ne serais alors pas loin de vous suggérer de changer de template, car il s'agirait d'un dysfonctionnement propre au template.

Autre possibilité : tenter d'utiliser une autre extension. Par exemple http://extensions.joomla.org/extensi...round-selector (module) ou http://extensions.joomla.org/extensi...s2switch-basic (plugin)...

Il y aurait bien https://www.nonumber.nl/extensions/a...emplatemanager, mais cette extension est pour J! 3.x seulement (à propos, pourquoi ne pas réaliser votre projet avec cette nouvelle version ?).

Rectification : votre site est bien en version 3 :-)

**c-line** · 09/03/2015, 21h25

Re : Cliquer sur lien ---> changer fond site

Bonsoir,

désolée, j'aurais voulu répondre plus tôt mais journée chargée...

Reprenons.

Les solutions qui t'ont été proposées sont toutes intéressantes. Je trouve juste dommage d'utiliser plugins, modules ou autre pour faire quelque chose que Joomla sait faire nativement.

Voici donc comment procéder :

1 - coller le code suivant dans le fichier principal du template, généralement index.php, entre les balises <head> et </head>... plutôt plus proche du </head> pour des questions de priorité de css

Code:

<?php
$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
?>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo htmlspecialchars($pageclass) ?>.css" type="text/css"/>

Explications : la première partie permet de récupérer la fameuse classe de page, la seconde d'appeler un fichier css précis (j'y reviens plus tard).

Pour info, on accède à ce fichier depuis Extensions > Gestion des templates > Templates > Ton template

2 - créer un fichier css (toujours dans la gestion des fichiers du template dans l'admin)
Par exemple, bleu.css
Dans ce fichier, on crée les classes nécessaires.
Pour ton exemple, il faut cibler en effet l'id #dd-main
Ca donnera par exemple

Code:

#dd-main {background:#CCCAAA}

3 - dans l'onglet affichage de la page du lien d'un menu, on ajoute une classe dans le champ "classe de page"
toujours dans notre exemple : "bleu"

Le résultat dans le code source de cette fameuse page devrait donner :

Code:

<link rel="stylesheet" href="templates/[B]dd_schoolsfun_48[/B]/css/[B]bleu[/B].css" type="text/css"/>

et une magnifique couleur #CCCAAA en fond de page !

Si ça ne marche pas, ne pas hésiter à ajouter !important juste après la couleur dans le css soit :

Code:

#dd-main {background:#CCCAAA !important}

L'avantage de cette solution est qu'on peut vraiment personnaliser plus que le fond de la page.

On peut aussi adapter pour éviter d'avoir à faire une feuille css par page :
1 -à la place de

Code:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo htmlspecialchars($pageclass) ?>.css" type="text/css"/>

on personnalise la balise <body> :

Code:

<body class="<?php echo htmlspecialchars($pageclass) ?>">

2 - dans custom.css on ajoute :

Code:

.bleu #dd-main {background:#CCCAAA}

(avec ou sans le !important selon ...)

3 - même procédure pour le lien de menu

**Tawfik** · 09/03/2015, 22h40

Re : Cliquer sur lien ---> changer fond site

Envoyé par c-line Voir le message

Bonsoir,

désolée, j'aurais voulu répondre plus tôt mais journée chargée...

Reprenons.

Les solutions qui t'ont été proposées sont toutes intéressantes. Je trouve juste dommage d'utiliser plugins, modules ou autre pour faire quelque chose que Joomla sait faire nativement.

Voici donc comment procéder :

1 - coller le code suivant dans le fichier principal du template, généralement index.php, entre les balises <head> et </head>... plutôt plus proche du </head> pour des questions de priorité de css

Code:

<?php
$itemid = JRequest::getVar('Itemid');
$menu = &JSite::getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
$pageclass = $params->get( 'pageclass_sfx' );
?>
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo htmlspecialchars($pageclass) ?>.css" type="text/css"/>

Explications : la première partie permet de récupérer la fameuse classe de page, la seconde d'appeler un fichier css précis (j'y reviens plus tard).

Pour info, on accède à ce fichier depuis Extensions > Gestion des templates > Templates > Ton template

2 - créer un fichier css (toujours dans la gestion des fichiers du template dans l'admin)
Par exemple, bleu.css
Dans ce fichier, on crée les classes nécessaires.
Pour ton exemple, il faut cibler en effet l'id #dd-main
Ca donnera par exemple

Code:

#dd-main {background:#CCCAAA}

3 - dans l'onglet affichage de la page du lien d'un menu, on ajoute une classe dans le champ "classe de page"
toujours dans notre exemple : "bleu"

Le résultat dans le code source de cette fameuse page devrait donner :

Code:

<link rel="stylesheet" href="templates/[B]dd_schoolsfun_48[/B]/css/[B]bleu[/B].css" type="text/css"/>

et une magnifique couleur #CCCAAA en fond de page !

Et enfin c fait ... Cette méthode est fonctionnelle sur mon site

Merci beaucoup à vous tous pour vos efforts et vos aides (y)

**Tawfik** · 11/03/2015, 21h23

Re : Cliquer sur lien ---> changer fond site

Salut;

Comme essai, j'ai changé les fonds des pages 7-base, 8-base et 9-base et j'ai remarqué que l'image se trouvant en arrière plan est enlevée (ce qui est logique).

Pour vérifier le problème, regardez n'importe quelle autre page.

Comment peut-on laisser cette image inchangeable dans toutes les pages.

**c-line** · 11/03/2015, 22h43

Re : Cliquer sur lien ---> changer fond site

Oui.
Essaie de mettre background-color à la place de background

**Tawfik** · 11/03/2015, 23h07

Re : Cliquer sur lien ---> changer fond site

Envoyé par c-line Voir le message

Oui.
Essaie de mettre background-color à la place de background

Cliquer sur lien ---> changer fond site

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association