How to Input HTML coding into SPOTLIGHT on theme.


Registered User
54 posts

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.


Senior Advisor
13,374 posts
Online Now

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>]]]
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for use in my job.
http://pestlogbook.com


Registered User
54 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 :P

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? :D


Temporary User
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!


Registered User
54 posts

not yet, wanna test it out first... and as you can see, no success yet. :/ can you help me? please?


Temporary User
5,410 posts

Sorry, I don't use the cart or cart designer. :(
CoffeeCup... Yeah, they are the best!


Registered User
54 posts

double :(


Temporary User
5,410 posts

Don't worry. Eric will be back on-line to help you out. :)
CoffeeCup... Yeah, they are the best!


Senior Advisor
13,374 posts
Online Now

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.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for use in my job.
http://pestlogbook.com


Registered User
54 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.