A little template assistance please

igorivex · 21.12.2004, 21:56

Modified the planetfall template that came with mambo to my needs. You can see it at IVEXguild.com

The problem is that it looks a bit different on the right side in IE and Mozilla. I posted my CSS and Index.php below. Any suggestions as how to clean this up. It is my first attempt at a mambo template edit.

thanks in advance.

igorivex · 21.12.2004, 21:57

Index.php:

PHP Code:

  <?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

 
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();

 
}

 
?>

 
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

 
<?php mosShowHead(); ?>

 
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_planetfall/css/template_css.css" rel="stylesheet" type="text/css" />

 
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/templates/rhuk_planetfall/images/favicon.ico" />

 
</head>

 
<body class="page_bg">

 
<a name="up" id="up"></a>

 
<?php

 
@$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) and !$_REQUEST['task'] == 'edit' ) ? 2 : 1;

 
?>

 
<div align="center" >

 
    <table width="799px" border="0" cellpadding="0" cellspacing="0" class="big_frame"><!--DWLayoutTable-->

 
    <tr>

 
        <td colspan="<?php echo $collspan_offset + 1; ?>">

 
        <img src="<?php echo $mosConfig_live_site; ?>/templates/rhuk_planetfall/images/top_bar.jpg" width="100%" height="12" alt=""/>

 
        </td>

 
    <td>&nbsp;</td><td>&nbsp;</td></tr>

 
    <tr>

 
        <td colspan="<?php echo $collspan_offset; ?>" class="header">

 
        <img src="<?php echo $mosConfig_live_site; ?>/templates/rhuk_planetfall/images/spacer.png" width="646" height="9" alt=""/>

 
        <br />

 
        </td>

<!--Some stuff that I left from original template because it got screwy when I tired to remove it.-->

        <td class="top_right_box" style="width: 120px; padding-left: 5px;" valign="top">

 
            <table cellpadding="0" cellspacing="0" border="0" width="151px" class="contentpaneopen">

 
            <tr>

 
                <td width="151px">

 
                </td>

 
            </tr>

 
            <tr>

<!-- User6 is the Countdown at the top most right-->

                <td><div id="searchblock" class="top_right_box" style="width: 151px; padding-left: 5px;"><?php mosLoadModules ( 'user6' ); ?></div>

 
          </td>

 
            </tr>

 
            </table>

 
        <!--</td>

 
    </tr>-->

<!--User3 has horizontal menu and news scroller, User5 is the Calendar-->

    <tr><td colspan="<?php echo $collspan_offset+0; ?>">

            <div id="silver_menu"><?php mosLoadModules ( 'user3' ); ?></div><td>    

 
            <div id="silver_date"><?php mosLoadModules ( 'user5' ); ?></div>      

 
            <div style="clear:both;"></div></td>

 
    </td>

 
    </tr>

 
    

 
    <tr>

 
    

 
    <td valign="top" class="content_box">

 
            <table border="0" cellpadding="0" cellspacing="0" width="100%">

 
            <tr valign="top">

 
                 <td>

 
                <!-- main content area -->

 
                <div class="contentblock" id="contentblock" style="width:<?php echo 635 - ( 151 * ( $collspan_offset-1 ) )   ?>">

 
                    <?php include $GLOBALS['mosConfig_absolute_path'] . '/pathway.php'; ?>

 
                    <br />

 
                    <?php

 
                    if ( mosCountModules( 'top' ) ) {

 
                        mosLoadModules ( 'top' );

 
                    }

 
                    mosMainBody();

 
                    ?>

 
                    <br />

 
                </div>

 
                <?php

 
                if ( mosCountModules( 'bottom' ) ) { ?>

 
                    <div class="footerblock" id="footerblock">

 
                    <?php mosLoadModules ( 'bottom' ); ?>

 
                    <br />

 
                    </div>

 
                    <?php

 
                }

 
                ?>

 
                </td>

 
            </tr>

 
            </table>

 
        </td>

<!-- right Two coloums Contain these blocks.-->

