Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

how do I make layout box ?


jjanguda

Recommended Posts

Posted

On the specials page, you can see the only the a picture of the product and its price and description. I want this page has a layout box just like the box on the main page(in this case "New Items for June")

 

The box "New Items for June" on the main page has the layout box and I can change its color and border line from stylesheet.css.

 

Can anybody know how I can actaully add it on that page?

Posted

You will need to create a new styleclass in the catalog/stylesheet.css file for this you will need something like this. I have named the class to categoriesbox. It helped me ALOT by adding a new class.

 

 

Add this code to stylesheet.css

 

.CategoriesBox {

background: #b6b7cb;

}

TD.CategoriesBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #f8f8f9;

color: #ffffff;

}

.CategoriesBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

A.CategoriesBoxContents:hover {

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

font-style: normal;

font-weight: bold;

font-size: 10px;

color: #FFA500;

text-decoration: none;

}

 

 

to give further control add this code to catalog/includes/classes/boxes.php

 

//New CategoriesBox Class

class CategoriesBox extends tableBox {

  function CategoriesBox($contents) {

    $info_box_contents = array();

    $info_box_contents[] = array('text' => $this->CategoriesBoxContents($contents));

    $this->table_cellpadding = '1';

    $this->table_parameters = 'class="CategoriesBox"';

    $this->tableBox($info_box_contents, true);

  }

 

  function CategoriesBoxContents($contents) {

    $this->table_cellpadding = '3';

    $this->table_parameters = 'class="CategoriesBoxContents"';

    $info_box_contents = array();

    $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));

    for ($i=0, $n=sizeof($contents); $i<$n; $i++) {

      $info_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i]['align'] : ''),

                                          'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''),

                                          'params' => 'class="CategoriesBoxContents"',

                                          'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : '')));

    }

    $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));

    return $this->tableBox($info_box_contents);

  }

}

 

class CategoriesBoxHeading extends tableBox {

  function CategoriesBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {

    $this->table_cellpadding = '0';

 

    if ($left_corner == true) {

      $left_corner = tep_image(DIR_WS_IMAGES . 'CategoriesBox/corner_left.gif');

    } else {

      $left_corner = tep_image(DIR_WS_IMAGES . 'CategoriesBox/corner_right_left.gif');

    }

    if ($right_arrow == true) {

      $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'CategoriesBox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';

    } else {

      $right_arrow = '';

    }

    if ($right_corner == true) {

      $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'CategoriesBox/corner_right.gif');

    } else {

      $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');

    }

 

    $info_box_contents = array();

    $info_box_contents[] = array(array('params' => 'height="14" class="CategoriesBoxHeading"',

                                        'text' => $left_corner),

                                  array('params' => 'width="100%" height="14" class="CategoriesBoxHeading"',

                                        'text' => $contents[0]['text']),

                                  array('params' => 'height="14" class="CategoriesBoxHeading" nowrap',

                                        'text' => $right_corner));

 

    $this->tableBox($info_box_contents, true);

  }

}

 

 

This now makes the box independent of the other boxes. Next you need to just apply the new class in desired boxes or whatever. I had also big problems with this, but after a week or so I solved it :rolleyes:

 

Mr Zuncan - The one who asks alot, but also helps alot

So what?! Who care in a hundred years anyway?

Posted

Thanks for your help, Zuncan, and The_Bear.

 

BTW Bear, the link that you gave is not something I want..

 

 

All I want is to have a layout(just looks like "what's new for June).

It doesn't have to be appeared on default.php page.

 

When I click specials and what's new, they do not have a layer box.

They are just distributed either vertically or horizonally... without a layer box like one on the main page(in this case New Products for June)

 

I think Zuncan's idea is good..

I'll give it a try.. and if any further discussion would be welcome.

 

 

Thanks all.

Posted

Is there any way to lay out these boxes Vertically? I set my sales box to 4 items and have the content layed out, my only problem is that I want them (the 4 boxes going down the right side instead of acrossed the bottom.

 

I have search the forums and this is the closest that I have Found on the subject.

 

Thanks in advance. for any help :)

 

J. Keesee

Archived

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

×
×
  • Create New...