Almost done just one or two questions - how to make my page look like this?

Hi everyone, I have to say this is a great shopping cart... I have been reading and following instructions on things and almost have my cart done. I have a few things though I am stuck on and would like some assistance if possible.

the url is:http://pwnedtees.com/shop2/

First thing is I would like put a large header picture under the logo and across the entire site like the one here: http://www.bustedtees.com/

and remove where it says home in the left habd corner by categories.

Next I would like this page: http://pwnedtees.com/shop2/index.php?main_page=product_info&products_id=7

To look more like this: http://www.bustedtees.com/shirt/ichoochoo/male

I would like larger pictures and multiple ones. I would also like to be able to ad a link that moves you from the mens to the womens of the same shirt.

Does that make sense? Maybe more like this: http://www.nerdyshirts.com/productdetails.aspx?id=100088735

see how they have the little male/female icons something like that with the bigger pictures and when you click on the smaller ones they move into the bigger frame.

Sorry about the long post... I was hoping that I could figure this out on my own but I have started over like 1000 times this week trying things I have read and none of them worked.

Thank you in advance

Can anyone help me with any of these issues? I still can't figure it out....

Thanks again

Your compilation of your wants is a bit too complicated to address in a forum exchange.

You might try posting in the commercial help forum here

Even adding the picture below the logo? Can you tell me what file I would have to use to do that in? All I want to do is seperate the logo from the content area with a space and then add a photo in between. I am just not sure what page it do it on and what is the exact coding for the space and adding the picture is all.

I can understand the other part of redesigning the other pages, and I will post that in the commercial section.

From you description I have no idea or visualization of what you are trying to do. No idea of the picture that you want to include, the space you reference etc. I am sure that you know what you want but this is not coming across in your post at least to me.

You can attempt to place it as a header background image but to space it out you will need to edit the tpl_header.php file

Okay... I am sorry it is hard to explain things sometimes....

what I want to do is this:

This is how it looks now: http://www.pwnedtees.com/site_now.jpg

and this is what I want to add to it:

http://www.pwnedtees.com/sample_want.jpg

Does that explain it better???

image in stylesheet.css

#headerWrapper {
background-image: url(../images/your image.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
height: ???px;
position: bottom;
}

Thankyou I will do that now, and see what happens, the other part about the inside page additions I posted to the commercial area.

To add the multiple pictures I just need to add the pictures and follow the tutorial correct?

I see a java hack on your contribution pages that mat work for the roll over images.... =)

I do appreciate your help I am going to go try that now...

:D

Sorry me again

I don't replace anything in the style sheet I just add this to it correct?

I don't replace anything in the style sheet I just add this to it correct?

Find it and seperate it out

Okay, now I have it floating underneath the logo...

http://www.pwnedtees.com/shop2/

how do I resolve that issue?

This is what I did to my style sheet:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [URL]http://www.zen-cart.com/license/2_0.txt[/URL] GNU Public License V2.0
 * @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
 */
 
body {
 margin: 0;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 62.5%;
 color: #FFFFFF;
 background-color: #000000;
 }
 
a img {border: none; }
 
a:link, #navEZPagesTOC ul li a {
 color: #FFFFFF;
 text-decoration: none;
 }
 
a:visited {
 color: #FFFFFF;
 text-decoration: none;
 }
 
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
 color: #FFFFFF;
 }
 
a:active {
 color: #FFFFFF;
 }
 
h1 {
 font-size: 1.5em;
 }
 
h2 {
 font-size: 1.4em;
 }
 
h3 {
 font-size: 1.3em;
 }
 
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
 font-size: 1.1em;
 }
 
.biggerText {
 font-size: 1.2em;
 }
 
h1, h2, h3, h4, h5, h6 {
 
    margin: 0.3em 3px;
 
}
 
CODE {
 font-family: arial, verdana, helvetica, sans-serif;
 font-size: 1em;
 }
 
