Adding An Extra Border

[awoman]

Is it possible to add an extra border around the main wrapper? So we can do 2 colors of border?

[barco57]

just add a new div and border that........hmmmm where to do that.....runs off to look

[barco57]

includes/templates/template_default/common/tpl_main_page.php

copy tpl_main_page.php to your custom template and edit to add the extra div

[clydejones]

Check here (post 9) http://www.zen-cart.com/forum/showthread.php?t=53863

While this involves adding a "shadow image" the principal is the same.

[awoman]

OK I am lost! LOL What do you mean add a new DIV?

I tried to addess the link below and get a black page every time I try.

You can see what I would like to do by looking at http://www.hotslings.com/s.nl/sc.2/.f

You will see they have a border around the main page and then a thick white border around that

[Kim]

Actually that is more than a "border", that is the background of the farthest back layer extended beyond the edges of the inner part of the page, but can still be acomplished with an extra <div> container or two.

[clydejones]

In tpl_main_page.php just above:

<div id="mainWrapper">

add something like <div id="borderarea">

now find the following:

<!--bof- parse time display -->

and just above this add </div>

If you don't want to create an image for the border then in your stylesheet add the following declaration:

#borderarea {
border: 5px solid #000;
}
The highlighted areas can be changed for your needs.

[Kim]

Open you tpl_main_page.php (the one you have in your override directory)

find:

<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>

Change to:

<div id="outerBorder">
<div id="mainWrapper">
<?php
 /**
  * prepares and displays header output
  *
  */
  require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_header.php');?>

Then find:

<?php
 /**
  * prepares and displays footer output
  *
  */
  require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
</div>
<!--bof- parse time display -->
<?php
  if (DISPLAY_PAGE_PARSE_TIME == 'true') {
?>
<div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>
<?php
  }
?>

change to:

<?php
 /**
  * prepares and displays footer output
  *
  */
  require($template->get_template_dir('tpl_footer.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_footer.php');?>
</div>
</div>
<!--bof- parse time display -->
<?php
  if (DISPLAY_PAGE_PARSE_TIME == 'true') {
?>
<div class="smallText center">Parse Time: <?php echo $parse_time; ?> - Number of Queries: <?php echo $db->queryCount(); ?> - Query Time: <?php echo $db->queryTime(); ?></div>
<?php
  }
?>

The CSS for your new container would be:

#outerBorder {
margin: 20px 0px; /*gives spacing at top and bottom*/
padding: 15px; /*spacing between this and the mainWrapper*/
background-color: #ffffff; /*white background*/
border: 1px solid #000000; /*1px black edge*/
}

Adjust as needed.

[awoman]

Hi Kim,
It seems to work for the most part, with the exception that it is not around the center of the main wrapper. It extends way to much and I can not seem to figure out what I am missing. Here is a screen shot.

[Kim]

Doh! Apply the width settings you have for the #mainWrapper to the #outerBorder.