Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Fixing page width


VJ

Recommended Posts

Hello,

 

Here's a simple solution to fix/vary the osc page widths (to say, 750 pixels) from the default value (100%) which stretches across the browser window. It might sound way too simple (and, actually it is), and I've seen it on many osc sites. Anyway, here's how I did it...

 

1. In <your-path-to-osc>/catalog/includes/application_top.php,

 

add this definition

 

  define('PAGE_WIDTH', '750'); // how wide the pages should be, in pixels (default: '100%')

 

 

2. In <your-path-to-osc>/catalog/includes/header.php,

 

change this line(around line 50)

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">

 <tr class="header">

 

to

 

<table border="0" width="<?php echo PAGE_WIDTH; ?>" cellspacing="0" cellpadding="0">

 <tr class="header">

 

-----------------

 

Then, change this (around line 57)

 

<table border="0" width="100%" cellspacing="0" cellpadding="1">

 <tr class="headerNavigation">

 

to

 

<table border="0" width="<?php echo PAGE_WIDTH; ?>" cellspacing="0" cellpadding="1">

 <tr class="headerNavigation">

 

------------------

 

Finally, add this right at the end

 

<table border="0" width="<?php echo PAGE_WIDTH; ?>" cellspacing="0" cellpadding="0">

 <td width="100%">

 

 

3. In <your-path-to-osc>/catalog/includes/footer.php,

 

add this to the beginning

 

  </td>

</table>

 

-------------------

 

And, change this (around line 15)

 

<table border="0" width="100%" cellspacing="0" cellpadding="1">

 <tr class="footer">

 

to

 

<table border="0" width="<?php echo PAGE_WIDTH; ?>" cellspacing="0" cellpadding="1">

 <tr class="footer">

 

 

I've just changed the table widths of the header, headerNavigationBar and footer, and wrapped the page body in a table of fixed width.

 

VJ

Link to comment
Share on other sites

  • 4 weeks later...

Great tip thanks, been looking at how to do this for ages, would just like to add for the benefit of the newbies like me.

 

As well as defining the page as in pixels you can do % too, simply just add the % sign in like this

 

 define('PAGE_WIDTH', '95%');

 

Also if you want the page centred just add the good ol html tag align="center" into the code like this

 

<table border="0" align="center" width="<?php echo PAGE_WIDTH; ?>" cellspacing="0" cellpadding="0">

 

Very simple and obvious but it took me ages, so it might save someone else a bit of time!

Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...
  • 1 month later...

how can I set widths of the body/main part but not the header & footer?

 

I want the header & footer to be 100% width but the body/main to be 500 pixels, can it be done?

 

Thanks

 

Steve

Link to comment
Share on other sites

Around lines 48-9, you should see the following in index.php:

<!-- body //-->

<table border="0" width="100%" cellspacing="3" cellpadding="3">

Change this to

<!-- body //-->

<table border="0" width="750" cellspacing="3" cellpadding="3">

I haven't tried it, but that should work. Note: you are saying 750 rather than 500 because you need to account for the column widths here as well. Further, you would need to make this modification on each page (index.php, login.php, product_info.php, etc.).

 

Hth,

Matt

Link to comment
Share on other sites

Needs installed: BTS v1 (basic template system) + "patch a", I don't know if it can be done easy without it.

 

Then edit catalog/templates/main_page.tpl.php

change:

<body >

to:

<body >

<div id="siteBorder">

 

and change (at the end of the file offc.):

</body>

to:

</div>

</body>

 

and edit catalog/stylesheet.css :

add (where ever you like):

/* added styles PM*/

body {text-align: center;}

div.siteBorder {margin: 10px auto; width: 790px;}

/* end new added styles PM*/

You can skip the /* comment */ ofcourse

Both "text-align: center" and "margin: auto" are essential to center both in IE and Mozilla/Netscape!

 

working example at: http://www.televisiedokter.nl/catalog/

 

usefull to someone? I really hope so!

Link to comment
Share on other sites

Sorry, I made an important mistake! :oops:

(is there a way to edit posts? please tell me)

 

div.siteBorder {margin: 10px auto; width: 790px;}

 

should be

div#siteBorder {margin: 10px auto; width: 790px;}

 

so the "." (refers to class) should be an "#" (refers to id)

Link to comment
Share on other sites

  • 2 months later...

I would go with VJ's post.. i got it all sorted in about 5 mins flat!!

