1
djsckizo
Centering the theme
  • 2003/12/9 9:26

  • djsckizo

  • Just can't stay away

  • Posts: 401

  • Since: 2003/5/9 8


If I wanted to center the Default theme, what would I change? After changing the body in the css to 800px, what would I have to change to make it centered instead of to the left?

2
ackbarr
Re: Centering the theme

Well, I tried to solve this without modifying the default/theme.html file at all, but I could not figure out a cross-browser solution. In the end made 3 small changes to theme.html and added some styles to style.css. If you have already modified the outer tables to 800px, you can ignore the changes to default/theme.html

in default/theme.html change
<body>
  <
table cellspacing="0">

to
<body>
  <
table cellspacing="0" [b]class="main"[/b]>

change
</table>

  <
table cellspacing="0">
    <
tr>
      <
td id="leftcolumn">

to
</table>

  <
table cellspacing="0" [b]class="main"[/b]>
    <
tr>
      <
td id="leftcolumn">

and change
</table>

  <
table cellspacing="0">
    <
tr id="footerbar">

to
</table>

  <
table cellspacing="0" [b]class="main"[/b]>
    <
tr id="footerbar">


Now add the following to style.css, preferably near the top
/* Center with IE */
body {text-align:center;}
body * {text-align:left;}

/* Center with other browsers */
body table {margin:0 auto;}

/* Set 'main' tables to 800px */
table.main {width:800px;}


This solution has been tested in Firebird 0.7, Mozilla 1.5, Netscape 7.1, IE 6, IE 5.5, and Opera 7

Related Links:
Centering Content with CSS
Default theme css with comments

3
basby
Re: Centering the theme
  • 2003/12/9 15:53

  • basby

  • Not too shy to talk

  • Posts: 109

  • Since: 2003/1/28


I have tried previously to make the width of my site of fixed size (800 pixels). I found out that modules (wfsection e.g.) contain width="100%" definitions. This made that my changes didn't work out and I gave up (I rather do not make any changes in modules code).

Do you expect the above to work for all modules as well or do I still have to make changes in them as well?

Basby

4
studioC
Re: Centering the theme
  • 2003/12/9 16:04

  • studioC

  • Friend of XOOPS

  • Posts: 922

  • Since: 2003/12/7


hello,
a cross browser solution should be this:
in your theme.html ..
<body style="text-align:center;">
<div style="width:800px;margin:0px auto;text-align:left;">
....
...
...
and close the <div> before your </body> !!
...
</div>
</body>


hope, this will work..
from GERMANY,
michael

5
ackbarr
Re: Centering the theme

if you fix the containing tables to a certain width, the underlying tables should be 100% of the container's width, not the body's width. ATM I don't have wfsections loaded on my development site to test so YMMV.

6
ackbarr
Re: Centering the theme

Thanks michael for your additional solution. In hindsight, your way is much simplier, although I would move that embedded style into the style.css to be cached by the browser, and to make future site modifications easier to understand.

7
basby
Re: Centering the theme
  • 2003/12/9 16:30

  • basby

  • Not too shy to talk

  • Posts: 109

  • Since: 2003/1/28


Michael your a hero! It even works for me

Ackbar, you're right. The underlying modules obey the table restrictions.

Basby

8
djsckizo
Re: Centering the theme
  • 2003/12/13 0:54

  • djsckizo

  • Just can't stay away

  • Posts: 401

  • Since: 2003/5/9 8


I think the internet is working against me because it doesn't seem to be working for me.

9
djsckizo
Re: Centering the theme
  • 2003/12/13 6:43

  • djsckizo

  • Just can't stay away

  • Posts: 401

  • Since: 2003/5/9 8


Hmm...I might need some help with this then because it won't center for me. I may have something screwed up (this is me remember lol). It is a modified version of the default theme:

Quote:

Theme.html
<!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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="all" href="<{$xoops_themecss}>" />
<!-- RMV: added module header -->
</head>
<body>
<p><{$xoops_module_header}>
<script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
</p>

