How do I target specific gallery types?

brandofamily · July 4, 2014

How do I target specific gallery types? As in I want a div to show only in the smugmug type galleries or the collage landscape galleries, but I do not want to have to add the div to an html box on every gallery.
It was easy in OLD SM, but I cannot get it to work in NEW SM.

basflt · July 5, 2014

with its own ID

yui_3_8_0_1_1404579403764_770 = your viewers choice gallery

brandofamily · July 5, 2014

basflt wrote: »

with its own ID

yui_3_8_0_1_1404579403764_770 = your viewers choice gallery

Thanks but I want to target ALL of the collage landscape galleries at once w/ one bit if code.

Hikin' Mike · July 5, 2014

What specifically are you trying to target?

brandofamily · July 5, 2014

Hikin' Mike wrote: »

What specifically are you trying to target?

I am trying to set up a div for a "to the top" button that I can get to show in all collage landscape galleries w/o having to add it to each individual gallery.
I have an html block set up for the site w/ the div. I have it hidden currently, and wish to have it display in the gallery type of my choosing.

Hikin' Mike · July 5, 2014

I've never tried to add that, but you can try using .sm-tiles-row-organic{} for the Collage Landscape. You may have to add your specific div to it, like .sm-tiles-row-organic .your-class {}.

brandofamily · July 5, 2014

Hikin' Mike wrote: »

I've never tried to add that, but you can try using .sm-tiles-row-organic{} for the Collage Landscape. You may have to add your specific div to it, like .sm-tiles-row-organic .your-class {}.

I tried that...

.sm-gallery-roworganic #topButton {display:block !important;}

But it would not work.

Hikin' Mike · July 5, 2014

brandofamily wrote: »
I tried that...
.sm-gallery-roworganic #topButton {display:block !important;}
But it would not work.

If that is what you typed in, you have a typo.

.sm-gallery-row[COLOR=Red]-[/COLOR]organic #topButton {display:block !important;}

Hikin' Mike · July 5, 2014

Hikin' Mike wrote: »
If that is what you typed in, you have a typo.
.sm-gallery-row[COLOR=Red]-[/COLOR]organic #topButton {display:block !important;}

Did to try this:

.sm-tiles-row-organic #topButton {display:block !important;}

brandofamily · July 5, 2014

Hikin' Mike wrote: »
Did to try this:
.sm-tiles-row-organic #topButton {display:block !important;}

Fixed the error and tried the other code. Neither worked.

Allen · July 5, 2014

basflt wrote: »

with its own ID

yui_3_8_0_1_1404579403764_770 = your viewers choice gallery

Every page has it's own class name in the body classes.

<body id="yui_3_8_0_1_1404596240662_545" style="" class="sm-user-power sm-page sm-page-node
sm-page-node-kdwLC sm-page-gallery sm-page-gallery-album sm-page-hasbackground sm-page-
initialized">

So this is what to use to target a specific page in CSS.
.sm-page-node-kdwLC ...

Allen · July 5, 2014

One of the Smug guys posted in the forum here the class names for each NewSmug gallery style. It was
some time ago and I can't find it now.

denisegoldberg · July 5, 2014

Allen wrote: »

One of the Smug guys posted in the forum here the class names for each NewSmug gallery style. It was
some time ago and I can't find it now.

I think you may be looking for this - http://www.smugocity.com/CSS on The Mechanic's smugocity site. This page links to customizations for each gallery style, and the customizations include the class name.

--- Denise

Allen · July 5, 2014

denisegoldberg wrote: »

I think you may be looking for this - http://www.smugocity.com/CSS on The Mechanic's smugocity site. This page links to customizations for each gallery style, and the customizations include the class name.

--- Denise

Nope, it was posted in a Dgrin forum. But it does look like it has some of them.

Allen · July 5, 2014

Doug these out

.sm-gallery-journal
.sm-gallery-smugmug
.sm-gallery-thumbnail
Collage Landscape
.sm-gallery-roworganic
Collage Portrait
.sm-gallery-columnorganic

brandofamily · July 5, 2014

Allen wrote: »

Doug these out

.sm-gallery-journal
.sm-gallery-smugmug
.sm-gallery-thumbnail
Collage Landscape
.sm-gallery-roworganic
Collage Portrait
.sm-gallery-columnorganic

I've tried those classes. No help.

brandofamily · July 5, 2014

Allen wrote: »

Every page has it's own class name in the body classes.

<body id="yui_3_8_0_1_1404596240662_545" style="" class="sm-user-power sm-page sm-page-node
sm-page-node-kdwLC sm-page-gallery sm-page-gallery-album sm-page-hasbackground sm-page-
initialized">

So this is what to use to target a specific page in CSS.
.sm-page-node-kdwLC ...

So does that code only specify one specific gallery?

Allen · July 5, 2014

