SOLVED showing different background headers
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
I need to show different background headers for different sections on the site that I am developing here:
The clients want to have different backgrounds for their main menu items, like this chapter website shows in this example page: BROKEN LINK REMOVED , which I created using Ximenia. However, the client preffers I use Gantry, but this template does not provide the options for the background colors in the headers. How do I proceed to create a different background header for any other pages?
I already created the large background image for the home page now I need to repeat the process to show a different image on other pages and I imagine I need to create a "backgrounds" folder in the "Gantry" template folder of my website.
The image showing up on the HP is in the "patters" folder of the Gantry theme. I do not know what code to use to call different images for different pages. Using the same code for the template overrides I am assigning to other sections, calls the same image I have on the HP. I need help with this.
I hope I described this problem well enough
Many thanks! - Last Edit: 9 years 4 months ago by Kat05.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. enable "page suffix" in template manager advanced. This adds a class to the body tag of form "menu-alias" where "alias" is the menu item alias (e.g. "home" is "menu-home")
2. Then you can swap out the image used on your different pages by using this CSS (example for "home")
body.menu-home div#rt-showcase .rt-showcase-pattern { background-image: url("yourimageurlgoeshere"); }
This is how to create a custom CSS compatible with Gantry 4...
Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
Thank you for your help.
enabled the Page Sufix and then,
I already had created the gantry-custom.css here:
/templates/gantry/css/gantry-custom.css
On it, I already had this code to call the HP background image:
div#rt-showcase .rt-showcase-pattern {
background: url('/templates/gantry/images/patterns/header_main_img.jpg'); !important;
}
To that same css file, I added your code, which looks like this for my image:
body.module-positions div#rt-showcase .rt-showcase-pattern {
background-image: url('/templates/gantry/images/patterns/header_img_bg_test.jpg");
}
I am not sure I understood correctly, or used the menu item sufix correctly.
I am using "body.module-positions" because that is the sufix of the page where I am testing your instrucctions.
I am obviously missing something as the background image in the header did not changed and is still the same image as in the
HP header.
Many thanks again for your help.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Have a read again of what I gave you. The body class for the "module positions" page would be "menu-module-positions".
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
Hello, is it:
body.menu-home, or, as you write: "menu-module-positions", No period?
I am testing in a new menu item: Typography.
Either way, I have tried both, and I still only get the image assigned to the home page header.
I tried the code on a diferent page, here:
lachapter.sandiego-webmaster.com/index.php/typography
This is what I tried:
body-menu-typography div#rt-showcase .rt-showcase-pattern {
background-image: url('/templates/gantry/images/patterns/header_img_bg_test.jpg");
}
and like this:
body.menu-typography div#rt-showcase .rt-showcase-pattern {
background-image: url('/templates/gantry/images/patterns/header_img_bg_test.jpg");
}
Using the first code example you gave me:
"body.menu-home div#rt-showcase .rt-showcase-pattern {
background-image: url("yourimageurlgoeshere");
}"
Same result. What am I missing??
Thanks. - Last Edit: 11 years 5 days ago by webseo.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
body.menu-typography
The reason it's not working is because you have an invalid comment in your CSS (see screenshot).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- webseo
- Sr. Rocketeer
- Posts: 234
- Thanks: 2
-
I deleted the comment and still no show. I still get the image set for the home page.
I cleared the cash and check that the image loads.
lachapter.sandiego-webmaster.com/templat...ader_img_bg_test.jpg
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
...another mistake in your CSS (see screenshot).
Regards, Mark. -
The following users have thanked you: webseo
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.074 seconds