Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Basics for design


toyicebear

Recommended Posts

Hi,

I have a question too  :thumbsup:

 

I'm making a store in www.templateslord.com. i have edited many things and it looks nice now, but it needs one more change.

 

As you can see i have removed the right colum, deleting all the content in colum_right.php.

 

But it seems the content of that file is inserted in an other table which is still there,

in my html output i see this

 

<!-- body_text_eof //-->
? ?<td width="175" valign="top"><table border="0" width="175" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->



<!-- right_navigation_eof //-->
? ?</table></td>
?</tr>
</table>
<!-- body_eof //-->

 

I'd like to remove all that code but i can't find the php file that outputs it.

Any idea?

Thanks in advance

 

I took a look at your page and it seems you have removed it already.....

 

Nice look by the way......

 

 

For future reference...the call for the collum right and left is in every .php file in the catalog, so if you want to completly remove the reference you will have to edit all the files.

 

 

B)

Link to comment
Share on other sites

  • Replies 1.5k
  • Created
  • Last Reply
7. If a database table must be altered (or added) when installing a contribution, many readme files don't remind you to see whether the table ID (configuration group ID, etc.) is already in use. If you've installed a few contributions already, make it a habit to look at your database structure FIRST to see whether the IDs being assigned in the SQL text are open or not.

 

I do this by going to phpMyAdmin and browing through the structure of the table affected to see if the ID numbers are open. If they're already in use, change the ID numbers in the SQL text before continuing. If you're not sure how to do that, ASK FIRST. Somebody will help you.

 

HTH,

 

Terry

 

Terry,

This is a fantastic tip. I know how to work with the MySQL tables and phpMyAdmin. I would love to see a practical example of where this has been an issue -- a specific contribution or whatever. I am going to be installing a number of contributions soon, and I want to make sure that I have the process down right. I want to see exactly what you mean by "already in use" for the ID numbers.

 

I like also like the comment on not playing with a live store. I had a user say: "Only college kids should be developing on the internet now." If it were my son, given the state of his dorm room, he would be in playing with your live store. :D

Thanks,

 

David Watson

Link to comment
Share on other sites

Hi David,

 

I debated adding a live chat contrib to my store (Acheron's Live Support). It was the FIRST contribution where I've seen a notation by the author reminding you to check that the configuration_group_id and configuration_id value do not already exist in your database.

 

I've added numerous contributions to my site, and the assigned IDs in the SQL query were indeed already in use in my DB. I can only imagine the trouble I would have had if I'd not checked first. So I changed the SQL query to use numbers that I then confirmed were not in use before running the query. (Ultimately, I decided not to install the contrib -- at least for now. I may still do so in the future.)

 

It was definitely an eye-opener for me though -- and something I won't forget to do in the future. :)

 

Terry

Terry Kluytmans

 

Contribs Installed: Purchase Without Account (PWA); Big Images, Product Availability, Description in Product Listing, Graphical Infobox, Header Tags Controller, Login Box, Option Type Feature, plus many layout changes & other mods of my own, like:

 

Add order total to checkout_shipment

Add order total to checkout_payment

Add radio buttons at checkout_shipping (for backorder options, etc.)

Duplicate Table Rate Shipping Module

Better Product Review Flow

 

* If at first you don't succeed, find out if there's a prize for the loser. *

Link to comment
Share on other sites

thanks - this is all fantastic (i was just about to start a topic asking how I change the look of the site)  :-"

Hi,

This is by far the most useful thread there is outhere. Thanks.

I still have some questions though. I downloaded the buttons from contribution but need to change text inside them. Nobody offers "My account" or "Cart Contents" buttons for some reason. I am using Macromedia Fireworks for image editing, but a newbie at editing buttons.

Another questions is: If i am using sts_template and want ot change "Buy now" buttons and all the buttons through out the page where do i find them?

 

Thanks,

Ruslan

We are not that rich to buy cheap things

Link to comment
Share on other sites

Hi,

This is by far the most useful thread there is outhere.  Thanks.

I still have some questions though.  I downloaded the buttons from contribution but need to change text inside them.  Nobody offers "My account" or "Cart Contents" buttons for some reason.  I am using Macromedia Fireworks for image editing, but a newbie at editing buttons.

Another questions is: If i am using sts_template and want ot change "Buy now" buttons and all the buttons through out the page where do i find them?

 

Thanks,

Ruslan

Ok i found where to change the buttons (catalog/includes/languages/english/images/buttons), but still can't change text inside some of the buttons.

 

Another problem of mine is that i can't seem to find how to change the background of boxes where links like "categories", "shopping cart", "order history", "languages" are located. I mean those grey boxes by default on the main page. I tried many changes in stylesheet.css but can't seems to nail the right one.

See the site for better understanding:

 

www.escapetorussia.com/Store/catalog

 

Please help,

Thanks in advance,

Ruslan

We are not that rich to buy cheap things

Link to comment
Share on other sites

Ok i found where to change the buttons (catalog/includes/languages/english/images/buttons), but still can't change text inside some of the buttons.

 

Another problem of mine is that i can't seem to find how to change the background of boxes where links like "categories", "shopping cart", "order history", "languages" are located.? I mean those grey boxes by default on the main page.? I tried many changes in stylesheet.css but can't seems to nail the right one.

See the site for better understanding:

 

www.escapetorussia.com/Store/catalog

 

Please help,

Thanks in advance,

Ruslan

 

Hi..

 

I see that you managed to change them, they show up white at your site now....

 

For furture reference the colors for the "inside" of infoboxes are located in stylesheet.css:

 

.infoBoxContents {
?background: #f8f8f9;
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
}

 

In regards to buttons, a lot of the contribs has a template file attached inside, this is usually in .psd (photoshop format) , this template you can then use as a basis and just change the text to your new choosen one.

 

If your graphics program can not handle .psd , you will have to edit one of the other buttons to have no text, save it as your own template and then you can make the as many buttons with different text as you like with a basis in this template.

 

Another way is ofcoourse to download The Gimp, open sourch graphic program which supports most formats.

 

B)

