WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Template css wrong for slider imges

[Resolved] Template css wrong for slider imges

  • Tried every fix I could find but cannot centre image in slider underneath caption.

    Template was downloaded from template-monster and self installed. Problem occured immediately and no CSS was changed beforehand.

    Half the image is missing to the left and caption box continually stays to the right of image no matter how image and wrapper is moved or margins edited.

    This is the original template code for slider

    /* Slider
    —————————————- */

    #slider-wrapper {
    position: relative;
    width: 100%;
    height: 541px;
    overflow: hidden;
    z-index: 1;
    }

    #slider {
    background: url(images/loading.gif) no-repeat 50% 50%;
    width: 2120px;
    height: 541px;
    margin: 0 0 0 -1060px;
    position: absolute;
    top: 0;
    left: 50%;
    }

    #slider img {
    position:absolute;
    margin: 0px;
    top:0px;
    left:0px;
    display:none;
    }
    #slider a {
    border:0;
    display:block;
    }

    /* The Nivo Slider styles */
    .nivoSlider {
    position:relative;
    }
    .nivoSlider img {
    position:absolute;
    top:0px;
    left:500px;
    }
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:60;
    display:none;
    }
    /* The slices in the Slider */
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
    }
    .nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    }
    /* Caption styles */

    .nivo-caption {
    background: url(images/caption.png) no-repeat 0% 0%;
    width: 446px;
    height: 446px;
    overflow: hidden;
    letter-spacing: -2px;
    line-height: 37px;
    font-family: ‘Open Sans’, sans-serif;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    color: #bdf5ff;
    position: absolute;
    top: 95px;
    left: 1088px;
    z-index: 89;
    opacity: 0.8; /* Overridden by captionOpacity setting */
    }

    .nivo-caption .nivo-caption-inner {
    margin: 0;
    padding: 108px 60px 0 60px;
    }

    .nivo-caption a {
    display: inline !important;
    }

    .nivo-html-caption {
    display:none;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }
    /* Control nav styles (e.g. 1,2,3…) */
    .nivo-controlNav {
    position:absolute;
    width:950px;
    margin: 0 0 0 -475px;
    height:20px;
    left:50%;
    bottom:10px;
    text-align:center;
    }
    .nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
    display:inline-block !important;
    margin: 0 5px 0 0;
    padding: 3px;
    line-height: 20px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    color: #333333;
    vertical-align: top;
    }
    .nivo-controlNav a.active, .nivo-controlNav a:hover {
    text-decoration: underline;
    }

    .nivo-directionNav a {
    display: block;
    width: 16px;
    height: 27px;
    text-indent: -9999px;
    border: 0;
    position: absolute;
    top: 142px;
    }

    a.nivo-nextNav {
    background: url(images/next.png) no-repeat 0% 0%;
    right: 786px;
    }

    a.nivo-prevNav {
    background: url(images/prev.png) no-repeat 0% 0%;
    left: 1288px;
    }

    .nivo-directionNav a:hover {
    background-position: 0% -27px;
    }

    #slider .nivo-controlNav img {
    display:inline; /* Unhide the thumbnails */
    position:relative;
    margin-right:10px;
    width:120px;
    height:auto;
    }

    As I say, I’ve tried every fix I can find and tried working with the margins but to no avail. Hope support can help me fix this.

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘[Resolved] Template css wrong for slider imges’ is closed to new replies.
Skip to toolbar