Here is how the boxes look by default

They have square corners and glue to each other. Lets go to change this. Please do not follow any advices posted in the osCommerce forum telling you that you have to go to several files changing this and that, or that you have to write huge blocks of css.

Things are much more simple, because of 2 facts

1) osCommerce uses a “jQuery UI” theme, and in it’s css there are already classes defined that will do rounded corners in any direction.

That classes are (names are self explanatory)

• .ui-corner-all
• .ui-corner-top
• .ui-corner-bottom
• .ui-corner-right
• .ui-corner-left
• .ui-corner-tl (tl = top left)
• .ui-corner-tr (tr = top right)
• .ui-corner-bl (bl = bottom left)
• .ui-corner-br (br = bottom right)

2) jQuery has a method called “addClass()“, that does exactly this: to add a css class to anywhere you want

Now after we know this, all we have to do is to add the ui class that creates rounded corners to the right element of the box using addClass()

All code snipsets I will add to file catalog/includes/footer.php (if not something else is mentioned) to here

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
// here is where I add any jQuery code //
</script>

Mini template system users

please find the same part of code in file mts/themes/your_theme/files/includes/footer.php

Lets say you want to add rounded corners to the top of the box heading and to the bottom of the box content, so that the whole box looks like “rounded”. That what you need to add:

$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-top");
$("#columnLeft div.ui-widget-content, #columnRight div.ui-widget-content").addClass("ui-corner-bottom");

And this is the result

For sure you noticed that I added also some space between the boxes, so that they don’t glue to each other. This I did by adding following to file catalog/stylesheet.css

#columnLeft .infoBoxContainer, #columnRight .infoBoxContainer {margin-bottom:10px; }

You can adjust of course the value of the margin as you like

Mini template system users, don’t need to add anything to anywhere since this is a admin setting. For questions please click the support link on top of your administration panel

There are of course other possibilities to play with rounded corners, for example to add separate rounded corners to both, box heading and box content, like this:

Just add to your footer (same location as before) following

$("#columnLeft div.ui-widget-header, #columnRight div.ui-widget-header").addClass("ui-corner-all");
$("#columnLeft div.ui-widget-content, #columnRight div.ui-widget-content").addClass("ui-corner-all");

To my stylesheet.css file I added folowing to make things a bit nicer

#columnLeft .infoBoxHeading, #columnRight .infoBoxHeading {
  margin-bottom:2px;
  padding:7px 2px;
}

You can of course add such a ronded corner only to the top left of the box heading or to anywhere you want. Go on and try it out

A possible question: How round are the rounded corners? This depends on the ui-widget theme you have installed. If you need an other corner radius, you can go to the themeroller page and create a new theme using any settings you like for the corners.

You may be interested to read about how to add a jQuery ui theme to your osCommerce store.

What I’ve got is a box that display for each cross or up sell product it’s name, model, manufacturer, it’s image, part of the product description, price and quantity and the buttons “buy now” and “details”.

I won’t go into more details about this, the topic here is an other, it’s about the old and well known problem about how to get an equal height for each box.

Here is an image of the problem. The background in in green on purpose to make the problem clear

You see that each product column has it’s own height and that doesn’t look nice at all. Even I’m using an example here for the product information page, you will face the same if you want to do similar listings for the index page or the new and specials modules.

What to do now?

To understand the following comments lets take a look on how this box is structured in a simplified form (I will leave out anything that is not related to the issue. The complete and real code will be available at the osCommerce addons soon anyway)

<div class="outer">

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

</div>

1) Limit the number of characters used for the description

Yes, this is done already. But even we set eg just 300 characters to be displayed, there is maybe a product with just 100 in it’s description. So we can set the limit to 100. But do we really want to limit all product descriptions, just because one of them has a short or no description?

So, that’s not a satisfying solution, at least not completelly

2) Set a fixed height for the description.

That is exactly what I was doing till now, to add to my stylesheet.css a fixed height for the element that containns the product description like this:

.description {
  height:200px;
  min-height:200px;
}

A side note: If you are copy pasting anything here, please be careful and use your own names for the css classes, or add an id to the whole container. It can be that the same names are used elsewhere in your site and this could cause problems

