Bundled and Legacy Themes

Posted by Gary Cunningham-Lee on Tue 26 of Jun, 2007 03:24 GMT-0000 posts: 254

The simplest way is to edit dblue.css, to reduce the width of the main div containing the content and center it on the page.

Add text-align: center to the body selector. The change or add these:

DIV#tiki-main {
	width:   85%; /* or some pixel width, etc., changed from 100% */
	margin-right:   auto; /* changed from 0px */
	margin-left:   auto; /* changed from 0px */
	text-align: left; /* added */
}

But that might not give the best results. In a test with Opera, on pages with wide content, the left margin was maintained but the page pushed to the right, rather than both margins narrowing equally. I didn't check with other browsers.

If that method doesn't work for your site, the next option is to use a modified tiki.tpl file. dblue uses the default tiki.tpl template, so for it to have/use a modified version, you'll have to make a new directory in templates/styles/ named dblue, and put a copy of templates/tiki.tpl in that directory. Then modify the new templates/styles/dblue/tiki.tpl as follows.

The other centered themes use variations to get the effect, but all have one or more additional tables enclosing the page content. The new table gets the width applied and margins specified, one way or another.

The top of Kubrick's tiki.tpl looks something like this:

(table align="center" cellpadding="0" cellspacing="0" border="0" width="100%" align="center")
	(tr)
	(td)
	(table id="tiki-main" border="0" cellspacing="0" cellpadding="0" align="center" width="760")

and from kubrick.css:
div#tiki-main {
	text-align: center;
	margin: 0 auto 0 auto;
}

Twist's tiki.tpl has

(table dir="rtl" align="center" border="0" cellspacing="0" cellpadding="0" )(tr)(td)
(table align="center" border="0" cellpadding="0" cellspacing="0")(tr)(td)

and from twist.css:
BODY {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 11px; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; BACKGROUND-COLOR: #0F1644; BACKGROUND: url(twist/background.gif);
 
}
TABLE.maintext {
	WIDTH: 831px
}

Planetfall tiki.tpl:

(table width="798" border="0" cellspacing="0" cellpadding="0" align="center")(tr)(td)
(div id="tiki-main")
(div id="tiki-top")

(planetfall.css doesn't have anything special for this aspect of the layout.)

These should give some ideas. Don't forget to put corresponding table closing tags at the bottom of tiki.tpl, maybe something like

{if $feature_bidi eq 'y'}
(/div)
(/td)(/tr)(/table)
{/if}
{include file="footer.tpl"}

(nearby lines included to indicate location).

Narrowing the page could cause other complications where center-column components expect to have more width. If so, compare with other themes to find solutions.

-- Gary