<!--middleblock-->

        <?php

 
        if ( ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) and @!$_REQUEST['task'] == 'edit' ) {

 
            ?>

 
            <td valign="top" class="middle_box" width="151px" style="width:151px">

 
            <div id="middle_box">

 
                <?php

 
                if ( mosCountModules( 'right' ) ) {

 
                    ?>

 
                    <div class="rightblock" id="rightblock" style="width:145px">

 
                    <?php mosLoadModules ( 'right' ); ?>

 
                    </div>

 
                    <?php

 
                }

 
                if ( mosCountModules( 'user2' ) ) {

 
                    ?>

 
                    <div class="user2block" id="user2block" style="width:145px">

 
                    <?php mosLoadModules ( 'user2' ); ?>

 
                    </div>

 
                    <?php

 
                } ?>

 
            </div>

 
            </td>

 
            <?php

 
        }

 
        ?>

 
        <td valign="top" class="right_box" width="151" style="width: 151px">

 
        <div id="right_box">

 
            <!-- far right menu -->

 
            <div class="leftblock" id="leftblock" style="width:145px">

 
            <?php mosLoadModules ( 'left' ); ?>

 
            </div>

 
            <div class="user1block" id="user1block" style="width:145px">

 
            <?php

 
            if ( mosCountModules( "user1" ) ) {

 
                mosLoadModules ( 'user1' );

 
            }

 
            ?>

 
            </div>

 
        </div>

 
        </td>

 
    </tr>

 
    <tr>

 
        <td colspan="<?php echo $collspan_offset+1; ?>">

 
        <img src="<?php echo $mosConfig_live_site; ?>/templates/rhuk_planetfall/images/top_bar.jpg" width="798px" height="9" alt="" />

 
        </td>

 
    <td>&nbsp;</td><td>&nbsp;</td></tr>

 
    </table>

 
    <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>

 
</div>

 
<?php mosLoadModules( 'debug', -1 );?>

 
</body>

 
</html>

igorivex · 21.12.2004, 21:59

CSS part 1:

Code:

/* custom stuff */

div#contentblock table td.newsflash {
	padding:0px;
}

.footerblock {

}

.user2block {

}


.user1block {

}

.rightblock {

}

.contentblock {

}

.centerblock {

}

.leftblock {

}


.header {
	height: 60px;
        background: center #000000 url(../images/Ivex.gif) no-repeat;
}

/* working my way up */

.content_box {
	padding: 4px;
        
}
<!--Block with Countdown(user6)-->
.search_box {
	padding: 10px;
	background: #000000;
}


<!-- Block with Calendar (user5)-->
#silver_date {
	float:;
	width: 173px;
	text-align: center;
	background: #000000;
	padding: 5px 0px 0px 20px;
	font-size: 9px;
	font-weight: bold;
	}
<!--Block with horizontal menu and newsscroller(user3)-->
#silver_menu {
	overflow: show;
	width: 100%;
	background: url(../images/silver_background.jpg) repeat-x;
	float: left;
    font-size: 9px;
    padding: 0px;
       }
<!--not used-->
#silver_toolbar {
	width: 100%;
        float: left;
        font-size: 9px;
        padding: 5px;
}
<!--Not userd-->
.silver_box {
	width: 100%;
         height: 0px;
	border-top: solid 1px #9DA6B3;
	border-bottom: solid 1px #9DA6B3;
	text-align: left;
	background: url(../images/silver_background.jpg) repeat-x;
	padding: 0px 0px 0px 0px;
}
<!--right two collums-->
.middle_box {
	 padding: 4px;
	border-left: solid 1px #9DA6B3;
	background: #182327 url(../images/menu1_fade.jpg) repeat-x;
}

.right_box {
        padding: 4px;
	border-left: solid 1px #9DA6B3;
	background: #182327 url(../images/menu1_fade.jpg) repeat-x;
}

.left_box {
width: 151px;
        
}
<!-- dunno -->
.searchblock {
	color: #ff6600;
}
<!-- dunno -->
.top_right_box {
	float:;
	width: 100%;
	text-align: center;
	background: #000000;
	padding: 5px;
	font-size: 9px;
	font-weight: bold;
	white-space:;
}

.page_bg {
	background: #121A1D url(../images/back_fade.jpg) repeat-x;
	padding: 20px 0px 20px 0px;
	margin: 0px;
	border: 0px;
}

.big_frame {
	width: 798px;
	border: solid 1px #9DA6B3;
}


/* required stuff */

#content-pane .tab-page {
	background: #000000;
}

.contentpane {

}

.contentpaneopen {
	text-align: left;
	width: 100%;
	padding: 0px;
}

.small {
	font-size: 11px;
	color: #ffffff;
	font-weight: bold;
	padding-top: 10px;
	text-align: left;
}

.modifydate {
	font-size: 11px;
	color: #ffffff;
	font-weight: bold;
	padding-top: 10px;
	text-align: left;
}

