Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Basics for design


toyicebear

Recommended Posts

Top...

 

edit this file:

 

includes/header.php

 

 

Bottom...

 

Edit this file:

 

includes/footer.php

 

 

I think the problem with some stores is they do not contain files in the places you are telling us they should be.

Link to comment
Share on other sites

  • Replies 1.5k
  • Created
  • Last Reply

How do you find out what files to alter as they are produced in real time are they not??

 

 

All products are created by 1 file...

 

products_info.php

 

the difference in text , images etc. is fetched from the db.

Link to comment
Share on other sites

I think the problem with some stores is they do not contain files in the places you are telling us they should be.

 

 

If your store is installe din the root then they are...

 

ie.

 

the shop showes at

 

www.your-domain-name.com/

 

 

if you have it in a sub directory like.

 

www.your-domain-name.com/catalog/

 

 

then the catalog/ have to be added to the path...

 

ie. includes/header.php

 

then will be

 

catalog/includes/header.php

 

 

if it stays at:

 

www.your-domain-name.com/shop/

 

then it will be

 

shop/includes/header.php

 

and so on.....

 

 

 

Which in turn actually just translates to that the file stays as stated at for instance:

 

includes/header.php

 

Based out of at what directory you shop is installed in.

Link to comment
Share on other sites

Next step.....

 

 

5. Remove default oscommerce gifs, to do that use this contrib:

 

Remove Default Images

 

 

6. To make color changes easier you will need to replace 3 gifs in the in the folder images/infobox.

 

- corner_left.gif

- corner_right.gif

- corner_right_left.gif

 

replace those 3 with 3 empty transparent gifs in the same size.

 

7. Now you are ready to change colors and/or text formating for your web shop, this is done in a file called stylesheet.css which is located in your main folder.

 

For instance if you want to change the color of the infobox header, this is the code which need changing:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #bbc3d3;
 color: #ffffff;
}

 

Changed to a red info box header, it would look like this:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #990000;
 color: #ffffff;
}

 

These are universal changes and will affect all the related parts of your web shop

 

Now feel free to play with the colors and/or fonts to your own liking........

 

Hi

I seem to be learning, yet upon editing the style sheet I am unable to see changes on the store front and some times get a page loading error, clicking refresh brings the page up after a few seconds, I have previously done all the changes in this tutorial and centered the page from a contrib from the basic design pack, and have most recently been playing with colours to change navigation bar background, etc, is there a specific colour language that applies to oscommerce or is it universal? I am able to change header image so the prob doesn't seem to be universal?? hope you can help many thanks

Stephen

Link to comment
Share on other sites

Hi

I seem to be learning, yet upon editing the style sheet I am unable to see changes on the store front and some times get a page loading error, clicking refresh brings the page up after a few seconds, I have previously done all the changes in this tutorial and centered the page from a contrib from the basic design pack, and have most recently been playing with colours to change navigation bar background, etc, is there a specific colour language that applies to oscommerce or is it universal? I am able to change header image so the prob doesn't seem to be universal?? hope you can help many thanks

Stephen

 

Color codes used in the stylesheet are universal color hex codes

 

After having changed images or stylesheet , you might have to press CTRL + F5 to clear your browsers cache to see the changes you have just done on your site.

Link to comment
Share on other sites

Color codes used in the stylesheet are universal color hex codes

 

After having changed images or stylesheet , you might have to press CTRL + F5 to clear your browsers cache to see the changes you have just done on your site.

 

thankyou...your right...as if there was any doubt

 

:thumbsup: Stephen

Link to comment
Share on other sites

Next step.....

 

 

5. Remove default oscommerce gifs, to do that use this contrib:

 

Remove Default Images

 

 

6. To make color changes easier you will need to replace 3 gifs in the in the folder images/infobox.

 

- corner_left.gif

- corner_right.gif

- corner_right_left.gif

 

replace those 3 with 3 empty transparent gifs in the same size.

 

7. Now you are ready to change colors and/or text formating for your web shop, this is done in a file called stylesheet.css which is located in your main folder.

 

For instance if you want to change the color of the infobox header, this is the code which need changing:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #bbc3d3;
 color: #ffffff;
}

 

Changed to a red info box header, it would look like this:

 

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #990000;
 color: #ffffff;
}

 

