Folder effect vs Gallery effect

elmani

Hi all. I should probably know the answer to this.. but couldn't figure it out.

Hopefully I can explain this clearly enough. On my website (www.elmani.com). The structure is that I have a bunch of folders (years), within contain a bunch of galleries). I have a CSS code which currently applies an effect to the Folders, the Galleries and the images within the galleries. I want to put a different CSS code on the Galleries, but not the images within, but can't work out how.

As ever, your help would be greatly appreciate
Thanks

Hikin' Mike

Not enough info. What specifically do you want to do?

elmani

Hey Mike. Sorry, struggling to explain this.
Let me try again. I have a piece of CSS code which is currently affecting the images for each of my folders (this is the Browse page on my website). When I then click on one of these folders, within it, there are multiple galleries to select from. (each with a feature image). The same CSS code is affecting these feature images. What I want to do is have a different effect (i.e a different CSS code) apply to these feature images. The question isn't so much about what I want the effect to be, it's more a case of how I apply CSS code to effect these feature images that is different than the code affecting my folders. (Any clearer?!?!). Thanks

Allen

Precede your "Browse" page CSS with this.
.sm-page-node-brCDhf .....
It will limit that CSS to only the Browse page.

Hikin' Mike

Yes, that helps. Allen's suggestion will isolate the Browse page. If you need more specific folder, you'll need to use the folder's node number using one of the web tools. This is an example of what to look for.

elmani

Thanks all. I've tried and tried, but clearly don't have the skills to make it work. I'm not a coder and all my effects have been through pasting together bits of code I've found on this forum. Below is the code, I want to use, but can't figure out to add the node to limit to the page I want. As ever, your help would be greatly appreciated.

As a second request (sorry) - the code currently turns the whole tile black and white - ideally it would only affect the image, but leave the purple bar untouched. Any idea how to achieve this.

Looking forward to any feedback
Adam

/First part of the code will change the size and the colour of the gallery title/
.sm-tile-title {
font-size: 12px !important;
color: white !important;
font-weight: 500 !important;
}
/The second part of the code will change the colour and opacity of the overlay mask/
.sm-user-ui .sm-tile-content>.sm-tile-info {
background-color: rgba(249, 3, 210, 0.6);

}

/* Round thumbnails for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile,
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
border-radius: 8px;
overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

li .sm-tile:hover {
-webkit-filter: saturate(0.1%);
filter: saturate(0.1%);
}
li .sm-tile {
-webkit-filter: saturate(100%);
-webkit-transition: -webkit-filter 0.2s;
filter: saturate(100%);
transition: filter 0.2s;
}

elmani

Suspect everyone is rightly out Xmas shopping or spending time with family and friends, but if anyone does take a break from the eggnog and has a solution, then please do let me know :-) Merry Xmas everyone...

Hikin' Mike

@elmani said:
Thanks all. I've tried and tried, but clearly don't have the skills to make it work. I'm not a coder and all my effects have been through pasting together bits of code I've found on this forum. Below is the code, I want to use, but can't figure out to add the node to limit to the page I want. As ever, your help would be greatly appreciated.

What page(s) do you want it to show? Need a link(s).

@elmani said:
As a second request (sorry) - the code currently turns the whole tile black and white - ideally it would only affect the image, but leave the purple bar untouched. Any idea how to achieve this.

Not seeing any black and white. Need a link to a page(s)

elmani

Hey Mike. I want this to affect each of my gallery selection pages (e.g https://www.elmani.com/Year-2018) - I haven't got the code on their right now as if I amend the code, it affects the whole site (e.g this page https://www.elmani.com/browse ) which I want to remain as is. Does that make sense? (sorry - it's difficult to explain)

Hikin' Mike

@elmani said:
Hey Mike. I want this to affect each of my gallery selection pages (e.g https://www.elmani.com/Year-2018) - I haven't got the code on their right now as if I amend the code, it affects the whole site (e.g this page https://www.elmani.com/browse ) which I want to remain as is. Does that make sense? (sorry - it's difficult to explain)

If you want that code to affect all of the galleries, put that code in a CSS block on the Galleries.

Hikin' Mike

@elmani said:
As a second request (sorry) - the code currently turns the whole tile black and white - ideally it would only affect the image, but leave the purple bar untouched. Any idea how to achieve this.

You just need to add sm-image to the :hover. This is the correct code:

/*First part of the code will change the size and the colour of the gallery title*/
.sm-tile-title {
  font-size: 12px !important;
  color: white !important;
  font-weight: 500 !important;
}

