Changing box border colors

[Digibooks]

Hi

 

I have been using OSCommerce for a while now and really like it and have started to look at changing the layouts and colors. I do not claim to be a proficient PHP programmer (having been brought up on PERL) but usually manage to get things working - but this has stumped me!!

 

I am starting simple by changing the color of the header images which I have located and successfully installed. The problem I now have is the Boxes Borders. Having changed the blue background images to maroon the left and right borders are naturally still a very light blue which I wish to change to black.

 

I have looked in so many CSS files changing what I think is the border attribute without any success.

 

Please can anyone point me in the right direction as to which file defines these borders.

 

Many thanks

Alan

[burt]

http://www.oscommerce.com/forums/topic/393037-playing-with-columns/

 

 

 

[Digibooks]

Thanks for the tutorial ......... unfortunately it does not really show what I'm looking for .... sorry I am really green in PHP! I'm sure there must be a very simple border-color definition somewhere in a CSS file which will do the trick.

[♥14steve14]

If you are using the latest version there is also a stylesheet in ext/jquery/ui/redmond/jquery-ui-1.8.22.css. I think the borders are in there somewhere.

[burt]

Watch from 4 minutes onwards.

 

 

 

[aurora_cues]

I am using 2.3.3.1 and I have changed the color of the boxes header, background color and made the border disappear by changing the css in stylesheet.css.

My original is a v2.3.1 responsive oscommerce from PHPGenie, the css may be a bit different from yours but not by much.

Here is my shop: http://www.shop.auroracues.com/

I am sorry I do not know how to do a screen shot. Here is a facebook link to my screen shot for your reference:

https://www.facebook.com/photo.php?fbid=225723070917632&set=a.106120002877940.11165.100004398218018&type=1&theater

I changed the followings:

--I added background: #C0C0C0; to .infoBoxHeading{...} (you can change it to any color you want)

--I added border:0;background:#F2F2F2; to .infoBoxContents{...} (may be you dont need border:0 but I added it anyway)

--I added border:0;background:#F2F2F2; to .productListTable

I think I also added an extra line: .infoBox{background:#FFFFFF;} but I am not sure if it was perhaps there originally.

I am also very green to php. I have learned a lot from this forum. If there is anything I did that is wrong please feel free to correct me. Thank you.

[♥14steve14]

As there are laready definitions for the border colours, why not use then to alter the border colour. In the stylesheet I referenced in my last post you should find

 

/* Component containers

----------------------------------*/

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1em; }

.ui-widget .ui-widget { font-size: 1em; }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em; }

.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x; color: #222222; }

.ui-widget-content a { color: #222222; }

.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }

.ui-widget-header a { color: #ffffff; }

 

Its all there ready to be altered.

[burt]

You should absolutely avoid changing core files if you can. As soon as you update osCommerce to a new version (eg, going from 2.3.x to 2.3.y) you run the possibility of losing your changes.

 

Stylesheets are set up to cascade hence the name CSS. In english(ish), assume you call 3 stylesheets as so (in template_top)

 

<link rel="stylesheet" type="text/css" href="aaa.css" />
<link rel="stylesheet" type="text/css" href="bbb.css" />
<link rel="stylesheet" type="text/css" href="ccc.css" />

 

And in a page in your site, you have;

 

<div class="something">Test</div>

 

if you open up bbb.css and add:

 

.something { background: red; }

 

The background of the div is now red.

 

If you now open up aaa.css and add

 

.something { background: blue; }

 

What colour is the background of the div?

 

If you said blue, you're incorrect. It's still red. Why? Because we call bbb.css AFTER aaa.css so anything in bbb.css will over-ride anything in aaa.css

 

Open up ccc.css and add

 

.something { background: yellow; }

 

Now the background of the div is yellow as ccc.css is over-riding both aaa.css and bbb.css

 

Go back to aaa.css and change this:

 

.something { background: blue; }

 

to:

 

.something { background: blue; border: 1px solid black; }

 

How does the div look now?

 

It would take the border style from aaa.css and the background colour from ccc.css meaning it is a div that is yellow with a black border.

 

So, you can see that to change something that is defined in a stylesheet, you do not have to actually change that stylesheet, you can simply call a new stylesheet and over-ride the parts you need to look different.

 

ALWAYS get into the habit of changing as little core code as possible.

[aurora_cues]

Thanks a lot Burt.:-)