Jump to content

Shopping Cart Background

Guest Nightywolf

By Guest Nightywolf
in Customising Look & Feel

 Share

Recommended Posts

Guest Nightywolf

Guest Nightywolf

Posted
Posted

I've been able to change the color of all my "normal" pages, homepage, category pages, product pages, etc. just by using layout.css. It was with a background image, actually, to keep the color true. Anyway, I'm testing out the site, and I noticed when I go into "view cart" the background is white again. What gives? I can't seem to find what I need to change to get it to use the same background image as all the other pages. I've tried layout.css, style.css, cart.php, cart.tpl...Can anyone tell me where I go to change this?

Thanks!

Link to comment
Share on other sites

Guest

Guest

Posted
Posted

about 2 thirds down in style css u will see the area for adjusting cart pages

.txtCartPrice {

float: right;

color: #000000;

padding-right: 3px;

}

.txtCart {

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

font-size: 70%;

color: #0E51A3;

}

.cartTotal {

border-top: 1px dashed #000000;

padding-top: 2px;

margin-top: 3px;

}

a.txtCartProduct:active, a.txtCartProduct:link, a.txtCartProduct:visited {

text-decoration: none;

color: #0E51A3;

}

a.txtCartProduct:hover {

text-decoration: none;

color: #FF3300;

}

a.txtviewCart:active, a.txtviewCart:link, a.txtviewCart:visited {

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

font-size: 70%;

font-weight: bold;

color: #ffffff;

background-color: #000000;

text-decoration: none;

font-weight: bold;

padding: 2px;

border: 1px solid #000000;

}

a.txtviewCart:hover {

background-color: #000000;

color: #FFFFFF;

}

.cartProgress {

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

font-weight: normal;

color: #e7e7e7;

padding: 4px;

border: 1px solid #000000;

width: 350px;

margin: auto;

}

.txtcartProgressCurrent {

color: #000000;

font-weight: bold;

}

.quickBuy {

text-align: center;

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

color: #666666;

}

.tdcartTitle {

font-weight: bold;

color: #FFFFFF;

background-color: #999999;

border-bottom: 1px solid #666666;

}

.tdcartEven {

background-color: #e7e7e7;

}

.tdcartOdd {

background-color: #e7e7e7;

}

.tdCartSubTotal {

padding-top: 10px;

border-top: 1px solid #666666;

}

