[Vikas RParticipant]

Dear X Theme support,

I apologize if this has been asked many times before. I did see some threads in which it was discussed but the solution was only for specific pages only and one at a time.

I have certain parent pages with subpages, which in turn branch into additional sub-sub pages if that makes sense. Some of these subpages have literally hundreds of ‘child’ pages. I am aware that you can change the background image of an individual page/post but to change dozens to hundreds of them would take forever. Is there a way to streamline this process so I can have one parent category of pages utilize the same background color/image for all its constituents?

For example, I have a main page called “World of Warcraft Cinematic Quest Guide.”

I. World of Warcraft Cinematic Quest Guide
A. Zone 1
a. Hundreds of pages
B. Zone 2
a. Hundreds of pages
C. Zone 3
a. Hundreds of pages
D. Zone 4
a. Hundreds of pages
E. Zone 5
a. Hundreds of pages
F. Zone 6
a. Hundreds of pages
G. Zone 7
a. Hundreds of pages
H. Zone 8
a. Hundreds of pages

Each Zone is a child page of the parent page (WoW Cinematic Quest Guide). And each Zone (a child page) has over a hundred of ‘grandchildren’ pages each. I would like each Zone (child page) to have its own specific background, which also affects all of its subpages.

Is there a way to do that? Please let me know how as it would help me individualize certain categories of my site.

My website: http://www.gamertribute.com
My Stack: Icon

Thank you.

[RadModerator]

Hi there,

Thanks for writing in. Yes, that’s possible.

Let’s use World of Warcraft Cinematic Quest Guide as reference, it has page ID of 9.

/* Let's hide the default background */
.page-id-9 .backstretch {
display: none;
}

/* Let's add the background to parent page and to its children */
.page-id-9, .parent-pageid-9 {
background: url(http://image/url/here);
background-size: cover;
background-attachment: fixed;
}

All child pages has this parent-pageid-9 with the ID of its parent. You can add that CSS to Admin > Appearance > Customizer > Custom > CSS.

Hope this helps.

[Vikas RParticipant]

I entered the code and used the relevant image url. It did work but when I click on “World of Warcraft Cinematic Quest Guide”‘s parent pages, the background image does show but only momentarily, before being fade-replaced by the default background image I have chosen under Customizer for Icon. Also, when the initial background image used for the CSS code you gave loads, it is not the Fade effect that I want (present in the Customizer settings). It’s an instant or fixed.

I need the background image for the children pages of the parent pages to not change. Also, I still want to be able to change these individual pages’ backgrounds if need be, by overriding the CSS code I enter. I hope that is still a possibility.

Here is an example Child page of World of Warcraft Cinematic Quest Guide (parent page):
http://www.gamertribute.com/world-of-warcraft-cinematic-quest-guide/storm-peaks/
Note how the initial background image (from your CSS code) is instantly replaced by the space nebula (default site-wide settings).

When you click on it, the background image url I want to use shows up but is replaced quickly by the main site default background image (which is space nebula).
http://i2.wp.com/www.gamertribute.com/wp-content/uploads/2016/06/Arthas-Wallpaper.jpg

Now if I go further and click on the Child page of the Child Page (all of this is still under World of Warcraft Cinematic Quest Guide):
http://www.gamertribute.com/world-of-warcraft-cinematic-quest-guide/storm-peaks/overstock/

The background url image I picked for the CSS code doesn’t even appear. It loads with the default space nebula background I have site-wide under the Customizer.

Please help me out with this. I need to keep my space nebula background on the Customizer but I need certain sections of my site to have a different background that won’t be overridden. Lastly, certain individual pages should be able to have their own specific background image which cannot be overriden by either the Customizer settings OR CSS code.

[RadModerator]

Hi there,

I assumed that you didn’t add background image through its page setting or customizer. But you can update it to something like this,

/* Let's hide the default background */
.page-id-9 .backstretch, .parent-pageid-9 .backstretch{
display: none;
}

/* Let's add the background to parent page and to its children */
.page-id-9, .parent-pageid-9 {
background: url(http://image/url/here);
background-size: cover;
background-attachment: fixed;
}

You’re getting the background image from .backstretch which is covering the custom background.

Thanks!

[Vikas RParticipant]

Thanks for the code, it seems to work and the child pages don’t revert back to the default background image.

However, there are a few things that aren’t addressed by this code:

1) The background image is fixed and doesn’t fade in like before. While this is a very minor thing, I would like for it to fade in 750 msec as I have in the Customizer setting.

2) The children pages of the children pages of the parent page are still not being affected. Again, let me link an example page:
http://www.gamertribute.com/world-of-warcraft-cinematic-quest-guide/storm-peaks/overstock/
Note how this tertiary page of World of Warcraft Cinematic Quest Guide (page ID: 9) is not affected.

