Remove homepage slideshow links and button

• 

  blushfb · Member · Sep 6, 2014 at 9:03 pm

  • Copy link
  • Add topic to favorites

  I am looking to remove the links and buttons from each of the homepage slideshow images. (Simply use the slideshow only to display photos). Can this be done through the custom CSS option?

  Thanks!

  Michelle

  The blog I need help with is: (visible only to logged in users)

• 

  senff · Staff · Sep 6, 2014 at 9:09 pm

  • Copy link

  Yes, with some additional CSS code you’ll definitely be able to remove those elements from your slideshow.

• 

  blushfb · Member · Sep 6, 2014 at 9:15 pm

  • Copy link

  Is anyone able to help me out with the custom CSS? :)

• 

  senff · Staff · Sep 6, 2014 at 9:24 pm

  • Copy link

  Once you have the Custom Design add-on, you can add this CSS code. Note that this will only apply to the slider on the home page.

  .home #featured-content .flex-control-nav {
      display:none; /* This will remove the links at the bottom left */
  }
  
  .home .featured .hentry {
      display:none;    /* This will remove the link at the bottom right */
  }

• 

  blushfb · Member · Sep 6, 2014 at 9:27 pm

  • Copy link

  Worked great. Thank you. Is there a CSS code I could use to remove the link from the actual images as well? The image slides are still hyperlinked to their respective pages.

• 

  senff · Staff · Sep 6, 2014 at 11:39 pm

  • Copy link

  You can’t remove the link itself, but you can make it look less like a link by making sure that the mouse pointer doesn’t change into a pointy-finger cursor but just stays the same, normal arrow when the user hovers over the slider:

  .home .featured a:hover {
      cursor:default;
  }

  Again, you can’t remove the link itself with CSS so when someone does click on it, it’ll still go somewhere, but you just kind of “hide” the fact that it’s a link.

• 

  blushfb · Member · Sep 7, 2014 at 1:43 am

  • Copy link

  Thank you. I was able to remove the link with the following code:

  .slides {
  pointer-events: none;
  cursor: none;
  }

• 

  senff · Staff · Sep 7, 2014 at 2:13 am

  • Copy link

  That works in most browsers, but keep in mind that it won’t work in IE10 and lower.

• 

  blushfb · Member · Sep 7, 2014 at 10:58 am

  • Copy link

  Okay thank you!