0
Welcome Guest! Login
0 items Join Now

RokSprocket Grid - Hide Block Animation

Last Post
Search Topic

  • RokSprocket Grid - Hide Block Animation

    Posted 9 years 8 months ago
    • How do you hide the transparent gray overlay on RokSprocket Grid items?

      nook.baschwar.com/

      I just want each grid item to be clickable without the block animation and additional text overlay.
      I've poked around using Firebug for CSS overrides but cannot seem to find the right :hover combination.

      I've identifed classes:
      .sprocket-grids-b-item:hover .sprocket-grids-b-effect {
}

.sprocket-grids-b-item:hover .overlay-mode .sprocket-grids-b-title {
}

.sprocket-grids-b-item:hover .overlay-mode .sprocket-grids-b-text, .sprocket-grids-b-item:hover .overlay-mode .sprocket-grids-b-readon {
}

.sprocket-grids-b-item:hover .sprocket-grids-b-content.overlay-mode {
}

      But when I add display:none the remaining image is no longer clickable.

      Thank you,

      Brad
    #1222152
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: RokSprocket Grid - Hide Block Animation

    Posted 9 years 8 months ago
    • Brad Schwartz wrote:
      I've poked around using Firebug for CSS overrides but cannot seem to find the right :hover combination.

      Normally I just would have given you the correct code:
      .sprocket-grids-b-effect {
    background: transparent !important;
}

      HOWEVER since you've figured out the custom CSS process and you've attempted using an Inspector Tool on your own you've triggered my VERBOSE mode ;)

      This image is hidden for guests.
      Please log in or register to see it.


      My methodology ( Chrome Developer Tools my Tool of choice) is:

      1) find a selector that triggers your issue. In this case I've forced a hover on the selector "sprocket-grids-b-image-container"
      2) with a little clicking on the child elements of the above I end up at the likely code that causes the issue "sprocket-grids-b-effect"
      3) it should be apparent that the CSS background property causes the dark overlay to appear
      4) write the appropriate code to override with the "least side effects"

      So "least side effects" means that using a transparent colour effects the required solution whereas using "display:none" on that element is like dropping an atomic bomb on it. You were so close.

      You see that I used the !important attribute for my code override. So here's a little w3cschools.com - the worlds largest web dvelopment site lesson for you.
      Normally the custom CSS will overwrite the templates or module CSS except in this case where we're using EXACTLY the same class selector then we have to use another method for our CSS to override the module's. Hence the !important attribute.


      To mark this issue as Solved, please change the Topic icon to a Checkmark and add [SOLVED] to the beginning of your Title FIRST post of the Topic


      This image is hidden for guests.
      Please log in or register to see it.

      Thanks.
    #1222163

  • Re: RokSprocket Grid - Hide Block Animation

    Posted 9 years 8 months ago
    • @DanG -- thanks for the insights. I appreciate the guidance.

      So, now that the background effect is gone... I followed your method and was able to isolate and disable the title and readon text -- but not the image isn't clickable and the sprocket is useless.

      How can I make the image clickable without all the fancy stuff that the RokSprocket does?
    #1225583
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: RokSprocket Grid - Hide Block Animation

    Posted 9 years 8 months ago
    • Brad Schwartz wrote:
      So, now that the background effect is gone... I followed your method and was able to isolate and disable the title and readon text -- but not the image isn't clickable and the sprocket is useless.

      Well it maybe "useless" to you but it's a popular layout for RokSprocket. Grids was never designed to have the image clickable but rather the Title, intro text and readon.

      You could CSS those three so the <a> tag covers the entire image.

      Since you have your items in a straight row maybe RokSprocket Strips would be a better option for you.
    #1226263

Time to create page: 0.082 seconds