Changing the shadow description box on the slider
-
I’m looking to change the slider’s description shadow box so that instead of it being a large rectangle as it is now, it would be a short rectangle located at the bottom of the slider.. so that it would not obstruct the image in the slider…
i think the coding is here but can’t quite figure it out –
#featured { position: relative; background: url(images/featured-bg.png) no-repeat top center; margin-top: 12px; margin-bottom: 12px; } a#left-arrow, a#right-arrow, #featured .nivo-prevNav, #featured .nivo-nextNav { position: absolute; top: 143px; width: 40px; height: 44px; text-indent:-9999px; z-index: 40; } a#left-arrow, #featured .nivo-prevNav { background:url(images/left-arrow.png) no-repeat; left: -7px; } a#right-arrow, #featured .nivo-nextNav { background:url(images/right-arrow.png) no-repeat; right: -7px; } .featured-top-shadow { background:url(images/featured-top-shadow.png) repeat-x; position: absolute; top:0; left: 0px; width: 960px; height: 4px; } .featured-bottom-shadow { background:url(images/featured-bottom-shadow.png) repeat-x; position: absolute; bottom:0; left: 0px; width: 960px; height: 4px; } .featured-description { position: absolute; width: 340px; height: 160px; top: 50px; right:53px; background:url(images/featured-description.png); padding: 37px 33px 40px 40px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } h2.featured-title { font-family: 'Kreon', Arial, sans-serif; font-weight: lighter; font-size: 28px; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); } h2.featured-title a { text-decoration: none; color: #ffffff; } .featured-description p { color: #ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); line-height: 25px;} a.readmore { display: block; background: url(images/readmore.png); height: 27px;padding: 0 13px; color: #7b9297; font-size: 13px; font-family: 'Kreon', Arial, sans-serif; line-height: 27px; position: absolute; bottom: 0px; right: 0px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } #featured a.readmore:hover { color: #fff; } #controllers, .nivo-controlNav { text-align: center; padding-top: 0px; padding-bottom: 0px; } #controllers a, .nivo-controlNav a { background:url(images/controller1.png) no-repeat; display:block; height:11px; margin-right:4px; text-indent:-9999px; width:11px; display: inline-block; } #controllers a.activeSlide, .nivo-controlNav a.active, #controllers a:hover, .nivo-controlNav a:hover { background:url(images/controller2.png) no-repeat; }
the url is https://stonecoat.com/
thanks ??
- The topic ‘Changing the shadow description box on the slider’ is closed to new replies.