link for slider without text and button

Try adding this to your Custom CSS field:

.home #customizr-slider .carousel-caption {
  width: 100%;
  line-height: inherit;
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}
.home #customizr-slider .btn {
  width: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
}

Create a button like you normally would for your slide, i.e., add the button text (it doesn’t matter what you put there, but you do need some text in order for the button to be created) and select the page that you want the slide to go to. What this CSS does is to expand the width of both the caption and the button to cover the entire slide, but sets the colors to transparent. Essentially, the button is there, but is invisible, and covers the whole slide, so your users won’t know that they are clicking a button and not the image. The next and previous navigation arrows will still work. And it affects only the slider on the home page, not any other sliders that you might have.

@crouchingbruin – Clever stuff! I love a bit of lateral thinking.

Very clever indeed. Has anyone tried it? I copied and pasted it directly into a fresh install, and it seems to be ignored.

@i12114, did you add text to your button? The button won’t get created unless you add text to it. If you post a link to your site, we can take a look.

It works on my sandbox site, which is a fairly unmodified install, although I noticed that I forgot to clear the text shadow for the button text, so the updated CSS is this:

.home #customizr-slider .carousel-caption {
  width: 100%;
  line-height: inherit;
  padding: 0;
  margin: 0;
  max-width: none;
  background: transparent;
}
.home #customizr-slider .btn {
  width: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  text-shadow: none;
}

I did. Here you go: https://redrocketbase.com

Only the first slider image is linked right now. As you can see the button shows up. If you’d like access to the backend, let me know. This is a development site anyway.

Interesting. For some reason, the BODY element of your home page doesn’t have the home class assigned to it. You can try substituting .blog for .home in the above CSS.

.carousel-inner .carousel-caption {
	background: transparent;
	min-width: 100%;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	bottom: 0;
}
#customizr-slider .btn-primary {
	background: transparent;
	color: transparent;
	box-shadow: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

Good one, I like that one better. But don’t forget to clear out the text-shadow property by setting it to none, otherwise the button’s text shadow will still show up. Plus this CSS will affect sliders on all pages and not just the home page.

Yes, it does apply to all other sliders. If it’s only needed on homepage, both CSS selectors need to be prefixed with .blog

And you’re right about text-shadow: none;. I tested the code above on a dark image and didn’t notice the shadow.

@acub, What would be the recommended code to move the 3 different Text elements back to their original position, as they’re now locked into (0,0) by the position:absolute?

I don’t understand the question. You want to keep this code as a general rule and code exceptions for certain slides/sliders?

Nope. This code moves the 3 lines of text (see demo-slider) up to the top-left. There is text on the

.carousel-caption h1 	Slider Heading
.carousel-caption p 	Slider Sub-Heading
.carousel-caption .btn 	Slider Button

I’m preparing a Snippet for it, and guess that we’ll be asked for that text to revert back to its original position centered horizontally/vertically. Can’t be done with position:relative because of the way position:absolute is being used to lock the slide & button to (0,0)

The solution above has the following purpose: to use the button’s link as a link on all image, while not showing the button or the caption.

Therefore it spans the caption and the button on all image size, so they render as invisible (so the link actually works).

If one wants to apply this behavior on specific slides of specific sliders, he has to use css selectors to narrow it down (you need .carousel-inner .item:nth-child(n) in order to select the n-th slide of a carousel).

I apologize for not fully testing the code above. Here’s the full snippet, working on a clean Customizr install:

.blog .carousel-inner .carousel-caption {
	background: transparent;
	min-width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	}
.blog .carousel-caption h1,
.blog .carousel-caption .lead {
	display: none;
	}
.blog #customizr-slider .btn-primary {
	background: transparent;
	color: transparent;
	box-shadow: none;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-shadow: none;
	}

Thank you.

It’s a thing of beauty now.