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.
Step 2: Give it some style!
We know that the usual infoBox styling is controlled by three CSS entries;
- infoBoxHeading
- infoBoxContents
- 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:
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:
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:
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:
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:
Perfect! But the best part is, the rest of the boxes all look as they normally do!
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!
DUDE!! you are a genius. I have been banging my head against this all day long.
thanks for the heads up.
You are welcome, SWF.
Excellent, thanks for this, really easy to understand.
Thanks Claire 🙂
wow…okay, i’ll try it on. I’m just a newbie anyway …nice to know you and thank you very much
Nice one – nice simple to follow fix to a problem that was causing issues!
Cheers
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
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.
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
Dennis – the $left_corner is just a variable which contains the left corner image. All you need to worry about is the actual image.
Hello Gary
Found the answer in the code myself
Thanks … Dennis
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 🙂
Thanks Tomee80 – what sort of Beer do you all have in Romania? Any good stuff?
learn your site from oscommerce forum, this information is very usuful for me, thanks.
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!
Hey Thanks man- saved me a lot of time!
Great job!
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…!
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
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!
You would need to have the table stuff inside the file. Anything in there is fine.