Layout Issue css?

I have managed to install the jquery easy slider and get everything working but would like to center it in my center wrapper - just cannot find where I should make the change, It does call on a screen.css but cannot seem understand the exact layout system and would be grateful of some help.

Something like this added to the stylesheet:

.centerColumn {
padding-left:6em;
}

Seeing the site will make it easier to help.

sorry not thinking stripeyfrog . com

shanesoine,

Where/what file did you insert this into

Hi Cobra

Thanks again, the following is in the html_header.php

and then I used admin/define main page to put in my <div>

</ul>

But it calls on the screen.css - which I have placed in includes/templates/classic/css - so I would assume in my ignorance that I should make layout change there? But not quite sure how, below is the screen.css

/* image replacement /
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/ // image replacement */

/* Easy Slider */

 #slider ul, #slider li,
 #slider2 ul, #slider2 li{
     margin:0;
     padding:0;
     list-style:none;
     }
 #slider2{margin-top:1em;}
 #slider li, #slider2 li{ 
     /* 
         define width and height of list item (slide)
         entire slider area will adjust according to the parameters provided here
     */

     width:700px;
     height:250px;
     overflow:hidden; 
     }    
 #prevBtn, #nextBtn,
 #slider1next, #slider1prev{ 
     display:block;
     width:30px;
     height:77px;
     position:absolute;
   left:-30px;
     top:71px;
     z-index:1000;
     }    
 #nextBtn, #slider1next{ 
     left:700px;
     }                                                        
 #prevBtn a, #nextBtn a,
 #slider1next a, #slider1prev a{  
    display:block;
     position:relative;
     width:30px;
     height:77px;
     background:url(includes/templates/classic/images/btn_prev.gif) no-repeat 0 0;    
     }    
 #nextBtn a, #slider1next a{ 
     background:url(includes/templates/classic/images/btn_next.gif) no-repeat 0 0;    
    }    
     
 /* numeric controls */    

 ol#controls{
     margin:1em 0;
     padding:0;
     height:28px;    
     }
 ol#controls li{
     margin:0 10px 0 0; 
     padding:0;
     float:left;
     list-style:none;
     height:28px;
     line-height:28px;
     }
 ol#controls li a{
     float:left;
     height:28px;
     line-height:28px;
     border:1px solid #ccc;
     background:#DAF3F8;
     color:#555;
     padding:0 10px;
     text-decoration:none;
     }
ol#controls li.current a{
    background:#5DC9E1;
     color:#fff;
     }
 ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

the following is in the html_header.php

Restore the original as this is not the place for that

it calls on the screen.css - which I have placed in includes/templates/classic/css
Read the readme in the /css folder these will load alpha if in the /css folder and the html header file is not edited

More info - I also made changes in the easy_slider.js to set the scroller to continuous and turn of numeric s but cannot see where I would set screen position. Sorry yet more code:

/*

• Easy Slider 1.7 - jQuery plugin
• written by Alen Grakalic
• http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
• Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
• Dual licensed under the MIT (MIT-LICENSE.txt)
• and GPL (GPL-LICENSE.txt) licenses.
• Built for jQuery library
• http://jquery.com

*/

