Hi Joel,
Love it, love it.
Can you tell us how you got the SWF banner to work here?
Hi Melissa,
Thanx for your comments. The SWF banner is simple:
1) Download the RANDOW SWF module from this link
http://developer.joomla.org/sf/frs/do/viewSummary/projects.joomlalabs/frs. Look at this too
http://forum.joomla.org/index.php/topic,9198.0.html;
2) After install the RANDOM SWF module (if you have some trouble, tell me), you just put all your SWF files in the same directory (pre-configurated in your module administration). Make sure that all your SWF files have the same width and height (to work properly);
3) In my case, as i am using the ONEMORETHING template, in the JOOMLA ADMINISTRATION, go to MODULES > SITE MODULES > RANDOW SWF > and set the POSITION option to USER1 (take a look at the PARAMETERS in the botton of this page. They are very important);
4) The parameters of my site HTML and CSS are (JOOMLA ADMINISTRATION > SITE > TEMPLATE MANAGER > SITE TEMPLATES):
HTML:<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = split( '=', _ISO );
// xml prolog - quirks mode
//echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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>
<?php
if ( $my->id ) {
initEditor();
}
mosShowHead();
require($mosConfig_absolute_path."/templates/" . $mainframe->getTemplate() . "/md_submenu.php");
$forcehilite = false; //index of button to force (0 -> #buttons-1)
$topnav = jwShowHorizMenu('mainmenu');
$sidenav = jwShowSubMenu('mainmenu');
$tabcolor = jwGetTabColor();
$hilightid = jwGetHilightid();
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
</head>
<body id="page_bg" class="<?php echo $tabcolor; ?>">
<a name="up" id="up"></a>
<div class="center" align="center">
<div id="wrapper">
<div id="top">
<div>
<div>
<span id="logo_header" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/omt_logo_header.png',sizingMethod='scale');"></span>
</div>
</div>
</div>
<div id="middle">
<div id="middle_2">
<div id="middle_3">
<div id="middle_4">
<div id="navigation">
<div id="centernav">
<span id="topnav">
<?php echo $topnav; ?>
</span>
<div class="clr"></div>
</div>
</div>
<?php if (mosCountModules('user1') || mosCountModules('user1')) { ?>
<div id="showcase">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr valign="top">
<?php if (mosCountModules('user1')) { ?>
<td id="user1">
<?php mosLoadModules('user1', -2); ?>
</td>
<?php } ?>
<?php if (mosCountModules('user2')) { ?>
<td id="user2">
<?php mosLoadModules('user2', -2); ?>
</td>
<?php } ?>
</tr>
</table>
</div>
<?php } ?>
<div id="contentarea">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="contentarea">
<tr valign="top">
<?php if(mosCountModules( 'left' )) { ?>
<td id="leftnav">
<div id="lefttop">
<?php echo $sidenav; ?>
<?php mosLoadModules('left', -2); ?>
</div>
</td>
<td>
<?php } else { ?>
<td id="leftborder">
<?php } ?>
<div id="pathway">
<?php mosPathWay(); ?>
</div>
<div id="mainbody">
<?php mosLoadModules('top', -2); ?>
<?php mosMainBody(); ?>
</div>
</td>
<?php if (mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' )) { ?>
<td id="rightnav">
<div id="righttop"></div>
<div id="rightbody">
<?php mosLoadModules('right', -2); ?>
</div>
</td>
<?php } ?>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div>
<div>Design by JamboWorks - November 2005 JWTC</div>
</div>
</div>
</div>
</div>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>
CSS:/* custom stuff */
html {
height: 100%;
margin-bottom: 1px;
}
form {
margin: 0;
padding: 0;
}
body {
margin: 0px 0px 0px 0px;
height: 100%;
font-size: 12px;
background: #41566E url(../images/omt_bg_top.png) repeat-x;
}
a:link, a:visited {
color: #AB290F;
text-decoration: none;
font-weight: normal;
}
a:hover {
color: #c00;
text-decoration: underline;
font-weight: normal;
}
p {
margin-top: 0;
margin-bottom: 5px;
text-align: left;
}
div, p, table, td, th {
font-family: Lucida Grande, Verdana,Helvetica,Arial,sans-serif;
line-height: 140%;
color: #666;
}
fieldset {
border: 1px solid #d2d8de;
}
#wrapper div, #wrapper p, #wrapper table, #wrapper td, #wrapper th {
text-align: left;
}
span.pathway {
padding-left: 10px;
color: #394048;
}
div.componentheading {
padding-left: 0px;
}
a.readon {
margin-top: 10px;
padding-right: 10px;
line-height: 14px;
height: 16px;
}
h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 18px;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}
h2, .contentheading {
font-family: Arial Narrow, Helvetica Nueue, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2b3036;
}
h3 {
margin: 0;
}
.componentheading, #mainbody h3 {
margin: 0;
margin-bottom: 10px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #AB290F;
border-bottom: 1px solid #D2D8DE;
}
#mainbody h3 {
line-height: 140%;
height: 140%;
padding: 0;
text-indent: 0;
}
table.blog td.contentheading {
}
table.contenttoc {
margin: 5px;
border: 1px solid #ccc;
padding: 5px;
}
table.contenttoc td {
padding: 0 5px;
}
td.buttonheading {
}
td.sectiontableheader {
background: #efefef;
color: #333;
font-weight: bold;
padding: 4px;
border-right: 1px solid #fff;
}
tr.sectiontableentry1 td, tr.sectiontableentry2 td {
padding: 4px;
}
td.sectiontableentry1, td.sectiontableentry2{
padding: 3px;
}
table.contentpaneopen, table.contentpane {
width: 100%;
}
div.moduletable h3 {
margin-left: -8px;
margin-right: -7px;
border: 0px solid #f00;
margin-bottom: 5px;
height: 29px;
line-height: 29px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
text-indent: 8px;
color: #57616E;
}
#leftnav div.moduletable h3 {
background: url(../images/omt_moduletitle.png) 0 0 repeat-x;
}
#leftnav div.moduletable {
background: url(../images/omt_module_bg.png) 0 28px no-repeat;
}
#leftnav ul {
padding-left: 0;
margin-left: 12px;
}
#leftnav li {
margin-bottom: 5px;
}
div.moduletable {
padding-bottom: 15px;
padding-left: 8px;
padding-right: 8px;
}
.small {
font-size: 10px;
color: #999;
font-weight: normal;
text-align: left;
}
.modifydate {
height: 20px;
vertical-align: bottom;
font-size: 10px;
color: #999;
font-weight: normal;
text-align: left;
}
.createdate {
height: 20px;
vertical-align: top;
font-size: 10px;
color: #999;
font-weight: normal;
vertical-align: top;
padding-bottom: 5px;
padding-top: 0px;
}
.clr {
clear: both;
}
#page_bg {
height: 100%;
padding: 0;
margin-bottom: 1px;
}
div.mosimage {
margin: 5px;
}
div.mosimage_caption {
font-size: 10px;
color: #666;
}
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;
}
/** some content stuff **/
div#wrapper {
height: 100%;
margin-left: auto;
margin-right: auto;
width: 800px;
}
div#top {
background: url(../images/omt_header_m.png) 0 0 repeat-x;
}
div#top div {
background: url(../images/omt_header_l.png) 0 0 no-repeat;
}
div#top div div {
background: url(../images/omt_header_r.png) 100% 0 no-repeat;
height: 98px;
position: relative;
}
span#logo {
position: absolute;
display: block;
left: 35px;
top: 28px;
width: 100px;
height: 91px;
z-index: 90;
background: url(../images/omt_logo_trans.png) 0 0 no-repeat !important;
background: transparent;
}
span#logo_header {
position: absolute;
left: 135px;
top:28px;
z-index: 90;
width: 242px;
height: 60px;
background: url(../images/omt_logo_header.png) 0 0 no-repeat !important;
background: transparent;
}
span#joomla {
position: absolute;
right: 14px;
top: 21px;
z-index: 99;
width: 151px;
height: 140px;
background: url(../images/omt_joomla_trans.png) 0 0 no-repeat !important;
background: transparent;
}
div#middle {
background: #fff url(../images/omt_shadow_r2.png) 100% 0 repeat-y;
}
div#middle_2 {
background: url(../images/omt_shadow_r1.png) 100% 0 no-repeat;
}
div#middle_3 {
background: url(../images/omt_shadow_l2.png) 0 0 repeat-y;
}
div#middle_4 {
background: url(../images/omt_shadow_l1.png) 0 0 no-repeat;
padding: 0 19px;
}
div#bottom {
background: url(../images/omt_shadow_b.png) 0 0 repeat-x;
}
div#bottom div {
background: url(../images/omt_shadow_bl.png) 0 0 no-repeat;
}
div#bottom div div {
background: url(../images/omt_shadow_br.png) 100% 0 no-repeat;
height: 44px;
padding-top: 5px;
font-size: 10px;
color: #A2A7A9;
text-align: center;
}
div#navigation {
height: 28px;
background: url(../images/omt_buttonbar.png) 0 0 repeat-x;
}
div#centernav {
margin: 0 auto !important;
margin: 0;
display: table !important;
display: block;
text-align: center;
}
/* this is not xhtml compliant but works in ie/firefox */
span#topnav {
padding: 0;
white-space: nowrap;
display: table-cell !important;
display: inline-block;
}
/** tab menu stuff **/
#topnav ul#mainlevel {
float: left;
padding: 0;
margin:0;
list-style: none;
border-left: 1px solid #959A9E;
border-right: 1px solid #ECF4FA;
}
#topnav #mainlevel li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #959A9E;
}
#topnav #mainlevel a:link, #topnav #mainlevel a:visited {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
color: #2B3036;
float:left;
display:block;
padding: 0 30px;
height: 28px;
line-height: 28px;
text-decoration: none;
background: url(../images/omt_button_off.png) 0 0 no-repeat;
border: 0;
}
#topnav #mainlevel li.red_active_menu {
border-right: 1px solid #721901;
}
#topnav #mainlevel li.red_active_menu a:link, #topnav #mainlevel li.red_active_menu a:visited {
background: url(../images/omt_button_on.png) 0 0 no-repeat;
color: #EEF0F2;
float:left;
padding: 0 30px;
height: 28px;
line-height: 28px;
}
#topnav #mainlevel a:hover {
color: #616B78;
}
#topnav #mainlevel li.red_active_menu a:hover {
color: #fff;
}
#showcase {
margin: 0;
padding: 0px 0;
padding-left: 0px;
padding-top: 0px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
background: #dcdfe1;
}
/*
turned OFF disable header in showcase area
#showcase .moduletable h3 {
display: none;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0;
padding: 0;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
*/
#showcase .moduletable {
padding: 0;
padding: 0px 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin: 0;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
#showcase td, #showcase div, #showcase p, #showcase span {
color: #D8DBDE;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0;
}
#showcase .contentheading {
font-family: Arial Narrow, Helvetica Nueue, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding: 0;
}
#user1 {
width: 50%;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding: 0;
}
#user2 {
width: 50%;
width: 50%;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-right: 0px;
padding: 0;
}
table.contentarea {
background: url(../images/omt_body_right.png) 100% 0 repeat-y;
}
#leftnav {
width: 180px;
border: 0px solid #ff0;
background: url(../images/omt_column_left.png) 0 0 repeat-y;
}
#leftborder {
border-left: 1px solid #D3D8DE;
}
#lefttop {
border: 0px solid #00f;
}
div#mainbody {
border: 0px solid #0ff;
padding: 12px;
}
#rightnav {
width: 180px;
border: 0px solid #00f;
background: url(../images/omt_column_right.png) 100% 0 repeat-y;
}
#righttop {
background: url(../images/omt_bodytop_r.png) 0 0 no-repeat;
height: 29px;
}
#rightbody {
background: url(../images/omt_rightnav_bg.png) 0 0 repeat-x;
}
#pathway{
background: url(../images/omt_bodytop.png) 0 0 repeat-x;
padding-top: 5px;
height: 29px;
}
#leftnav ul.submenu, #leftnav ul.submenu ul {
list-style:none;
margin: 0;
padding: 0;
}
#leftnav ul.submenu li {
background: none;
padding: 0;
margin: 0;
}
#leftnav ul.submenu ul li {
text-indent: 10px;
}
#leftnav ul.submenu ul li {
text-indent: 20px;
}
#leftnav ul.submenu ul ul li {
text-indent: 30px;
}
#leftnav ul.submenu ul ul ul li {
text-indent: 40px;
}
#leftnav ul.submenu ul ul ul ul li {
text-indent: 50px;
}
ul.submenu a:link, ul.submenu a:visited {
display: block;
width: 147px;
padding-right: 15px;
padding-bottom: 5px;
background: url(../images/omt_menu_red.png) 100% -2px no-repeat;
}
ul.submenu a:hover {
background-position: 100% -53px;
text-decoration: none;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
width: 147px;
padding-right: 15px;
padding-bottom: 5px;
background: url(../images/omt_menu.png) 100% -2px no-repeat;
}
a.mainlevel:hover {
background-position: 100% -53px;
text-decoration: none;
}
div#footer {
margin-top: 10px;
width: 766px;
height: 28px;
line-height: 28px;
text-indent: 20px;
background: #e6eef8;
}
div#footer table {
margin-top: 4px;
}
div#footer table td {
text-align: center;
}
div#footer a {
padding: 0 10px;
}
div#topmodule {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
height: 80px;
overflow: hidden;
}
div#quote {
padding-top: 10px;
margin-right: 10px;
text-align: left;
float: right;
width: 505px !Important;
width: 485px;
}
div#quote td {
text-align: left;
}
table.menublock {
margin: 0 15px;
}
td.summary {
background: #eef3f9;
padding: 5px;
padding-left: 10px;
}
td.latestnews {
background: #eef3f9;
padding: 5px;
}
/* some page content things */
table.blog span.article_seperator {
display: block;
height: 20px;
}
table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}
table.nopad td.middle_pad {
width: 20px;
}
body.contentpane {
background: #fff;
}
Hope this help you...
Best regards Melissa!
Joel Rodrigues