Loading...
 
Skip to main content

Bundled and Legacy Themes

Forum List Topic List

Forums » Bundled and Legacy Themes » dblue as centered page
 
Thread actions
Print this page
  • Print all pages

    • dblue as centered page

    Posted by atma on Mon 25 of Jun, 2007 07:37 GMT-0000 posts: 1 Wales
    We have developed a site using using dblue.css but would now like to make the site centred and fixed width like kubrick, planetfall or twist. What is the best way to do this?
    Reads: 18229
    Posted by Gary Cunningham-Lee on Tue 26 of Jun, 2007 03:24 GMT-0000 posts: 254 Japan

    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:

    Copy to clipboard
    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:

    Copy to clipboard
    (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

    Copy to clipboard
    (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:

    Copy to clipboard
    (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

    Copy to clipboard
    {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