Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Width of template 2.3.1 ?


rusty1001

Recommended Posts

ok, I enabled a module in the right and left column, and viewed the source. This has helped to see the page as one unit. I see the grids and pull in the divs.

 

Having a rough time finding what file those div's are located in...

 

Was easier when we had right / left.php's ...lol

Link to comment
Share on other sites

Every page? I was hoping I could leave all the other pages and just mod the index.

 

I'm sure you could do that, it will be a bit of a brain teaser, though. If you figure it out, you'll have acquired an excellent grasp of the structure and can start advising the rest of us.

 

Perhaps you could do this by duplicating template_top and naming the duplicate somthing like template_top_indexonly.php. Then in the index file call that file instead. Then you could change this line in template_top.php to suit what you wanted to do for the other pages:

 

<div id="bodyContent" class="grid_<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'push_' . $oscTemplate->getGridColumnWidth() : ''); ?>">

 

PS - there is nothing wrong with hard coding the class designation instead of using

<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'push_' . $oscTemplate->getGridColumnWidth() : ''); ?>

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Understanding the grid is coming round.

 

Without any left right modules on the index page, I had the content placed with div's and tables. After watching the video tutorial Understanding the 60 grid found on www.960gs.com, I rebuilt my index page content using grid div's. Now, I understand and can work the 960.

 

It can have design placement limitations, depending what your placing, but overall, it does have advantages also.

 

So I now have things gridded, alpha'd, omega'd,and prefix'd...

 

***

 

I had to learn how to work the grid first before I continued on.. So now I am just getting back to my original post here on this thread and your responses. Let's see where I get, and will report back. Thanks for the help.

Link to comment
Share on other sites

I liken the limitations of a grid system to the limits graph paper puts on the shape of graph drawn on it. You can almost spot a 960, or other grid system website simply because of the pleasing proportions or the consistency in the width of the columns.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

  • 3 months later...

1. step

960_24_col.css file

 

body { min-width: 960px; }
.container_24 { margin-left: auto; margin-right: auto; width: 960px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7,
.grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, 
.grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19,
.grid_20, .grid_21, .grid_22, .grid_23,
.grid_24 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4,
.pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7,
.push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11,
.pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14, 
.pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17,
.pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20,
.pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 { position: relative; }
.container_24 .grid_4 { width: 180px; }
.container_24 .grid_16 { width: 600px; }
.container_24 .grid_24 { width: 950px; }
.container_24 .push_4 { left: 190px; }
.container_24 .pull_16 { left: -610px; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

 

2. step

Edit stylesheet.css

 

#columnLeft { width: 180px;
 padding-top: 5px;
}

#columnRight { width: 150px;
 padding-top: 5px;
}

 

3 step :thumbsup:

 

 

Click here: http://pasztoy.hu/demo/index.php?language=en select the humanity template - 180-630-150px

 

 

Hello DiabloCorsa

 

I tried to change my shop width, but i can not change width, so, Can you help me to get code where shop max width is 745pix.

thank you if you have time to help me.

 

- ilmo -

Link to comment
Share on other sites

  • 3 weeks later...

I do hope you can help me - I'am close of getting crazy:

 

I did all the steps DiablOCorsa mentioned on page 1 of this thread and replace the content of my 960_24_col.css with the css form the sample

body { min-width: 960px; }
.container_24 { margin-left: auto; margin-right: auto; width: 960px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7,
.grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, 
.grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19,
.grid_20, .grid_21, .grid_22, .grid_23,
.grid_24 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4,
.pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7,
.push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11,
.pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14, 
.pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17,
.pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20,
.pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 { position: relative; }
.container_24 .grid_4 { width: 180px; }
.container_24 .grid_16 { width: 570px; }
.container_24 .grid_24 { width: 950px; }
.container_24 .push_4 { left: 190px; }
.container_24 .pull_16 { left: -580px; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

 

I was a little skeptic to replace the content in the 960 file because there where so many lines and I was going to replace it with much less but I hope I understand it right - do I?

 

Anyway it worked fine - thank you!

Now I would like to get the infoboxes not to be as wide as the boxes like you have it in the http://pasztoy.hu/demo/ with the tel1000 ...........how can I do that?

Link to comment
Share on other sites

  • 8 months later...

Click here: http://pasztoy.hu/demo/index.php?language=en select the humanity template - 180-600-180px - and click on the yellow text.

 

You will see this:

 

body { min-width: 960px; }
.container_24 { margin-left: auto; margin-right: auto; width: 960px; }
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7,
.grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13,
.grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19,
.grid_20, .grid_21, .grid_22, .grid_23,
.grid_24 { display: inline; float: left; margin-left: 5px; margin-right: 5px; }
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4,
.pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7,
.push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11,
.pull_11, .push_12, .pull_12, .push_13, .pull_13, .push_14,
.pull_14, .push_15, .pull_15, .push_16, .pull_16, .push_17,
.pull_17, .push_18, .pull_18, .push_19, .pull_19, .push_20,
.pull_20, .push_21, .pull_21, .push_22, .pull_22, .push_23, .pull_23 { position: relative; }
.container_24 .grid_4 { width: 180px; }
.container_24 .grid_16 { width: 570px; }
.container_24 .grid_24 { width: 950px; }
.container_24 .push_4 { left: 190px; }
.container_24 .pull_16 { left: -580px; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}

 

 

hi, I must put where this code?

sorry my head is melting

I just want 2 columns on the left side 240px and the central part that comes

its about 5 hour of read but I'm just adding confusion.

thanks

Luigi

 

http://www.clubsoccershirt.com/index.php

Link to comment
Share on other sites

  • 7 months later...

Archived

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

×
×
  • Create New...