Akita Slider – Custom – Image link covering entire image

[nextl]

I am trying to use my own HTML in the custom option so that visitor can click on the entire slide instead of the small icon in the upper left corner.

When I attempt to take my slider image and place custom html as so

the image does not go full size expaning across the full area
and
the image actually sits down by a couple of pixels on the slider nav bar.

example:
http://tinyurl.com/ahb9r3u

Topic

[Jason Bobich]

Hello,

In your case, for that to work properly, you’d need to either remove the padding on the .slide-body with CSS or use a shorter image.

A better approach, though, might be to just use standard image slides with image links, and adjust the image links to sit over top the entire slide with CSS customizations.

Note: The image you’re using is 960×348. When switching to the standard image slides, you’ll get better results if it is exactly 960×350 — or larger so WordPress can crop it to that size.

This is a common snippet floating around the forum that will change how the image link appears:

.element-slider .slide .image-link,
.element-slider .slide .image-link:hover {
    background-color: #fff; /* Triggers the anchor in IE */
    background-image: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[Author]

Replies