Make all site/home/folder/gallery backgrounds the same again

sense8linked

UPDATE: Because my site is organized into well over 100 galleries, I _could _make these changes by hand, but it would be so much better if there is a way to make the changes all at once, even though many of my galleries have saved as a custom "This page only" for the backgrounds, etc.

I've got all sorts of custom background images selected in various places on my site: sexynaveen.com.
What I would like to do is specify that every page on my entire site uses the same background file.
Then I would like to select a different background for a certain folder and all folders and galleries in that folder.
Please help, thanks!

Hikin' Mike

You would select a default background in the customizer. Then use HTML/CSS to display/hide backgrounds. If you're only doing a different image on one folder and it's dependents, it's easy. If you have 100 different backgrounds it can get "ugly" (hard) to keep up with the code. If you want to display/hide backgrounds in CSS you will need the 'page-node' and 'page-parentnode' using a web tool or post the folder(s) here.

sense8linked

Thanks for that answer!

Keeping track of that much CSS seems even worse than changing all the individually set backgrounds back to inherit from site, which would be a real cleanup. I guess I'll go with tracking down and fixing errant pages in customizer. A cautionary tale.

Allen

I did something like this for my banners. I added a blank html box/widget site wide in my header and then added CSS changing the background image for different folders that flow down to children.
Here is a small portion of the CSS.
Notice "sm-page-node-********" AND ".sm-page-parentnode-*******",
"node" is the top folder and "parentnode" adds flow down from that folder to all children.
Also noticed that all these apply to the one blank widget that's site-wide, .sm-page-widget-12536016.

/* site wide */
.sm-page-parentnode-zsB4B .sm-page-widget-12536016,
.sm-page-node-zsB4B .sm-page-widget-12536016 {
   background: url(/photos/i-snFwjZ3/1/XL/i-snFwjZ3.jpg) no-repeat; 
   height: 154px;  max-width: 1032px;
   position:relative;
   margin: 0 auto !important;
   background-size: contain !important;
}

     /* archery */
.sm-page-parentnode-D2dwD .sm-page-widget-12536016,
.sm-page-node-D2dwD .sm-page-widget-12536016 {
   background: url(/photos/i-2r6NDBZ/1/XL/i-2r6NDBZ.jpg) no-repeat; 
   height: 77px;  max-width: 1024px;
   position:relative;
   margin: 0 auto !important;
   background-size: contain !important;
}

     /* birds */
.sm-page-node-gF9bt .sm-page-widget-12536016, /* videos */
.sm-page-node-6Hc2F .sm-page-widget-12536016, /* Recent Upload */
.sm-page-search     .sm-page-widget-12536016, /* search */
.sm-page-node-6dSMX .sm-page-widget-12536016, /* Public Index */
.sm-page-node-J7sdG .sm-page-widget-12536016, /* keywords */
.sm-page-node-J6gc5 .sm-page-widget-12536016, /* MyKeyword */
.sm-page-parentnode-Qm7v4 .sm-page-widget-12536016, /* birds */
.sm-page-node-Qm7v4 .sm-page-widget-12536016 {
   background: url(/photos/i-TCFHsP7/1/XL/i-TCFHsP7.jpg) no-repeat; 
   height: 130px;  max-width: 1024px;
   position:relative;
   margin: 0 auto !important;
   background-size: contain !important;
}

sense8linked

I have had success with some CSS on SmugMug. How do you enter CSS in the _header _on SmugMug? I have site content in the header, how do you keep them apart? I'm imagining swatting CSS widgets like flies.

Allen

Everything you add to a page is a widget and they all have a unique class name.
Example from my previous post above: .sm-page-widget-12536016

The "header" is only site wide. On every page.
If you use the widget class name in the entire site CSS it is still unique. On what page or where on a page has no relevance.

sense8linked

Okay that's very clear, thanks for that. I'm getting into territory which I can research myself, but if you could tell me how to find out the class name for widgets, that would put me two steps ahead.

Allen

I use Firefox but think Chrome does same thing. Right click on any page element and pick "Inspect Element". A box will pop up and the element html will be highlighted. Look up maybe 5-7 lines for .sm-page-widget-********. That will be the class name of the widget you right-clicked on.

BTW. look in that same popup of html at the very top for the <body class="........."> tag. It will contain all the class names that apply to the page.

sense8linked

Thanks so much. Let's do this. LOL.