HOW TO: make just 1 infobox a different style

There are lots of ways to make osCommerce look different. Here is 1 way to make 1 infoBox look different to the rest – it’s easy – and is done using a CSS (Cascading Style Sheet) “trick”…

Step 1: decide which infoBox to change

In this example, I’m going to change the look of the Categories infoBox. Open up the file /includes/boxes/categories.php and find the following line of code

<td>

Change this to:

<td id="categorybox">

Save this file and upload it.

clubosc1.gif

Step 2: Give it some style!

We know that the usual infoBox styling is controlled by three CSS entries;

  1. infoBoxHeading
  2. infoBoxContents
  3. infoBox

So, all we now need to do is use those to control the box we are changing, but we do it using a special CSS “trick”…open up stylesheet.css and scroll right to the very bottom of it. Add the following code;

#categorybox .infoBoxHeading { background: blue; color: yellow; }

Why did we add this code? Well, for starters you can see that the very first piece of code says #categorybox – you’ll remember that in Step 1, we gave this id to the Table Cell (td) that hold the Category Box.

The rest of the code is standard osCommerce style using the existing .infoBoxHeader style definition. In this example, I’ve made the background blue, and the font color yellow. We end up with this:

clubosc2.gif

As you can see, this box is beginning to show the style we want – but some of the style is still showing the standard osCommerce grey colours! Let’s change that…

Add this code to your stylesheet;

#categorybox .infoBox { background: blue; }

We now see the infoBox like this:

clubosc3.gif

Getting closer! Let’s make the background of the box a dark grey and make the text white. Add this code to the stylesheet;

#categorybox .infoBoxContents { background: #aaa; color: white; }

Now the box looks like this:

clubosc4.gif

And we have a problem – the actual links within this box are still the standard black with grey rollover. That’s easy to change, simply add this to the stylesheet;

#categorybox a { color: white;}

This says that any link with our category box should be white. Now the box looks like this – which is almost perfect for the style needed:

clubosc5.gif

The only problem remaining is the goofy little curved corner graphic that is now looking totally wrong. let’s change that to a square corner. This is really easy 😉

Step 3: Get rid the crappy graphic

Open up /includes/classes/boxes.php and find the following code;

'text' => $left_corner),

Change it to:

'text' => ' '),

Now our box looks like this:

clubosc6.gif

Perfect! But the best part is, the rest of the boxes all look as they normally do!

clubosc7.gif

21 Replies to “HOW TO: make just 1 infobox a different style”

  1. After having some issues with a person who couldn’t understand this, please realise that if you use a different ID than “categorybox” in Step 1, you have to follow through and use the ID YOU used in the following steps.

    So, if you used <td id=”bluebox”> then you have to use #bluebox in the stylesheet rather than #categorybox

    It ain’t Rocket Science, but crikey some people really make it so. Doh!

  2. In the above example you have changed the goofy little round corner
    to a square corner. if I want to keep the goofy little round corner
    but change its color – how do I do that?

    Thanks … Dennis

  3. Dennis – you’ll need to make new graphics and save them in /images/infobox. If you look in there you will find the three graphics you need to replace.

  4. HI

    I notice that the image in question is called “corner_left.gif” but
    in the “boxes.php” the image is picked up with the code
    “‘text’ => $left_corner),”. Where is the correllation between the
    image name and the code done?

    Thanks … Dennis

  5. Dennis – the $left_corner is just a variable which contains the left corner image. All you need to worry about is the actual image.

  6. I have been looking for this since I first met osC a few years ago… who would have fought it will be here 🙂 the rest of the tips and tricks is just awesome I used 4 or 5 of them and keep riding all of it… I need to know everything. Thx for the good work and cheers from Romania 🙂

  7. At last. Thank you for sharing this idea. This is what I did:

    I commented the part that calls the corner images, and left me with number 1 appearing right before the Category box, and another right after the Shopping Cart text in the Shopping cart box. Replacing ‘text’ => $left_corner) to ‘ ‘ and ‘text’ => $right_corner) likewise made it work!

  8. Hey Gary,

    Have you any tips now that 2.3.1 is out as it’s all changed from what I can see. The infoboxes are controlled from /ext/jquery/ui/jquery-ui-1.8.6.min.js so it doesn’t seem as easy as before.

    The tutorial above doesn’t seem to work any more but if you view source on a page, the (categories) infobox is in a div with a class of “ui-widget-header infoBoxHeading”.

    Where is it getting the “ui-widget-header” from??

    Confused of Cheltenham…!

  9. I redesigned all my buttons and headers at http://jqueryui.com/themeroller/ – it’s a nice place to have a play – you can downlosd the result gives you new images and a new style sheet, images replaced the originals and the js/stylesheet replaced the original one – renamed removing the word custom

  10. hi
    before i buy the beer, quick question. I am using the box languages.php for my own content (i.e. I don’t care about multiple languages so just hijacked this box). therefore the code in my box is not normal osc code. I have added at the beginning of the file (well, leaving first line as ) and I’ve closed the late on. however, the results appear to be zero. just wondering if more code needs to be retained in the box file itself?

    just to add a little detail to this I am using STS so am making changes to the stylesheet in my sts folder. The line of code I’m adding to the stylesheet is

    #languagebox .infoBoxContents { font-size: 8px; }

    i will probably make other changes but right now primarily just want to change the font size for this box and that’s my main goal.

    alternatively can one declare a ‘style’ around elements within the box?? I have tried a hundred variations of code to declare the font size within the languages.php file but to no avail. Some code seem to make the line spacing change but not the font size. Google brought me here!

Leave a Reply

Your email address will not be published. Required fields are marked *