<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#000000"><a href="http://quintina.com/melorawalters"><img src="http://quintina.com/melorawalters/top.jpg" width="800" height="90" alt="Melora Walters" border="0"></a></td>
</tr>
<tr>
<td background="http://quintina.com/melorawalters/table1.jpg" height="20" align="right"><a href="http://www.quintina.com/melorawalters/viewpmsg.php">Inbox</a>
<a href="http://www.quintina.com/melorawalters/user.php">MyAccount</a>
<a href="http://www.quintina.com/melorawalters/user.php?op=logout">Logout</a></td>
</tr>
</table>

<table cellspacing="0" width="800">
<tr>
<td id="leftcolumn" bgcolor="#000000">&nbsp;</td>
<td id="centercolumn" bgcolor="#AA728F">&nbsp;</td>
</tr>
<tr>
<td id="leftcolumn" bgcolor="#000000">
<!-- Start left blocks loop -->
<p><{foreach item=block from=$xoops_lblocks}> <{include file="melora/theme_blockleft.html"}>
<{/foreach}>
<!-- End left blocks loop -->
</p>
<p>
<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}> <{include file="melora/theme_blockright.html"}>
<{/foreach}>
<!-- End right blocks loop -->
</p>
</td>
<td id="centercolumn" bgcolor="#AA728F">
<!-- Display center blocks if any -->
<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr>

<td id="centerCcolumn" colspan="2">
<!-- Start center-center blocks loop -->
<{foreach item=block from=$xoops_ccblocks}> <{include file="melora/theme_blockcenter_c.html"}>
<{/foreach}>
<!-- End center-center blocks loop -->
</td>
</tr>
<tr>

<td id="centerLcolumn">
<!-- Start center-left blocks loop -->
<{foreach item=block from=$xoops_clblocks}> <{include file="melora/theme_blockcenter_l.html"}>
<{/foreach}>
<!-- End center-left blocks loop -->
</td>

<td id="centerRcolumn">
<!-- Start center-right blocks loop -->
<{foreach item=block from=$xoops_crblocks}> <{include file="melora/theme_blockcenter_r.html"}>
<{/foreach}>
<!-- End center-right blocks loop -->
</td>
</tr>
</table>
<{/if}>
<!-- End display center blocks -->
<div id="content"> <{$xoops_contents}> </div>
</td>
<{if $xoops_showrblock == 1}> <{/if}> </tr>
</table>
</body>
</html>


Quote:

Stylesheet
body {color: black; background: #D9E3F3; center; width: 800px}

table {width: 100%; margin: 5 5; padding: 5 5; font-size: small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Arial, Helvetica, sans-serif;; font-size: 12px}

a {color: #000000; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color: #000000;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #000000}

input.formButton {}

.item {border: 0px solid #cccccc;}
.itemHead {padding: 3px; background-color: #ffffff; color: #000000;}
.itemInfo {text-align: right; padding: 3px; background-color: #D9E3F3}
.itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #000000; background-color: #ffffff;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 0px;}
.itemText {margin-top: 0px; margin-bottom: 0px; line-height: 1.5em;; background-color: #FFFFFF; margin-right: 0px; margin-left: 0px; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px}
.itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background-color: #D9E3F3}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

.fieldset { color: #000000;; background-color: #000000}


th {background-color: #000000; color: #ffffff; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}

td#headerbanner {width: 800px; background-color: #ffffff; vertical-align: middle; text-align:center;}
td#headerbar {border-bottom: 1px solid #dddddd; background-image: url(hbar.gif);}

td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:12px;}
td#leftcolumn th {background-color: #ffffff; color: #000000; vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #000000; color: #AA728F; font-weight: bold;; font-family: Arial, Helvetica, sans-serif; font-size: 16px}
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;; font-family: Arial, Helvetica, sans-serif; font-size: 10px}


td#centercolumn {font-size: 12px;}

td#centercolumn th {background-color: #ffffff; color: #000000; vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px 3px; color: #FFFFFF; font-weight: bold;; margin: 0px 0px; background-color: #FFFFFF}
td#centerCcolumn div.blockContent {border-left: 0px solid #cccccc; border-right: 0px solid #cccccc; border-bottom: 0px solid #dddddd; padding: 3px 3px; line-height: 120%;; background-color: #FFFFFF; margin: 0px 0px}

td#centerLcolumn {width: 50%; padding: 3px 3px;}
td#centerLcolumn legend.blockTitle {padding: 3px 3px; color: #639ACE; font-weight: bold;; background-color: #FFFFFF; margin: 0px 0px; width: 98%}
td#centerLcolumn div.blockContent {border-left: 0px solid #cccccc; border-right: 0px solid #cccccc; border-bottom: 0px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px; line-height: 120%;}

td#centerRcolumn {width: 50%; padding: 3px 3px;}
td#centerRcolumn legend.blockTitle {padding: 3px 3px; color: #639ACE; font-weight: bold;; background-color: #FFFFFF; margin: 0px 0px; width: 98%}
td#centerRcolumn div.blockContent {border-left: 0px solid #cccccc; border-right: 0px solid #cccccc; border-bottom: 0px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px; line-height: 120%;}

div#content {text-align: left; padding: 8px;}

td#rightcolumn {width: 170px; border-left: 0px solid #cccccc; font-size:12px;}
td#rightcolumn th {background-color: #ffffff; color: #000000; vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px 3px; color: #000000; font-weight: bold;; width: 160px; background-color: #AA728F}
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}

tr#footerbar {text-align:center; background-image: url(hbar.gif);}

td#mainmenu a {background-color: #e6e6e6; display: block; margin: 0; padding: 4px;}
td#mainmenu a:hover {background-color: #ffffff;}
td#mainmenu a.menuTop {padding-left: 3px; border-top: 1px solid silver; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuMain {padding-left: 3px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}
td#mainmenu a.menuSub {padding-left: 9px; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid silver;}

td#usermenu a {background-color: #000000; display: block; margin: 0; padding: 0px; border-right: 0px solid #666666; border-bottom: 0px solid #666666; border-left: 0px solid silver;}
td#usermenu a:hover {background-color: #000000;}
td#usermenu a.menuTop {border-top: 0px solid silver;}
td#usermenu a.highlight {background-color: #fcc;}



.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}

div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid #DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666; border-bottom: 1px solid #666666; padding: 10px;}

div.xoopsCode { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}
div.xoopsQuote { background: #FFFFFF; border: 1px inset #000080; font-family: "Courier New",Courier,monospace; padding: 0px 6px 6px 6px;}


.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #000000; font-weight:bold; border: 1px solid silver; background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #000000; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}


Note: I'm still working out the color scheme at the moment so nothing in the color patterns are definte as some of the links clash with the backgrounds.

10
studioC
Re: Centering the theme
  • 2003/12/13 9:00

  • studioC

  • Friend of XOOPS

  • Posts: 922

  • Since: 2003/12/7


hello djsckizo,

normally it#s simple .. please change the lines as i told above ....

-change your body tag
<body style="text-align:center;">

-fill in div tag after the body tag
<div style="width:800px;margin:0px auto;text-align:left;">

-close div tag before the </body> tag
</div>

that SHOULD work!

some lines in your style.css which may cause your problem:

quote:
body {color: black; background: #D9E3F3; center; width: 800px}

- delete center;[missing align:?] put,place ";" after 800px


table {width: 100%; margin: 5 5; padding: 5 5; font-size: small}

- delete width:100%; put, place ";" after small


hope this will help
from GERMANY
michael

Login

Who's Online

163 user(s) are online (131 user(s) are browsing Support Forums)


Members: 0


Guests: 163


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: May 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits