Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Basics for design


toyicebear

Recommended Posts

The look of osCommerce is fairly easy to change...it usually only requires the change of no more than 5 files..

 

 

1. includes/header.php

2. includes/footer.php

3. includes/left_column.php

4. includes/right_column.php

5. Stylesheet.css

 

Have fun... B)

Link to comment
Share on other sites

  • Replies 1.5k
  • Created
  • Last Reply
The look of osCommerce is fairly easy to change...it usually only requires the change of no more than 5 files..

1. includes/header.php

2. includes/footer.php

3. includes/left_column.php

4. includes/right_column.php

5. Stylesheet.css

 

Have fun...  B)

 

Thanks for that, very helpful! Is that a reply to anything??

Link to comment
Share on other sites

Well..its a general replay..

 

Since a lot of new users dont know where to start.....

 

:thumbsup:

 

And if someone have some particulars, they want to ask..please feel free....

Link to comment
Share on other sites

well, well...

 

its just that i have ssen the same questions about change of layout/deign asked about 1001 times...... :P

 

OPS.....There are resources available here... opsCommerce Documentation

 

B)

Link to comment
Share on other sites

  • 2 weeks later...
Yes thanks for posting this topic....has any one else found any other contributions/tutorials that will help explain modifying better....I have seen some amazingly modified sites out there.

I agree. For the web design newbie like me, I'm still having trouble getting a nice graphic with buttons into the header and boxes.

Link to comment
Share on other sites

Hi,Hi,

 

When time permits i will write and post a short design tutorial.....

 

:thumbsup:

Link to comment
Share on other sites

Part 1...For the lazy......

 

Go to the contribs section and do a search for "free template" , download your choosen one and follow the instructions included....

 

 

Part 2..follows...step by step design for a vanilla install

Link to comment
Share on other sites

Step by Step.

 

1. Install osCommerce 2.2

 

2. go into the admin of your new installed shop "/admin" and do the following:

 

- Go to configurations/myshop and set "Show Category Counts" to "False"

- Go to tools/banner manager and delete the osCommerce banner

 

3. Open the file english.php , and change oscommerce to your company or web shop name. (the file is located in includes/languages )

 

It look like this:

 

// page title
define('TITLE', 'osCommerce');

 

 

4. Upload your own logo to the image folder on the web server.

 

(Easy way name the logo oscommerce.gif , and it will automatically replace the default one)

 

If you want to have your own name for the logo, upload the logo with your own chosen name and do the following:

 

Open up the file header.php and change oscommerce.gif to your own image file name, and change this one 'osCommerce' to your store name. (the file is located in the includes folder)

 

It looks like this:

 

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') . '</a>'; ?></td>

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........

Link to comment
Share on other sites

Further tips and tricks......

 

 

1. The width of the side collums are located in a file named application_top.php located in the includes folder and looks like this:

 

// customization for the design layout
?define('BOX_WIDTH', 125); // how wide the boxes should be in pixels (default: 125)

 

 

2. If you want to center your shop, you might want to use one of these contribs.

 

- Style sheet based one: Fixed Width Site with CSS

 

- Datbase with admin control: osC-CenterShop v2.1 for MS2

 

3. Infobox looks.....

 

- Graphical headers

Graphical Infoboxe Headers

 

- Individual infobox color and fonts

infoBox Customizer

 

4. Buttons.....

 

- make your own or use one of the available contribs to get a more stylish set of buttons for your shop......

 

You can find many nice ones by browsing around here: Contributions/Images

 

 

Now i would suggest that those interested keeps on giving eachother tips and trics in this topic.

 

 

I wish u all best of luck in creating a osCommerce web shop with your own personal touch and feel.... :thumbsup:

Link to comment
Share on other sites

Ond one more.....

 

 

For editing ur text on the frontpage easily, you might want to use this contrib:

 

Define Mainpage

 

 

Att: U might want to choose this version: 21 Jul 2003 - Define MainPage 1.3.3

 

 

B)

Link to comment
Share on other sites

Link to comment
Share on other sites

I'll chime in with a few...

 

1. Before making any changes, make a BACKUP COPY of the page you're working on.

 

2. Alternatively, using your php/html/text editor of choice (one that has unlimited undo's is preferable), save the changes, but KEEP THE FILE OPEN while you upload and view the modified code. That way, if it breaks, you can just undo the changes and try again. (This is my preferred method, though I also maintain a backup copy of ALL original files so I can revert back to that if nothing else.)

 

3. Many elements can be moved around by simple cutting and pasting. Try it! If it doesn't work, the problem is often because you've pasted it into the wrong place in a table cell. If you can't tell why it's breaking, try using a browser like Firefox with the developer tools added. You can then choose to view the page with tables outlined, etc., to see where you've gone wrong.

 

4. Don't be afraid to dig into the code. As long as you've made a backup, or your file is still open in a place where you can undo changes, you've got nothing to lose.

 

5. Spend the time to look through the contributions as previously suggested. Some of the best mod's on my site came about while I was looking for one thing, but stumbled across something totally unrelated. I made an osC folder in my bookmarks, and saved anything I thought would come in handy later in that folder.

 

6. Ditto with the forums. Take the time and read through the wealth of information found within these pages. When I first started, I spent hours -- and I mean HOURS -- reading posts to try and figure out the mechanics of osC and how to manipulate it for my needs.

 

7. If a database table must be altered (or added) when installing a contribution, many readme files don't remind you to see whether the table ID (configuration group ID, etc.) is already in use. If you've installed a few contributions already, make it a habit to look at your database structure FIRST to see whether the IDs being assigned in the SQL text are open or not.

 

I do this by going to phpMyAdmin and browing through the structure of the table affected to see if the ID numbers are open. If they're already in use, change the ID numbers in the SQL text before continuing. If you're not sure how to do that, ASK FIRST. Somebody will help you.

 

HTH,

 

Terry

Terry Kluytmans

 

Contribs Installed: Purchase Without Account (PWA); Big Images, Product Availability, Description in Product Listing, Graphical Infobox, Header Tags Controller, Login Box, Option Type Feature, plus many layout changes & other mods of my own, like:

 

Add order total to checkout_shipment

Add order total to checkout_payment

Add radio buttons at checkout_shipping (for backorder options, etc.)

Duplicate Table Rate Shipping Module

Better Product Review Flow

 

* If at first you don't succeed, find out if there's a prize for the loser. *

Link to comment
Share on other sites

Agree with that Terry

 

If we're going to expand this into the development process, it's worth saying that creating a separate development environment where you can test stuff, install contribs etc is a MUST.

 

Do not practice on your live store. You'll regret it the first time you screw something up

Link to comment
Share on other sites

How to change Box Borders?

 

There is some very useful info here, but I cannot find how to change the border on the boxes anywhere.

 

Believe me I have looked. I have looked everywhere. ...and I know its easy!

It is not done in the stylesheet. I have found the definition of the tableblock and tableBox classes in boxes.php, which defines the variable:

var $table_border = '0';

 

and

....$tableBox_string .= '<table border="' . $this->table_border . '.....

 

...but this is being changed somewhere because my boxes have borders. Without giving a lengthy run down of my search I still can't work out where it is set - I can't find the call.

 

I'm sure its easy when you know how - Can anyone help put me out of my misery?

Link to comment
Share on other sites

Hi,

 

Boxes in the stylesheet.

 

 ?

.infoBox {
?background: #b6b7cb;
}

.infoBoxContents {
?background: #f8f8f9;
?font-family: Verdana, Arial, sans-serif;
?font-size: 10px;
}

 

.infobox sets the color for the outer table.

 

.infoboxContents sets the text and color for the inner table.

 

The "border" you see in your website is actually just the space between the outer and the inner table.

 

B)

Link to comment
Share on other sites

I'd like to thank you for putting this info on here!!! I need to ask a newbie question. I couldn't load up on how to insert a "about us" in the info box in the contributions and I would also like to put others in the info box also. How would I do this?

 

TIA !!!!!!

Rhonda :D

Link to comment
Share on other sites

Hi,

I have a question too :thumbsup:

 

I'm making a store in www.templateslord.com. i have edited many things and it looks nice now, but it needs one more change.

 

As you can see i have removed the right colum, deleting all the content in colum_right.php.

 

But it seems the content of that file is inserted in an other table which is still there,

in my html output i see this

 

<!-- body_text_eof //-->
   <td width="175" valign="top"><table border="0" width="175" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->



<!-- right_navigation_eof //-->
   </table></td>
 </tr>
</table>
<!-- body_eof //-->

 

I'd like to remove all that code but i can't find the php file that outputs it.

Any idea?

Thanks in advance

Link to comment
Share on other sites

I'd like to thank you for putting this info on here!!! I need to ask a newbie question. I couldn't load up on how to insert a "about us" in the info box in the contributions and I would also like to put others in the info box also.  How would I do this?

 

TIA !!!!!!

Rhonda :D

 

 

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>');

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...