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
    Topic
  • #3182
    nextl
    Participant

    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

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

    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.

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