HOW TO: make just 1 infobox a different style
Buy Gary A Beer?
Buying me a "beer" helps me to keep my contributions updated and keep this blog alive - and you get a link from my homepage to your site. Cheers!
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!
Comment by Gary — February 16, 2008 @ 11:20 pm
DUDE!! you are a genius. I have been banging my head against this all day long.
thanks for the heads up.
Comment by silk wedding flowers — March 24, 2008 @ 10:37 pm
You are welcome, SWF.
Comment by Gary — March 25, 2008 @ 8:27 am
Excellent, thanks for this, really easy to understand.
Comment by Claire — April 7, 2008 @ 5:12 pm
Thanks Claire
Comment by Gary — April 7, 2008 @ 7:04 pm
wow…okay, i'll try it on. I'm just a newbie anyway …nice to know you and thank you very much
Comment by nadia — May 27, 2008 @ 2:46 am
Nice one – nice simple to follow fix to a problem that was causing issues!
Cheers
Comment by Olly — June 28, 2008 @ 4:24 pm
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
Comment by Dennis — August 27, 2008 @ 5:09 pm
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.
Comment by Gary — August 28, 2008 @ 7:39 am
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
Comment by Dennis — August 28, 2008 @ 10:29 am
Dennis – the $left_corner is just a variable which contains the left corner image. All you need to worry about is the actual image.
Comment by Gary — August 28, 2008 @ 4:01 pm
Hello Gary
Found the answer in the code myself
Thanks … Dennis
Comment by Dennis — August 28, 2008 @ 4:59 pm
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 
Comment by Tomee80 — September 2, 2008 @ 4:54 pm
Thanks Tomee80 – what sort of Beer do you all have in Romania? Any good stuff?
Comment by Gary — September 2, 2008 @ 5:18 pm
learn your site from oscommerce forum, this information is very usuful for me, thanks.
Comment by kirk — October 17, 2008 @ 9:19 pm
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!
Comment by LJ — January 8, 2009 @ 6:47 am
Hey Thanks man- saved me a lot of time!
Great job!
Comment by Sarah — April 22, 2009 @ 7:53 pm