(function($) {

$.fn.easySlider = function(options){
  
	// default configuration properties
	var defaults = {			
		prevId: 		'prevBtn',
		prevText: 		'Previous',
		nextId: 		'nextBtn',	
		nextText: 		'Next',
		controlsShow:	true,
		controlsBefore:	'',
		controlsAfter:	'',	
		controlsFade:	true,
		firstId: 		'firstBtn',
		firstText: 		'First',
		firstShow:		false,
		lastId: 		'lastBtn',	
		lastText: 		'Last',
		lastShow:		false,				
		vertical:		false,
		speed: 			800,
		auto:			true,
		pause:			4000,
		continuous:		true, 
		numeric: 		false,
		numericId: 		'controls'
	}; 
	
	var options = $.extend(defaults, options);  
			
	this.each(function() {  
		var obj = $(this); 				
		var s = $("li", obj).length;
		var w = $("li", obj).width(); 
		var h = $("li", obj).height(); 
		var clickable = true;
		obj.width(w); 
		obj.height(h); 
		obj.css("overflow","hidden");
		var ts = s-1;
		var t = 0;
		$("ul", obj).css('width',s*w);			
		
		if(options.continuous){
			$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
			$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
			$("ul", obj).css('width',(s+1)*w);
		};				
		
		if(!options.vertical) $("li", obj).css('float','left');
							
		if(options.controlsShow){
			var html = options.controlsBefore;				
			if(options.numeric){
				html += '<ol id="'+ options.numericId +'"></ol>';
			} else {
				if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
				html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
				html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
				if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
			};
			
			html += options.controlsAfter;						
			$(obj).after(html);										
		};
		
		if(options.numeric){									
			for(var i=0;i<s;i++){						
				$(document.createElement("li"))
					.attr('id',options.numericId + (i+1))
					.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
					.appendTo($("#"+ options.numericId))
					.click(function(){							
						animate($("a",$(this)).attr('rel'),true);
					}); 												
			};							
		} else {
			$("a","#"+options.nextId).click(function(){		
				animate("next",true);
			});
			$("a","#"+options.prevId).click(function(){		
				animate("prev",true);				
			});	
			$("a","#"+options.firstId).click(function(){		
				animate("first",true);
			});				
			$("a","#"+options.lastId).click(function(){		
				animate("last",true);				
			});				
		};
		
		function setCurrent(i){
			i = parseInt(i)+1;
			$("li", "#" + options.numericId).removeClass("current");
			$("li#" + options.numericId + i).addClass("current");
		};
		
		function adjust(){
			if(t>ts) t=0;		
			if(t<0) t=ts;	
			if(!options.vertical) {
				$("ul",obj).css("margin-left",(t*w*-1));
			} else {
				$("ul",obj).css("margin-left",(t*h*-1));
			}
			clickable = true;
			if(options.numeric) setCurrent(t);
		};
		
		function animate(dir,clicked){
			if (clickable){
				clickable = false;
				var ot = t;				
				switch(dir){
					case "next":
						t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
						break; 
					case "prev":
						t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
						break; 
					case "first":
						t = 0;
						break; 
					case "last":
						t = ts;
						break; 
					default:
						t = dir;
						break; 
				};	
				var diff = Math.abs(ot-t);
				var speed = diff*options.speed;						
				if(!options.vertical) {
					p = (t*w*-1);
					$("ul",obj).animate(
						{ marginLeft: p }, 
						{ queue:false, duration:speed, complete:adjust }
					);				
				} else {
					p = (t*h*-1);
					$("ul",obj).animate(
						{ marginTop: p }, 
						{ queue:false, duration:speed, complete:adjust }
					);					
				};
				
				if(!options.continuous && options.controlsFade){					
					if(t==ts){
						$("a","#"+options.nextId).hide();
						$("a","#"+options.lastId).hide();
					} else {
						$("a","#"+options.nextId).show();
						$("a","#"+options.lastId).show();					
					};
					if(t==0){
						$("a","#"+options.prevId).hide();
						$("a","#"+options.firstId).hide();
					} else {
						$("a","#"+options.prevId).show();
						$("a","#"+options.firstId).show();
					};					
				};				
				
				if(clicked) clearTimeout(timeout);
				if(options.auto && dir=="next" && !clicked){;
					timeout = setTimeout(function(){
						animate("next",false);
					},diff*options.speed+options.pause);
				};
		
			};
			
		};
		// init
		var timeout;
		if(options.auto){;
			timeout = setTimeout(function(){
				animate("next",false);
			},options.pause);
		};		
		
		if(options.numeric) setCurrent(0);
	
		if(!options.continuous && options.controlsFade){					
			$("a","#"+options.prevId).hide();
			$("a","#"+options.firstId).hide();				
		};				
		
	});
  
};

})(jQuery);

Add this to the bottom of the relevant stylesheet and adjust to suit

#slider {
        margin-left: 13em;
        }

Thanks for your time - little lost where should I be putting the <head> script. Now I'm really muddled I copied common from templates default and put it in classic and now make all changes here. Do the same with css. Am I on the wrong track completely?

:clap: thanks for the position script worked perfectly

little lost where should I be putting the <head> script.
You do not need the head part

name the css and place it in your template/css folder and it will load

ok think i caused confusion with my explanation. Under classic which is my template I have a common and a css folder. I just placed the new ccs file "screen.css" in this css folder. Then I put the script that they want in the header into the html_header.php between the <head> </head> tags.

Was so proud that I was finally getting the hang of the file structure - am I on the right track?

That should be in a jquery.js file and as .js should be in your template/jscript folder
One need to rename the file to have Zen Cart auto load it
So for the above example it would be jscript_jquery.js

See tutorial
https://www.zen-cart.com/tutorials/index.php?article=36

The instructions you are finding are for a html page

now really lost - I do have a jquery file which I have placed in includes/js

Then the instructions say to place code to link to them between the main <head> tags to I have put that in the html_header.php

and because I only wanted the scroller to appear on the home page I put the div id on the admin/define/main page

Oh and did I say thanks for your patience

Think I see what you where trying to tell me with the link to the FAQ but pretty sure I am not making changes to the core files I have copied any file I am going to change from default to classic and only make changes in classic.

Was sure that was what the tut said to do?? Need some help on this one - have I got it completely wrong - idea is that one should never modify default files. If I need to make changes I make a copy of those files and place it in the my template folder - then make the changes there??

Am I on the right track??

Tried re-naming the jquery.js file to jscript_jquery.js but then all the slides show as individual images vertically down the page? So have gone back to original name - at the stage where just having it work is sometimes enough - yes I know bad attitude!

Many thanks Kobra for all your time, finally got my head around file structures and overrides and think I am on the right track.