Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

shop is almost the way I want it, I need a little help please.

dazza0101

By dazza0101
in General Support

Recommended Posts

dazza0101

dazza0101

Posted
Posted

Hi,

 

The only reason I have gotten this far in modifying my shop to the way I want it, is because of this excellent site http://oscommerce-template-easy.com/oscomm...round-image.htm

 

And the link will take you to the modifications that I'm having trouble with, in fact there are two I would greatly appreciate some help with, adding a background image and removing the space at the top of the page above my banner.

 

Here's my website http://www.myozeshop.com

 

The only real significant modification I have made is adding a contribution which is here http://addons.oscommerce.com/info/3570/v,22 basic design pack, I then made modifications guided by the tutorials in the link above, I suspect the installation of the basic design pack is causing some conflict.

 

This is my style sheet and I have underlined where I have attempted this modification.

 

/*

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

 

osCommerce, Open Source E-Commerce Solutions

http://www.oscommerce.com

 

Copyright © 2003 osCommerce

 

Released under the GNU General Public License

*/

 

.boxText { font-family: Verdana, 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 {

text-align: center;

background: #ffffff;

color: #666666;

margin: 0px;

}

 

.fixcenter {

width: 772px;

border: solid; border-width: 5px; border-color: #4653E7;

/*background: #ffffff;*/

background-image: url("/images/header_bg.jpg");

color: #000000;

margin: auto;

margin-top: 20px;

text-align: left;

}

 

A {

color: #000000;

text-decoration: none;

}

 

A:hover {

color: #AABBDD;

text-decoration: underline;

}

 

FORM {

display: inline;

}

 

TR.header {

background: #ffffff;

background-image: url("images/");header_background.gif

height: 100px;

}

 

TR.headerNavigation {

background: #1D0075;

}

 

TD.headerNavigation {

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

font-size: 12px;

background: #3366FF;

color: #ffffff;

font-weight : bold;

height : 25;

}

 

A.headerNavigation {

color: #FFFFFF;

}

 

A.headerNavigation:hover {

color: #ffffff;

}

 

table.left_column {

margin: 0px 15px 0px 0px;

}

 

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: #1D0075;

}

 

TD.footer {

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

font-size: 10px;

background: #4653E7;

color: #ffffff;

font-weight: bold;

}

 

.infoBox {

background: #3366FF;

}

 

.infoBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

.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: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

 

TD.infoBox, SPAN.infoBox {

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

font-size: 10px;

}

 

.contentBox {

/*background: #3366FF;*/

}

 

TD.contentBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

 

.contentBoxContents {

/*background: #eeeeee;*/

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

font-size: 10px;

}

 

 

.BestSellersBox {

background: #3366FF;

}

TD.BestSellersBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.BestSellersBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.CategoriesBox {

background: #3366FF;

}

TD.CategoriesBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.CategoriesBoxContents {

background: #ffffff;

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

font-size: 10px;

}

 

 

.CurrenciesBox {

background: #3366FF;

}

TD.CurrenciesBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.CurrenciesBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.InformationBox {

background: #3366FF;

}

TD.InformationBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.InformationBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.LanguagesBox {

background: #3366FF;

}

TD.LanguagesBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.LanguagesBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.ManufacturerInfoBox {

background: #3366FF;

}

TD.ManufacturerInfoBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.ManufacturerInfoBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.ManufacturersBox {

background: #3366FF;

}

TD.ManufacturersBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.ManufacturersBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.OrderHistoryBox {

background: #3366FF;

}

TD.OrderHistoryBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.OrderHistoryBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.ProductNotificationsBox {

background: #3366FF;

}

TD.ProductNotificationsBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.ProductNotificationsBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.ReviewsBox {

background: #3366FF;

}

TD.ReviewsBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.ReviewsBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.SearchBox {

background: #3366FF;

}

TD.SearchBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.SearchBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.ShoppingCartBox {

background: #3366FF;

}

TD.ShoppingCartBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.ShoppingCartBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.SpecialsBox {

background: #3366FF;

}

TD.SpecialsBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.SpecialsBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.TellaFriendBox {

background: #3366FF;

}

TD.TellaFriendBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.TellaFriendBoxContents {

background: #f8f8f9;

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

font-size: 10px;

}

 

 

.WhatsNewBox {

background: #3366FF;

}

TD.WhatsNewBoxHeading {

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

font-size: 10px;

font-weight: bold;

background: #1D0075;

color: #ffffff;

}

.WhatsNewBoxContents {

background: #f8f8f9;

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: #dddddd;

}

 

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: #ffffff;

}

 

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #3366ff;

border-spacing: 1px;

}

 

.productListing-heading {

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

font-size: 10px;

background: #1D0075;

color: #FFFFFF;

font-weight: bold;

}

 

