?
Solved

How to insert flash banner in Joomla 1.5

Posted on 2009-04-17
10
Medium Priority
?
7,522 Views
Last Modified: 2012-05-06
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
0
Comment
Question by:morten444
  • 6
  • 4
10 Comments
 
LVL 2

Expert Comment

by:EliotBall
ID: 24193043
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
 

Author Comment

by:morten444
ID: 24193201
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
 
LVL 2

Accepted Solution

by:
EliotBall earned 2000 total points
ID: 24193709
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:morten444
ID: 24197500
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
 

Author Comment

by:morten444
ID: 24199939
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
 

Author Comment

by:morten444
ID: 24201019
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
 
LVL 2

Expert Comment

by:EliotBall
ID: 24202644
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
 

Author Comment

by:morten444
ID: 24203113
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
 

Author Closing Comment

by:morten444
ID: 31571671
Very helpfull and followed me all the way untill resolved.
Thanks alot
0
 
LVL 2

Expert Comment

by:EliotBall
ID: 24206613
Thanks for accepting!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Knowledge base software has turned out to be a quite reliable method for storing information, promoting collaborative work and for sharing valuable input and solutions.However, some organizations are trying to develop a knowledge base that works wit…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month15 days, 2 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question