xoops forums

keymaster

Just popping in
Posted on: 2006/2/5 15:39
keymaster
keymaster (Show more)
Just popping in
Posts: 19
Since: 2006/1/5 1
#1

How do I make default template fixed width?

A simple question - how do I make the default XOOPS template into FIXED width?

Thanks.

msdana

Just can't stay away
Posted on: 2006/2/5 16:35
msdana
msdana (Show more)
Just can't stay away
Posts: 817
Since: 2005/12/11
#2

Re: How do I make default template fixed width?

In the stylesheet of your theme, find the table style and change the width from percent to pixel. For example: table width 100%, change to 800px.

Hope that helps!
Dana
If God is watching us, the least we can do is be entertaining.
Graphic Worx : Xoops Themes

THCowboy

Just popping in
Posted on: 2006/3/13 3:11
THCowboy
THCowboy (Show more)
Just popping in
Posts: 84
Since: 2005/6/28
#3

Re: How do I make default template fixed width?

Quote:

msdana wrote:
In the stylesheet of your theme, find the table style and change the width from percent to pixel. For example: table width 100%, change to 800px.

Hope that helps!
Dana


I tried that and here is my results
http://swapol.net/
Why are the links on my menu 800px?

Thanks, Warren

Lance_

Home away from home
Posted on: 2006/3/13 3:45
Lance_
Lance_ (Show more)
Home away from home
Posts: 983
Since: 2004/1/12
#4

Re: How do I make default template fixed width?

Take out the 800px from the table in your css do the following.


Add this to the style.css. Change the width parameter to your liking.
table.toptable table.maintable table.footertable{width90%;margin-leftauto;margin-rightauto;}


Here is the theme.html. Added the "toptable", "maintable", footertable" classes to the tables.

<!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="screen" href="<{$xoops_url}>/xoops.css" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<!-- 
RMVadded module header -->
<{
$xoops_module_header}>
<
script type="text/javascript">
<!--
<{
$xoops_js}>
//-->
</script>
</
head>
<
body>
  <
table class="toptable" cellspacing="0">
    <
tr id="header">
      <
td id="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>logo.gif" width="150" height="80" alt="" /></a></td>
      <
td id="headerbanner"><{$xoops_banner}></td>
    </
tr>
    <
tr>
      <
td id="headerbar" colspan="2">&nbsp;</td>
    </
tr>
  </
table>

  <
table class="maintable" cellspacing="0">
    <
tr>
      <
td id="leftcolumn">
        <!-- 
Start left blocks loop -->
        <{foreach 
item=block from=$xoops_lblocks}>
          <{include 
file="default/theme_blockleft.html"}>
        <{/foreach}>
        <!-- 
End left blocks loop -->

      </
td>

      <
td id="centercolumn">

        <!-- 
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="default/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="default/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="default/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}>

      <
td id="rightcolumn">
        <!-- 
Start right blocks loop -->
        <{foreach 
item=block from=$xoops_rblocks}>
          <{include 
file="default/theme_blockright.html"}>
        <{/foreach}>
        <!-- 
End right blocks loop -->
      </
td>

      <{/if}>

    </
tr>
  </
table>

  <
table class="footertable" cellspacing="0">
    <
tr id="footerbar">
      <
td><a href="https://xoops.org/" target="_blank"><img src="<{$xoops_imageurl}>poweredby.gif" alt="" /></a></td>
    </
tr>
  </
table>
</
body>
</
html>


Cheers.
GDL-Web.com :: Website development.
Xoopslance.com::Freelancing and Projects
thelionsden-arena.net:: Clan/League/Ladder Hosting

THCowboy

Just popping in
Posted on: 2006/3/13 4:02
THCowboy
THCowboy (Show more)
Just popping in
Posts: 84
Since: 2005/6/28
#5

Re: How do I make default template fixed width?

Thanks Lance... but is this going to make it 90% of the screen's width?

I want the theme to actually be a static width so when somebody looked at it on a 19 inch monitor it might look similar to my 14inch laptop monitor.

But I guess even if it was 800px on my page ... if a 19 monitor was set to 800px wide then it would just stretch my theme out over 19 inches?... but at least the scale would stay the same on all monitors if I had it at 800px?

Thanks, Warren

THCowboy

Just popping in
Posted on: 2006/3/13 4:21
THCowboy
THCowboy (Show more)
Just popping in
Posts: 84
Since: 2005/6/28
#6

Re: How do I make default template fixed width?

Okay tried it... worked well except for links in the menu are now too short.

This is my new style.css code

body {colorblackbackgroundwhitemargin0padding0;}

table.toptable table.maintable table.footertable{width800px;margin-left

auto;margin-rightauto;}

table td {padding0border-width0vertical-aligntopfont-familyVerdanaArial

Helveticasans-serif;}


the old code was this

body {colorblackbackgroundwhitemargin0padding0;}


table {width800pxmargin5padding5font-sizesmall}
table td {padding0border-width0vertical-aligntopfont-familyVerdanaArial

Helveticasans-serif;}

