1457 replies to this topic

[toyicebear]

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

[Simmy]

toyicebear, on Mar 4 2005, 06:05 PM, said:

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

<{POST_SNAPBACK}>

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

[toyicebear]

Well..its a general replay..

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



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

Edited by toyicebear, 04 March 2005, 18:11.

[Simmy]

toyicebear, on Mar 4 2005, 06:10 PM, said:

Well..its a general replay..

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

<{POST_SNAPBACK}>

I like you're pro-active approach

[toyicebear]

well, well...

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

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

Edited by toyicebear, 04 March 2005, 18:18.

[dakatone]

It is becoming alarmingly evident how many people refuse to research their dilemmas

Thanks for a simple post I can link to.

Ruhl

[211655]

thanks for posting this topic

[webtrek]

211655, on Mar 11 2005, 02:58 PM, said:

thanks for posting this topic

<{POST_SNAPBACK}>

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.

[astroguy]

webtrek, on Mar 20 2005, 02:45 PM, said:

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.

<{POST_SNAPBACK}>

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.

[toyicebear]

Hi,Hi,

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

[toyicebear]

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

[toyicebear]

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>

[toyicebear]

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

[toyicebear]

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

Edited by toyicebear, 24 March 2005, 00:48.

[toyicebear]

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

[iainshaw]

this thread shouod be required reading for anyone who posts the "how do I go about changing the look and feel........" question. Nice one Nick

[toyicebear]

Happy to Please...

[TerryK]

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

[iainshaw]

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

[mikmcmik]

thanks - this is all fantastic (i was just about to start a topic asking how I change the look of the site)