.createdate {
	line-height: 15px;
	font-size: 11px;
	color: #ffffff;
	font-weight: bold;
	vertical-align: top;
	display: block;
}

.contentheading {
	background: url(../images/title_background.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #cccccc;
	text-align: left;
	text-indent: 15px;
	width: 100%;
	height: 24px;
	text-transform: uppercase;
}

.contentpagetitle {
	font-size: 13px;
	font-weight: bold;
	color: #cccccc;
	text-align:left;
}

/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
	font-size: 13px;
	font-weight: bold;
	color: #ff6600;
	text-align:center;
	text-decoration: none;
}

a.contentpagetitle:hover {
	color: #ffffff;
}

table.moduletable {
	width: 100%;
	margin: 0px 0px 15px 0px;
	border-left: solid 0px #000000;
	border-right: solid 0px #000000;
	border-top: solid 0px #000000;
	border-bottom: solid 0px #000000;
}

table.moduletable th {
	background: url(../images/title_background.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #cccccc;
	text-align: left;
	text-indent: 15px;
	width: 100%;
	height: 24px;
	text-transform: uppercase;
}

table.moduletable td {
	font-size: 11px;
	padding: 0px;
	font-weight: normal;
}

table.moduletable ul {
	color: #ff0000;
}

div#menublock table.moduletable td {
	padding: 0px;
}

#mainlevel-nav {
margin: 0; padding: 0;
}
#mainlevel-nav li {
background-image: none;
list-style:none; 
float: left; 
margin: 0px; 
padding-left: 15px;
padding-right: 15px;
font-size: 11px;
line-height:24px;
height: 26px;
white-space: nowrap;
border-right: 1px solid #9DA6B3;
}
#mainlevel-nav a {

float: right; 
text-decoration: none;  
color: #304651;
}
#mainlevel-nav a {
float: none;
}
#mainlevel-nav a:hover {
color: #ff6600;

}

a.mainlevel:link, a.mainlevel:visited {
	background: url(../images/menu_bullet.png) no-repeat;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ff6600;
	text-align: left;
	padding-left: 15px;
	height: 18px;
	margin-bottom: 1px;
}

a.mainlevel:hover {
	background-position: 0px -20px;
	text-decoration: none;
	color: #ffffff;
}

.pollstableborder {
	border: 1px solid;
	padding: 1px;
}

a.sublevel:link, a.sublevel:visited {
	padding-left: 1px;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: #ff6600;
	text-align: left;
}

#active_menu {
	color:#ffffff;
	font-weight: bold;
}

a.sublevel:hover {
	color: #ffffff;
	text-decoration: none;
}

a.mainmenu:link, a.mainmenu:visited {
	color: #ffffff; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 11px;
	padding-left:10px;
	padding-right:10px;
}

a.mainmenu:hover {
	color: #D6DF8C; 
	text-decoration: none;
}



a:link, a:visited {
	color: #ff6600; text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #9AB6C2;	text-decoration: none;
	font-weight: bold;
}

a.category:link, a.category:visited {
	color: #ff6600;
	text-decoration: none;
	font-weight: bold;
}

a.category:hover {
	color: #9AB6C2;
	text-decoration: none;
	font-weight: bold;
}

a.pagenav, a.pagenav:visited {
	font-weight: bold;
	color: #ff6600;
	text-decoration: none;
}

a.pagenav:hover {
	color: #9AB6C2;
	text-decoration: none;
}

.frontpageheader {
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	line-height: 30px;
}

.newsfeedheading {
	font-size: 11px;
	font-weight: bold;
	color: #333333;
	text-align:left;
}

.newsfeeddate {
	font-size: 10px;
	color: #666666;
	font-weight: normal;
}

.fase4rdf a:link {
	color: #745632;
	text-decoration: none;
	font-weight: bold;
}

.fase4rdf a:hover {
	color: #cc9900;
}

.componentheading {

	background: url(../images/title_background.png) no-repeat;
	vertical-align: top;
	padding-top: 4px;
	font-size: 11px;
	font-weight: bold;
	color: #cccccc;
	text-align: left;
	text-indent: 15px;
	width: 100%;
	height: 24px;
	text-transform: uppercase;
}

.sectiontableheader {
	background : #293C43;
	color : #ffffff;
	font-weight : bold;
	padding: 3px;
}

.sectiontableentry1 {
	background-color : #0D1315;
	padding: 2px;
}

