Is a Flash Header possible for Grass Stains Template?

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
ImmortalSon
Forum Members
Forum Members
Posts: 31
Joined: Thu Feb 08, 2007 1:04 am

Is a Flash Header possible for Grass Stains Template?

Post by ImmortalSon »

Hi Everyone,

I am fairly new to CMSMS.  I have been using Mark's Grass Stains xml theme as a base template to learn different bits and pieces of how CMSMS works.  The current problem is that I am trying to insert titlebar1.swf Flash File into the template, instead of the static header JPEG image.  Does anyone know how this is done?

This is the code in the CSS where the JPEG is called in case someone knows how I am to amend this...

Code: Select all


/******* Structure and Layout *******/
body {
font-family:Arial, Helvetica, sans-serif; 
font-size: 9pt; 
color: #000000; 
background: #B4B8B7;
margin:10px 0 0 0;
padding:0 0 0 0;
background: #efefef url(images/bg.gif);
text-align:center;
}

[b].wrap {
width:780px;
margin:0 auto;
padding:0 0 0 0;
text-align:center;
background: #ffffff url(uploads/positiveFX/header2.jpg) no-repeat;
border:1px solid #295371;[/b]
}

.header {
clear:none;
width:770px;
height:25px;
margin:100px 0 0 0;
padding:0 0 0 0;
background:transparent;
color:#ffffff;
text-align:right;
}

.topnav {
clear:both;
width:780px;
height:21px;
margin:0 0 0 0;
padding:0 0 0 0;
background:#ffffff url(uploads/positiveFX/topnav_bg_grey.gif);
font-size:8pt;
}

.container {
clear:both;
width:760px;
margin:10px 10px 0 10px;
padding:0 0 0 0;
background:#ffffff;
color:#000000;
text-align:left;
}

.news_right {
float:right;
clear:both;
width:200px;
margin:0 0 5px 10px;
padding:0 10px 0 10px;
background:#557d9a;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
}

.news p {
margin:10px 10px;
}

.news_cnr_top {
background:url(images/cnr_tr.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}

.news_cnr_bottom {
background:url(images/cnr_br.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}

img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}

.footer {
position:relative;
clear:both;
width:780px;
margin:0;
padding: 0;
background:#ffffff;
font-size:8pt;
text-align:center;
border-top:1px solid #295371;
}
 *html body #footer{margin:10px 0 0 0;}

div#flat{clear:both;width:66%;height:38px;margin:10px 0 20px;padding:0px}
div.left49 {float:left;width: 70%;}
div.right49 {float:right;width: 15%;text-align: right;}
div.left49 p{margin:0px 20px; padding:0px}
div.right49 p{margin:0; padding:0px}


I have also copied link to my test area below if you want to have a look.

http://www.amberleafmedia.co.uk/cmsmadesimple/index.php

Any help would be great,

R.
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm
Location: Comox Valley, BC

Re: Is a Flash Header possible for Grass Stains Template?

Post by Nullig »

You add the flash in the template, not the CSS file.

In order to still be valid XHTML 1.0 Strict, you will need to download swfobject.js - you can get it at http://blog.deconcept.com/swfobject/.

Then in the head portion of your template you add..

Code: Select all

<__script__ type="text/javascript" src="uploads/scripts/swfobject.js"></__script>
Note: change the path to wherever you save the script.

Then in the header portion of your template you add:

Code: Select all

<div id="flashcontent"></div>
{literal}
<__script__ type="text/javascript">
// <![CDATA[
		
var so = new SWFObject("path/to/movie.swf", "movie", "100", "80", "7", "#666666");
so.addParam("wmode", "opaque");
so.write("flashcontent");
		
// ]]>
</__script>
{/literal}
You need to change the parameters to match your movie in this line:

var so = new SWFObject("path/to/moviename.swf", "moviename", "width", "height", "flash version", "background color");

And you can add a div#flashcontent to your stylesheet to control it's placement, etc.

I hope this helps.

Nullig
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Is a Flash Header possible for Grass Stains Template?

Post by Gregor »

This works like a charm!!

Is it possible (and if so, how) to place the script-part in a UDT? In that case, when using more than one template, it is easier to place a tag than the code.

Thanks,
Gregor
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm
Location: Comox Valley, BC

Re: Is a Flash Header possible for Grass Stains Template?

Post by Nullig »

I suppose you could create a UDT which contained the following:

Code: Select all

echo '<__script__ type="text/javascript" src="uploads/scripts/swfobject.js"></__script>';
Note: you would have to change the path to where you had the js script.

Nullig
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Is a Flash Header possible for Grass Stains Template?

Post by Gregor »

Yep, thanks Nullig, this works :-) Still a lot to experience about CMSms
User avatar
kermit
Power Poster
Power Poster
Posts: 693
Joined: Thu Jan 26, 2006 11:46 am

Re: Is a Flash Header possible for Grass Stains Template?

Post by kermit »

Nullig wrote: You add the flash in the template, not the CSS file.

In order to still be valid XHTML 1.0 Strict, you will need to download swfobject.js - you can get it at http://blog.deconcept.com/swfobject/.

(snip)
no need for javascript here...

from http://www.ambience.sk/flash-valid.htm






too simple for words. ;)
eternity (n); 1. infinite time, 2. a seemingly long or endless time, 3. the length of time it takes a frozen pizza to cook when you're starving.
4,930,000,000 (n); 1. a very large number, 2. the approximate world population in 1986 when Microsoft Corp issued its IPO. 3. Microsoft's net profit (USD) for the quarter (3 months) ending 31 March 2007.
CMSMS migration and setup services | Hosting with CMSMS installed and ready to go | PM me for Info
Post Reply

Return to “Layout and Design (CSS & HTML)”