Jump to content



Photo
* * * * * 13 votes

Basics for design


This topic has been archived. This means that you cannot reply to this topic.
1494 replies to this topic

#41   haru

haru
  • Members
  • 110 posts

Posted 07 April 2005 - 08:52

Am am also trying to set the borders of my boxes. I read this post and many other, but still can't figure it ou. I want just clear boxes with a line around them just like in this page: here.
That is not my page, mine is HERE!.

What is the way to define those thin borders around the boxes. And if possible to chose the color border for each boxes.

I have installed infoBox_customizing_for_os_commerce.

/*
  $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Portions Copyright © 2003 osCommerce
  Portions Copyright © 2004 www.oscommerce-templates.co.uk

  Released under the GNU General Public License
*/

.boxText {
    font-family: Georgia, Arial, sans-serif;
    font-size: 10px;
}
.errorBox {
    font-family : Verdana, Arial, sans-serif;
    font-size : 10px;
    background: #ffb3b5;
    font-weight: bold;
}
.stockWarning {
    font-family : Verdana, Arial, sans-serif;
    font-size : 10px;
    color: #cc0033;
}
.productsNotifications {
    background: #f2fff7;
}
.orderEdit {
    font-family : Verdana, Arial, sans-serif;
    font-size : 10px;
    color: #70d250;
    text-decoration: underline;
}
BODY {
  background: #ff6347;
  color: #575757;
  margin: 10px;
}

A {
  color: #575757;
  text-decoration: none;
}

A:hover {
  color: #575757;
  text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
  background: #ffffff;
}

TR.headerNavigation {
  background: #eeeeee;
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #eeeeee;
  color: #ffffff;
  font-weight : bold;
  height: 26px;
  background-image: url(images/template.me.uk/background.gif);
}

A.headerNavigation {
  color: #ffffff;
}

A.headerNavigation:hover {
  color: #ffffff;
  text-decoration: underline;
}

TR.headerError {
  background: #ff0000;
}

TD.headerError {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #ff0000;
  color: #ffffff;
  font-weight : bold;
  text-align : center;
}

TR.headerInfo {
  background: #00ff00;
}

TD.headerInfo {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #00ff00;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

TR.footer {
  background: #bbc3d3;
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  background: #eeeeee;
  color: #ffffff;
  font-weight : bold;
  height: 26px;
  background-image: url(images/template.me.uk/background.gif);
}

.infoBox {
  background: #b6b7cb;
}

.infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.7em;
  font-weight: bold;
  line-height: 1.5;
  border-top: 0px;
  border-right: 1px;
  border-left: 1px;
  border-bottom: 1px;
  border-color: #cccccc;
  border-style: solid
  <--!background: #FFEBA8;-->

}

.infoBoxNotice {
  background: #FF8E90;
}

.infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  background: #eeeeee;
  font-variant: small-caps;
  color: #f4a460
  height: 26px;
  background-image: url(images/template.me.uk/background.gif);
}

a.infoBoxHeadingLink {
    color: #ffffff;
}

a.infoBoxHeadingLink:hover {
    color: #ffffff;
    text-decoration: underline;
}


TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #FFFFE5;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
  background: #F2FFE5;
}



TD.productListing-data {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

#############
TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #cccccc;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
}

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: transparent;
  color: #FFFFFF;
  height: 26px;
  font-weight: bold;
  background-image: url(images/template.me.uk/background.gif);
}

A.productListing-heading {
  padding-top: 8px;
  background: transparent;
}

#############

A.pageResults {
  color: #0000FF;
}

A.pageResults:hover {
  color: #0000FF;
  background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-variant: small-caps;
  font-weight: bold;
  color: #575757;
}

TR.subBar {
  background: #f4f7fd;
}

TD.subBar {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #000000;
}

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

TD.accountCategory {
  font-family: Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #aabbdd;
}

