This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Akita Slider – Custom – Image link covering entire image

  • Creator
  • #3182

    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
    the image actually sits down by a couple of pixels on the slider nav bar.


Viewing 1 replies (of 1 total)
  • Author
  • #3200
    Jason Bobich


    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 – 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.

Viewing 1 replies (of 1 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.