Flash

[Guest]

Hi,

I'm feeling a little lost, I've found where the background image is for the header, But I would like to put up a flash header, I can't seem to find a header template anywhere. Does anyone know what file to edit for this ?

Thanks,

Chris

[Guest]

I believe it is here:

#topHeader {

	text-align: right;

	height: 111px;

	margin-bottom: 20px;

	padding-right: 0px;

	padding-top: 0px;	

}

 In J:\skins\Classic\styleSheets (where 'classic' can be any one of your installed skins) Simply add a background line in there and let in call for flash i.e. 

	background-image:url(../images/YOURFLASH.swf);

	background-repeat:no-repeat;

I believe that should work....

[Guest]

I'll give that a try, thanks..

I'll let you know if that works.

Chris

[Guest cyberjavier]

Hi i am new in the cube cart forum

I write the code posted and don't work

the header has been blank

if you can help me.

many thanks

[Guest]

Ok that didn't work and I know why..... I don't think it is possible (correct me if I am wrong please, I am willing to learn ) to add a flash component into CSS.

So....here is a possible way on how to get it working without too much coding:

Open index.tpl in \skins\Classic\styleTemplates\global and find around line s 17 thru 20

	<div id="topHeader">

  <div>{SEARCH_FORM}</div>

  <div>{SESSION}</div>

	</div>

Directly under

	<div id="topHeader">

you need to place your flash tag and it looks similar to:

  <div align="left"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="XXX" height="XXX">

        <param name="movie" value="DIR1/DIR2/DIR3/YOUR_MOVIE.swf" />

        <param name="quality" value="high" />

        <embed src="DIR1/DIR2/DIR3/YOUR_MOVIE.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="XXX" height="XXX"></embed>

      </object></div>

Change all the RED values to your pref.

<div align="left"> where left will place your flash in the left of your header.

Change your path to your movie and the width and height.....

If you have an editor like dreamweaver you can create the <div> tag and after that click on --> Insert --> Media --> Flash and from there you can locate your flash and all coding will be automatically created....

Now in \skins\Classic\styleSheets open layout.css and match the height in the #topHeader tag with your flash height......

If anybody knows on how to put this all in CSS please let me know....

[Guest cyberjavier]

Thanks i go to probe and sen the result

[Guest]

Hi Mobie,

Ok I got the flash working, I had to remove the search and login to make it fit

in right. I'm still running it through it tests. Once I got everything stable I'll post all the code. Now I have to figure out where to put the search and login stuff, but hey "Thank You" very much for your help.!!

Chris

[Guest sachie]

Hi scubadu,

Have you got the code running stable yet? I'm dying to put a flash header in my site. Its using 3.0.2 and the killer skin.

Thanks in advance

Sachie

[Guest Oscgfx]

Just try using that code but backup the file first under a different name - if it doesnt work just go back to the old version...

[Guest]

Hi scubadu,

Have you got the code running stable yet? I'm dying to put a flash header in my site. Its using 3.0.2 and the killer skin.

Thanks in advance

Sachie

Hi Sachie,

I did get it to work, but there was nothing easy about it. You have to edit the

index.tpl to do it, I used dreamweaver and just loaded the file and played

with it till I got it to work. Make sure you place your file.swf in the root of the

shopping cart to work, not in the template directory.

/skins/Legend/styleTemplates/global/index.tpl

Should be the same for Killer template.

The one problem I ran into was the search box, so I removed it and put it

on the left hand colum.

You can view the example at: http://www.gaslogset.com

Hope this helps. I could have been alot more creative with the flash,

but I got put on other projects.

Example Code:

<body>

<div id="pageSurround">

<div id="subSurround">

<div id="topHeader">

<div align="left">

<table width="748" border="0" cellspacing="0" cellpadding="0">

<tr>

<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="748" height="100">

<param name="movie" value="http://gaslogset.com/header.swf" />

<param name="quality" value="high" />

<embed src="http://gaslogset.com/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="748" height="100"></embed></object></td>

</tr>

<tr>

<td bgcolor="#333333">