TD.fieldKey {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

TD.fieldValue {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

TD.tableHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.newItemInCart {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

TEXTAREA {
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
}

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

TABLE.formArea {
  background: #f1f9fe;
  border-color: #7b9ebd;
  border-style: solid;
  border-width: 1px;
}

TD.formAreaTitle {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

SPAN.markProductOutOfStock {
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #c76170;
  font-weight: bold;
}

SPAN.productSpecialPrice {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

SPAN.errorText {
  font-family: Verdana, Arial, sans-serif;
  color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

.outline {
    border-top: 1px;
    border-right: 1px;
    border-left: 1px;
    border-bottom: 1px;
    border-style: solid;
    border-color: #575757;
    background: #ffffff;
}




















/*
------------Boxes Section for css-------------
Format each info box according to you liking
*/

.contentBox {
  background: #8b1a1a;
}

TD.contentBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #8b1a1a;
  color: #ffffff;
}

.contentBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.BestSellersBox {
  background: #f4a460;
}
TD.BestSellersBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.BestSellersBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.CategoriesBox {
  background: #f4a460;
}
TD.CategoriesBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.CategoriesBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.CurrenciesBox {
  background: #f4a460;
}
TD.CurrenciesBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.CurrenciesBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.InformationBox {
  background: #f4a460;
}
TD.InformationBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.InformationBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.LanguagesBox {
  background: #f4a460;
}
TD.LanguagesBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.LanguagesBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ManufacturerInfoBox {
  background: #f4a460;
}
TD.ManufacturerInfoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.ManufacturerInfoBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ManufacturersBox {
  background: #f4a460;
}
TD.ManufacturersBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.ManufacturersBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.OrderHistoryBox {
  background: #b6b7cb;
}
TD.OrderHistoryBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #b6b7cb;
  color: #ffffff;
}
.OrderHistoryBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ProductNotificationsBox {
  background: #b6b7cb;
}
TD.ProductNotificationsBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #b6b7cb;
  color: #ffffff;
}
.ProductNotificationsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ReviewsBox {
  background: #f4a460;
}
TD.ReviewsBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #f4a460;
  color: #ffffff;
}
.ReviewsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.SearchBox {
  background: #f4a460;
}
TD.SearchBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.SearchBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.ShoppingCartBox {
  background: #f4a460;
}
TD.ShoppingCartBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.ShoppingCartBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.SpecialsBox {
  background: #f4a460;
}
TD.SpecialsBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.SpecialsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.TellaFriendBox {
  background: #f4a460;
}
TD.TellaFriendBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.TellaFriendBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


.WhatsNewBox {
  background: transparent;
}
TD.WhatsNewBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #f4a460;
  color: #ffffff;
}
.WhatsNewBoxContents {
  background: transparent;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 1px;
  border-color: #f4a460;
  border-style: solid
}



#42   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 07 April 2005 - 08:56

The code is this one......


.infoBox {
  background: #b6b7cb;
}

Since you have the customizer installed, you can and have to change every one for every single box individually.

for instance the bestseller box...

.BestSellersBox {
  background: #f4a460;
}

/cool.gif' class='bbc_emoticon' alt='B)' />

Edited by toyicebear, 07 April 2005 - 08:56.


#43   haru

haru
  • Members
  • 110 posts

Posted 07 April 2005 - 09:05

Thanx so much. I replaced the infobox code with
infoBox {
background: #b6b7cb;

Then I copied the background: #f4a460; code to the What's new box.

That's what I get: My Webpage

The box is full of orange, whan I would like it transparent.

.WhatsNewBox {
background: #f4a460;
}
TD.WhatsNewBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: transparent;
  color: #ffffff;
}
.WhatsNewBoxContents {
  background: transparent;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;



#44   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 07 April 2005 - 09:45

The inside of the boxes are controled here:

"namebox"Contents

example.......

.ReviewsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}


one small hint....make transparent gifs for your box corners...just make one set and then upload it to all the different boxes folders in /images/

/cool.gif' class='bbc_emoticon' alt='B)' />

Edited by toyicebear, 07 April 2005 - 09:47.


#45   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 07 April 2005 - 09:51

The inside of the boxes are controled here:

"namebox"Contents

example.......

