warrenerjm Posted January 25, 2011 Share Posted January 25, 2011 Hello I am tring to understand the new set up of OSC!! I was hoping to put some info boxes under the new products, but wasn't sure how to do that, so then I thought I'd put it in the footer, but the files look different. Could you help me get started please? I have looked in catalog/index.php catalog/includes/languages/english/index.php catalog/includes/footer.php but I can't see where this code from the source is? <div class="grid_24 footer"> <p align="center">Copyright © 2011 <a href="http://www.xxxxx.co.uk/catalog/index.php?osCsid=5645fcf65d490dba75d59dcdce589209">xxxxxx</a><br />Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a></p> </div> Ideally I want 3/4 boxes for the information/customer services/my account/newsletter with links under. If it was above the new products it would sit nicely as I want one long column in the left. If it is in the footer but above the copyright text it would fall below the end of the left column. I understand that the boxes would be something like grid_3 or grid_4 if too small. I'm just struggling to understand where it goes & what code, but I'll copy some examples to start with. I was starting to understand tables, but I'm sure once I have learnt this & practiced I will like this better? Thanks for any help. All it takes sometimes is a push in the right direction & the penny drops. :) Julie Link to comment Share on other sites More sharing options...
pdcelec Posted January 25, 2011 Share Posted January 25, 2011 Hello I am tring to understand the new set up of OSC!! I was hoping to put some info boxes under the new products, but wasn't sure how to do that, so then I thought I'd put it in the footer, but the files look different. Could you help me get started please? I have looked in catalog/index.php catalog/includes/languages/english/index.php catalog/includes/footer.php but I can't see where this code from the source is? <div class="grid_24 footer"> <p align="center">Copyright © 2011 <a href="http://www.xxxxx.co.uk/catalog/index.php?osCsid=5645fcf65d490dba75d59dcdce589209">xxxxxx</a><br />Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a></p> </div> Ideally I want 3/4 boxes for the information/customer services/my account/newsletter with links under. If it was above the new products it would sit nicely as I want one long column in the left. If it is in the footer but above the copyright text it would fall below the end of the left column. I understand that the boxes would be something like grid_3 or grid_4 if too small. I'm just struggling to understand where it goes & what code, but I'll copy some examples to start with. I was starting to understand tables, but I'm sure once I have learnt this & practiced I will like this better? Thanks for any help. All it takes sometimes is a push in the right direction & the penny drops. :) Julie This is in catalog/includes/footer.php <div class="grid_24 footer"> <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> </div> AND FOOTER_TEXT_BODY comes from catalog/includes/languages/english.php Link to comment Share on other sites More sharing options...
burt Posted January 25, 2011 Share Posted January 25, 2011 <div class="grid_24"> <div class="grid_6 alpha"> box 1 </div> <div class="grid_6"> box 2 </div> <div class="grid_6"> box 3 </div> <div class="grid_6 omega"> box 4 </div> </div> Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 This is in catalog/includes/footer.php <div class="grid_24 footer"> <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> </div> AND FOOTER_TEXT_BODY comes from catalog/includes/languages/english.php Ok so do I add extra divs HERE <div class="grid_24 footer"> [HERE] <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> </div> like? <div class="grid_24 footer"> <div class="grid_4 alpha prefix_4> <b>Customer Services</b> <br/>Link 1 <br/>Link 2 </div> <div class="grid_4> <b>Information</b> <br/>Link 1 <br/>Link 2 </div> <div class="grid_4> <b>My Account</b> <br/>Link 1 <br/>Link 2 </div> <div class="grid_4 omega suffix_4> <b>Newsletter</b> <br/>Link 1 <br/>Link2 </div> <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> </div> Thanks burt blog I'm guessing it has to go in the footer if I want it accessable on all the pages? Thanks for your help. Julie Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 <div class="grid_24"> <div class="grid_6 alpha"> box 1 </div> <div class="grid_6"> box 2 </div> <div class="grid_6"> box 3 </div> <div class="grid_6 omega"> box 4 </div> </div> LOL I'm slower than you reading between your blog & here I din't see your post! How is my code? :) Link to comment Share on other sites More sharing options...
burt Posted January 25, 2011 Share Posted January 25, 2011 Yes, in the footer. Your code will give you 4 boxes each of 4 grids width, with a 4 grid space before and after. You might need to 'clear' before the <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> <div class="clear"></div> Link to comment Share on other sites More sharing options...
multimixer Posted January 25, 2011 Share Posted January 25, 2011 How is my code? :) The total amount of grids need to be 24. You can have 6x4=24 or 4x6=24 but not 4x4=16 as you posted My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 Yes, in the footer. Your code will give you 4 boxes each of 4 grids width, with a 4 grid space before and after. You might need to 'clear' before the <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> <div class="clear"></div> What does the 'clear' do? :blink: I was wondering if I needed to keep the code seperate i.e. my boxes & then the osc code, but I am aware that this system is supposed to be producing less code & not more as with tables. Thanks Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 The total amount of grids need to be 24. You can have 6x4=24 or 4x6=24 but not 4x4=16 as you posted :) I have a prefix & suffix so it adds up to 24 ps what is your blog? I will be reading as much as I can about designing using 960grid & NEED lots of tutorials :D Link to comment Share on other sites More sharing options...
multimixer Posted January 25, 2011 Share Posted January 25, 2011 :) I have a prefix & suffix so it adds up to 24 ps what is your blog? I will be reading as much as I can about designing using 960grid & NEED lots of tutorials :D oops, didn't see that, but now I see that you've been a good student reading gary's blog :) As for me (re:ps), I'm multimixer in greece, easy to find, you've been there already My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 Yes, in the footer. Your code will give you 4 boxes each of 4 grids width, with a 4 grid space before and after. You might need to 'clear' before the <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p> <div class="clear"></div> Have no idea what I'm talking about or what it does, but am reading about your comments like a good student. :) I have found this <div class="clear"><!-- --></div> Something to do with floating ?? Can't find it in w3schools Is it seperating the style of my boxes from the next part which is the text? Link to comment Share on other sites More sharing options...
burt Posted January 25, 2011 Share Posted January 25, 2011 <div class="clear"></div> No contents needed inside that div. Clears any floated stuff. Uses this bit in the 960 stylesheet; .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 } Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 oops, didn't see that, but now I see that you've been a good student reading gary's blog :) As for me (re:ps), I'm multimixer in greece, easy to find, you've been there already :blink: OK just found it again! :P Bookmarking Oh I am painfully slow :wacko: Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 <div class="clear"></div> No contents needed inside that div. Clears any floated stuff. Uses this bit in the 960 stylesheet; .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0 } Fab but I don't understand what "floated stuff" is? Right off to try it. :) Link to comment Share on other sites More sharing options...
burt Posted January 25, 2011 Share Posted January 25, 2011 floated stuff = divs (basically) Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 I only get Information (link1 & Link2) underneath and Newsletter (link2 & Link2) underneath to the far left. It only takes up just more than the column left width? I've added the div clear to my above code too? :huh: Link to comment Share on other sites More sharing options...
multimixer Posted January 25, 2011 Share Posted January 25, 2011 You can imagine it like everything (a div) that floats eg left is "pulling" all divs that come after that to follow it. Imagine a magnet or something like that. This "attraction" you stop by adding an other div that has at least clear:both in his css. There are also other ways to clear floats, but this way work for sure All grids in the 960 gs are floating My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
multimixer Posted January 25, 2011 Share Posted January 25, 2011 I only get Information (link1 & Link2) underneath and Newsletter (link2 & Link2) underneath to the far left. It only takes up just more than the column left width? I've added the div clear to my above code too? :huh: Do you have a link? My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 Do you have a link? How can I do this without it being indexed by search engines please? I suppose I can delete it afterwards? Thanks Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 Sorted! I had forgotten the end " duh Couldn't see for looking. But it doesn't look like it is very evenly distributed at the moment? Probably is but early days. My first play with 960 grid :thumbsup: Now I think each section enclosed in a box border like the other boxes would be nice. :) Do I have to add it to each div (lots of code) or can I link it to the styling of the other boxes? Thanks to you both for helping. Much appreciated :) Link to comment Share on other sites More sharing options...
multimixer Posted January 25, 2011 Share Posted January 25, 2011 Now I think each section enclosed in a box border like the other boxes would be nice. :) Do I have to add it to each div (lots of code) or can I link it to the styling of the other boxes? You don't need to add anything more to your html, just to css, for example .footer div {border:1px solid #f00} will make a red border around your footer boxes. I would also remove the <br> and use <ul><li>. Also remove the <b></b> and style the stuff in css My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 You don't need to add anything more to your html, just to css, for example .footer div {border:1px solid #f00} will make a red border around your footer boxes. I would also remove the <br> and use <ul><li>. Also remove the <b></b> and style the stuff in css Thanks I've changed the <br> & <b> to use <ul> <li> & <h3> Can you recommend a free css editor? It doesn't matter where I put it in the css does it? If I put it at the top I'll know what I have done & what is default. Is there a proper way to link each of the list to other pages in the site i.e. shipping? I was going to do the full path but can I do just /shipping.php Link to comment Share on other sites More sharing options...
multimixer Posted January 25, 2011 Share Posted January 25, 2011 Thanks I've changed the <br> & <b> to use <ul> <li> & <h3> Can you recommend a free css editor? It doesn't matter where I put it in the css does it? If I put it at the top I'll know what I have done & what is default. Is there a proper way to link each of the list to other pages in the site i.e. shipping? I was going to do the full path but can I do just /shipping.php You don't need a css editor, you can use any plain text editor, but I'm sure you will find something in google, I've no idea It matters where you put something in your css file, in the meaning that the later "covers" the earlier eg if I say a {color: #f00} .footer a {color #000} then I have all links red but the footer in black if I say .footer a {color #000} a {color: #f00} then all my links will be red. That's why you put the general rules on top and the more specific near the bottom. The proper way to link to pages inside of osCommerce is to use the tep_href_link function, you can read here: Create correct links in osCommerce EDIT: Just saw your footer again, much better you can also apply the grid classes directly to the <ul>, so instead of <div class="grid_6 alpha"> <ul> you have <ul class="grid_6 alpha"> My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
warrenerjm Posted January 25, 2011 Author Share Posted January 25, 2011 You don't need a css editor, you can use any plain text editor, but I'm sure you will find something in google, I've no idea It matters where you put something in your css file, in the meaning that the later "covers" the earlier eg if I say a {color: #f00} .footer a {color #000} then I have all links red but the footer in black if I say .footer a {color #000} a {color: #f00} then all my links will be red. That's why you put the general rules on top and the more specific near the bottom. I am using topstyle lite now for css as it shows the colours etc. The proper way to link to pages inside of osCommerce is to use the tep_href_link function, you can read here: Create correct links in osCommerce Thanks for link. Will make them like this: <li><a href="<?php echo tep_href_link(FILENAME_PRIVACY); ?>">Privacy</a></li> EDIT: Just saw your footer again, much better you can also apply the grid classes directly to the <ul>, so instead of <div class="grid_6 alpha"> <ul> you have <ul class="grid_6 alpha"> I haven't done this yet but the boxes have shifted? I have 4 x grid_6 & without the css It looks fine, but with the css the last two boxes are not right? Do you know why please? where my css is .ui-widget { font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif; font-size: 11px; } .footer div { border:1px solid #f00 } body { background: #fff; color: #000; margin: 0px; font-size: 11px; font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif; } Thanks ps how can I make all the boxes to be the same size (deep)please without having empty <li> to make them all the same? Link to comment Share on other sites More sharing options...
pdcelec Posted January 25, 2011 Share Posted January 25, 2011 I am using topstyle lite now for css as it shows the colours etc. Thanks for link. Will make them like this: <li><a href="<?php echo tep_href_link(FILENAME_PRIVACY); ?>">Privacy</a></li> I haven't done this yet but the boxes have shifted? I have 4 x grid_6 & without the css It looks fine, but with the css the last two boxes are not right? Do you know why please? where my css is .ui-widget { font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif; font-size: 11px; } .footer div { border:1px solid #f00 } body { background: #fff; color: #000; margin: 0px; font-size: 11px; font-family: Lucida Grande, Lucida Sans, Verdana, Arial, sans-serif; } Thanks ps how can I make all the boxes to be the same size (deep)please without having empty <li> to make them all the same? have you tried grid_6 push_x or pull_x Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.