Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Stylesheet problem


richlewt

Recommended Posts

Hi

I have a little style sheet problem. I wish to have my infoboxes enclosed with a 1 pixel black line around the outside, also a 1 pixel line under the infobox header.

Here is my code so far

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #00D000;

color: #FFFFFF;

border: 1px;

border-style: solid;

border-color: #000000;

border-spacing: 1px;

The only problem is its drawing a 1 pixel border between the corner gifs. I need just the top and bottom of the infobox header lined. Can this be done?

thanks

Rich

"May the seam be with you"

Link to comment
Share on other sites

Wiki documentation has all the info on stylesheet modification, open wiki and search for stylesheet
Do you really think you are helping richlewt with this information? He has a very specific problem, showed exactly how far he got, how he did it and what the problem is. If you really don't (want to) know anything about the subject, or don't want to help. Maybe you better don't answer at all?

 

Hi richlewt,

 

I am afraid the "infoBoxHeading" tables don't have a class assigned to them. The table cells do, strangly enough, but as you noticed it does not work very well. So I think you will have to edit all boxes (includes/boxes/) to assign a class to the "infoBoxHeading tables" first. And then assign a border in the stylesheet to it.

 

(to make things like this much easyer you also could try the BTS)

Link to comment
Share on other sites

[quote name=

 

Hi richlewt' date='

 

I am afraid the "infoBoxHeading" tables don't have a class assigned to them. The table cells do, strangly enough, but as you noticed it does not work very well. So I think you will have to edit all boxes (includes/boxes/) to assign a class to the "infoBoxHeading tables" first. And then assign a border in the stylesheet to it.

 

(to make things like this much easyer you also could try the BTS)[/quote]

Hi

Thanks for replying. I am not sure how you do this though so that you dont get the vertical line between the corner gifs and the infobox title? Can you assign lines just to the top and bottom of a table cell? Sorry if this sounds basic.

thanks

Rich

"May the seam be with you"

Link to comment
Share on other sites

Reading back my previous post today, I'm not very happy with it (sorry John/Mibble), still think the answer didn't help much, but my remarks about it weren't any better :(

 

Back to the subject:

A solution would be to add a border to the table i.s.o. the td's, like:

table.infoBoxHeadingNEW {
border: red 1px solid;
}
table.infoBox {
border: green 1px solid;
}

(added to the stylesheet)

 

But the infoBoxHeading table does not have a CSS class assigned to it (infoBox class does so that should work) by default. To assign a CSS class to the infoBoxHeading table you can edit "includes/classes/boxes.php" (backup first) at approx line 100 and find this:

  class infoBoxHeading extends tableBox {
   function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
     $this->table_cellpadding = '0';

change it to:

  class infoBoxHeading extends tableBox {
   function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
     $this->table_cellpadding = '0';
     $this->table_parameters = 'class="infoBoxHeadingNEW"';

Now it will create tables like this:

<table class="infoBoxHeadingNEW" cellpadding="0" cellspacing="0" width="100%" border="0">

Not sure if the border="0" should be removed, but it seems to work fine with it.

 

And it should work.

 

Can you assign lines just to the top and bottom of a table cell?
Yes you can, not only to table cells but also to tables (and images and div's etc.).

 

try adding to the stylesheet for example:

table.infoBoxHeadingNEW {
border: 1px red solid;
border-width: 3px 1px;
}

top/bottem 3px, left/right 1px

 

or

table.infoBoxHeadingNEW {
border: 1px red solid;
border: 3px 1px 2px 0;
}

top 3px, right 1px, bottom 2px, left 0px

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...