Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How to change Page Width from default 100%


bstafford21

Recommended Posts

Hi,

 

Looking for more help on changing the page widths wider than the default they are on now at 100%

 

I have changed each main tables width from "100%" to "770" on:

catalog/includes/header.php

catalog/index.php

 

Here is the table line I have changed in: catalog/includes/header.php

 

<table border="0" width="770" cellspacing="0" cellpadding="1">

<tr class="headerError">

<td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>

</tr>

</table>

 

 

Also changed the table line in : catalog/index.php

 

<h1><?php echo $category['categories_name']; ?></h1>

 

<div class="contentContainer">

<div class="contentText">

<table border="0" width="770" cellspacing="0" cellpadding="2">

<tr>

<?php

 

What I see is no change at all, so I must be missing a file to change or have done this in the wrong place. I am using ocCommerce 2.3 and my site is:

 

handcraftdesigns.co.uk

 

Can someone point me in the right direction so I can change the width of the site, there is too much wasted space and would like to increase the column widths, but can't do that until I change the all the page widths.

 

Thanks for any help, have done alot of reading and searching so far, but I must be missing something.

 

Regards

Bill

Link to comment
Share on other sites

Do a google search for 960 grid system. This is what controls most of oscommerce. For some reason the developers used this system and not pure css for the layout.

 

If you just want to change the column widths try having a look at http://www.oscommerce.com/forums/topic/369256-change-left-column-width/

REMEMBER BACKUP, BACKUP AND BACKUP

Link to comment
Share on other sites

@@Steve,

 

Hi, thanks for the point, have now done more research and found 1st the reference on how to change the No of columns and the width, this is great, even found now where to go to change the script lines in the [catalog]includes/template_top.php

 

Now the problem I am seeing is my template I bought, must be using jquery instead, here is the lines that reference this, so now do I need to do more research and figure out my template uses this code and change the jquery-ui-1.8.22.css file?

 

Please point me, my direction is getting zig zag now, wow.

 

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.22.css" />

<script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>

 

<script type="text/javascript">

// fix jQuery 1.8.0 and jQuery UI 1.8.22 bug with dialog buttons; http://bugs.jqueryui.com/ticket/8484

if ( $.attrFn ) { $.attrFn.text = true; }

</script>

 

<?php

if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {

?>

<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>

<script type="text/javascript">

$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);

</script>

<?php

}

?>

 

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />

<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<?php echo $oscTemplate->getBlocks('header_tags'); ?>

</head>

<body>

Link to comment
Share on other sites

Have been reading this forum and on the 960grid system, but still can't tell what is actually controlling the width of the page. I can add to 24, don't want to change the column width, but can't at this point find the correct answer. If your just going to tell me to read something else and not help, then no comment would be appreciate.

 

Have seen posts from you asking for help and you did get help, you were not told to go read something else, you got your answer, so with respect maybe you can help me or not.

Link to comment
Share on other sites

Hi Bill,

 

Not so difficult Multimixer had a great blog on changing widths as Steve says it is controlled by the 960grid system you need to change the 960_24_col.css

 

http://multimixer.gr/17/01/2011/change-the-width-of-your-oscommerce-store/

 

So you will have to read the blog as it is the only way to learn how :-

 

Regards

Joli

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

Cheers Joli, continuing to read, maybe it becomes a blur after awhile and your eyes and brain don't agree on what is read.

Just finding the right area and make sense of it all is the hardest part for me, as I am learning and it's all new to me mate.

 

Appreciate the help, now also now which file is affected and may be more.

 

Regards

Bill

Link to comment
Share on other sites

Hi Joli,

 

I have actually already read this blog and have gone thru the steps, however when I came to the section of my file, it does not match what the blog explains when I create a new file, but have downloaded the updated file called - "fluid_grid.css."

 

In my web I have [catalog]includes/template_top.php file and in the area of line 47 of the example blog explanations is where I have the line:

<link rel="stylesheet" section located, here are the lines: It points to the jquery css file,

 

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6-osc.css" />

 

<script type="text/javascript" src="ext/jquery/jquery-1.4.3.min.js"></script> <!-- -->

 

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

 

 

So what I need to know for sure, am I replacing this "jquery-ui-1.8.6-osc.css" file in the directory location it states? This is where my confusion and understanding is, actually sorted asked that when I was told to read again.

 

The section of the blog states:

Step 3: Activate the new page width

 

Last step is to “tell” to our store to use the new stylesheet that will set the new width. To do this we need to go to file [catalog]/includes/template_top.php and change the path to the css file. This path is set in following line:

 

 

47

 

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />

This we change to

 

 

47

 

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>1032_24_col.css" />

 

Will I then not be using the "jquery-ui-1.8.6-osc.css" at all and only 960 grid system file? Maybe they are used in conjunction or referenced in other areas, but since I am still learning, I don't know how it is affected. I have my backups and can play and see what happens, but am I doing this correctly?

 

Regards

 

Bill

Link to comment
Share on other sites

Well you are changing first of all only the one stylesheet ext/960gs

 

 

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />

 

Forget the js files they should all stay the same it is just the one css you are changing upload and then you have ONLY the one change to make in template top.

 

You will probably have to tweak your design a bit to suit the new width but first change and see what you have got.

see you have increased to 1034 ok.

Regards

Joli

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

I do understand better now, thanks Joli for the reply on that question.

 

But also as I go thru this "template_top.php" file, how do I know I am changing the right area of the file?

 

You see there are 2 areas of this section that have the <link rel="stylesheet" type.

 

Do I modify all 3 lines or only the reference to the "ext/960gs" ? how do you know which is the correct one, trial and error?

 

This is the head section listed below of my [catalog]includes/template_top.php, this is where I will make the change as shown in Step 3 of this blog "How to change your width in your osCommerce Store keeping the 960 grid system"

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />

<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />

<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.22.css" />

<script type="text/javascript" src="ext/jquery/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.22.min.js"></script>

 

<script type="text/javascript">

// fix jQuery 1.8.0 and jQuery UI 1.8.22 bug with dialog buttons; http://bugs.jqueryui.com/ticket/8484

if ( $.attrFn ) { $.attrFn.text = true; }

</script>

 

<?php

if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {

?>

<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>

<script type="text/javascript">

$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);

</script>

<?php

}

?>

 

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />

<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

<?php echo $oscTemplate->getBlocks('header_tags'); ?>

</head>

 

Regards

Bill

Link to comment
Share on other sites

Now that I go by what has been said Joli, I will ignore the Javascrpt sections and only update the <link rel="stylesheet", I have replaced the name of >960_24_col.css with the new file and name of "fluid_grid.css in the /ext/960gs directory. Have refreshed everything and see in the website that nothing has changed with this new file I updated.

 

Have I missed something and not completed all the changes? I thought this to be the only required change for the stylesheet?

 

Regards

Bill

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...