.ReviewsBoxContents {
  background: #ffdab9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}
one small hint....make transparent gifs for your box corners...just make one set and then upload it to all the different boxes folders in  /images/

/cool.gif' class='bbc_emoticon' alt='B)' />

<{POST_SNAPBACK}>



Att... If you set a background to transparent..."see through" ...you box will ofcourse have the color of the sites background...in your sites case ...orange...

Edited by toyicebear, 07 April 2005 - 09:52.


#46   toasty

toasty
  • Members
  • 253 posts

Posted 07 April 2005 - 10:28

In general I found it useful to discover that the info box priciple is simple (but rarely explained!). In standard osC all can be controlled via the CSS stylesheet. I copy from my notes below (with a little extra notation for clarity) in case some others find it useful:

Info boxes consist of three tables:
1. The heading table. To change the info box heading style use:

TD.infoBoxHeading :: This controls the style of all the headings in the side boxes and new products box. Control color, background image, font, etc.

2. The 'Outer' table

* .infoBox :: This specifies the background color of the infoboxes (i.e the Outer Table). These are all the side boxes and the new products box on the main page. (The border is created by the space between the Outer and the Inner tables (see .infoBoxContents) and/or by the background of this table.

* .infoBoxContents :: This specifies the styles for all the actual contents of the infoboxes (The Inner Table). These are all the side boxes and the new products box. This is where you can change the background color and image of the side boxes. The font setting only seems to have an effect on the 'Shopping Cart' , 'Order History' and 'Bestsellers' box's fonts

So for one infobox you have the following html produced (copying straight from the source) :
::for the heading it uses the infoBoxHeading table cell class::
// Begin Heading Table 
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td height="14" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt="" width="11" height="14"></td>
    <td width="100%" height="14" class="infoBoxHeading">my infobox text heading here</td>
    <td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
  </tr>
</table>
// End Heading Table
===================
::for the outer table is uses the table class infoBox::
//Begin 'Outer contents Table'
<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">
  <tr>
    <td>
===================
::for the inner table it uses the table class infoBoxContents::
// Begin 'Inner, or nested, contents table
          <table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">

  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
  <tr>
    <td class="boxText"><a href="http://mydomain.com/catalog/index.php?cPath=25&osCsid=f66ae9ddede773e852656926c8af95e3">Ladies </a><br><a href="http://mydomain.com/catalog/index.php?cPath=24&osCsid=f66ae9ddede773e852656926c8af95e3"><b>Mens </b></a><br><a href="http://mydomain.com/catalog/index.php?cPath=22&osCsid=f66ae9ddede773e852656926c8af95e3">Unisex </a><br></td>
  </tr>
  <tr>
    <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
  </tr>
</table>
==> END OF inner (or nested) contents table
</td>
  </tr>
</table>
==> END OF outer contents table
Of course if your clever you can get a little more imaginative than just borders, but I think you get he idea by now. Hope it helps someone - happy hunting.

#47   toasty

toasty
  • Members
  • 253 posts

Posted 07 April 2005 - 10:34

Thanx so much. I replaced the infobox code with
infoBox {
background: #b6b7cb;

Then I copied the background: #f4a460; code to the What's new box.

That's what I get: My Webpage

The box is full of orange, whan I would like it transparent.

<{POST_SNAPBACK}>



By the way Harumi, I had a quick look at your site - looking good - I would suggest you install Ultrapics and reduce the size of your image files by using optimised smaller files and different images for the product page. It takes forever to load (I'm on a 1Gb line). The Ultra pics contrib is A1 !!

#48   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 07 April 2005 - 10:39

* .infoBoxContents :: This specifies the styles for all the actual contents of the infoboxes (The Inner Table). These are all the side boxes and the new products box. This is where you can change the background color and image of the side boxes. The font setting only seems to have an effect on the 'Shopping Cart' , 'Order History' and 'Bestsellers' box's fonts



This is because the other boxes contains mostely links , where the font and color are controlled here:

A {
  color: #575757;
  text-decoration: none;
}

A:hover {
  color: #575757;
  text-decoration: underline;
}

/cool.gif' class='bbc_emoticon' alt='B)' />

#49   toasty

toasty
  • Members
  • 253 posts

Posted 07 April 2005 - 11:21

This is because the other boxes contains mostely links ....



Well of course that's what I meant! /blush.gif' class='bbc_emoticon' alt=':blush:' />

#50   haru

haru
  • Members
  • 110 posts

Posted 07 April 2005 - 15:42

Thank you all for yopur contribution. I am getting somewhere!

Thanx for the advice to reduce pic size, I will certainly do that once I have solved the template problem.

Now my site looks like this and it is almost 1 AM here in Tokyo so I will quit for today.

My next problem will be how do get rid of those little corners on top of each box (I am not sure what is their purpose)

Then, where can I change the color of the top and bottom big red burgundy lines?

And finaly, how could I put the OScommerce copyright message bellow my bottom banner?

I know that is a lot to ask!

See ya tomorrow! /laugh.gif' class='bbc_emoticon' alt=':lol:' />

Haru.

#51   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 07 April 2005 - 16:31

Congarts..your siyte is comming along very nicely... /thumbsup.gif' class='bbc_emoticon' alt=':thumbsup:' />


1. infobox corners you can find in the /images folder , they are placed in individual folders with the name of the different infoboxes.

There are 3 relevant .gif in each folder.

corner_left.gif
corner_right.gif
corner_right_left

they are 11x14px in size

Make 3 new transparent .gifs with the same names.

Now upload the 3 new gifs, overwriting the existing ones in every /images/infobox folder.

Done.....

2. top and bottom lines, are in the stylesheet...

top..

TR.headerNavigation {
/*  background: #bbc3d3; removed for ISM */
}

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
/*  background: #bbc3d3; removed for ISM */
  color: #ffffff;
  font-weight : bold;
}

bottom:

TR.footer {
/*  background: #bbc3d3; removed for ISM */
}

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
/*	background: #bbc3d3; removed for ISM */
  color: #ffffff;
  font-weight: bold;
}


