Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Basics for design


toyicebear

Recommended Posts

I thought so, about the thumb pic... Does the Easy Thumbnails

contrib make the thumb size AND the product pic size automaticaly?

 

Also, what is the file to control background and category window? (the opne that opens when clicking on one category with "Product Name+ Price Buy Now" on top?

 

I want to change white background and top burgundy color.

 

Haru.

Link to comment
Share on other sites

  • Replies 1.5k
  • Created
  • Last Reply
I thought so, about the thumb pic...? Does the Easy Thumbnails

contrib make the thumb size AND the product pic size automaticaly?

 

Also, what is the file to control background and category window? (the opne that opens when clicking on one category with?  "Product Name+?  Price?  Buy Now"?  on top?

 

I want to change white background and top burgundy color.

 

Haru.

 

easy thumbnails make 1 size at a time....

 

step 1: make 1 folder with all your large pictures

step 2: make a new folder for your web pictures

step 3: open easy thumbnails , choose the first folder as your source folder and choose the new folder as your destination folder.

step 4: choose which size and whch quality you wish to change the size to, choose a prefix for your new size pictures ie. small

step 5: start the process , now you have made all the original pictures into a new size with a prefix to the file name.

step 6: change the size and quality setting and change the prefix ie. med and process again.

step 7: change the size and quality setting and change the prefix ie. lrg and process again.

step 8: now all your original pictures exsist in 3 differnt sizes in your new folder.

 

 

Category listing...

 

stylesheet.css

 

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: #f8f8f9;
}

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: #f8f8f9;
}

TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #b6b7cb;
 border-spacing: 1px;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #b6b7cb;
 color: #FFFFFF;
 font-weight: bold;
}

Link to comment
Share on other sites

I have modified the heading, but I cant quite find the way to add a thin line around my category listing.

Here is my code:

 

R.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {

  background: #d9d9d9;

    line-height: 0;

  border-top: 1px;

  border-right: 1px;

  border-left: 1px;

  border-bottom: 1px;

  border-color: #737373;

  border-style: solid

}

 

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

    line-height: 0;

  border-top: 1px;

  border-right: 1px;

  border-left: 1px;

  border-bottom: 1px;

  border-color: #737373;

  border-style: solid

}

 

 

 

TD.productListing-data {

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

  font-size: 10px;

}

 

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

TABLE.productListing {

  background: 6b6b6b;

  line-height: 0;

  border-top: 1px;

  border-right: 1px;

  border-left: 1px;

  border-bottom: 1px;

  border-color: #737373;

  border-style: solid

}

 

.productListing-heading {

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

  font-size: 14px;

  font-weight: bold;

  background: 6b6b6b;

  color: #ffffff;

}

 

 

A.productListing-heading {

  background: #6b6b6b;

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

  font-size: 10px;

 

Also if I make a search without puting any word in the searchbox, I get a box with a "search criteria heading, how do I change that color too?

 

hanx for all your help. It's not easy for a newby like me!

 

Haru.

Link to comment
Share on other sites

border-color: your color choice

 

[/code]

TABLE.productListing {

border: 1px;

border-style: solid;

border-color: #b6b7cb;

border-spacing: 1px;

}




			
		
Link to comment
Share on other sites

I entered that code please look at my page here, and click on the IMARI in tyhe Category The listing box that will open does not have a border line, that is what I am trying to have

Also I noticed that the title in front of each pic is cut on the top, what is that?

 

Thank you for your precious help!

 

Haru

 

Here is my code in stylesheet.css:

TD.productListing-data {

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

  font-size: 10px;

}

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

TABLE.productListing {

  background: 6b6b6b;

  line-height: ;

border: 1px;

border-style: solid;

border-color: #737373;

border-spacing: 1px;

}

.productListing-heading {

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

  font-size: 14px;

  font-weight: bold;

  background: 6b6b6b;

  color: #ffffff;

}

Link to comment
Share on other sites

I entered that code please look at my page here, and click on the IMARI in tyhe Category The listing box that will open does not have a border line, that is what I am trying to have

Also I noticed that the title in front of each pic is cut on the top, what is that?

 

Thank you for your precious help!

 

Haru

 

Here is my code in stylesheet.css:

 

Remove ############# , like this:

 

[/code]

}

TABLE.productListing {

background: 6b6b6b;

line-height: ;

border: 1px;

border-style: solid;

border-color: #737373;

border-spacing: 1px;

}




			
		
Link to comment
Share on other sites

Great that works! I learned something

 