FORM, SELECT, INPUT {
 display: inline;
 font-size: 1em;
 margin: 0.1em;
 }
 
TEXTAREA {
/* float: left;*/
 margin: auto;
 display: block;
 width: 95%;
 }
 
input:focus, select:focus, textarea:focus {
 background: #000000;
 }
 
FIELDSET {
 padding: 0.5em;
 margin: 0.5em 0em;
 border: 1px solid #cccccc;
 }
 
LEGEND {
 font-weight: bold;
 padding: 0.3em;
 }
 
LABEL, h4.optionName {
 line-height: 1.5em;
 padding: 0.2em;
 }
 
LABEL.checkboxLabel, LABEL.radioButtonLabel {
 margin: 0.5em 0.3em;
 }
 
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
 float: left;
 }
 
LABEL.inputLabel {
 width: 11em;
 float: left;
 }
 
LABEL.inputLabelPayment {
 width: 15em;
 float: left;
 }
 
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
 width: 12em;
 float: left;
 }
 
P, ADDRESS {
 padding: 0.5em;
 }
 
ADDRESS {
 font-style: normal;
 }
 
.clearBoth {
 clear: both;
 }
 
HR {
 height: 1px;
 margin-top: 0.5em;
 border: none;
 border-bottom: 1px solid #9a9a9a;
 }
 
/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
 line-height: 1.8em;
 padding: 0.2em;
 border: 1px solid #FFFFFF;
 }
 
.messageStackWarning, .messageStackError {
 background-color: #000000;
 color: #FFFFFF;
 }
 
.messageStackSuccess {
 background-color: #000000;
 color: #FFFFFF;
 }
 
.messageStackCaution {
 background-color: #000000;
 color: #FFFFFF;
 }
 
/*wrappers - page or section containers*/
#mainWrapper {
 background-color: #000000;
 text-align: left;
 width: 100%;
 vertical-align: top;
 }
 
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
 margin: 0em;
 padding: 0em;
 }
 
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
 margin: auto;
 } 
 
#tagline {
 color:#000000;
 font-size: 2em;
 text-align : center;
 vertical-align: middle;
 }
 
#sendSpendWrapper {
 border: 1px solid #cacaca;
 float: right;
 margin: 0em 0em 1em 1em;
 }
 
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
 margin: 0;
 width: 47%;
 }
 
.wrapperAttribsOptions {
 margin: 0.3em 0em;
 }
 
/*navigation*/
 
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
 margin: 0em;
 font-size: 0.9em;
 }
.navNextPrevList {
 display: inline;
 white-space: nowrap;
 margin: 0;
 padding:  0.5em 0em;
 list-style-type: none;
 }
 
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
 margin: 0em;
 background-color: #000000;
 font-weight: bold;
 color: #FFFFFF;
 height: 1%;
 width: 100%;
 }
 
#navMain ul, #navSupp ul, #navCatTabs ul  {
 margin: 0;
 padding:  0.5em 0em;
 list-style-type: none;
 text-align: center;
 line-height: 1.5em;
 }
 
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
 display: inline;
 }
 
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
 text-decoration: none;
 padding: 0em 0.5em;
 margin: 0;
 color: #ffffff;
 white-space: nowrap;
 }
 
#navEZPagesTOCWrapper {
 font-weight: bold;
 float: right;
 height: 1%;
 border: 1px solid #FFFFFF;
 }
 
#navEZPagesTOC ul {
 margin: 0;
 padding:  0.5em 0em;
 list-style-type: none;
 line-height: 1.5em;
 }
 
#navEZPagesTOC ul li {
 white-space: nowrap;
 }
 
#navEZPagesTOC ul li a {
 padding: 0em 0.5em;
 margin: 0;
 }
 
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
 margin: 0.5em;
 }
 
#navMainSearch {
 float: right;
 }
 
#navBreadCrumb {
 background-color: #000000;
 }
 