But again, is this solution a good one? I say no, or at least not 100%. I don’t like the idea that each time I want to change the length of my description I have to modify several files to make it look ok again

3) Faux columns

This is a well known technique, that can be realized in 2 ways: The one way is using background images (you can read here about faux columns in osCommerce) the other way is to faux using css. Second solution I do use for example for the side columns of osCommerce

Do this solutions solve our problem? again, no. The image solution requires a fixed width, and we don’t know how many boxes there will be per row, the content is dynamic and can change any time.

What comes next? A google search and one more solution based on css

4) The css way

Here is the article I found that explain how to get equal height using css only. Please take a look and then come back here.

Sounds great not? But again, we can not predict how many products we will have per row. So we don’t know exactly what classes to apply to where. Trying to create some logic to make all those percentage calculations, I really got a headache. Conclusion: This solution sounds good for a static html layout, but is not good for our purpose

Back again to google. This time some more solutions based on jQuery. From all results, I took 2 to try them out

5) The jQuery way 1

This solution, to set equal heights with jQuery comes from the same people who also did the themeroller that we all use in osCommerce 2.3.1. Very promising, so lets try it out.

First, we copy the script into a .js file and upload that file to the server. Lets say we call the file equalheight.js. You can place it into folder catalog/ext/jquery/ of your osCommerce installation

Second, we link to that file. In file catalog/includes/template_top.php add just before the closing </head> following line

<script type="text/javascript" src="ext/jquery/equalheight.js"></script>

Then, we go to the file we create the listing. This could be the file catalog/includes/modules/product_listing.php if you do something for the index page, or catalog/includes/new_pproducts.php if you alter the new products module, or whatever. Here we are going to use the simplified example posted above

We need to apply a css class or id to the outer element that contains the columns of our product listings, like this

<div class="outer equalHeight">

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    ......
  </div>

  <div class="inner">
    ......
  </div>

</div>

Last step is to call the script in following way

$('.equalHeight').equalHeights();

The script will apply the height f the tallest direct child to all other direct children (in our example the div with class=”inner”).