/*The second part of the code will change the colour and opacity of the overlay mask*/
.sm-user-ui .sm-tile-content > .sm-tile-info {
  background-color: rgba(249, 3, 210, 0.6); 
}

/* Round thumbnails for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile,
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
  border-radius: 8px;
  overflow: hidden;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

li .sm-tile:hover .sm-image {
  -webkit-filter: saturate(0.1%);
  filter: saturate(0.1%);
}

li .sm-tile {
  -webkit-filter: saturate(100%);
  -webkit-transition: -webkit-filter 0.2s;
  filter: saturate(100%);
  transition: filter 0.2s;
}

elmani

Thanks Mike. So code does exactly what I want! (thanks!). However, when I change the code it appears to affect this page https://www.elmani.com/browse AND each of my years (e.g https://www.elmani.com/Year-2018). I only want it to affect my years. I want a different (i.e the existing code) for my browse page. Does that make any sense?

Hikin' Mike

I'm not seeing the black and white effect on the galleries.

elmani

Sorry. I reverted the code. It's now live on the site..

Hikin' Mike

Did you put that code on the 'All Gallery' section?

elmani

The code is in the "All Folders" section. I tried it in the "All Galleries section" but then it affects the actual images in the galleries rather than just the pages where you select which gallery you wish to see. ?

Hikin' Mike

If you want the black and white effect, just add this to your 'All Galleries' section:

li .sm-tile:hover .sm-image {
  -webkit-filter: saturate(0.1%);
  filter: saturate(0.1%);
}

Put everything else on the 'All Folder' section.

elmani

Mike. Really appreciate your help, but it's not doing what I need and I think it is because I'm not doing a good job at clearly explaining. So going to try one more time - but may have failed!?!?! I see my website as having 3 layers beyond the homepage:

Layer 1: https://www.elmani.com/browse This is the page where visitors select which year they want to view. This is the only layer which I'm having a problem with as it's now using the same CSS code as layer 2. What I actually want is the code being used for layer 3 (which is working correctly before I made the chagne to layer 2.

Layer 2: As an example - https://www.elmani.com/Year-2018 This folder then contains lots of different galleries for visitors to view. This is now working as I want (thanks to your help)

Later 3: As an example - https://www.elmani.com/Year-2018/Prague-2018/ This is then a gallery. The code affecting this is under All Galleries and I'm happy with it (i.e no changes required)

Thanks (again)

Hikin' Mike

Getting clearer...lol! You'll need to add the stuff specific for the browse page, like Allen mentioned earlier. Add this to your 'All Folders' section. May need to add/remove more if you want more effects.

/**
* For Browse Page Only
***************************************************/
.sm-page-node-brCDhf li .sm-tile:hover .sm-image {
  -webkit-filter:saturate(100%);
          filter:saturate(100%)
}

elmani

Whoop Whoop!. I've (almost) have achieved what I wanted. Thanks Mike.
I've got one bit of CSS code working correctly in the browse page. I've then got the other (black/white) code working on my gallery page - but only on the gallery page I've specified the note for (k7FPPC). So my question is, how do I get this bit of the code working on all my gallery pages, either by somehow adding all of the nodes OR alternatively specifying it should work on all pages except node brCDhf (which is the browse page)????

/*First part of the code will change the size and the colour of the gallery title*/
.sm-tile-title { 
   font-size: 12px !important;
   color: white !important;
   font-weight: 500 !important;
}
/*The second part of the code will change the colour and opacity of the overlay mask*/
.sm-user-ui .sm-tile-content>.sm-tile-info {
    background-color: rgba(249, 3, 210, 0.6);

}

/* Round thumbnails for folders, pages and galleries*/
.sm-page-widget-folders .sm-tile, 
.sm-page-widget-galleries .sm-tile,
.sm-page-widget-nodes .sm-tile,
.sm-page-widget-pages .sm-tile {
    border-radius: 8px;
    overflow: hidden;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.sm-page-node-brCDhf .sm-tile-content:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.20);
}

.sm-page-node-brCDhf .sm-tile-content {
    -webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;
}

.sm-page-node-brCDhf .sm-gallery .sm-tile {
    box-shadow: 3px 3px 6px #171207;
    margin: 3px 9px 0 0;
    }

.sm-page-node-k7FPPC li .sm-tile:hover .sm-image {
  -webkit-filter: saturate(0.1%);
  filter: saturate(0.1%);
}

Hikin' Mike

Since I have no idea what you're trying to do, if you need just the galleries to do something different, you need to add that code in the 'All Gallery' section using a CSS block.