a.txtCheckout {

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

font-weight: bold;

color: #FFFFFF;

background-color: #e7e7e7;

text-decoration: none;

font-weight: bold;

padding: 2px;

border: 1px solid #000000;

if u get stuck holla i have made a few coloured templates now and know whats where :D

Link to comment
Share on other sites
Guest Nightywolf

Guest Nightywolf

Posted
Posted

Thank you soooo much! Unfortunately I AM stuck...I've changed every little invidual box to the color I want, but the overall background is still white! I'm at a loss. Right now I'm looking at a white page with colored boxes (the color I want) sitting on top of it.

Thank you again!

Link to comment
Share on other sites
Guest Nightywolf

Guest Nightywolf

Posted
Posted

Also when you go into any of the categories, the box that shows the list of products (with thumb, then product title, description, price buy, more) is not the color I want it to be, either. I've looked all over layout.css and style.css...what am I missing?

Thanks!

Link to comment
Share on other sites
Guest vrakas

Guest vrakas

Posted
Posted

Not sure if this is what you are missing but here it goes

Go to skins – Your Skin – Style sheets

Edit the layout.css

Change the lines background color to what you like

#pageSurround {

width: 800px;

margin: 0px auto;

padding: 5px;

border: 2px solid #333333;

background-color: #081ea8;

background-image: url(../styleImages/backgrounds/contentBg.jpg);

Hope this helps :D

PS: evilhomer is the master on these kind of things :P

Link to comment
Share on other sites
Guest Nightywolf

Guest Nightywolf

Posted
Posted

It is:

www.wineslippers.com/products

If you click on any categories at the top, you'll notice the listing of the products has a blue background that majorly clashes with the green theme I have going. I wouldn't mind it being white (having it be the background color might make it look all washed out).

Then, if you click "View Basket" on your right, you'll see what I'm talking about with the white. The background of the whole page is white, and all the individual boxes are the right color (it's actually an image, found at www.wineslippers.com/bg.jpg).

Thank you very much!

Link to comment
Share on other sites
markscarts Newbie

markscarts

Posted
Posted

Nightywolf, the background colors on the item list (light blue on your site) are set syle.css:

.tdEven {

	background-color: #FFFFFF;

}

.tdOdd {

	background-color: #EBEDFE;

}




. . . for the store, and for the list of items in the cart it is:





.tdcartEven {

	background-color: #EBEDFE;	

}

.tdcartOdd {

	background-color: #FFFFFF;

}

As to the white surrounding background in the cart, that is a bit of a puzzler. Is evilhomer digging into it for you? I can help if e.h. isn't on it already; otherwise, he'll have it figured out pretty quickly anyway. :)

Link to comment
Share on other sites
Guest Nightywolf

Guest Nightywolf

Posted
Posted

Hi markscarts! Thank you so much for the info, I'll try that out later today. I haven't heard anything from evilhomer, and it's kind of important that I get the ugly white background fixed...could you help? :)

Thanks!

Link to comment
Share on other sites
markscarts Newbie

markscarts

Posted
Posted

Hi markscarts! Thank you so much for the info, I'll try that out later today. I haven't heard anything from evilhomer, and it's kind of important that I get the ugly white background fixed...could you help? :)

Thanks!

Hi, I can help you, but can't promise how quickly.

The easiest way would be for you to zip a copy of your skin's complete file, and let me check it out.

At the very least, I will need to see layout.css, styles.css, global/index.tpl and global/cart.tpl.

Link to comment
Share on other sites
Guest Ija

Guest Ija

Posted
Posted

Nightywolf,

In index.tpl,

body {

	background-image: url(http://www.wineslippers.com/products/skins/Killer/styleImages/backgrounds/bg.jpg);

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;




In cart.tpl,





body {

	background-image: url(http://www.wineslippers.com/bg.gif);

}

http://www.wineslippers.com/bg.gif doesnt even exist. Change that to the file above and you'll be fine B)

Link to comment
Share on other sites
markscarts Newbie

markscarts

Posted
Posted

I think Ija is right in that the problem is with your templates!!!

First, why are you specifying body attributes directly in the templates instead of in you layout.css?

I had a feeling it may be something like this, because if you had correctly edited the css files BOTH index and cart should act the same.

index.tp:

:( I'll get a new text editor soon and check it out, if someone else doesn't find all the quirks first - I'm sure someone will help you very soon, though, this is a friendly forum :D It is a little disturbing that you have a background set in the active body tag of index and none in cart. It would seem that here lies the problem. Be aware that you are using deprecated html tags ( bg=" " ) where you should be using styles. Styles inline within the document look a little different than styles in the stylesheet. The correct way to write them in the document is: B) You have some bugs there for sure :DEDIT OK, I've got it now! bg.jpg exists; bg.gif doesn't. That's why the bg shows in index, but not cart! HERE IS THE CORRECT SOLUTION: 1. GET RID OF ALL THE STUFF BETWEEN THE HTML COMMENT TAGS 2. GET RID OF THE BG= STUFF THAT YOU STUCK INTO THE INDEX.TPL BODY TAG - BE SURE AND LEAVE THE BODY TAG ITSELF 3. EDIT LAYOUT.CSS TO LOOK LIKE THIS: 

<!--

body {

	background-image: url(http://www.wineslippers.com/products/skins/Killer/styleImages/backgrounds/bg.jpg);

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0px;

	margin-bottom: 0px;

}

-->

</style></head>



<body bg="http://www.wineslippers.com/bg.jpg">




cart.tpl:





<!--

body {

	background-image: url(http://www.wineslippers.com/bg.gif);

}

-->

</style></head>



<body>




As seen above, you have pasted body styles in the form they should appear in a stylesheet into thye head section of the templates - they are commented out, so they have no effect. I can only assume you pasted them there for reference while you edited the templates?



At any rate, for clarity's sake, you should delete the portions you have commented out - the portions between the html comment tags:





<!--      -->




because you certainly don't need them.



I cannot tell much about your css files yet, because I use Notepad, and they've been edited with something else which makes them difficult to read in Notepad (I know, I'm in the Dark Ages on this one).  
<body style="background-image:url(your_background_image.jpg);">




When we type your image URL in the browser, nothing shows, as said Iia wrote, the file doesn't seem to exist  
body  {

       margin:5px;

       background-image: url(http://www.wineslippers.com/bg.jpg);

}

Then everything should work just fine :D

Link to comment
Share on other sites
Guest Nightywolf

Guest Nightywolf

Posted
Posted

Thank you guys so much for all of your help, but it's still white. :) I changed every single thing exactly how you guys advised...and yet still the white background. I'm about ready to tear my hair out!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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