The result look like this (the equal height area is marked orange

So, ok, we come closer. We see that the buttons section is not at the bottom, closest thought is to position it absolute into it’s relative positioned “inner” conteiner.

Our css look like this

.inner {
  float:left;
  position:relative;
}
.buttons {
  position:absolute;
  bottom:0px;
}

Again, copy pasters, please be careful with the class names, choose your own. Also, only the css related to the issue is shown here

And the result look like this

What is now? The buttons section covers part of the description of the tallest element. Again a solution to this, to add some bottom margin to the description, that need to be equal to the height of the button section.

So, lets go, but… wait: Do we know this height? No we don’t because if depends on the content of the buttons area, and there can be a price or not, a quantity or not, the buttons themselves or not, according to the administration settings

Conclusion: We came very close, but that’s also not exactly what we need.

Back to the google results. But first lets think again what our problem is: We have a description that is not equal in length for all items and we want to make the container (in our case the <p class=”description”> to have the same height. In other words: We need something to apply to the inner element (the description) directly.

Is there something? Yes there is !

6) The jQuery way 2

This solution about divs of equal height using jQuery script has one main difference to the previous. It apply to the inner element, and that’s exactly what we need

The procedure is the same as at point (5): Paste the script into a file, link to the file.

Then in the file we are working on we add a class to our <p> that contains the description as follows:

<div class="outer">

  <div class="inner">
    <div class="heading">
      <p>name</p>
      <p>model</p>
      <p>manufacturer</p>
    </div>

    The image

    <p class="description equalDesc">description</p>

    <div class="buttons">
      <p>quantity</p>
      <p>price</p>
      <p>buttons</p>
    </div>
  </div>

  <div class="inner">
    .....
  </div>

  <div class="inner">
    .....
  </div>

</div>

Finally, we call the script in the same way as before, only difference the class name and the script name

$(".equalDesc").setEqualHeight()

and how does everything look like? (The description is now in orange)

Yes, that is it ! That’s the way to go. One more last image without the help colors

Try it out and enjoy

I will try it out for the columns left and right now

No panic, things are easier as they sound, just a couple of files to replace, but first, let’s take things from the beginning:

osCommerce uses jQuery version 1.4.2 and jQuery UI version 1.8.6. The latest jQuery UI version (that is required by the themes to function) uses jQuery version 1.4.4 (the latest) and jQuery UI version 1.8.7. You will also note that any new theme you download from themeroller uses a file “jquery-ui-1.8.7.custom.css”, and that’s a clear indicator that the theme belongs to the new UI generation

I red somewhere in the osCommerce forums that it would be enough to just rename the “jquery-ui-1.8.7.custom.css” changing the 1.8.7 to 1.8.6 and that’s it. I can not really say that I share this opinion, what I can say is, that doing so will result to expected and unexpected problems. I’m not a jQuery UI expert, but I want my datepicker to be working, just an example.

The correct thing is to upgrade, and thats easy to do.

First, let’s find the files that need to be changed in the osCommerce file structure. Here they are

• catalog/ext/jquery/jquery-1.4.2.min.js
• catalog/ext/jquery/ui/jquery-ui-1.8.6.min.js
• and the folder catalog/ext/jquery/ui/i18n/

I made a picture where you can see how they look on my computer, they are marked with green

The new files we’ll find in the downloaded folder from jQuery UI. How and where to get this folder is described here. The files we need are marked with orange in the image below

All we need to do now is to replace the green files of osCommerce with the new orange jQuery UI files. First we need to rename file jquery-ui-1.8.7.custom.min.js to be jquery-ui-1.8.7.min.js we just strip the word “custom”. No chance to do something wrong here

Last thing is to let our system know that we do use a new jQuery version now. To do this, we need to open file catalog/includes/template_top.php and find following lines

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

All we need to do here is to replace the number 1.4.2 with 1.4.4 and the number 1.8.6 with 1.8.7 so that our lines look like this

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

Of course, also the line No 29 need’s to be changed, the one that refers to the UI theme to be used, we need to use a version 1.8.7 theme, that’s finally the reason of the upgrade.

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

The process to do this is described here, just use 1.8.7 instead of 1.8.6

Enjoy

What we want to do is, to change the light blue of the buttons, infobox headings and breadcrumb line (thats the line just under the header). In other words, we’re going to change the color theme of the store. The whole process won’t take more than some minutes, let’s start

1. Choose a theme from “themeroller”

Just go to the jquery-ui page and pick a new theme from themeroller. You can take one of the ready themes, you can make adjustements to an existing one or even create your own theme.

There are really many themes to choose from. After you are done click “download”. You’ll be transfered to another screen.

Leave all components checked and click “download” again. You’ll get a complete copy of jquery ui to your computer. Unzip the file and open the folder.  The folder will look like this

We don’t need all of it’s contents, because jquery ui is already installed in osCommerce. The part we need is marked with orange in the above image. It’s named by the name of the theme we choose. Here we need to do one change, to rename the file jquery-ui-1.8.6.custom.css to jquery-ui-1.8.6.css

2. upload the theme to your server

Use your favorite FTP program to upload the folder “ui-darkness” (the folder name depends on the theme you downloaded from themeroller) to following location

[catalog]/ext/jquery/ui/

3. activate the new theme

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

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

This we change to

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

Only thing we do is, to change the path to go to folder “ui-darkness” instead of “redmond” which is the default theme. You need ofcourse to set the right name, according to the theme you’re going to use

Lets see how our store looks now

the new ui-darkness theme

Yes, we changed the background too, that’s also very easy to do. You can read about here: How to change the background of my store.

Update on 6.1.2011: You will notice when downloading a new theme from themeroller, that the file name is not jquery-ui-1.8.6.custom.css butjquery-ui-1.8.7.custom.css. This is because jQuery Ui updated their version to 1.8.7 Do not just rename the fileback to 1.8.6. Read here how to upgrade your jquery UI version easily

In case you use mini template system, things are more easy, since you don’t need to modify any file. Mini template system users, please read here about how to install a new jQuery UI theme to your template

In case you are interested: Here is how I created a complete osCommerce template from scratch

Enjoy