3. banner in footer...

change this in footer.php:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
Copyright &copy; 2003 <a href="http://www.oscommerce.com" target="_blank">osCommerce</a><br>Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a>    </td>
  </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><a href="http://www.dentsdelion.com/Sales/redirect.php?action=banner&goto=4" target="_blank"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="700" height="100" id="Bannière_700x100" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images/banners/dentsdelion_big.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="images/banners/dentsdelion_big.swf" quality="high" wmode="transparent" width="700" height="100" name="Bannière_700x100" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object>
</a></td>
  </tr>
</table>

To this:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><a href="http://www.dentsdelion.com/Sales/redirect.php?action=banner&goto=4" target="_blank"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="700" height="100" id="Bannière_700x100" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images/banners/dentsdelion_big.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="images/banners/dentsdelion_big.swf" quality="high" wmode="transparent" width="700" height="100" name="Bannière_700x100" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object>
</a></td>
  </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
Copyright &copy; 2003 <a href="http://www.oscommerce.com" target="_blank">osCommerce</a><br>Powered by <a href="http://www.oscommerce.com" target="_blank">osCommerce</a>    </td>
  </tr>
</table>


Cheers... /cool.gif' class='bbc_emoticon' alt='B)' />

#52   webtrek

webtrek
  • Members
  • 38 posts

Posted 07 April 2005 - 17:58

Thank you all for yopur contribution. I am getting somewhere!

Thanx for the advice to reduce pic size, I will certainly do that once I have solved the template problem.

Now my site looks like this and it is almost 1 AM here in Tokyo so I will quit for today.

My next problem will be how do get rid of those little corners on top of each box (I am not sure what is their purpose)

Then, where can I change the color of the top and bottom big red burgundy lines?

And finaly, how could I put the OScommerce copyright message bellow my bottom banner?

I know that is a lot to ask!

See ya tomorrow! /laugh.gif' class='bbc_emoticon' alt=':lol:' />

Haru.

<{POST_SNAPBACK}>