.sectiontableentry2 {
	background-color : #151E22;
	padding: 2px;
}

div#middle_box .sectiontableentry1 {
	background-color : #3E5867;
	padding: 2px;
}

div#middle_box .sectiontableentry2 {
	background-color : #516B79;
	padding: 2px;
}

div#right_box .sectiontableentry1 {
	background-color : #182327;
	padding: 2px;







}


div#right_box .sectiontableentry2 {
	background-color : #293C43;




	padding: 2px;
}

BODY {
	margin: 0px 0px 0px 0px;
	background: #f7f7f2;
}

td,tr,p,div {
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #cccccc;
}

ul
{
	margin: 0;
	padding: 0;
	list-style: none;
}

li
{
	line-height: 15px;
	padding-left: 15px;
	padding-top: 0px;
	background-image: url(../images/arrow.png) ;
	background-repeat: no-repeat;
	background-position: 0px 3px;
}



.button {
	font-weight: bold;
	border:solid 1px #9DA6B3;
	background-color: #293B42;
	color: #ff6600;
	text-align: center;
	font-size: 9px;
	margin-top: 5px;
}

.inputbox {
	font-weight: normal;
	color: #cccccc;
	background: #000000;
	border: 1px solid #9DA6B3;
}

/* ---------------- unedited below here ----------------------*/

igorivex · 21.12.2004, 22:00

CSS part B:

Code:

/* Styles for dhtml tabbed-pages */
.ontab {
	background-color: #121A1D;
	border-left: outset 1px #9DA6B3;
	border-right: outset 1px #9DA6B3;
	border-top: outset 1px #9DA6B3;
	border-bottom: solid 0px #ffffff;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	color: #ff6600;
}
.offtab {
	background-color: #25343B;
	border-left: outset 1px #9DA6B3;
	border-right: outset 1px #9DA6B3;
	border-top: outset 1px #9DA6B3;
	border-bottom: solid 1px #9DA6B3;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
	color: #cccccc;



}




.tabpadding {
}

.tabheading {
	background-color: #eeeeee;
	text-align: left;

}

.pagetext {
	visibility: hidden;
	display: none;
	position: relative;
	top: 0;
}

h4 {
	color: #cccccc;
	font-size: 16px; font-weight: bold;
}

h5 {
	color: #cccccc;
	font-size: 14px; font-weight: bold;
}

h6 {
	color: #dddddd;
	font-size: 12px; font-weight: bold;
}

/* Horizontal Line */
hr {
	background: #999999; height:1px; border: 1px solid;
}

hr.separator {
	background: #495C5F;
	height: 1px;
	width: 75px;
	border: 0px;
}


/* Content - Sections & Categories */


table.contenttoc {
	color: #333300;
	background-color: #e0e0e0;
}

table.contenttoc td {
	font-size: 8pt;
	font-weight: normal;
	text-align:left;
}

.contentdescription {
	color: #cccccc;
	text-align: left;
}

/** category text format and links **/
.category {
	color: #ff0000;
	font-size: 11px; font-weight: bold; text-decoration: none;
}



.poll {
	font-size: 10px;
	line-height: 14px
}

table.pollstableborder {
	border: 0px;
}

.contentpane {
	background: #121A1D;
}

.smalldark {
	font-size: 11px;
	color: #333333;
	text-decoration: none;
	font-weight: normal;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	background-color: #293C43;
	color: #ffffff;
	font-weight: bold;
}

table

table.contact {
	background-color: #0D1315;
}

table.contact td.icons {
	background-color: #000000;
	font-weight: bold;
}


table.contact td.details {
	background-color: #293C43;
	color: #ffffff;
	font-weight: bold;
}

.pagenav {
	font-weight: normal;
}

.pagenavbar {

}

/* Content voting */
.content_rating {
	font-weight: normal;
	font-size: 8pt;
}

.content_vote {
	font-weight: normal;
	font-size: 8pt;
}

/* Javascript Back button */
.back_button {
	text-align: center;
	margin-top: 40px;
}

.readon {
	margin-bottom: 10px;
	
}

strong {
	color: #ffcc00;
}

Jifor · 21.12.2004, 22:14

Hi.

Start by removing this line near the top:

PHP Code:

 
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';

You should notice that in ie 6 it will look more closely like the FF rendering and it isn't necessary to keep it.

igorivex · 22.12.2004, 02:30

Thanks. made the change. Couldn't see any visual difference though.