#navEZPagesTop {
 background-color: #000000;
 }
 
#navBreadCrumb, #navEZPagesTop {
 font-size: 0.95em;
 font-weight: bold;
 margin: 0em;
 padding: 0.5em;
 }
 
#navColumnOne {
 background-color: #000000;
 }
 
#navColumnTwo {
 background-color: #000000;
 }
 
/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
 vertical-align: top;
 }
 
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
 /*font-size: 1.2em;*/
 padding: 0.5em;
 }
 
.alert {
 color: #FF0000;
 margin-left: 0.5em;
 }
.advisory {}
.important {
 font-weight: bold;
 }
.notice {}
.rating{}
.gvBal {
 float: right;
 }
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
 padding: 0.8em;
 }
 
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
 font-size: 0.9em;
 }
 
/*Shopping Cart Display*/
#cartAdd {
 float: right;
 text-align: center;
 margin: 1em;
 border: 1px solid #000000;
 padding: 1em;
 }
 
.tableHeading TH {
 border-bottom: 1px solid #cccccc;
 }
 
.tableHeading, #cartSubTotal {
 background-color: #000000;
  }
 
#cartSubTotal {
 border-top: 1px solid #000000;
 font-weight: bold;
 text-align: right;
 line-height: 2.2em;
 padding-right: 2.5em;
 }
 
.tableRow, .tableHeading, #cartSubTotal {
 height: 2.2em;
 }
 
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
 padding: 0.5em 0em;
 }
 
.cartUnitDisplay, .cartTotalDisplay {
 text-align: right;
 padding-right: 0.2em;
 }
 
#scUpdateQuantity {
 width: 2em;
 }
 
.cartQuantity {
 width: 4.7em;
 }
 
.cartNewItem {
 color: #33CC33;
 position: relative;  /*do not remove-fixes stupid IEbug*/
 }
 
.cartOldItem {
 color: #660099;
 position: relative;   /*do not remove-fixes stupid IEbug*/
 }
 
.cartBoxTotal {
 text-align: right;
 font-weight: bold;
 }
 
.cartRemoveItemDisplay {
 width: 3.5em;
 }
 
.cartAttribsList {
 margin-left: 1em;
 }
 
#mediaManager {
  width: 50%; 
  margin: 0.2em;
  padding: 0.5em;
  }
 
.normalprice, .productSpecialPriceSale {
 text-decoration: line-through;
 }
 
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
 color: #000000;
 }
 
.orderHistList {
 margin: 1em;
 padding: 0.2em 0em;
 } 
 
#cartBoxListWrapper ul, #ezPageBoxList ul {
 list-style-type: none;
 }
 
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
 margin: 0;
 padding: 0.2em 0em;
 } 
 
#cartBoxEmpty, #cartBoxVoucherBalance {
  font-weight: bold;
  }
 
.totalBox {
 width: 5.5em;
 text-align: right;
 padding: 0.2em;
 }
 
.lineTitle, .amount {
 text-align: right;
 padding: 0.2em;
 }
 
.amount {
 width: 5.5em;
 }
 
/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
 margin: 0em 1em 1em 0em ;
 }
 
.categoryIcon {}
 
#cartImage {
 margin: 0.5em 1em;
 }
 
/*Attributes*/
.attribImg {
 width: 20%;
 margin: 0.3em 0em;
}
 
.attributesComments {}
 
/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
 margin: 1em 0em;
 }
 
/*sideboxes*/
.columnLeft {}
 
h3.leftBoxHeading, h3.leftBoxHeading a {
 font-size: 1em;
 color: #ffffff;
 }
 
.leftBoxHeading, .centerBoxHeading {
 margin: 0em;
 background-color: #000000;
 padding: 0.5em 0.2em;
 }
 
.leftBoxContainer {
 border: 1px solid #ffffff;
 margin-top: 1.5em;
 }
 
.sideBoxContent {
 background-color: #000000;
 padding: 0.4em;
 }
 