What I did to fix this was use the same code you gave and used the page ID for “The Storm Peaks”, so it would affect its hundreds of individual pages. While this does work, it would lead me to paste a ton of these codes for each major section. Is there an easier way to implement it so all tertiary pages of Page ID 9 are affected too?

3) Lastly, I was wondering if I would be able to override all background image settings (including CSS code) for specific individual pages using the Page’s setting.

You said: “The CSS assume that you didn’t add background image through its page setting or customize.”

How can I do it so the CSS assumes I did add a page setting and doesn’t mess with that element specifically? I want it to override Customizer settings but NOT the individual page/post settings. It’s a very powerful code you gave me but I’d like to to make exceptions for Posts/Pages that have an individual background setting.

Thanks for all the help so far!

[RadModerator]

Hi there,

1. Fade in is only applicable for image and not the background image. The fade in effect is applied to backstretch element that we hide. Backstretch is an image that is only positioned to act as a background to make the fade in and other effects possible. If you wish to use backstretch due to fade in then you’ll have to edit each page and set its background image through Page Settings section. But you’ll have to do it one by one.

2. It will only work on parent-child pages, not on parent-child_parent-child hierarchy. Hence, you’ll still need to enhance your CSS. Example,

/* Let's hide the default background */
.page-id-9 .backstretch, .parent-pageid-9 .backstretch,
.page-id-201 .backstretch, .parent-pageid-201 .backstretch{
display: none;
}

/* Let's add the background to parent page and to its children */
.page-id-9, .parent-pageid-9,
.page-id-201, .parent-pageid-201 {
background: url(http://image/url/here);
background-size: cover;
background-attachment: fixed;
}

Enhance it until all the level is reached.

3. Yes, the CSS that is provided is overriding that background set through Page Settings. It’s hiding the backstretch element responsible for the background. Though CSS can’t override the data that are saved on Page Settings, data are saved on the database, while CSS is just for styling.

If you wish to override that setting, then what you need is PHP customization. The PHP file responsible for that is \wp-content\themes\x\framework\functions\global\admin\customizer\output.php, for example,

<?php

    $page_bg_images_output = '';
    $page_bg_images        = explode( ',', $x_entry_bg_image_full );
    foreach ( $page_bg_images as $page_bg_image ) {
      $page_bg_images_output .= '"' . $page_bg_image . '", ';
    }
    $page_bg_images_output = trim( $page_bg_images_output, ', ' );

global $post;
    
if( $post->ID == 9 || $post->post_parent == '9' ) {
    $page_bg_images_output = '"http://background/image/here/", "http://background/image/here/"';
}
?>

Hope this helps.

[Vikas RParticipant]

Thanks a lot for the code.

I decided that having the Fade in effect is not a big deal. I don’t have much experience with using Child themes and don’t want to affect the PHP for something this minor. It’s just a precaution. I have successfully implemented the background for the World of Warcraft Cinematic Quest Guide page, 10 of its child pages, and over 900 of its tertiary pages.

For other sections which are smaller, I will just use the individual page settings and do it manually one by one.

Thanks again for all the help and for being patient with me.

Respectfully,
Vik

[RadModerator]

You’re so much welcome!

[Author]

Posts