morten444
asked on
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
https://www.experts-exchange.com/questions/23964241/how-to-insert-flash-banner-into-joomla-1-5-website.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
Trying to get flash banner to work on www.itfixng.com
I have read through the forum and fell over this answer
https://www.experts-exchange.com/questions/23964241/how-to-insert-flash-banner-into-joomla-1-5-website.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
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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"> </td>
<td class="pill_m">
<div id="pillmenu">
<jdoc:include type="modules" name="user3" />
</div>
</td>
<td class="pill_r"> </td>
</tr>
ASKER
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
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
ASKER
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
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;
}
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.
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.
ASKER
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 :)
Yes now its perfect :)
Editing on the css file got the allignement correct
Thanks alot for your help
Without it I would be lost :)
ASKER
Very helpfull and followed me all the way untill resolved.
Thanks alot
Thanks alot
Thanks for accepting!
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.
Open in new window