Jump to content

Help with CSS for (Arrows/Buttons) Nivo slider


Rockstar29

Recommended Posts

Hi A very nice member from the HTML fourms help with my code for a Nivo slider. I'm now stuck again and don't fully understand the CSS for my (Arrows/Buttons). In my Nivo Folder I have these files under default nivofolders_zpsf261c448.jpg nivodefaultbuttons_zpsffab9218.jpg Do I take the files from my FTP program? Where are these files/scripts coming from? I'm using Dreamweaver CS6 to help wright the code. Now I've watched many tutorials and when writing the code it's just bam! and the arrow.png file appears in there project. They don't really explain anything in these videos or Tutorials I've read or watched. This is the Slider I'm using http://dev7studios.com/nivo-slider/ This is my working code right now,"yes" this is the only way to access my files in my FTP program from volusion. http://www.sos-board...n-image-one.jpg The member thats helping is baffled about my root file,and finding absloute path being "v" makes everything work. I must add I'm brand new to HTML,CSS, I jumped both feet into the water to get my project finished Hoping a few mad css members can help me out with everything or writing the finishing code. thank you This is the orignal CSS code

.theme-default .nivoSlider {	position:relative;	background:#fff url(loading.gif) no-repeat 50% 50%;	margin-bottom:10px;	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;	box-shadow: 0px 1px 5px 0px #4a4a4a;}.theme-default .nivoSlider img {	position:absolute;	top:0px;	left:0px;	display:none;}.theme-default .nivoSlider a {	border:0;	display:block;} .theme-default .nivo-controlNav {	text-align: center;	padding: 20px 0;}.theme-default .nivo-controlNav a {	display:inline-block;	width:22px;	height:22px;	background:url(bullets.png) no-repeat;	text-indent:-9999px;	border:0;	margin: 0 2px;}.theme-default .nivo-controlNav a.active {	background-position:0 -22px;} .theme-default .nivo-directionNav a {	display:block;	width:30px;	height:30px;	background:url(arrows.png) no-repeat;	text-indent:-9999px;	border:0;	opacity: 0;	-webkit-transition: all 200ms ease-in-out;	-moz-transition: all 200ms ease-in-out;	-o-transition: all 200ms ease-in-out;	transition: all 200ms ease-in-out;}.theme-default:hover .nivo-directionNav a { opacity: 1; }.theme-default a.nivo-nextNav {	background-position:-30px 0;	right:15px;}.theme-default a.nivo-prevNav {	left:15px;} .theme-default .nivo-caption {	font-family: Helvetica, Arial, sans-serif;}.theme-default .nivo-caption a {	color:#fff;	border-bottom:1px dotted #fff;}.theme-default .nivo-caption a:hover {	color:#fff;} .theme-default .nivo-controlNav.nivo-thumbs-enabled {	width: 100%;}.theme-default .nivo-controlNav.nivo-thumbs-enabled a {	width: auto;	height: auto;	background: none;	margin-bottom: 5px;}.theme-default .nivo-controlNav.nivo-thumbs-enabled img {	display: block;	width: 120px;	height: auto;}

****This is how far me and the other member from the HTML forums have completed everything.****

<!DOCTYPE html><html> <head> 	<meta charset="utf-8">	<title>sos-slider</title> 	<link rel="stylesheet" href="http://www.sos-boardz.com/v/vspfiles/nivo-slider/nivo_slider.css" type="text/css" media="screen">	<style>	.theme-default .nivoSlider {	position:relative;	background:#fff url(loading.gif) no-repeat 50% 50%;	margin-bottom:10px;	-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;	-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;	box-shadow: 0px 1px 5px 0px #4a4a4a;}.theme-default .nivoSlider img {	position:absolute;	top:0px;	left:0px;	display:none;}.theme-default .nivoSlider a {	border:0;	display:block;} .theme-default .nivo-controlNav {	text-align: center;	padding: 20px 0;}.theme-default .nivo-controlNav a {	display:inline-block;	width:22px;	height:22px;	background:url('http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/bullets.png') no-repeat;	text-indent:-9999px;	border:0;	margin: 0 2px;}.theme-default .nivo-controlNav a.active {	background-position:0 -22px;} .theme-default .nivo-directionNav a {	display:block;	width:30px;	height:30px;	background:url('http://www.sos-boardz.com/v/vspfiles/nivo-slider/themes/default/arrows.png')no-repeat;	text-indent:-9999px;	border:0;	opacity: 0;	-webkit-transition: all 200ms ease-in-out;	-moz-transition: all 200ms ease-in-out;	-o-transition: all 200ms ease-in-out;	transition: all 200ms ease-in-out;}.theme-default:hover .nivo-directionNav a { opacity: 1; }.theme-default a.nivo-nextNav {	background-position:-30px 0;	right:15px;}.theme-default a.nivo-prevNav {	left:15px;} .theme-default .nivo-caption {	font-family: Helvetica, Arial, sans-serif;}.theme-default .nivo-caption a {	color:#fff;	border-bottom:1px dotted #fff;}.theme-default .nivo-caption a:hover {	color:#fff;} .theme-default .nivo-controlNav.nivo-thumbs-enabled {	width: 100%;}.theme-default .nivo-controlNav.nivo-thumbs-enabled a {	width: auto;	height: auto;	background: none;	margin-bottom: 5px;}.theme-default .nivo-controlNav.nivo-thumbs-enabled img {	display: block;	width: 120px;	height: auto;}  	</style> </head> <body>  	<div class="slider-wrapper theme-default ">		<div id="slider" class="nivoSlider">			<img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boardz-slide-show-online-store-now-open-image-one.jpg"alt="shop now">			<a href="http://dev7studios.com"><img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boards-slide-show-sector-9-Image-two.jpg" alt="shop online" title="#htmlcaption"></a>			<img src="http://www.sos-boardz.com/v/vspfiles/images/sos-boardz-slide-show-the-hundreds-image-three.jpg" alt="shop now" title="online store">		</div>	</div>  	<!-- jQuery -->	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  	<!-- jQuery Plug-ins -->	<script src="http://www.sos-boardz.com/v/vspfiles/images/jquery.zrssfeed.min.js" type="text/javascript"></script>	<script src="http://www.sos-boardz.com/v/vspfiles/nivo-slider/jquery_nivo_slider_pack.js" type="text/javascript"></script>	<script type="text/javascript">		$(document).ready(function(){			$('#slider').nivoSlider({				controlNav: false, // navigation				effect: 'random', // transition				animSpeed: 500, // transition speed				pauseTime: 5000, // time slide will show				randomStart: true // start on a random slide			});		});	</script>	<script type="text/javascript">		$(window).load(function() {			$('#slider').nivoSlider();		});	</script>  </body></html>

For my FTP program to work with Vousion the root file(ax4ucx9ayvbk) needs to be removed. The other person helping me was shocked about this. http://www.sos-board...ult/bullets.png http://www.sos-board...ult/bullets.png It seems I can only get one Arrow to show in the slider? and My bullets don't seem to exist either.

Edited by Rockstar29
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...