How to make the content area wider in some pages...

mglukhovsky · 16.01.2005, 18:43

While I loved the look of rhuk_planetfall, like so many others out there I wanted to have the standard "left menu/content/right menu" format. Seeing as it's under GPL, I modified the template to do exactly that. However, I have two issues.

I used the Mambo->SMF bridge to put a forum in place. However, because the forum was designed for a standard width and I am placing it in a narrower content area, it will truncate some large images and feels overall very...small. You can see what I mean at http://team-rex.net/index.php?option=com_smf&Itemid=42. I'd like to remove the main menu and resize the content block to fill the open space. Any ideas?

Secondly, in Firefox the grey/silver bars at the top appear sized appropriately. But under IE they don't fill the space at the top and look undersized. If anyone has any experience with that, I'd like to hear from them.

If anyone would like me to include my index.php or CSS for the template I'd be happy to provide them.

-Mike

solsikkehaven · 17.01.2005, 13:19

If you are running 4.5.1, you should consider making another template based on your existing template, but with 1 or 2 columns instead of 3. Then assign the neccesary menu pages to the new template.

Jifor · 17.01.2005, 14:40

You will need to edit the template to achieve this.

mglukhovsky · 17.01.2005, 20:57

Quote:

You will need to edit the template to achieve this.

I've already done this (shifted columns around) but still can't acheive the desired effect.

Quote:

If you are running 4.5.1, you should consider making another template based on your existing template, but with 1 or 2 columns instead of 3. Then assign the neccesary menu pages to the new template.

Not a bad idea, but I get the feeling there's a way to accomplish this using the one template. For everyone's benefit, I'll post the template PHP and CSS.

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;?>/images/favicon.ico" />

 
<?php 

global $sc, $context;

 
if (!defined('SMF')){

  require ($mosConfig_absolute_path."/administrator/components/com_smf/config.smf.php");

  require ($smf_path."/SSI.php");

}

 
$sc = &$context['session_id'];

$_SESSION['USER_AGENT'] = $_SERVER['HTTP_USER_AGENT'];

 
?>

</head>

<body class="page_bg">

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

<?php $bodyWidth="920"; ?>

<?php

    $rightBox="769";

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

        $rightBox="618";

        }

?>

<div align="center" >

    <!-- <table class="big_frame"> -->

    <table border="0" cellpadding="0" cellspacing="0" class="big_frame">

    <tr>

        <td colspan="3">

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

        </td>

    </tr>

    <tr>

        <td colspan="2" class="header">

        <br />

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

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

            <table cellpadding="0" cellspacing="1" border="0" width="120" class="contentpaneopen">

            <tr>

                <td class="contentheading" width="145">

                Search

                </td>

            </tr>

            <tr>

                <td>

                <form action='index.php' method='post'>

                <div class="searchblock" id="searchblock">

                Enter Keywords:

                <input size="15" class="inputbox" type="text" name="searchword" style="width:128px;" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />

                <input type="hidden" name="option" value="search" />

                    <div align="left">

                    <input type="submit" value="GO" class="button" style="width:35px;" />

                    </div>

                </div>

                </form>

                </td>

            </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td colspan="3" class="silver_box" style="height:26px;">

        <div id="silver_toolbar">

            <div id="silver_date">

            <?php echo mosCurrentDate(); ?>

            </div>

            <div id="silver_menu">

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

            </div>

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

        </div>

        </td>

    </tr>

    <tr>

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

            <div id="right_box">

                <!-- far right menu -->

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

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

                </div>

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

                <?php

                if ( mosCountModules( "user1" ) ) {

                    mosLoadModules ( 'user1' );

                }

                ?>

                </div>

            </div>

        </td>

        <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 $rightBox; ?>">

                <!-- <br /> -->

                <?php mosPathWay(); ?>

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

        <?php

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

            ?>

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

            <div id="right_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:143px">

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

                    </div>

                    <?php

                } ?>

            </div>

            </td>

            <?php

        }

        ?>

    </tr>

    <tr>

        <td colspan="3">

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

        </td>

    </tr>

    </table>

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

</div>

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

</body>

</html>

mglukhovsky · 17.01.2005, 20:59

CSS:

Code:

/* custom stuff */

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

.header {
	height: 111px;
	background: url(../images/mambo_header.jpg) no-repeat;
}

/* working my way up */

.content_box {
	padding: 8px;
}

.search_box {
	padding: 10px;
}



#silver_date {
	float: right;
	width: 160px;
	text-align: right;
	padding: 3px 10px 0px 0px;
	font-size: 11px;
	font-weight: bold;
	color: #304651;
	white-space: nowrap;
}

#silver_menu {
	overflow: hidden;
	height: 26px;
	width: 400px;
	float: left;
	padding: 0px;
}

#silver_toolbar {
	width: 100%;
}

.silver_box {
	width: 100%;
	border-top: solid 1px #9DA6B3;
	border-bottom: solid 1px #9DA6B3;
	text-align: center;
	background: url(../images/silver_background.jpg) repeat-x;
	padding: 0px 0px 0px 0px;
}

.right_box {
	padding: 5px;
	border-left: solid 1px #9DA6B3;
	background: #2E4452 url(../images/menu2_fade.jpg) repeat-x;
}

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

.searchblock {
	color: #ff6600;
}

.top_right_box {
	border-left: solid 1px #9DA6B3;
	background: #000000;
	padding: 0px;
}

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

.big_frame {
	width: 920px;
	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:left;
	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 ----------------------*/

/* 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;
}

mglukhovsky · 17.01.2005, 21:01

The CSS is a little messy- I haven't got around to cleaning it yet. However, the reason I think this is possible is because the right menu appears/disappears on different pages. There MUST be a way to dynamically change the widths. Possibly it has to do with making alternate CSS that define width.

Thanks for all your help so far!

haaris · 24.01.2005, 18:18

MG,

take a look at rhuk's solarflare template (default with 4.5.1) the trick you're looking for is "sandbox_area". You'll notice that when there are no modules displayed in sandbox 1 or sandbox 2 they disappear, meaning that the center content moves upwards on the screen to fill the void.

divamissx · 24.01.2005, 21:04

And the center content moves downward for other reasons that I haven't quite figure out yet.

I have changed the main outline table to be 95% of the window but having a hard time trying to get the center content width to also be a percentage so I can keep that content where it belongs.

Any ideas?

Stacey

sacr0 · 25.01.2005, 02:18

Quote:

Originally Posted by solsikkehaven

If you are running 4.5.1, you should consider making another template based on your existing template, but with 1 or 2 columns instead of 3. Then assign the neccesary menu pages to the new template.

personally I would have done the same. Like having a template for 'frontpage', 'content' and 'forum' and as you have 'complete' control over the page you want to show and you wouldn't have to worry as much about % and menu's vanishing. So it is quicker as well.