If you have significantly modified your site you may replace it with your own copyright info. Just don't remove the copyright info from the admin terminal

#53   iguanairs

iguanairs
  • Members
  • 29 posts

Posted 07 April 2005 - 18:53

Hello,
I tried both of the border contributions that are in this thread. Though I appreciate the work that the members put in on them, I didn't care for how either of them operated or appeared. I am going to create my store with just using the graphics in my infopheaders for now, and I will install a test version of osc and run a crash course with making some serious enhancements later on. (Once I figure out how everything works, I will be able to modify this program the same way I modify my vBulletin boards.)

haru,

Not sure if I caught your site on an off moment or not, but your home page was loading extremely slow. I am on a DSL connection, and it was slow for me. So slow, I didn't bother waiting for it. You may want to look into that if it is a regular occurence. If the site loads too slow, people will leave. In this day and age, we have no patience. lol

#54   iguanairs

iguanairs
  • Members
  • 29 posts

Posted 07 April 2005 - 23:28

Hello,
I am driving myself crazy. I am using the infoboxheaderscategories modification to include my graphics to the header of each block. I went through every "box' and made the changes. Now I have the center block that says "New Products for April, as well as a news block that I can't locate anywhere. I know I am over looking the call to the css for those 2. Could someone lead me to the correct location? lol

#55   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 08 April 2005 - 01:16

Hello,
        I am driving myself crazy. I am using the infoboxheaderscategories modification to include my graphics to the header of each block. I went through every "box' and made the changes. Now I have the center block that says "New Products for April, as well as a news block that I can't locate anywhere. I know I am over looking the call to the css for those 2. Could someone lead me to the correct location? lol

<{POST_SNAPBACK}>


Post your web site address , then it would be easier to check and give you feedback....

#56   jewelrytrends

jewelrytrends
  • Members
  • 285 posts

Posted 08 April 2005 - 02:02

Hi,

I have the following question, my cart is installed in the root of the website, but in my breadcrumb I still have the link to go to the catalog, I would like to remove this link, can you tell me how to do this, and also how can I remove the -> in the categories, because I put the option for count products in categorie out.

Thanks,

Denice

#57   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 08 April 2005 - 02:19

Hi,

I have the following question, my cart is installed in the root of the website, but in my breadcrumb I still have the link to go to the catalog, I would like to remove this link, can you tell me how to do this, and also how can I remove the -> in the categories, because I put the option for count products in categorie out.

Thanks,

Denice

<{POST_SNAPBACK}>



To get a nicer categories box....choose one of these to contributions...

1. Greate Categories

2. Category Box Enhancement


You can change the breadcrumb in includes/application_top.php

change:
// include the breadcrumb class and start the breadcrumb trail
  require(DIR_WS_CLASSES . 'breadcrumb.php');
  $breadcrumb = new breadcrumb;

  $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);
  $breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));

To:
// include the breadcrumb class and start the breadcrumb trail
  require(DIR_WS_CLASSES . 'breadcrumb.php');
  $breadcrumb = new breadcrumb;

  $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);
  //$breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));

Edited by toyicebear, 08 April 2005 - 02:20.


#58   jewelrytrends

jewelrytrends
  • Members
  • 285 posts

Posted 08 April 2005 - 03:19

To get a nicer categories box....choose one of these to contributions...

1. Greate Categories

2. Category Box Enhancement
You can change the breadcrumb in  includes/application_top.php

change:

// include the breadcrumb class and start the breadcrumb trail
  require(DIR_WS_CLASSES . 'breadcrumb.php');
  $breadcrumb = new breadcrumb;

  $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);
  $breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));

To:
// include the breadcrumb class and start the breadcrumb trail
  require(DIR_WS_CLASSES . 'breadcrumb.php');
  $breadcrumb = new breadcrumb;

  $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);
  //$breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));

<{POST_SNAPBACK}>

Thanks, I did what you said about the breadcrumb, now I'm going to look to the contrib you mentioned

#59   haru

haru
  • Members
  • 110 posts