TD.productListing-data {

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

font-size: 10px;

}

 

A.pageResults {

color: #0000FF;

}

 

A.pageResults:hover {

color: #0000FF;

background: #FFFF33;

}

 

TD.pageHeading, DIV.pageHeading {

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

font-size: 20px;

font-weight: bold;

color: #1D0075;

}

 

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: 11px;

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

 

.cssButton {

background: #dddddd;

color: #666666;

width: 100px;

height: 20px;

vertical-align: top;

font-weight: normal;

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

font-size: 12px;

cursor: pointer;

text-align: center;

text-decoration: none;

border: 1px;

border-style: solid;

border-color: #1D0075;

border-spacing: 1px;

}

 

#thecategories a:hover {

background-color: #eeeeee;

color: #000000;

}

 

.catwithsubs, .catwithnosubs {

padding-right: 5px;

}

 

#thecategories {

position: relative;

top: -9px;

margin-bottom: -16px;

width: 140px;

}

 

.activelink {

display: block;

font-weight: bold;

}

 

#thecategories a {

display: block;

padding-bottom: 7px;

padding-top: 3px;

width: 100%;

}

 

/*mozilla fix*/

html>body #thecategories a {

width: auto;

}

/*end of mozilla fix*/

 

#topcat a {

padding-left: 5px;

}

 

#secondcat a {

padding-left: 20px;

}

 

#thirdcat a {

padding-left: 35px;

}

 

#fourthcat a {

padding-left: 50px;

}

 

#fifthcat a {

padding-left: 65px;

}

 

Any help is greatly appreciated,

 

Darren :) .

IF IT AINT BROKE, I CAN FIX IT TILL IT IS!

dazza0101

dazza0101

Posted
  • Author
Posted

Any ideas at all, :mellow:

 

I'm willing to give a rough guess a go, :D :D

 

Darren. :)

IF IT AINT BROKE, I CAN FIX IT TILL IT IS!

dazza0101

dazza0101

Posted
  • Author
Posted

Hi stonjie,

 

Thank you for your reply, :)

 

I actually have a server on my local network with a duplicate shop set up for testing before I make changes to the main site, I actually have the same stylesheets on both sites but I never uploaded the image to the main site because I couldn't get it to work on the test site. :(

 

I had read on a thread earlier about these modifications, that I had already tried on my test site and they didn't work, but for some reason it works on my main site, fantastic it finally works. (w00t)

 

This is the change, background-image: url('images/header_bg.jpg');

 

Compared to, background-image: url("/images/header_bg.jpg");

 

Well there's a lesson learnt, if it doesn't work on my test site it still may work on the main site, :blink:

 

I also had a go at adding an image two the box headers, maybe that will work for me on the main site as well.

 

Thanks again for your reply stonjie, any ideas on how to remove the white space above my banner? :mellow:

 

 

Darren. :)

IF IT AINT BROKE, I CAN FIX IT TILL IT IS!

stonjie

stonjie

Posted
Posted
Hi stonjie,

Thanks again for your reply stonjie, any ideas on how to remove the white space above my banner? :mellow:

Darren. :)

 

First thing I would try:

 

change:

.fixcenter {

background-image:url(images/header_bg.jpg);

border:5px solid #4653E7;

color:#000000;

margin:20px auto auto;

text-align:left;

width:772px;

}

 

to

margin:0px auto auto:

 

http://www.w3schools.com/css/css_reference.asp#margin

 

you have a 20px margin on top. or you could just delete the 20px

stonjie

stonjie

Posted
Posted

I just reread you question

 

I haven't dealt with banners, and there isn't one on your site for me to check

dazza0101

dazza0101

Posted
  • Author
Posted

Hi stonjie, isn't that miserable looking thing I designed at the top of my page with a picture of a spider it in it, called a "banner"??

 

I think I should be pretty right for now, :thumbsup:

 

Thanks for your help stonjie, I really appreciated,

 

Darren. :)

IF IT AINT BROKE, I CAN FIX IT TILL IT IS!

GLWalker

♥GLWalker

Posted
Posted
Hi stonjie, isn't that miserable looking thing I designed at the top of my page with a picture of a spider it in it, called a "banner"??

 

I think I should be pretty right for now, :thumbsup:

 

Thanks for your help stonjie, I really appreciated,

 

Darren. :)

Ive heard it refered to as a banner before, but most would call it the header, and that thing would be your header image.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

dazza0101

dazza0101

Posted
  • Author
Posted

Ok, I'll call it the header image, from now on, :D

 

But in the case of my header image in particular, I think monstrosity would be more fitting until I can come up with something better. :'(

 

Darren. :)

IF IT AINT BROKE, I CAN FIX IT TILL IT IS!

Archived

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

Go to topic listing
×
×
  • Create New...