brandofamily wrote: »

So does that code only specify one specific gallery?

Every page, folder, gallery has a specific node id. Even system pages. Although /keyword and every /keyword/***** has the same one.
.sm-page-node-*****

brandofamily · July 5, 2014

Allen wrote: »

Every page, folder, gallery has a specific node id. Even system pages. Although /keyword and every /keyword/***** has the same one.
.sm-page-node-*****

How did you find the node? And what gallery one site does that node reference ?

Allen · July 5, 2014

brandofamily wrote: »

How did you find the node? And what gallery one site does that node reference ?

I right click page and pick "inspect element" in Firefox. Then scroll to the top to find the body tag. It's
one of the class names in it. I pasted an example couple posts back.

thenickdude · July 6, 2014

brandofamily wrote: »

.sm-tiles-row-organic #topButton {display:block !important;}

The problem with this CSS is that it applies to an element with the id "topButton" that is contained by an element with the class "sm-tiles-row-organic". But the "sm-tiles-row-organic" class is applied to just the container for the gallery images, not the page itself. Your HTML content block isn't a child of it, so can't be matched by that rule.

I can't see a single gallery-style-specific class on the page that is at a high enough level in the tree that an HTML content block would be contained by it, so it looks to be impossible to match a gallery style generically.

brandofamily · July 6, 2014

thenickdude wrote: »

The problem with this CSS is that it applies to an element with the id "topButton" that is contained by an element with the class "sm-tiles-row-organic". But the "sm-tiles-row-organic" class is applied to just the container for the gallery images, not the page itself. Your HTML content block isn't a child of it, so can't be matched by that rule.

I can't see a single gallery-style-specific class on the page that is at a high enough level in the tree that an HTML content block would be contained by it, so it looks to be impossible to match a gallery style generically.

Thanks for trying guys. Looks like I could use Allen's method to at least keep the code in the main site HTML and not have to add it into each gallery.

Allen · July 6, 2014

brandofamily wrote: »

Thanks for trying guys. Looks like I could use Allen's method to at least keep the code in the main site HTML and not have to add it into each gallery.

I used the specific page target to change my general banner on over a thousand pages (folders,
galleries and pages). Two "entire site" CSS blocks, one for remove and one for add.

I do this because Smug refuses to address the class name flow down.
http://www.dgrin.com/showthread.php?t=239444

A gallery or sub-folder has no idea what it's a child of.
Although they figured out to use "inherit" in security.

brandofamily · July 7, 2014

Allen wrote: »

I used the specific page target to change my general banner on over a thousand pages (folders,
galleries and pages). Two "entire site" CSS blocks, one for remove and one for add.

I do this because Smug refuses to address the class name flow down.
http://www.dgrin.com/showthread.php?t=239444

A gallery or sub-folder has no idea what it's a child of.
Although they figured out to use "inherit" in security.

Thanks but I do not think your method will work either... I added this code to my site html block w/o any luck.

.sm-page-node-WhcCw #topButton {display:block !important;}

for this gallery: http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Wildlife-Photos/Wild-Life/

Allen · July 7, 2014

brandofamily wrote: »
Thanks but I do not think your method will work either... I added this code to my site html block w/o any luck.
.sm-page-node-WhcCw #topButton {display:block !important;}
for this gallery: http://www.brandolinoimaging.com/Image-Galleries/My-Portfolio/Wildlife-Photos/Wild-Life/

.sm-page-node-WhcCw .sm-page-content #topButton {display:block!important;}

brandofamily · July 7, 2014

Allen wrote: »

.sm-page-node-WhcCw .sm-page-content #topButton {display:block!important;}

Did not do it.

Allen · July 7, 2014

brandofamily wrote: »

Did not do it.

Funny, it worked in WebDev here.
What CSS level did you add it?

brandofamily · July 7, 2014

Allen wrote: »

Funny, it worked in WebDev here.
What CSS level did you add it?

Site> Tried in the theme and in site CSS block.

Allen · July 7, 2014

brandofamily wrote: »

Site> Tried in the theme and in site CSS block.

Did you add it AFTER the "show no everywhere" CSS? Latest in CSS takes precedent.
show none everywhere
then
show specific places.

brandofamily · July 7, 2014

Allen wrote: »

Did you add it AFTER the "show no everywhere" CSS? Latest in CSS takes precedent.
show none everywhere
then
show specific places.

Yep. I added the "show" code at the end of the CSS in the html/css box set for the entire site.
exactly where/ how are you adding it in that is making it work?

Allen · July 7, 2014

brandofamily wrote: »

Yep. I added the "show" code at the end of the CSS in the html/css box set for the entire site.
exactly where/ how are you adding it in that is making it work?

I would try the no show and show CSS in "entire site" CSS.

How do I target specific gallery types?

Comments