much easier.. and very effective, with a few tweaks.. and still tweakin!! ;)

 

www.distraektrecords.com/shop

Link to comment
Share on other sites

After trying to use the Center Shop contribution and running into too many problems with it (including emailing the author of the contribution and getting brushed aside and informed that the author no longer even uses Center Shop), I ditched this contribution from my files and wiped it from my database in favor of a solution I found that is more simple than anything posted in this thread:

 

Open your header.php, and paste the following immediately after "Released under the GNU General Public License */":

 

//begin dead easy outer table

 

print ('<table width="800" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#172799" border-right: 2px solid #b3b3b3;

border-bottom: 2px solid #b3b3b3;>

 

<tr>

<td bgcolor="#fbfbff">');

 

//end dead easy outer table

 

You will have to change the width, spacing, padding, colors, etc, to fit your site but it WORKS.

Don't believe me? Click on the "www" below and have a look for yourself.

Good luck :).

Link to comment
Share on other sites

Kenneth,

 

I could be wrong but this may be a caching problem: When I first clicked on your link, the site was at full screen width (1024 for me). I closed it and went back and it was centered...I looked around the site but not once did it increase in width.

Link to comment
Share on other sites

  • 1 year later...

None of these seem to allow any resizing. I've got to have something overriding all of this but I don't know where to look.

 

Any thoughts?

Link to comment
Share on other sites

  • 2 weeks later...

I've got a fixed width for the center column working by changing / adding code in application_top, Header, Footer, and main_page.tpl. I've got one problem: when you click on one of the category links (on the left) the center of the resulting page does not reflect the changes. Any ideas what file I've missed?

Link to comment
Share on other sites

You are complicating the fix. To apply a fixed width you need one change in includes/header.php and one in includes/footer.php. There's no need to touch any other file. See any of the center shop contributions or search the forums for "center shop" on how to do this. It gets asked every week.

 

Jack

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

  • 4 months later...

I'm very very new to oscommerce and php code. I understand where to make the change (includes/header.php and includes/footer.php) but where exactly in the two files . :blush:

 

Can I have a copy of the codes to see where exactly I have to make the change in the two files ?

 

Thanks

 

Monique

 

P.S. English is not my first language so excuse my mistakes ! ;)

Link to comment
Share on other sites

The code in header.php goes before the first html code. The code in footer goes at the end of the file. The best way to see it is to download oneof the Center Shops contributions. They explain how to do it.

 

Jack

Support Links:

For Hire: Contact me for anything you need help with for your shop: upgrading, hosting, repairs, code written, etc.

Get the latest versions of my addons

Recommended SEO Addons

Link to comment
Share on other sites

I implemented the Fixed Width contrib and am having a slight problem. I originally had eliminated column_right as I didn't want it. Now, my text is centered in main as if the column is still there. I would like the text to reach all the way to the edge of main with a tab indent on the right side to keep it looking smooth.

 

Also, my footer nav bar does not stretch across like the header nav bar does.

 

I have messed with the css, index, english and footer files but none of them are giving me the results I am looking for. Its probably one of those "smack in the head" simple things I overlooked.

 

Any help is appreciated.

Lori

Link to comment
Share on other sites

I implemented the Fixed Width contrib and am having a slight problem.  I originally had eliminated column_right as I didn't want it.  Now, my text is centered in main as if the column is still there.  I would like the text to reach all the way to the edge of main with a tab indent on the right side to keep it looking smooth.

 

Also, my footer nav bar does not stretch across like the header nav bar does.

 

I have messed with the css, index, english and footer files but none of them are giving me the results I am looking for.  Its probably one of those "smack in the head" simple things I overlooked.

 

Any help is appreciated.

Lori

 

 

Footer is working, but text is still not going to the right as far as I would like.

Link to comment
Share on other sites

Not only is bumping not allowed, double posting is not allowed either.

 

As I've already said, the only reason you're having problems on your index.php page is because you messed about with the table structure. As for the text not going as far right as you'd like it - there will always be some sort of margin imposed by the browser, even if you set all margins to zero.

 

Vger

Link to comment
Share on other sites

Someone correct me if I'm wrong .. but isn't it better to have the header tables (and everything else except for the side boxes) set to 100% in order to accomodate all browsers and screen resolutions?

 

I tested my site in in both low and high resolutions .. and IE6 ,mozilla and Opera in both resolutions and this seems to be the way to keep all the possible combinations happy.

 

:huh:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...