How to insert flash banner in Joomla 1.5

Hi
Trying to get flash banner to work on www.itfixng.com

I have read through the forum and fell over this answer

http://www.experts-exchange.com/Software/Server_Software/Content_Management/WebBased_CMS/Q_23964241.html?sfQueryTermInfo=1+10+banner+flash+joomla

I would like to use the flash_module but as there are no documentation I am having some problems.
I have opened the flash_module as you can see on the attached picure
I have written what folder its in and the name and choose to show it in the header
I have made sure that the file "bg.swf" is in the image folder
Still does not work

I have then edited the .css file to replace the old banner bg.jpg with my flash bg.swf, but still no joy.
I need some help to get this resolved.

I also saw in the same article that i can paste a code into "index.php". If anyone can help me using that method that would also be great. I am new to HTML/PHP coding.

Any help would be welcomed :)

Kind Regards
Morten

flash-module.jpg
morten444Asked:
Who is Participating?
 
EliotBallCommented:
Hi.
I think it is the template you are using. Open the index.php file in the root of the template and search for this text:
<div id="logo"></div>
After that text, put this code:
<object width="800px" height="200px"> <param name="movie" value="banner.swf"> <embed src="banner.swf" width="800px" height="200px"> </embed> </object>
You will need to change the width and height in that code to be right.
Now change the name of the banner flash file to banner.swf, and put it in THE SAME DIRECTORY as the index.php from your TEMPLATE. Now it should work. You will not need to restart your server or anything, just refresh the page. If it doesn't work, I'll try something else.
If it works, comment on how exactly you would like the banner to be placed.
Glad to help.
0
 
EliotBallCommented:
Hi there, morten444.
OK, go into your index.php file, and add the code I have posted below with the changes you need to make for your specific flash banner into the position on the page where you need it. If you could post the contents of index.php and the location of your flash banner I will do that for you, as you may have trouble editing a Joomla template when you are new to webcoding.
Hope I can help.

<object width="[width of banner]" height="[height of banner]">
<param name="movie" value="[location of the flash file on the server]">
<embed src="[location of the flash file on the server]" width="[width of banner]" height="[height of banner]">
</embed>
</object>

Open in new window

0
 
morten444Author Commented:
Hi
Thanks for your reply.
I would be very happy if you could help me with this one, so I can learn from that.

The index.php file I need to edit :
Is it
index.php in root of my website  (www.itfixing.com/index.php)
or is it the index.php found in the root of the template that i am using (rhuk_milkyway)
and .. do i still need to change the file name in template.css to the .swf file?

Kind Regards
Morten
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
morten444Author Commented:
Hi
Thanks again
I have put that text into the index.php that i have edited from within the template page.
I can now see the box but no image

I also have a text in the template.css:

div#logo {
      position: absolute;
      left: 0;
      top: 0;
      float: center;
      width: 800px;
      height: 102px;
      background: url(../logo1.swf) 0 0 no-repeat;
      margin-left: 125px;
      margin-top: 16px;
}

the logo1.swf is in the same folder as the old banner so it shoud be in the right place.

Any idea

regards
Morten
<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">
<a name="up" id="up"></a>
<div class="center" align="center">
	<div id="wrapper">
		<div id="wrapper_r">
			<div id="header">
				<div id="header_l">
					<div id="header_r">
						<div id="logo"></div>
                                                        <object width="800px" height="200px"> <param name="movie" value="logo1.swf"> <embed src="images/logo1.swf" width="800px" height="200px"> </embed> </object>
						<jdoc:include type="modules" name="top" />
					</div>
				</div>
			</div>
 
			<div id="tabarea">
				<div id="tabarea_l">
					<div id="tabarea_r">
						<div id="tabmenu">
						<table cellpadding="0" cellspacing="0" class="pill">
							<tr>
								<td class="pill_l">&nbsp;</td>
								<td class="pill_m">
								<div id="pillmenu">
									<jdoc:include type="modules" name="user3" />
								</div>
								</td>
								<td class="pill_r">&nbsp;</td>
							</tr>

Open in new window

0
 
morten444Author Commented:
Yes!!
Did a mistake in the code
wrote path = logo1.swf one place and image/logo1.swf another place
Now it works :)