h3.rightBoxHeading, h3.rightBoxHeading a {
 font-size: 1.1em;
 color: #FFFFFF;
 }
 
.rightBoxHeading {
 margin: 0em;
 background-color: #FFFFFF;
 padding: 0.2em 0em;
 }
 
h3.leftBoxHeading a:hover {
 color: #F0F0F0;
 text-decoration: none;
 } 
 
h3.rightBoxHeading a:hover {
 color: #F0F0F0;
 text-decoration: none;
 }
 
.rightBoxContent {
 background-color: #FFFFFF;
 margin-bottom: 1em;
 }
 
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
 text-align: center;
 }
 
#bestsellers .wrapper {
 margin: 0em 0em 0em 1.5em;
 }
 
#bestsellers ol {
 padding: 0;
 margin-left: 1.1em;
 }
 
#bestsellers li {
 padding: 0;
 margin: 0.3em 0em 0.3em 0em;
 }
 
#bannerboxHeading {
 background-color: #FFFFFF;
}
 
#upProductsHeading {
 text-align: left;
 }
 
#upDateHeading {
 text-align: right;
 }
 
/*misc*/
.back {
 float: left;
 }
 
.forward, #shoppingCartDefault #PPECbutton {
 float: right;
 }
 
.bold {
 font-weight: bold;
 }
 
.rowOdd {
 background-color: #000000;
 height: 1.5em;
 vertical-align: top;
 }
 
.rowEven {
 background-color: #000000;
 height: 1.5em;
 vertical-align: top;
 }
 
.hiddenField {
 display: none;
}
.visibleField {
 display: inline;
}
 
CAPTION {
 /*display: none;*/
 }
 
#myAccountGen li, #myAccountNotify li {
 margin: 0;
 } 
 
.accountTotalDisplay, .accountTaxDisplay {
 width: 20%;
 text-align: right;
 /*vertical-align: top*/
 }
 
.accountQuantityDisplay {
 width: 10%;
 vertical-align: top
 }
 
TR.tableHeading {
 background-color: #000000;
 height: 2em;
 }
 
#siteMapList {
 width: 90%;
 float: right;
 }
 
.ratingRow {
 margin: 1em 0em 1.5em 0em;
 }
 
LABEL#textAreaReviews {
 font-weight: normal;
 margin: 1em 0em;
 }
 
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
 background-color: #000000;
 }
.information {padding: 10px 3px; line-height: 150%;}

}

#headerWrapper {
background-image: url(../images/sample_want2.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
height: 301px;
position: bottom;
}  

I f you scroll down I just added it to the bottom....

And I want to add a space after the picture also so it is not laying right on top of the main content area

I am sorry I am being so much trouble, I just want this to look right...

Only visible in IE not in FF

Where did you place the image?

Should be includes/templates/custom/images

yep that if where it is

Get FireFox and see the issue...something is not correct

I have it. and I see it is not working in it. I am not sure why that would be. I use them both to check the site...

Do you know how to add the space though so the logo is not above the picture?

I have no idea it would not be working....

I only use FF for design work and x-check in IE as it does not provide the tools to evaluate changes live. so I can not even see the image nor it's size or anything. Until this is sorted and it is visible in FF I can not assist

okay--- so do you have any idea why it wouldn't be working in FF?

Because since I just started using it (FF) I am a total newbie to that as well...

I can only see it in IE but cannot determine anything about it.

I can't see it in FF and therefore also can not tell anything.

Opps - you did something as it is rendering in FF now.

Okay, the logo is over the image is this what you want or do you want the logo to be above the image?

Personally, if I were doing this, I'd create a new div for the image.

I'd open up includes/templates/YOUR_TEMPLATE/common/tpl_header.php.

Then after the logo div, I'd add a new div, like this:

The other thing I'd do, is make that image a Good Bit Smaller. That thing is humongous. :shocking: