tonymatt Posted December 28, 2010 Share Posted December 28, 2010 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 More sharing options...
npn2531 Posted December 28, 2010 Share Posted December 28, 2010 Both the left and right columns, and the main id and class designations for them are defined in includes/template_bottom.php. 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 More sharing options...
npn2531 Posted December 28, 2010 Share Posted December 28, 2010 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 More sharing options...
tonymatt Posted December 29, 2010 Share Posted December 29, 2010 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 More sharing options...
npn2531 Posted December 29, 2010 Share Posted December 29, 2010 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 More sharing options...
ilmojk Posted April 22, 2011 Share Posted April 22, 2011 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 More sharing options...
felis8681 Posted May 10, 2011 Share Posted May 10, 2011 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 More sharing options...
luigicosta Posted January 14, 2012 Share Posted January 14, 2012 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 More sharing options...
luigicosta Posted January 14, 2012 Share Posted January 14, 2012 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 I do like this site: http://www.mindsparx.org/osc2.3/mauli_complete/ Link to comment Share on other sites More sharing options...
mafiouso Posted August 23, 2012 Share Posted August 23, 2012 can any one tell me how to add like a welcome content on the front page index.? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.