Just struggelig on to get it to show in the right place as now its floating a little.
Should cover the previous banner area.  hm...
Getting there little by little with some good help.
If you have any suggestion about the allignement issue, please help

www.itfixing.com

Kind Regards
Morten
0
 
morten444Author Commented:
Now nearly there
 
if I change the size of the banner to:
                                                       <object width="1200px" height="100px"> <param name="movie" value="logo1.swf"> <embed src="logo1.swf" width="1200px" height="200px"> </embed> </object>

I get this white area on each side.
When banner is 800x200, i do not have this problem, only that the banner is to short

Any idea where the white areas on right and left is comming from?

Regards Morten

PS: code is from template.css

mainly edited:

div#header_r {
      height: 200px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      overflow: hidden;
      text-align: left;

div#logo  (removed)


Any idears
Regards Morten
/*****************************/
/*** Core html setup stuff ***/
/*****************************/
 
html {
  height: 100%;
  margin-bottom: 1px;
}
 
form {
  margin: 0;
  padding: 0;
}
 
body {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.3em;
	margin: 0px 0px 0px 0px;
	font-size: 12px;
	color: #333;
}
 
a:link, a:visited {
	text-decoration: none;
	font-weight: normal;
}
 
a:hover {
	text-decoration: underline;
	font-weight: normal;
}
 
input.button { cursor: pointer; }
 
p { margin-top: 0; margin-bottom: 5px; }
 
img { border: 0 none; }
 
/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
	padding: 10px 0;
	margin-bottom: 1px;
}
 
div.center {
  text-align: center;
}
 
div#wrapper {
	margin-left: auto;
	margin-right: auto;
}
 
body.width_medium div#wrapper {
	width: 950px;
}
 
body.width_small div#wrapper {
	width: 773px;
}
 
body.width_fmax div#wrapper {
	min-width: 750px;
	max-width: 1050px;
}
 
div#header_l {
	position: relative;
}
 
div#header_r {
	height: 200px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	overflow: hidden;
	text-align: left;
}
 
div#logo {
 
}
 
div#newsflash {
	width: auto;
	margin-left: 350px;
	margin-right: 30px;
	border: 1px solid #00f;
}
 
div#tabarea {
	background: #F7F7F7 url(../images/mw_header_b.png) 0 0 repeat-x;
	margin: 0 11px;
 
}
 
div#tabarea_l {
	background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
	padding-left: 32px;
}
 
div#tabarea_r {
	height: 42px;
	background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
	padding-right: 1px;
}
 
div#footer_r {
	padding-top: 10px;
	height: 47px;
	overflow: hidden;
}
 
div#footer_r div {
	text-align: center;
	font-size: .90em;
	color: #aaa;
}
 
div#footer_r a:link, div#footer_r a:visited  {
	color: #999;
}
 
div#footerspacer {
	height: 10px;
}
 
#pathway {
	padding: 0px 10px 8px;
	width: auto;
	margin-top: -2px;
	margin-right: 250px;
	text-align: left;
}
 
#search {
	float: right;
	width:320px;
	margin-top: -20px;
	margin-right: 30px;
	height: 40px;
	overflow: hidden;
	text-align:right;
}
 
form#searchForm input {
	vertical-align: middle;
}
 
form#searchForm table {
	border-collapse: collapse;
}
 
form#searchForm td {
	padding:0;
}
 
#mod_search_searchword {
	padding-left: 3px;
}
 
#area {
	padding: 0;
}
 
#whitebox {
	margin: 0 21px 0px 21px;
	background: #FFF;
	width: auto;
}
 
#whitebox div {
	text-align: left;
}
 
#whitebox_t {
	background: #FFF url(../images/mw_content_t.png) 0 0 repeat-x;
}
 
#whitebox_tl {
	background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}
 
#whitebox_tr {
	height: 10px;
	overflow: hidden;
	background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}
 
#whitebox_m {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	width: auto;
	padding: 1px 8px;
}
 
#whitebox_b {
	margin-top: -5px;
	background: url(../images/mw_content_b.png) 0 100% repeat-x;
}
 
#whitebox_bl {
	background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}
 
#whitebox_br {
	height: 13px;
	background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}
 
