Grow your CSS skills. Land your dream job.

change slider size

  • # February 9, 2013 at 10:03 pm

    Hi folks I’m new to dynamic forums…

    I need some help in decreasing the slider image size , I’m using the oxygen word press theme, the objective of decreasing size this to create additional widget space right next to slider for advertisement.. I tried messing up with style.css but the whole slider moves to the left it needs to be in center and also there is image gallery below the slider it want its size to remain the way it is .. but when I decreased the size of the slider gallery size has also been reduced

    Please help..

    below is the css code for slider from theme style.css file

    /* Featured Content (slider)


    */
    .featured-wrapper {
    float: right;
    margin-bottom: 30px;
    width: 53.19148936%; /* 750 / 940 = 0.79787234042553 */
    overflow: hidden;
    position: relative;
    z-index: 1;
    }
    #featured-content {
    position: relative;
    margin-bottom: 20px;
    }
    .featured-post {
    position: relative;
    overflow: hidden;
    float: left;
    }
    .featured-post h2.entry-title a {
    position: absolute;
    bottom: 110px;
    right: 0;
    color: #111;
    background: #fff;
    padding: .4em 30px .4em 1.5em;
    font-size: 1em;
    text-transform: uppercase;
    }
    .featured-post:hover h2.entry-title a, .featured-post:hover .byline {
    color: #fff;
    background: #111;
    }
    .featured-post .byline {
    position: absolute;
    bottom: 82px;
    right: 0;
    color: #999;
    background: #fff;
    padding: .4em 30px .4em 1.3em;
    font-size: 0.9166666666666667em;
    }
    .featured-post a:hover { border-bottom: none; }
    .featured-thumbnail { max-width: 100%; }
    #featured-content .dummy {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    height: auto;
    }
    .no-js #featured-content .dummy, #featured-content .dummy.hidden { display: none; }
    .slider-nav {
    display: block;
    position: absolute;
    bottom: 0;
    width: 31px;
    height: 28px;
    background: #111 url(images/slider-nav-arrows.png) no-repeat;
    background: rgba(0,0,0,.5) url(images/slider-nav-arrows.png) no-repeat;
    color: #fff;
    font-size: 1em;
    z-index: 9;
    cursor: pointer;
    text-indent: -9999em;
    }
    #slider-prev {
    left: 0;
    background-position: 7px -21px;
    }
    #slider-next {
    right: 0;
    background-position: 7px 11px;
    }
    .slider-nav:hover { background-color: #000; }

    /* Featured Content (slider) Navigation


    */
    #slider-nav {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    }
    #slide-thumbs {
    width: 100%;
    margin: 0;
    }
    #slider-nav li {
    float: left;
    list-style: none;
    width: 14.66666666666667%; /* 110 / 750 = 0.1466666666666667 */
    margin: 0 2.4% 0 0px; /* 18 / 750 = 0.024 */
    }
    #slider-nav li a, #slider-nav li a:visited {
    border-bottom: none;
    padding: 0;
    }
    #slider-nav li.last { margin-right: 0; }
    #slider-nav li img { max-width: 100%; }
    .activeSlide img { opacity: .3; }

    /* Home


    */
    .section-title {
    float: left;
    width: 93.85%;
    color: #999;
    background: #f3f3f3;
    padding: .25em .6em .35em .6em;
    margin-bottom: 20px;
    text-transform: lowercase;
    border-left: 10px solid #e9e9e9;
    }
    .hfeed-more {
    float: left;
    width: 100%;
    }
    .page-template-front .hfeed-more .hentry {
    float: left;
    width: 47.87234042553191%; /* 225 / 470 = 0.4787234042553191 */
    margin: 0 4.25531914893617% 15px 0; /* 20 / 470 = 0.0425531914893617 */
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    }
    .page-template-front .hfeed-more .hentry.even { margin-right: 0; }
    .page-template-front .hfeed-more .hentry .entry-title a {
    font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    font-size: 0.9375em; /* 15 /16 = 0.875 */
    text-transform: none;
    color: #333;
    }
    .page-template-front .hfeed-more .hentry .entry-title a:hover {
    color: #0da4d3;
    border-color: #888;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".