Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Boxes below the new products/footer?


warrenerjm

Recommended Posts

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

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

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

<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

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

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

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

:) 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

Link to comment
Share on other sites

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

<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

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

<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

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

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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">

Link to comment
Share on other sites

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

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

Archived

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

×
×
  • Create New...