/* horizontal pill menu */
table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
 
td.pill_l {
  background: url(../images/mw_menu_cap_l.png) no-repeat;
  width:  20px;
  height: 32px;
 
}
 
td.pill_m {
  background: url(../images/mw_menu_normal_bg.png) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}
 
td.pill_r {
  background: url(../images/mw_menu_cap_r.png) no-repeat;
  width:  19px;
  height: 32px;
}
 
#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}
 
#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}
 
#pillmenu li {
	float: left;
	background: url(../images/mw_menu_separator.png) top right no-repeat;
	margin: 0;
	padding: 0;
}
 
#pillmenu a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
	float:left;
  display:block;
  height: 24px;
  line-height: 24px;
  padding: 0 20px;
  color: #000;
  text-decoration: none;
}
 
#pillmenu a#active_menu-nav {
	margin-top:2px;
	height: 21px;
	line-height: 21px;
	background-position: 0 0;
}
 
#leftcolumn {
	padding: 0;
	margin: 0;
	width: 20%;
	float:left;
}
 
#maincolumn,
#maincolumn_full {
	margin-left: 20%;
	padding-left: 15px;
	width: 75%;
}
 
#maincolumn_full {
	margin-left: 0;
	padding: 0;	
	width: 100%;
}
 
table.nopad {
	width: 100%;
	border-collapse: collapse;
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}
 
table.nopad td.middle_pad {
	width: 20px;
}
 
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
 
div.offline {
	background: #fffebb;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.2em;
	padding: 5px;
}
 
span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}
 
/* headers */
div.componentheading {
  padding-left: 0px;
}
 
h1 {
	padding: 0;
	font-family:Helvetica ,Arial,sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	vertical-align: bottom;
	color: #666;
	text-align: left;
	width: 100%;
}
 
h2, .contentheading {
	padding: 0;
	font-family: Arial, Helvetica,sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	vertical-align: bottom;
	color: #333;
	text-align: left;
	width: 100%;
}
 
table.contentpaneopen h3 {
	margin-top: 25px;
}
 
h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}
 
h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1.5em;
  padding-left: 0px;
	margin-bottom: 10px;
	text-align: left;
}
 
/* small text */
.small {
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}
 
.modifydate {
  height: 20px;
  vertical-align: bottom;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	text-align: left;
}
 
.createdate {
	height: 20px;
	vertical-align: top;
	font-size: .90em;
	color: #999;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 5px;
	padding-top: 0px;
 
}
 
a.readon {
	margin-top: 10px;
	display: block;
	float: left;
	background: url(../images/mw_readon.png) top right no-repeat;
	padding-right: 20px;
	line-height: 14px;
	height: 16px;
}
 
/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }
 
 
/** overlib **/
 
.ol-foreground {
	background-color: #f6f6f6;
}
 
.ol-background {
	background-color: #666;
}
 
.ol-textfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
 
.ol-captionfont {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #f6f6f6;
	font-weight: bold;
}
.ol-captionfont a {
	color: #0B55C4;
	text-decoration: none;
	font-size: 12px;
}
 
.ol-closefont {}
 
/* menu links */
a.mainlevel:link, a.mainlevel:visited {
	padding-left: 5px;
}
 
a.mainlevel:hover {
 
}
 
/* spacers */
span.article_separator {
	display: block;
	height: 20px;
}
 
.article_column {
	padding-right: 5px;
}
 
.column_separator {
	border-left: 1px dashed #e0e0e0;
	padding-left: 10px;
}
 
td.buttonheading {
 
}
 
td.buttonheading img {
	border:none;
}
 
.clr {
	clear: both;
}
 
td.greyline {
  width: 20px;
  background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}
 
div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}
 
table.blog span.article_separator {
	display: block;
	height: 20px;
}
 
/* edit button */
.contentpaneopen_edit{
	float: left;
}
 
/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  float: right;
}
 
table.contenttoc td {
  padding: 0 5px;
}
 
 
/* content tables */
td.sectiontableheader {
  background: #efefef;
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}
 
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}
 
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}
 
 
/* content styles */
table.contentpaneopen, table.contentpane {
	margin: 0;
	padding: 0;
	width: 100%;
}
 
