Hi,
I am using the PaperMag Theme, and would like to change the "background" image of 3 magazines on the Shop home page... to a SLIDESHOW of my product images with links. I have found the coding for creating this type of slideshow... but am not sure how to put it in place on the theme.
I am working in shopping cart designer pro to completely customize the page. I am working in shopping cart creator pro to add my products/pages, etc. I need the slideshow to appear specifically where that spotlight image is placed. How do I go about doing this?
I tried opening the theme in your html editor, but of course, it is not the proper file type. Please give VERY SPECIFIC instructions. Thanks for your help.
Shaheed Williams
Registered User
55 posts
Eric Rohloff
Senior Advisor
20,245 posts
Shaheed, Give these two methods a try. You can place you slide show code where it says "Your code goes here". Then adjust width and height to you code and adjust the top and left relative positions until your show appears on your page in the correct position.
Method #1 CSS
[[[ <style type="text/css"> <!--div#shopimages{width:942px;height:100px;background:red;left:-81px;top:40px;position:relative;} --> </style><div id="shopimages"> Your code goes here </div>]]]
Method #2 Object style
[[[ <OBJECT style="Z-INDEX: 100; POSITION: relative; WIDTH: 942px; HEIGHT: 100px; TOP: 340px; LEFT: 320px; " Your code goes here </OBJECT>]]]
Method #1 CSS
[[[ <style type="text/css"> <!--div#shopimages{width:942px;height:100px;background:red;left:-81px;top:40px;position:relative;} --> </style><div id="shopimages"> Your code goes here </div>]]]
Method #2 Object style
[[[ <OBJECT style="Z-INDEX: 100; POSITION: relative; WIDTH: 942px; HEIGHT: 100px; TOP: 340px; LEFT: 320px; " Your code goes here </OBJECT>]]]
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Shaheed Williams
Registered User
55 posts
Hey Eric... ok, so I'm having trouble with the slideshow, can you give it a go?
I used this program called VisualSlideshow...(http://visualslideshow.com/) ...you can download it, actually, its free, pretty awesome... I created a quick sample slideshow, uploaded it to my server, and put it in the folder "www/images/"
I then exported the slideshow file from this program and copied the text in the index file. The first time, I just followed the directions in the Slideshow program, and pasted it into the html doohickey on the page I wanted it, in SCCP. Well... that didnt work. I ended up with a bunch of links (that you couldnt click) with what I think were the file names or text captions of the pics. FAIL.
Then I remembered you'd given me this code above... but there were alotta </div>'s so maybe I need to cut the code Im using at different points? I dunno. I ended up with a big red box (rectangle)...
So, help! LOL (and thanks for everything, youve been a great help so far, really appreciate it) Oh! and maybe I should mention, this isnt actually "Shaheed" this is the wife, lol, Ke'lona. Its pretty much been me the last coupld weeks of posts cuz were working on my site now
So here's the code that the Slideshow Program Generated:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Creative Motivations generated by VisualSlideshow.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Creative Motivations, Visual Slideshow, Slide Show Software, Slideshow Freeware" />
<meta name="description" content="Creative Motivations created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start VisualSlideShow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
<!-- End VisualSlideShow.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start VisualSlideShow.com BODY section -->
<div id="show" class="slideshow">
<div class="slideshow-images">
<a href="http://www.creative-motivations.com/viewitem.php?productid=113"><img id="slide-0" src="data/images/5x7toddlerset.jpg" alt="" title="" /></a>
<a href="http://www.creative-motivations.com/viewcategory.php?groupid=7"><img id="slide-1" src="data/images/aaalphabet.jpg" alt="" title="" /></a>
<a href="http://www.creative-motivations.com/viewitem.php?productid=56"><img id="slide-2" src="data/images/ramadanset.jpg" alt="" title="" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/5x7toddlerset.jpg" alt="" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/aaalphabet.jpg" alt="" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/ramadanset.jpg" alt="" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">Picture Slide Show by VisualSlideshow.com v1.6</a>
</div>
<!-- End VisualSlideShow.com BODY section -->
</body>
</html>
...I was told to cut and paste the code as follows:
Open the generated index.html file in any text editor.
* Copy all code for Visual SlideShow from the HEAD and BODY tags and paste it on your page in the HEAD tag and in the place where you want to have a slideshow (inside the BODY tag).
<head>
...
<!-- Start Visual SlideShow.com HEAD section -->
.....
<!-- End Visual SlideShow.com HEAD section -->
... </head>
<body>
...
<!-- Start Visual SlideShow.com BODY section -->
.....
<!-- End Visual SlideShow.com BODY section -->
...</body>
...so I did. And I used the first code above that you gave me, and just pasted my code in between where you indicated. Ended up with a big red rectangle overlapping the text, and thats all.
Tried it with the second code (the object one) and it didnt show anything.
Here's the page where I'm trying to put it: www.creative-motivations.com
I wanted it right above the "welcome..." text, and obviously want the welcome text to move down
Help?
I used this program called VisualSlideshow...(http://visualslideshow.com/) ...you can download it, actually, its free, pretty awesome... I created a quick sample slideshow, uploaded it to my server, and put it in the folder "www/images/"
I then exported the slideshow file from this program and copied the text in the index file. The first time, I just followed the directions in the Slideshow program, and pasted it into the html doohickey on the page I wanted it, in SCCP. Well... that didnt work. I ended up with a bunch of links (that you couldnt click) with what I think were the file names or text captions of the pics. FAIL.
Then I remembered you'd given me this code above... but there were alotta </div>'s so maybe I need to cut the code Im using at different points? I dunno. I ended up with a big red box (rectangle)...
So, help! LOL (and thanks for everything, youve been a great help so far, really appreciate it) Oh! and maybe I should mention, this isnt actually "Shaheed" this is the wife, lol, Ke'lona. Its pretty much been me the last coupld weeks of posts cuz were working on my site now
So here's the code that the Slideshow Program Generated:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Creative Motivations generated by VisualSlideshow.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Creative Motivations, Visual Slideshow, Slide Show Software, Slideshow Freeware" />
<meta name="description" content="Creative Motivations created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start VisualSlideShow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
<!-- End VisualSlideShow.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start VisualSlideShow.com BODY section -->
<div id="show" class="slideshow">
<div class="slideshow-images">
<a href="http://www.creative-motivations.com/viewitem.php?productid=113"><img id="slide-0" src="data/images/5x7toddlerset.jpg" alt="" title="" /></a>
<a href="http://www.creative-motivations.com/viewcategory.php?groupid=7"><img id="slide-1" src="data/images/aaalphabet.jpg" alt="" title="" /></a>
<a href="http://www.creative-motivations.com/viewitem.php?productid=56"><img id="slide-2" src="data/images/ramadanset.jpg" alt="" title="" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/5x7toddlerset.jpg" alt="" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/aaalphabet.jpg" alt="" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/ramadanset.jpg" alt="" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">Picture Slide Show by VisualSlideshow.com v1.6</a>
</div>
<!-- End VisualSlideShow.com BODY section -->
</body>
</html>
...I was told to cut and paste the code as follows:
Open the generated index.html file in any text editor.
* Copy all code for Visual SlideShow from the HEAD and BODY tags and paste it on your page in the HEAD tag and in the place where you want to have a slideshow (inside the BODY tag).
<head>
...
<!-- Start Visual SlideShow.com HEAD section -->
.....
<!-- End Visual SlideShow.com HEAD section -->
... </head>
<body>
...
<!-- Start Visual SlideShow.com BODY section -->
.....
<!-- End Visual SlideShow.com BODY section -->
...</body>
...so I did. And I used the first code above that you gave me, and just pasted my code in between where you indicated. Ended up with a big red rectangle overlapping the text, and thats all.
Tried it with the second code (the object one) and it didnt show anything.
Here's the page where I'm trying to put it: www.creative-motivations.com
I wanted it right above the "welcome..." text, and obviously want the welcome text to move down
Help?
sstovert@satx.rr.com
Guest
5,410 posts
It's free for personal use. A license is required for business use. Do you have a license for the online store?
CoffeeCup... Yeah, they are the best!
Shaheed Williams
Registered User
55 posts
not yet, wanna test it out first... and as you can see, no success yet. 
can you help me? please?
can you help me? please?
sstovert@satx.rr.com
Guest
5,410 posts
Sorry, I don't use the cart or cart designer.
CoffeeCup... Yeah, they are the best!
Shaheed Williams
Registered User
55 posts
double
sstovert@satx.rr.com
Guest
5,410 posts
Don't worry. Eric will be back on-line to help you out.
CoffeeCup... Yeah, they are the best!
Eric Rohloff
Senior Advisor
20,245 posts
Looks like you got it running. And I bet you learned a thing or two.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Shaheed Williams
Registered User
55 posts
YEP! Thanks Eric. Youve been a great help.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