<div align="right"><font color="#00FF00" size="2" face="Arial, Helvetica, sans-serif"><strong><font size="3">{SESSION}&nbsp;&nbsp;</font></strong></font></div></td>

</tr>

</table>

</div>

</div>

<div>

<div class="colLeft">

[Guest sachie]

Excellent, thanks mate.

Got it all sorted. Thanks buddy

[Guest woodbtreasures]

You should take a look at your site in Firefox...while I like the look of the flash header the site is REALLY distorted and squished and not displaying correctly

[Guest vrakas]

The post by Mobie posted on Aug 15 2005, 12:15 AM works ok.

You need to move the search and Login to the left and/or right.

Tested with IE and FF

Now to test scubadu's mod

Updated:

I also tested scubadu's mod but i had to many problems with FF and when i moved both buttons to the top in IE it was ok but in FF it was under the other columns and all text was distorted.

Solution: use Mobie's mod and the part of the buttons on the top with the height propotions from scubadu's mod and then adjust the height in the top header to fit them.

PS:I forgot to mention that is was tested with Legend skin and modified to be full screen in any resolution.

[Guest arbycorzen]

I have the Killer_Silver and basicly i have a small flash logo to that i would like to insert into the website. I would like it to replace the defult logo.

This is my index.TPL

<!-- BEGIN: body -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset={VAL_ISO}" />

<title>{META_TITLE}</title>

<meta name="description" content="{META_DESC}" />

<meta name="keywords" content="{META_KEYWORDS}" />



<link href="skins/{VAL_SKIN}/styleSheets/layout.css" rel="stylesheet" type="text/css" />

<link href="skins/{VAL_SKIN}/styleSheets/style.css" rel="stylesheet" type="text/css" />

<script language="javascript" src="js/jslibrary.js" type="text/javascript"></script>

</head>



<body>

<div id="pageSurround">



	

  <div id="topHeader">

  	<div id="sessionBox">

    <div style="padding: 15px 8px 15px 15px; margin: 0px;">

    {SEARCH_FORM}

    {SESSION}

    </div>

  	</div>

  </div>

  

  

  <div id="subSurround">

  

  {CATEGORIES}

  <table border="0" cellspacing="0" width="100%" cellpadding="0">

    <tr valign="top">

  	<td width="175">

       {SHOPPING_CART}  

    {INFORMATION}	

    {CURRENCY}

    {LANGUAGE}</td>

  	<td style="padding: 0px 5px 0px 5px;">{PAGE_CONTENT}</td>

  	<td width="175">

    	{RANDOM_PROD}

    	{POPULAR_PRODUCTS}

    	{SALE_ITEMS}

    	{MAIL_LIST}

  	</td>

    </tr>

  </table>



	

	

	</div>

	{SITE_DOCS}

	

	

</div>

<br><center>

<!-- Begin BidVertiser code -->

<script LANGUAGE="JavaScript1.1" SRC="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=10236&bid=21700"></SCRIPT>

<noscript><a href="http://www.bidvertiser.com">pay per click advertising</a></noscript>

<!-- End BidVertiser code --> 

</center>



</body>

</html>

<!-- END: body -->

I tried to do what you guys were saying but everything just gets messed up when i use the codes.

Thanks for all the help

[Guest LNT]

I agree with woodtreasures,

I only use firefox, and upon looking I nearly got a shock. It seems as though firefox is ignoring some of the css (thats if you used css to increase the top margin).

Regards,

Tom.

[convict 6]

Hi, here is the flash header implementation, works correct in FF and IE (tested on 6).

LEGEND skin

replace

  <div id="topHeader">

 	 <div style="padding-top: 72px;">{SEARCH_FORM}</div>

 	 <div>{SESSION}</div>

  </div>

with 

  <div id="topHeader">     <div>   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="746" height="100">         <param name="movie" value="http://gaslogset.com/header.swf" />         <param name="quality" value="high" />         <embed src="http://gaslogset.com/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="746" height="100"></embed></object>     </div>     <div style="position:relative; float:left; padding-left:5px">{SEARCH_FORM}</div>     <div style="position:relative; float:right; padding-right:5px">{SESSION}</div>   </div>

