How do I change the body background image on different pages
-
-
- webfoundry
- Newbie
- Posts: 4
- Thanks: 0
-
Hi,
I'm using the Gantry framework for some custom templates and need to change the body background image for the various pages (menu items)
Can anyone tell me how I can do this, without resorting to adding PHP code to the template?
Many thanks for your help,
Phil
-
-
-
- Kat05
- Preeminent Rocketeer
- Posts: 25898
- Thanks: 334
-
hi phil,
you can create several styles, each style can have a different background image.
then use the "per menu item" configuration to use the different styles on different pages of your site:
you can find more info about the per menu item configuration here in the gantry documentation.
also make sure to watch the little video tutorial.
www.gantry-framework.org/documentation/j...u-item-configuration
kat
- Kat05 / QA Lead & Support / Germany
-
-
-
- Minimalist
- Rocketeer
- Posts: 65
- Thanks: 0
-
Hi,
i`ve seen the video right now. Is it possible to add a button to choose the individual background image in the template preferences? Where can i create several styles for the background image? I`ve seen only a color chooser.
Thanks a lot.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
I would use the page suffix feature of gantry when you are working with the basic gantry template.
1. In the template-parameters turn the page-suffix-feature to "on"
2. choose different "page-suffixes" for different menu-items like "bg-page-1", "bg-page-2" etc.
(you find this in the menu-items on the right in "parameters-system"
3. create a folder called "backgrounds" in the images-folder of your template and put your images into it.
4. add this to your css (I would use the style-css-files)
body.bg-page-1 {background: url(../images/backgrounds/img-sky.jpg) no-repeat 50% 0;}
body.bg-page-2 {background: url(../images/backgrounds/img-fire.jpg) no-repeat 50% 0;}
5. clear your cache ...
(you could add an option for that in the template settings,
but its far more complicated then using the page-suffix,
you can find more information about that in the gantry-docs)
-
-
-
- webfoundry
- Newbie
- Posts: 4
- Thanks: 0
- Thanks Henning. That's really helpful. Phil
-
-
-
- Minimalist
- Rocketeer
- Posts: 65
- Thanks: 0
-
Thanks a lot Henning. Where can i find point 2? Is it beside the defaults?
When i like to add the individual class in a page i have to add something like" body.bg-page-1" in the suffix box?
-
-
-
- Minimalist
- Rocketeer
- Posts: 65
- Thanks: 0
-
Great, where can i find
"2. choose different "page-suffixes" for different menu-items like "bg-page-1", "bg-page-2" etc." ?
-
-
-
- Minimalist
- Rocketeer
- Posts: 65
- Thanks: 0
-
Ive tried it, but it`s not working. Can i overwrite embedded css with external styles?
Maybe this is the reason for not working.
-
Time to create page: 0.098 seconds