##################### means that the code is canceled right?

 

Works great Now in the Product listing, where can I ajust the titles of each items so they are not half cut It looks like the fonts do not have enough space on top to be seen correctly

 

Thank you again !

 

Haru

Link to comment
Share on other sites

I did something wrong - I rewrote the following lines:

 

define('HEADING_TITLE', 'Payment Page');

 

define('HEADING_TITLE', 'Payment Page');

 

And now when I try to view the online store, I get this message:

 

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/parish2/public_html/payments/includes/languages/english/index.php on line 33

 

It looks like 33 is the second one.

 

 

 

All text should be in the laguages directory.  Look in includes/languages/english/index.php for that one.

 

Jack

Link to comment
Share on other sites

I did something wrong - I rewrote the following lines:

 

define('HEADING_TITLE', 'Payment Page');

 

define('HEADING_TITLE', 'Payment Page');

 

And now when I try to view the online store, I get this message:

 

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/parish2/public_html/payments/includes/languages/english/index.php on line 33

 

It looks like 33 is the second one.

 

You have created a php error. This one is usually due to a syntax error. Look closely at line 33 (and the other lines before it). Have you missed the semi-colon on the end or missed a quote where it should be? If you are can't find it put the original file back in and edit it again!

 

(ps - don't use notepad or word to edit it - they leave control characters in the file)

 

good luck and good hunting!

Link to comment
Share on other sites

You have created a php error. This one is usually due to a syntax error. Look closely at line 33 (and the other lines before it). Have you missed the semi-colon on the end or missed a quote where it should be? If you are can't find it put the original file back in and edit it again!

 

(ps - don't use notepad or word to edit it - they leave control characters in the file)

 

good luck and good hunting!

 

I just deleted the text between the single quotes and replaced it - it's not that complicated, is it? I didn't change anything else. Can anyone see a syntax error here?

 

*/

 

define('TEXT_MAIN', 'ParisHomeAwayFromHome');

define('TABLE_HEADING_NEW_PRODUCTS', 'New Products For %s');

define('TABLE_HEADING_UPCOMING_PRODUCTS', 'Upcoming Products');

define('TABLE_HEADING_DATE_EXPECTED', 'Date Expected');

 

 

All I did was add ParisHomeAwayFromHome after TEXT_MAIN.

Link to comment
Share on other sites

In the stylesheet.css, where is the control to change the color of the message "Lett's See What We Have Here" ?

 

I can't find it!

 

Haru.

 

TD.pageHeading, DIV.pageHeading

Link to comment
Share on other sites

Nick, I have posted the question here, buty may be you know that:

I have made a big image to fill up the top header on my page.

It works fine for 1024x768 resolution screen but does not resize for other resolutions, like 800x600.

 

Is there a code to add on the header.php table to have the image resize by itself?

 

Thanx again.

 

Haru.

Link to comment
Share on other sites

Link to comment
Share on other sites

I have not tried it yet, i am on my way out right now..but maybe i will try it later today...

 

 

If you want to make life easier, design wise that is... :lol:

 

Set your site in a fixed width and center it on the screen, then you site will have a consistant look in every resolution.

 

This is my favorite contrib for doing just this, Fixed Width Site with CSS

Link to comment
Share on other sites

I see what you mean.

The things is I do not pretend to design all my site, I am just paching up and now I am trying to have an image on top of the page using the full wideness of the screen...

 

Thanx for your advices.

 

Haru.

Link to comment
Share on other sites

I see what you mean.

The things is I do not pretend to design all my site, I am just paching up and now I am trying to have an image on top of the page using the full wideness of the screen...

 

Thanx for your advices.

 

Haru.

 

Ok Haru, this is how you do it...

 

1. split your logo into 3 parts.

2. Place the left part on the left side of the header, place the right part on the right side of the header.

3. set the middle part as a repeting background image in your header.

 

Now your header logo/picture will always be the width of the screen.

 

B)

Link to comment
Share on other sites

Thank you Nick,

 

Looking at my top logo here, do you think I can split it in 3?

I am not sure I understand what is a "repeting background image ".

 

Thank you for your nice help.

 

Haru.

 

That one would be difficult to split up, you should consider making a new one if you want one with extension.

 

To make it a workable solution, the middle part of the header image need to be made in such a way that it can be duplicated smootly and still fit with the ending of the left part and the start of the right part.

 

Otherwise if you do not want to make a new logo, you can always use the logo you already have with no modifications and just set your web-site width to the same as your exsisting logo 982px .

 

B)

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...