red value of width have to be #pageSurround width - 2px red value of height is your choice layout.css #topHeader remove> padding-right, background-image add> background-color (could be dark collor) modify> height - hieght of your flash logo + 21px style.css .searchBtn replace height: 20px with _height: 16px - dont forget that "_" must be here! (non-standard style property but not for IE ) .searchBox add> height: 14px; form, ol, ul add> , .searchBox, .searchBtn (could be - form, ol, ul, .searchBox, .searchBtn { ) searchForm.tpl Just delete line break between hidden input and button, because of IE. (WHITE SPACE issue)

Final result using scubadus flash logo :

<input type="hidden" name="act" value="viewCat" /><input name="Submit" type="submit" class="searchBtn" value="{LANG_GO}" />

[Guest vrakas]

Perfect solution and explanation.

Added here

[Guest]

Thanks for posting that "Convict".

I havn't had a chance to play with the code, and post.. By the time I get back to that site, I'll need to read your post to figure it out again.

[Guest]

Convict great show. Juss a few things that will make things easier for people to understand first try..

1) The file you edit for #topheader code is called, index.tpl, and it is located in the \style templates\global directory..

2) layout.css

#topHeader

remove> padding-right & background-image

That is all and thanks again..

[Guest Stormz]

Absolutely brilliant! Thanks all of you (especially convict) !

I only downloaded and installed CubeCart today, and have already got a nice flash header.... courtesy of using this flash_jpg_rotator from http://www.jeroenwijering.com/?item=Flash_JPG_Rotator (thoroughly recommended).

Cheers!

One thing though. Instead of the absolute url in the `index.tpl` eg :

src="http://www.yoursite.com/store/jpgrotator.swf"

couldn`t you use the relative url of 

"../../../../../jpgrotator.swf"

to make loading quicker? (the ../ means to go up a directory from where you are. To get to the root directory of the store from where `index.tpl` is in the `store/skins/legend/styletemplates/global/ folder`, it needs to point 5 folders up to find the .swf) .

Hmm, maybe not. I`ve broken it back to the full url then.....

Now to re-skin the rest of it :(

[Guest]

THank you all for the very informative post. I used this procedure to change my header completely to matchc my site. Although I used all HTML and no flash, it still works using the same methods.... THANKS!!!!!!!!!!!!!!!

[Guest]

Absolutely brilliant! Thanks all of you (especially convict) !

One thing though. Instead of the absolute url in the `index.tpl` eg :

back to the full url then..... Now to re-skin the rest of it

src="http://www.yoursite.com/store/jpgrotator.swf"

couldn`t you use the relative url of 

"../../../../../jpgrotator.swf"

<snip>

Hmm, maybe not. I`ve broken it 

Actually, from a programmaing standpoint, flexible code, and relative paths, the "../..." method looks nice, but it would be better to use a site-relative path, and not a folder relative path as far as system calls and cpu cycles. The full URL is likley going to re-parse and re-request the DNS info to the server, while the ".." method may work from one nested folder, but maybe not if the nested folder is linked to from somewhere else. Use

as a site relative path, that will work no matter where in the hierarchy the address is parsed from, and we know it will be on the same site (usually). Only specify a URL with the hostname if you know it will be going to another server, or another processor on the same server DNS address (clusers of servers with the same hostname).

-Carl

 src="/store/jpgrotator.swf"

[Guest phonon56]

why doesn't this work??????

-----------------------------------------------------------

<script language="javascript" src="js/swfobject.js" type="text/javascript"></script>

</head>

<body>

<div id="pageSurround">

<div id="subSurround">

<div id="topHeader">

<div style="padding-top: 0px;">

<script type="text/javascript">

var so = new SWFObject("http://www.simpleinsight.com/flashpiece.swf", "flashpiece", "758", "132", "8", "#000000");

so.write("flashcontent");

</script><br>

</div>

</div>

[Guest]

I can get this to work with showing the flash movie, but it is slighty aligned to the right no matter what I do to the index.tpl or layout.css

Is there a way to correct this?

Thanks