Link to comment
Share on other sites

Hello,

I am not new to graphics, so I like to add as many custom ones as I can. I have noticed that with Cubecart (A HORRID program) that they have all of the "blocks" on the homepage encased by cells. This allows for some really unique appearnaces.

 

I have combed through many of the files pertaining to OSC, and I don't see how I could change the borders around the blocks to display graphics. I am completely capable of creating cell tables, and would even add them to this site if I knew WHERE to add them. lol

 

 

I would be most appreciative if someone could guide me on how I could pull this off.

 

(For those that care to know, Cubecart is NOT a good program to use as a storefront. It has some features, like the graphics, that I liked. The shops coding though contains a great deal of bugs. This includes the newest version, but also includes the complete line of 2.0 versions. I am switching over to OSC because of this. Also, they don't include shipping with their release. lol I guess they just assume shipping is free? Nonetheless, don't waste your time with that application as I did. It may be smaller and easier to customize, but OSC is much more powerful and comes with the items required to maintain a functioning site....like shipping and handling! lol)

Link to comment
Share on other sites

Hello,

� � � � I am not new to graphics, so I like to add as many custom ones as I can. I have noticed that with Cubecart (A HORRID program) that they have all of the "blocks" on the homepage encased by cells. This allows for some really unique appearnaces.

 

I have combed through many of the files pertaining to OSC, and I don't see how I could change the borders around the blocks to display graphics. I am completely capable of creating cell tables, and would even add them to this site if I knew WHERE to add them. lol

 

 

I would be most appreciative if someone could guide me on how I could pull this off.

 

(For those that care to know, Cubecart is NOT a good program to use as a storefront. It has some features, like the graphics, that I liked. The shops coding though contains a great deal of bugs. This includes the newest version, but also includes the complete line of 2.0 versions. I am switching over to OSC because of this. Also, they don't include shipping with their release. lol I guess they just assume shipping is free? Nonetheless, don't waste your time with that application as I did. It may be smaller and easier to customize, but OSC is much more powerful and comes with the items required to maintain a functioning site....like shipping and handling! lol)

 

Firstly the looks of the boxes is controlled in the stylesheet.css file, and its possible to change colors and to add graphical images to the boxes there.

 

If you would like to change the way the boxes layout are functioning today , this is controlled in a file called boxes.php located in the folder /includes/classes

 

Alternatively you could use on of these contributions.....

 

1.

Infobox Skin Manager

 

2.

Graphical Borders

 

 

B)

Link to comment
Share on other sites

Hello,

I can't believe I didn't see the graphical boxes contrib. I figured out how to add graphics to the infoboxheadings. I just never realized there was a graphics "kit" for the borders as well. Thank you for pointing me in the right direction.

Link to comment
Share on other sites

Firstly the looks of the boxes is controlled in the stylesheet.css file, and its possible to change colors and to add graphical images to the boxes there.

 

If you would like to change the way the boxes layout are functioning today , this is controlled in a file called boxes.php located in the folder  /includes/classes

 

Alternatively you could use on of these contributions.....

 

1.

Infobox Skin Manager

 

2.

Graphical Borders

B)

 

Wow!!! I am going to add one of these Cont. to my site. Anyone like one particularly better than the other?

Link to comment
Share on other sites

Hello,

Unfortunantly, the second contribution doesn't work correctly. I am fairly experienced, and I couldn't figure out the problems and there are cross browser issues. (Mozilla refuses to show the bottom images.)

 

I am preparing to see if I can get the first contribution to work.

Link to comment
Share on other sites

Hello,

        Unfortunantly, the second contribution doesn't work correctly. I am fairly experienced, and I couldn't figure out the problems and there are cross browser issues. (Mozilla refuses to show the bottom images.)

 

I am preparing to see if I can get the first contribution to work.

 

I am playing with the first contribution, but there are a TON of bugs in one of the downloads. Trying to get the best and most updated download was not a wise choice on my part. It calls files that doesn't exist and even called upon a sql file that was named incorrectly.

 

I am trying to work around the bugs to see if I can get it to work.

Link to comment
Share on other sites

Hello,

        Unfortunantly, the second contribution doesn't work correctly. I am fairly experienced, and I couldn't figure out the problems and there are cross browser issues. (Mozilla refuses to show the bottom images.)

 

I am preparing to see if I can get the first contribution to work.

 

Thanks, I will try the first one too....I use firefox, cross-browser compatability is very important to me.

Link to comment
Share on other sites

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

}

Link to comment
Share on other sites

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;
}

 

B)

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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/

 

B)

Link to comment
Share on other sites

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/

 

B)

 

 

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

 

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 !!

Link to comment
Share on other sites

* .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;
}

 

B)

Link to comment
Share on other sites

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! :lol:

 

Haru.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...