These are universal changes and will affect all the related parts of your web shop

 

Now feel free to play with the colors and/or fonts to your own liking........

 

Hi Nick

hope all is well

I know somewhere I've learnt how to change the rounded corner on top info boxes, can you refresh my memory on how, I've changed colour, yet a little corner piece remains white on either side :D

Link to comment
Share on other sites

Hi Nick

hope all is well

I know somewhere I've learnt how to change the rounded corner on top info boxes, can you refresh my memory on how, I've changed colour, yet a little corner piece remains white on either side :D

 

They are images which is located in:

 

images/infobox/

 

Also this is described on the very first page of ths tread..... :P

Link to comment
Share on other sites

Hi,

 

I am trying to change the menu/navi for my website. Currently it's just gif pictures with no animation that I use and I want it to have a hover effect. I found the part that I need to edit in the footer (I think), it's the following:

 

 <td><a href="<?php echo tep_href_link('index.php')?>"><?php echo tep_image_button('m1.gif')?></a><a href="<?php echo tep_href_link('products_new.php')?>"><?php echo tep_image_button('m2.gif')?></a><a href="<?php echo tep_href_link('specials.php')?>"><?php echo tep_image_button('m3.gif')?></a><a href="<?php echo tep_href_link('account.php')?>"><?php echo tep_image_button('m4.gif')?></a><a href="<?php echo tep_href_link('contact_us.php')?>"><?php echo tep_image_button('m5.gif')?></a>

 

m1,m2 etc are the pictures for the links that I currently use. I already have the pictures (the regular ones and the hover ones) created in a folder root/buttons but I'm unsure as to how to build it properly into the code and what files I have to change. I am unsure whether it's just the header.php or the css file as well. And then I wouldn't even know what to edit there o.O

Link to comment
Share on other sites

Hi,

 

I am trying to change the menu/navi for my website. Currently it's just gif pictures with no animation that I use and I want it to have a hover effect. I found the part that I need to edit in the footer (I think), it's the following:

 

 <td><a href="<?php echo tep_href_link('index.php')?>"><?php echo tep_image_button('m1.gif')?></a><a href="<?php echo tep_href_link('products_new.php')?>"><?php echo tep_image_button('m2.gif')?></a><a href="<?php echo tep_href_link('specials.php')?>"><?php echo tep_image_button('m3.gif')?></a><a href="<?php echo tep_href_link('account.php')?>"><?php echo tep_image_button('m4.gif')?></a><a href="<?php echo tep_href_link('contact_us.php')?>"><?php echo tep_image_button('m5.gif')?></a>

 

m1,m2 etc are the pictures for the links that I currently use. I already have the pictures (the regular ones and the hover ones) created in a folder root/buttons but I'm unsure as to how to build it properly into the code and what files I have to change. I am unsure whether it's just the header.php or the css file as well. And then I wouldn't even know what to edit there o.O

 

 

 

You can add a hover effect by using html/css/javascript.

 

You will have to edit the file where the code resides to add html mark up, if you use javascript it should be called within the <head></head> tags on all pages where this effect showes.

 

The corresponding css code can be added to stylesheet.css

Link to comment
Share on other sites

Happy to Please... :P :blush: :P

 

Hi

I have customised my site to a black background, see http://bodhitorque.com/thebodhivibe

the info boxes I am happy to leave white, yet as my preference for main body text is white, I wish to know where abouts in style sheet I can make changes to get text showing in all boxes, eg login boxes, text not showing as white background, can text colour be changed seperate to main body text?, also main page, bright green highlight..do you know where this can be changed? anything else you can see that could be an issue with this background choice and the solution appreciated

many thanks

Stephen

Link to comment
Share on other sites

Hi

I have customised my site to a black background,

the info boxes I am happy to leave white, yet as my preference for main body text is white, I wish to know where abouts in style sheet I can make changes to get text showing in all boxes, eg login boxes, text not showing as white background, can text colour be changed seperate to main body text?, also main page, bright green highlight..do you know where this can be changed? anything else you can see that could be an issue with this background choice and the solution appreciated

many thanks

Stephen

 

It can be changed in this file : stylesheet.css

 

But the styles from the infoboxes are also used in the center content at some places , so you will have to change the class in those files too.