kamax

Friend of XOOPS
Posted on: 2006/3/13 12:31
kamax
kamax (Show more)
Friend of XOOPS
Posts: 44
Since: 2005/1/15
#7

Re: How do I make default template fixed width?

May be this helps too...
below the body tag:
<div style="position:absolute; left:120px; top:0px; width: 780px; overflow:hidden;"><...

Lance_

Home away from home
Posted on: 2006/3/13 13:48
Lance_
Lance_ (Show more)
Home away from home
Posts: 983
Since: 2004/1/12
#8

Re: How do I make default template fixed width?

THCowboy,

put back the "width: 100%;"

table {width100%; margin5padding5font-sizesmall}
GDL-Web.com :: Website development.
Xoopslance.com::Freelancing and Projects
thelionsden-arena.net:: Clan/League/Ladder Hosting

THCowboy

Just popping in
Posted on: 2006/3/13 17:47
THCowboy
THCowboy (Show more)
Just popping in
Posts: 84
Since: 2005/6/28
#9

Re: How do I make default template fixed width?

Thanks Lance... looking good now but for some reason I get two cells in my Header.

My theme html code seems to be right

<body>
  <
table cellspacing="0">
    <
tr>
      <
td><img src="themes/default/logo.jpg" width="980" height="150" /></td>
    </
tr>
    <
tr>
      <
td id="headerbar" colspan="2">&nbsp;</td>
    </
tr>
  </
table>



could it be in my style.css?

body {colorblackbackgroundwhitemargin0padding0;}

table.toptable table.maintable table.footertable{width980px;margin-left

auto;margin-rightauto;table}

table {width100%; margin5padding5font-sizesmall}

table td {padding0border-width0vertical-aligntopfont-familyVerdanaArial

Helveticasans-serif;}

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

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul margin2pxpadding2px; list-styledecimal insidetext-alignleft;}
li margin-left2px; list-stylesquare insidecolor#2F5376}

input.formButton {}

.
item {border1px solid #cccccc;}
.itemHead {padding3pxbackground-color#2F5376; color: #FFFFFF;}
.itemInfo {text-alignrightpadding3pxbackground-color#efefef}
.itemTitle a {font-size130%; font-weightboldfont-variantsmall-capscolor#ffffff; 

background-colortransparent;}
.
itemPoster {font-size90%; font-style:italic;}
.
itemPostDate {font-size90%; font-style:italic;}
.
itemStats {font-size90%; font-style:italic;}
.
itemBody {padding-left5px;}
.
itemText {margin-top5pxmargin-bottom5pxline-height1.5em;}
.
itemText:first-letter {font-size133%; font-weightbold;}
.
itemFoot {text-alignrightpadding3pxbackground-color#efefef}
.itemAdminLink {font-size90%;}
.
itemPermaLink {font-size90%;}

th {background-color#2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; 

font-familyVerdanaArialHelveticasans-serif;}

td#headerbanner {width: 100%; background-color: #2F5376; 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: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; 

font-weightbold;}
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}


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

td#centercolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; 

margin-top0pxmargin-right0px;  margin-left0px;}
td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid 

#cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-right: 0px;  margin-left: 

0pxmargin-bottom2pxline-height120%;}

td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; 

margin-top0px;}
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid 

#cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 3px; margin-right: 

2pxmargin-bottom2pxline-height120%;}

td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #639ACE; font-weight: bold; 

margin-top0px;}
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid 

#cccccc; border-bottom: 1px solid #dddddd; padding: 3px; margin-left: 2px; margin-right: 

3pxmargin-bottom2pxline-height120%;}

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

td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:12px;}
td#rightcolumn th {background-color: #2F5376; color: #FFFFFF; vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px; background-color: #dddddd; color: #639ACE; 

font-weightbold;}
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: #e6e6e6; display: block; margin: 0; padding: 4px; 

border-right1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid 

silver;}
td#usermenu a:hover {background-color: #ffffff;}
td#usermenu a.menuTop {border-top: 1px solid silver;}
td#usermenu a.highlight {background-color: #fcc;}



.outer {border1px 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-left1px 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-bottom1px solid #AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg background-color #CCCCCC; color: #333333; text-align: center; border-top: 

1px solid silverborder-left1px solid silverfont-weightboldborder-right1px 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: #2F5376; 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: #2F5376; 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;}



Thanks, Warren

P.S Thanks kamax for your input too

Lance_

Home away from home
Posted on: 2006/3/13 17:55
Lance_
Lance_ (Show more)
Home away from home
Posts: 983
Since: 2004/1/12
#10

Re: How do I make default template fixed width?

You'll need to take out the colspan="2" in theme.html. You are telling that column to span over two columns, but since you deleted one column from above it messes up.
GDL-Web.com :: Website development.
Xoopslance.com::Freelancing and Projects
thelionsden-arena.net:: Clan/League/Ladder Hosting