Basics for design

[♥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... B)

[Simmy]

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)

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

 

:thumbsup:

 

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

[Simmy]

Well..its a general replay..

 

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

 

:thumbsup:

<{POST_SNAPBACK}>

 

I like you're pro-active approach :thumbsup:

[♥toyicebear]

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)

[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]

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.

[Guest]

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

 

:thumbsup:

[♥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.... :thumbsup:

[♥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

 

 

B)

[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... :P :blush: :P

[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) :-"

[toasty]

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?

[♥toyicebear]

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)

[Guest]

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

[gastongr]

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

[♥toyicebear]

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

<{POST_SNAPBACK}>

 

 

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