Link to comment
Share on other sites

hi ...

it's my 1st post..

i just started with OScomm. and would like to know where to find a background line?

i mean in my shop i would like to have my own background under shop tables

thanks a lot

 

 

 

Since you use BDP it can be added in stylesheet.css

Link to comment
Share on other sites

Since you use BDP it can be added in stylesheet.css

thanks for fast reply

yes i know but i would like to use my own JPG file as a background and all I can see is just single colours..

which line do I have to change how to use graphic instead of one single colour

Link to comment
Share on other sites

thanks for fast reply

yes i know but i would like to use my own JPG file as a background and all I can see is just single colours..

which line do I have to change how to use graphic instead of one single colour

 

 

Use google to find out how to add image backgrounds in css

 

basically images can be used instead of/in addition to colors in the stylesheet.

 

In bdp the outer background is the body class , while the inner background is fixedcenter class

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

Can I please have some help to change how the categories area looks.

I came across this site and the categories area is nice and clean and I would like to do the same

http://www.extremehobbiesmiami.com/index.php

 

But I have no idea where to start, So can someone please let me know which file controls the display of categorises.

I can see I need to add a icon before the name and some how get each item in to it's own cell

 

Thanks

Link to comment
Share on other sites

But I have no idea where to start, So can someone please let me know which file controls the display of categorises.

I can see I need to add a icon before the name and some how get each item in to it's own cell

 

 

There are many different category boxes available as add-ons in the contributions section.

 

That site is using one called, Great Categories

 

 

Actually that site is using the Basic design Package which also include the great category add-on, you can find BDP here...

Link to comment
Share on other sites

There are many different category boxes available as add-ons in the contributions section.

 

That site is using one called, Great Categories

 

 

Actually that site is using the Basic design Package which also include the great category add-on, you can find BDP here...

 

Thankyou toyicebear, I will go and have a look

Link to comment
Share on other sites

Well that was a lot easy than I thought, Thank you very much toyicebear.

Now as you seem to be a person in the know with contribs etc. I want exactly what "Share Folder Content (FolderShare)" does http://addons.oscommerce.com/info/4866 but his instructions are not complete....

 

Can you suggest another contrib which will read the contents of a folder of .docs or .pdf and make a web page of it. And I want to put a link in the top header nav bar saying "Manuals"

 

Or something along those lines, I would have thought it would have been such a common request but have been searching for a long while..

So any idea's anyone, or can a guru look at the above contrib and finish his install instructions

 

OsCommerce is so cool

Link to comment
Share on other sites

Not familiar with that add-on, you should try a forum search for more info.

Link to comment
Share on other sites

  • 2 weeks later...

1. make the new about_us.php page and the coresponding language about_us.php and add them to your web server.

 

2. add the defines to the includes/filnames.php

define('FILENAME_ABOUT_US', 'about_us.php');

 

3. add link defines to includes/languages/english.php

 

define('BOX_INFORMATION_ABOUT_US', 'About Us');

 

4. Add the link to /includes/boxes/information.php

 

 . '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>' .
. '<a href="' . tep_href_link(FILENAME_ABOUT_US) . '">' . BOX_INFORMATION_ABOUT_US . '</a><br>' .
'<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a>');

 

Hi there. I tried to do this and realised I couldnt access the web server like you suggested so I went about dleting what I had added. Now my dilema is this, My information box on my website has gone. I have no idea what has happened. I just deleted what I had added. Didnt change anything else. Your help on this would be greatly appreciated. I love your info too. Always very informative and helpful.

My website is www.gypsydreamsonline.com This is an ADULT SITE!!!!! Just so you know.

Thanks heaps.

Lisa.

Link to comment
Share on other sites

Hi - very quick question - hope the answer is too!

Like so many am totally new to this, and after a couple of days of struggling have found this supremely helpful.

Have discovered that a lot of the stuff is not where it claims it is - for example no oscommerce.gif, it now seems to be a png!

Anyway have got past the putting my own logo on hurdle, and progressed to the removing default gifs. Have downloaded the recommended contribution, but I do not have a "catalog" folder.

Do I just upload the new folder to the min images directory or is it the images folder in the "includes" folder?

Thanks

Joe

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...