Folder effect vs Gallery effect

elmanielmani Registered Users Posts: 97 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • elmanielmani Registered Users Posts: 97 Big grins

    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

  • AllenAllen Registered Users Posts: 10,007 Major grins

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • elmanielmani Registered Users Posts: 97 Big grins

    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;
    }

  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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)

  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited December 24, 2018

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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;
    }
    
  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • elmanielmani Registered Users Posts: 97 Big grins

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

  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited December 24, 2018

    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%)
    }
    
  • elmanielmani Registered Users Posts: 97 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

Sign In or Register to comment.