• Resolved vbpartners

    (@vbpartners)


    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 http://stonecoat.com/

    thanks 🙂

  • The topic ‘Changing the shadow description box on the slider’ is closed to new replies.