• My slider used to fade in and out, and the CSS hasn’t changed, but the slider is no longer doing so. I only switched the front static page to a new “home” page and I deleted a few page templates from a theme I hated. I’m not sure what to do or how to move forward. Thank you so much for your help.

    April

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter April475

    (@april475)

    I should mention that NONE of the css code I put in is working.

    Thread Starter April475

    (@april475)

    This is my CSS if you need to see it:

    .carousel .item {
    line-height: 300px;
    overflow: hidden;
    max-height: 700px;
    }
    body {
    background: none repeat scroll 0 0 #FAFAFA;
    color: #4682B4;
    padding-bottom: 0;
    }
    .carousel-inner > .active {
    left: 0;
    /* Fix slider in IE */
    z-index: 9;
    }
    .carousel-caption {
    background-color: transparent9;
    /* IE8 and below */
    background: rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#33000000′, endColorstr=’#33000000′, GradientType=0);
    /* IE6-9 */
    max-width: 60%;
    padding: 5%;
    line-height: 14px;
    vertical-align: middle;
    /* fix for IE to align the grey box to center */
    top: 25%;
    display: inline-block;
    position: relative;
    margin-left: 11%;
    /*display:inline; IE7 and below */

    }
    .btn.btn-primary.fp-button {
    display: none;
    }
    /*Make Carousel fade. Delay between slides needs(?) to be > 7000ms for this to work well*/
    .carousel-inner > .item {
    -webkit-transition: 2s ease-in-out opacity;
    -moz-transition: 2s ease-in-out opacity;
    -ms-transition: 2s ease-in-out opacity;
    -o-transition: 2s ease-in-out opacity;
    transition: 2s ease-in-out opacity;
    }
    .carousel-inner > .next.left,
    .carousel-inner > .prev.right {
    opacity: 1;
    z-index: 1;
    left: 0;
    }
    .carousel-inner > .active.left {
    opacity: 0;
    z-index: 2;
    left: 0/* Remove icon */
    #main-wrapper .format-icon:before {
    content: none;
    }
    /* Center Title */
    .page #main-wrapper h1.format-icon:before {content: none;}
    .page h1.entry-title {
    text-align: center;
    }

    April, just as I pointed out here, your CSS is not working because your .carousel-inner > .active.left is not closed (after left:0).

    You need to insert:

    ;
    }

    between left: 0 and /* Remove icon */, on line 54 of that code.
    And please put your code in code window, by adding above and below the code a line with a single backtick in it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS isn't working.’ is closed to new replies.