table.contentpaneopen li {
	margin-bottom: 5px;
}
 
table.contentpaneopen fieldset {
	border: 0;
	border-top: 1px solid #ddd;
}
 
table.contentpaneopen h3 {
	margin-top: 25px;
}
 
table.contentpaneopen h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}
 
.highlight {
	background-color: #fffebb;
}
 
/* module control elements */
table.user1user2 div.moduletable {
	margin-bottom: 0px;
}
 
div.moduletable, div.module {
  margin-bottom: 25px;
}
 
div.module_menu h3 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #eee;
	margin: -23px -4px 5px -5px;
	padding-left: 10px;
	padding-bottom: 2px;
}
 
div.module_menu {
	margin: 0;
	padding: 0;
	margin-bottom: 15px;
}
 
div.module_menu div div div {
	padding: 10px;
	padding-top: 30px;
	padding-bottom: 15px;
	width: auto;
}
 
div.module_menu div div div div {
	background: none;
	padding: 0;
}
 
div.module_menu ul {
	margin: 10px 0;
	padding-left: 20px;
}
 
div.module_menu ul li a:link, div.module_menu ul li a:visited {
	font-weight: bold;
}
 
#leftcolumn div.module {
	padding: 0 10px;
}
 
#leftcolumn div.module table {
	width: auto;
}
 
/* forms */
table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}
 
div.search input {
	width: 145px;
	border: 1px solid #ccc;
	margin: 15px 0 10px 0;
}
 
form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }
 
form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }
 
/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }
 
div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }
 
/* Parameter Table */
table.paramlist {
	margin-top: 5px;
}
 
table.paramlist td.paramlist_key {
	width: 128px;
	text-align: left;
	height: 30px;
}
 
table.paramlist td.paramlist_value {
}
 
div.message {
	font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size : 14px;
	color : #c30;
	text-align: center;
	width: auto;
	background-color: #f9f9f9;
	border: solid 1px #d5d5d5;
	margin: 3px 0px 10px;
	padding: 3px 20px;
}
 
/* Banners module */
 
/* Default skyscraper style */
.bannergroup {
}
 
.banneritem img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
 
/* Text advert style */
 
.banneritem_text {
	padding: 4px;
	font-size: 11px;
}
 
.bannerfooter_text {
	padding: 4px;
	font-size: 11px;
	background-color: #F7F7F7;
	text-align: right;
}
 
/* System Messages */
/* see system general.css */
 
.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }
 
/* Polls */
.pollstableborder td {
	text-align: left;
}
 
/* WebLinks */
span.description {
	display:block;
	padding-left: 30px;
}
 
/* Frontend Editing*/
fieldset {
	border: 1px solid #ccc;
	margin-top: 15px;
	padding: 15px;
}
 
legend {
	margin: 0;
	padding: 0 10px;
}
 
td.key {
	border-bottom:1px solid #eee;
	color: #666;
}
 
/* Tooltips */
 
.tool-tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 200px;
}
 
.tool-title {
	padding: 0;
	margin: 0;
	font-size: 100%;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../../system/images/selector-arrow.png) no-repeat;
}
 
.tool-text {
	font-size: 100%;
	margin: 0;
}
 
/* System Standard Messages */
#system-message { margin-bottom: 20px; }
 
#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}
 
/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;}
 
/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;}
 
#syndicate{
	float:left;
	padding-left: 25px;
}
 
#power_by{
	float:right;
	padding-right: 25px;
}
 
/* Component Specific Fixes */
 
#component-contact table td {
	padding: 2px 0;
}

Open in new window

0
 
EliotBallCommented:
Glad it works!
You can either make the banner swf wider to fill the 1200px, or you can shorten your webpage, or you can add margins to the left and right of the flash file.
I would strongly reccomend that you make your page about 900 pixels wide because many, many people, including me, are still using 1024x768 XGA screens.
It's up to you.
0
 
morten444Author Commented:
Hi again
Yes now its perfect :)
Editing on the css file got the allignement correct

Thanks alot for your help
Without it I would be lost :)
0
 
morten444Author Commented:
Very helpfull and followed me all the way untill resolved.
Thanks alot
0
 
EliotBallCommented:
Thanks for accepting!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.