Posted 08 April 2005 - 04:50

Thank you Nick.
I got 2 out of three.
But my Catalog/includes/footer.php code is quite different from the one you are showing (where did you get it?)

Here it is:

<?php
/*
  $Id: footer.php,v 1.26 2003/02/10 22:30:54 hpdl Exp $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright © 2003 osCommerce

  Released under the GNU General Public License
*/

  require(DIR_WS_INCLUDES . 'counter.php');
?>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="footer">
    <td class="footer">&nbsp;&nbsp;<?php echo strftime(DATE_FORMAT_LONG); ?>&nbsp;&nbsp;</td>
    <td align="right" class="footer">&nbsp;&nbsp;<?php echo $counter_now . ' ' . FOOTER_TEXT_REQUESTS_SINCE . ' ' . $counter_startdate_formatted; ?>&nbsp;&nbsp;</td>
  </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
<?php
/*
  The following copyright announcement can only be
  appropriately modified or removed if the layout of
  the site theme has been modified to distinguish
  itself from the default osCommerce-copyrighted
  theme.

  For more information please read the following
  Frequently Asked Questions entry on the osCommerce
  support site:

  http://www.oscommerc...php/faq,26/q,50

  Please leave this comment intact together with the
  following copyright announcement.
*/

  echo FOOTER_TEXT_BODY
?>
    </td>
  </tr>
</table>
<?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><?php echo tep_display_banner('static', $banner); ?></td>
  </tr>
</table>
<?php
  }
?>

<?php
///////////////////
// [0001] WebMakers.com Added: Center Shop
// This goes at the very end of the footer after all the tables
///////////////////

  if ( CENTER_SHOP_ON == 'on' ) {
 
///////////////////
// [0001] close table used to center
///////////////////
?>
      </td></tr>
    </table>
<?php
    if ( CENTER_SHOP_BACKGROUND_ON == 'on' ) {
   
///////////////////
// [0001] Add color to bottom of screen for large displays - needed especially on notebooks that run at 1600x1200
// close table used for outer bgcolor around the shop
///////////////////
?>
      </td></tr>
      <tr><td height="150">&nbsp;</td></tr>
    </table>
<?php
    }
  }
///////////////////
// [0001] EOF: WebMakers.com Added: Center Shop
///////////////////
///////////////////
?>


Thank you for your help, I had some trouble to make transparent gif (I have never quite understood gif stuff anyway), But I managed to do it.

Haru. /smile.gif' class='bbc_emoticon' alt=':)' />

#60   toyicebear

toyicebear
  • Community Sponsor
  • 6,380 posts

Posted 08 April 2005 - 05:26

The previous snip was from the html source of your web page...

Change this in your footer:

<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
<?php
/*
  The following copyright announcement can only be
  appropriately modified or removed if the layout of
  the site theme has been modified to distinguish
  itself from the default osCommerce-copyrighted
  theme.

  For more information please read the following
  Frequently Asked Questions entry on the osCommerce
  support site:

  http://www.oscommerce.com/community.php/faq,26/q,50

  Please leave this comment intact together with the
  following copyright announcement.
*/

  echo FOOTER_TEXT_BODY
?>
    </td>
  </tr>
</table>
<?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><?php echo tep_display_banner('static', $banner); ?></td>
  </tr>
</table>
<?php
  }
?>

To this:

<?php
  if ($banner = tep_banner_exists('dynamic', '468x50')) {
?>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><?php echo tep_display_banner('static', $banner); ?></td>
  </tr>
</table>
<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
<?php
/*
  The following copyright announcement can only be
  appropriately modified or removed if the layout of
  the site theme has been modified to distinguish
  itself from the default osCommerce-copyrighted
  theme.

  For more information please read the following
  Frequently Asked Questions entry on the osCommerce
  support site:

  http://www.oscommerce.com/community.php/faq,26/q,50

  Please leave this comment intact together with the
  following copyright announcement.
*/

  echo FOOTER_TEXT_BODY
?>
    </td>
  </tr>
</table>
<?php
  }
?>