Changing the Backgrounds to Boxes/Main Bodies etc

Pheebie · November 10, 2008

Hello people! *waves*

Complete n00b here so excuse me if this has been brought up before!

What I am trying to do (with some very old and dusty CSS coding memories) is try and change the backgrounds to say my "categories" box and "shopping cart" etc.

At the moment... the lines are all a little bit too harsh and I was curious to know whether it was possible to import your own style of box (in a gif format/png whatever it needs) and use that as a background??

At the moment the boxes are like so:

Buuuut I would kind of like them to look like this... (quick sketch up but you get the idea):

Is this possible?! I'm sure it is but how... goodness knows!!

I kind of would like to do the same thing with the whooole border (the main bit... lol can you tell I'm not particularly tech savvy ;)) just so it can tie in with my site: www.akettleoffish.co.uk (the shop url I'm currently fiddling with is www.akettleoffish.co.uk/shop!)

I've attempted (as you can see :P) to change the categories box gifs to my own custom drawing buut... it just makes it all skewy and doesn't make sense!

Thanking you muchly for your help and time :) Any indication would be ace :)

FIMBLE · November 10, 2008

Rounded boxes contributions will be of great help to you Clare

Pheebie · November 14, 2008

Rounded boxes contributions will be of great help to you Clare

OooOOoo thank you (sorry for delay have been away!)

Any you could suggest/point me towards? Had a search on the contributions thingy and it doesn't come up with anything inparticular (as said in first post I am a complete n00b so excuse me if I'm being a complete blonde ;D

November 14, 2008

This may help as found this on the fourm and feel it should stay here

1. … Change the OsCommerce in the Title?

Log into the admin then go to Configuration > My Store and edit Store Name

2. … Change the What’s New Here on the front page?

Go to catalog/includes/languages/English/index.php

Find the following line and change it to what you want it to say

CODE

define('HEADING_TITLE', 'What\'s New Here?');

3. … Change the Welcome Guest! Would you like to log yourself in? Or would you prefer to create an account on the front page?

Go to catalog/includes/languages/English/index.php

Find the following line and change it to what you want it to say

4. … Change the default text on the front page?

Go to catalog/includes/languages/English/index.php

Find the following line that starts with the following (about line 13 – usually the first one ) and change it to what you want it to say

CODE

define('HEADING_TITLE', 'TEXT_MAIN', 'This is a default setup …… . PROJECT_VERSION . '</b></font>.');');

An easier way to do this is to install the contribution Define MainPage then you can change the default text whenever you like through the Admin section

5. … Remove the ??? box from the left / right side?

Go to catalog/includes/column_left.php OR column_right.php and put // in front of the line with the box name that you want to remove.

An easier way is to install the contribution InfoBox Admin which will let you remove the boxes, move them to the other column through clicking buttons through the admin. You can also add other boxes easily through this as well.

6. … Move the ??? box from the left / right side?

Go to catalog/includes/column_left.php OR column_right.php and put // in front of the line with the box name that you want to remove. Copy that line then add it into the other file where you want it to be.

An easier way is to install the contribution InfoBox Admin which will let you remove the boxes, move them to the other column through clicking buttons through the admin. You can also add other boxes easily through this as well.

7. … Add the ??? box from the left / right side?

Go to catalog/includes/column_left.php OR column_right.php and copy a line then change it into the file that you want to add.

An easier way is to install the contribution InfoBox Admin which will let you remove the boxes, move them to the other column through clicking buttons through the admin. You can also add other boxes easily through this as well.

8. … Remove / Add the rounded corners to the info boxes on the left or right columns?

Go to catalog/includes/boxes and open the corresponding file name for the box you want to change. Here is the code that will change this – look for the line that you have (eg left rounded) then change it to what you want it to be.

No rounded corners

CODE

new infoBoxHeading($info_box_contents, false, false);

Right rounded corner

CODE

new infoBoxHeading($info_box_contents, false, true);

Left rounded corner

CODE

new infoBoxHeading($info_box_contents, true, false);

Both rounded corners

CODE

new infoBoxHeading($info_box_contents, true, true);

9. … Remove / Add the rounded corners to the info boxes in the middle part of the page? (eg: New Products for MONTH)

Go to catalog/includes/modules and open the corresponding file name for the box you want to change. Change the following code to the one above that you want.

CODE

new contentBoxHeading($info_box_contents);

10. … Change the default text ???? on the ???? page

Go to catalog/includes/language/YourLanguage/ and choose the filename with the same name as the page you want to change. Look for the text in there that you want to change

11. … Change the Title in the ???? Box?

Go to catalog/includes/English.php and find the line where NAME_OF_BOX is the box you want to change and Title of Box is the title that is showing and change the Title of Box to what you want

CODE

define('BOX_HEADING_NAME_OF_BOX, 'Title of Box');

12. … Remove the Top from the breadcrumb?

Go to catalog/includes/application_top.php and put // in front of the following line (around 482)

CODE

$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);

13. … Change Top or the Catalog on the breadcrumb?

Go to catalog/includes/English.php and find the following lines and make the changes as necessary

CODE

define('HEADER_TITLE_TOP', 'Top');

define('HEADER_TITLE_CATALOG', 'Catalog');

14. … Change the >> in the breadcrumb?

Go to catalog/includes/header.php and find the following line – about 63 and change the bit that begins after trail that begins with the & and ends in the ; to the character that you want.

CODE

<td class="headerNavigation"> <?php echo $breadcrumb->trail(' & raquo; '); ?></td>

15. … Change the default currency to one that is not USD to get the prices to show?

Go to catalog/includes/languages/English.php and around line 39 find

CODE

define('LANGUAGE_CURRENCY', 'USD');

and change the USD to Currency code that you want to use.

16. … Change the date format to DD/MM/YYYY?

Go to catalog/includes/languages/English.php and around line 21

CODE

define('DATE_FORMAT_SHORT', '%m/%d/%Y'); // this is used for strftime()

change it to

CODE

define('DATE_FORMAT_SHORT', '%d/%m/%Y'); // this is used for strftime()

Then around line 23 find this

CODE

define('DATE_FORMAT', 'm/d/Y'); // this is used for date()

and change it to

CODE

define('DATE_FORMAT', 'd/m/Y'); // this is used for date()

You also need to make the same changes in catalog/ADMIN/includes/languages/English.php

17. How do I change the font / colour / size?

Go to catalog/includes/stylesheet.css and make the changes in there for the main site.

Go to catalog/admin/includes/stylesheet.css and make the changes in there for the admin section.

8. How do I change the column widths?

Find in includes/application_top.php and admin/includes/application_top.php, if you want to change the admin also:

CODE

define('BOX_WIDTH', 125); // how wide the boxes should be in pixels (default: 125)

and change to suit. e.g.

CODE

define('BOX_WIDTH', 200); // how wide the boxes should be in pixels (default: 125)

19. How do I change the osCommerce logo to mine?

Upload your logo to the images directory, then find in includes/header.php:

CODE

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

and change both the image name and alt text to your own. e.g.

CODE

<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'your_logo.jpg', 'Your alt text') . '</a>'; ?>

20. How do I remove or change the osCommerce Account, Cart and Checkout clip art?

To remove them completely, find and delete this line from includes/header.php

CODE

<td align="right" valign="bottom"><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a> <a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a> <a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?> </td>

or to change for your own, upload your clip art and change the image calls to your own or if you are using gifs, name yours the same as the stock ones.

21. How do I fix the width and center my shop?

There are several ways to achieve that, but probably the easiest way is:

On the line immediately before the very first <table> in includes/header.php, add another with a fixed width - 770px for example:

CODE

then on the very last line in includes/footer.php, close the table:

CODE

</td></tr></table>

22. How do I make a database backup? I get a message telling me the backup directory doesn't exist.

On a new installation of osCommerce, you need to physically create the backups directory within the admin directory. So, FTP to your admin directory, click on the New Folder icon and name the new folder backups.

Then browse to Admin>Tools>Database Backup, click on the "backup" button, select how you want to save the backup and finally, hit the "backup" button again.

23. How do I restore a database backup? There are 2 "restore" buttons!

If you saved your backup to the backups directory, you need to use the "restore" button farthest to the right. You need to click it twice. If you saved the backup to your PC, then use the other "restore" button first, navigate to the backup and then click the next "restore" button.

24. I have installed a contribution but the instructions tell me to alter the database with the supplied SQL file. How do I do that?

Most hosting packages include a utility called phpMyAdmin and that is where you can make your database alterations.

From your host's control panel, locate the link to phpMyAdmin. Once inside, select your database from the drop down menu in the left column. Now you have 2 choices. Either click on the "Import" tab at the top of the screen, navigate to the contribution SQL file and click "Go" or, click on the "SQL" tab, also top of the screen, copy the SQL file content and paste into the text area and then click the "Go" button. Either way is good.

25. How do I turn off the category count?

Go to Admin>Configuration>Show Category Counts, click on it to select, click the "edit" button, select false and click "update".

26. Search engines are indexing my site with a SID. How can I prevent that?

Go to Admin>Configuration>Sessions and make sure both Prevent Spider Sessions and Recreate Session are set to true. Then go to the contributions section on this forum, download the latest spiders.txt file and upload it to your includes directory.

How Do I ...

27 ... Get the price to show instead of 0 if I have changed the default currency as in #15?

Log into the admin

Go to Configuration > My Store

Click on "Switch To Default Language Currency" then the Edit Button

Change to True

28 ... Get automatic notification if there is an order placed?

Log into the admin

Go to Configuration > My Store

Click on "Send Extra Order Emails To" then the Edit Button

Fill in your email address only - do not use the format that is suggested as it does not work

29 ... Stop getting Image broken links when I do not want to upload an image?

Log into the admin

Go to Configuration > Images

Click on "Image Required" then the Edit Button

Change Image Required to False

30 ... Remove the other languages so I just have English?

Log into the admin

Go to Configuration > Localization > Languages

Click on the language you do not want then the Delete Button

You can also remove the language files from the /catalog/inculdes/languages/LanguageNAME and /catalog/admin/inculdes/languages/LanguageNAME if you want

31 ... Get the links and files to work properly in Admin when installing into a root directory?

Make sure the following lines in the admin/includes/configure.php file are set properly as follows

CODE

define('HTTP_CATALOG_SERVER', 'http://www.YOURWEBSITE.com/'); // must have the / at the end

define('DIR_WS_CATALOG', '../'); // MUST have the ../ here

32 .... change the default email message that is sent when someone signs up?

Go to catalog/inculdes/languages/YOURLANGUAGE/create_account.php and make the changes in there

EASY HOW TO CENTER & SIZE SHOP

At the very start of header.php add:

then at the very bottom of footer.php add:

</div>

then add to your css:

#content {

width: 900; margin: auto;

border: 1px solid #999999;

text-align:center;

}

nside catalog/includes/modules folder are files that correspond to the box with which you want rounded corners.

Open the file in a text editor and look for this line new contentBoxHeading($info_box_contents);

When you install oscommerce to your server, you have almost TWO separate websites. You have your customer end, which is the part that everyone sees which is USUALLY called the Catalog, and you have the administration end, which is where you end up when you type www.mysite.com/catalog/admin. That is were the majority of your site configuration and administrations happen aside from actual coding.

Each section, both the catalog and the admin have individual files that make up the main part of that page. You have a header, footer, index, left colum, ect. in BOTH of these sections. The thing is, even though they have the same file name, they are ENTIRELY different. If they were the same, you would have a copy of your main website and no administration right? Believe it or not, this was one of the MOST confusing things to me. WHY were there TWO headers? Well, you need a heeader for the shopping cart that will show your shop banner and whatever else you choose to have, but you ALSO need a header in the admin section that shows the oscommerce banner and the header navigation. Those are two totally different things, but they are located in the same place of the page, therefor are called the header. Same with the other duplicate pages.

So WHY are there header, footer, right column, left column pages? Why aren't they just included in the index page like a typical HTML site? Well, there's not really a simple answer to this, and I couldnt tell you EVERYTHING about how it is set up, HOWEVER I can offer this explaination. You index page is the first page that your customer sees when they type in the url to your site. This index page has the code in it that calls for the HEADER.PHP, LEFT_COLUMN.PHP, RIGHT_COLUMN.PHP, and FOOTER.PHP. These when put together, make up the LOOK of the index page of your site and are under the INCLUDES folder. I like to remember which file they are in because they are INCLUDED in the index to make up the main page and they NEED to be INCLUDED in every page of your site. The header, footer, right and left column are ALWAYS shown on your site no matter which section of the site your are on.. much like a template.

The other files in the INCLUDES section of your catelog are the application_top.php, application_bottom.php, configure.php, filenames.php. The application top and bottom have the code in them that calls on certain functions of the top and bottom of your page. The application top is the page that has the code that checks for the SSL and other securities (if in place) and calls on the correct database file, set cookie use, check IP address, ec. It basically does most of the "behind the scenes" functions that your website performs every time someone visits. Same with the application_bottom.php file.

Then you have the FUNCTIONS folder. This folder contains files that, when called upon from your includes pages, will perform certain functions. For instance, the general.php function page will call on certain tables from your database, like the PRODUCT NAME. So instead of writing all of this code for a particular function on one page, you just refer it to the general functions page so it does not get cluttered. It will perform functios to check if stock is available for a certain item, calculate tax and more. This is another "behind the scene's type of file that will access certain data if it is called upon. This data can be called upon by the load of a page or clicking a button depending on the code that is entered.

The CLASSES folder contains files the control the look and functionality of certain parts of the site. So if you create a breadcrumb (which is the little navigation bar the shows you where you've been ie: home->main category->subcategory->product) then when you are writing that code in the header.php file, you can call on the breadcrumb CLASS to define how it is going to work. It tells the website to log and display the sections of the site the visitor has been to. The order.php, when called on will check that the fields were filled out correctly for the order being placed and copy them to the database for further use.

The MODULES folder contains the shipping, order total, payment, and other modules that come pre-installed on your oscommerce. This will grow as you add more modules to your site. many of code in these can be changed in your admin section. The Shipping Module will be installed through your admin, and the changes you make within the admin section on your website will show in the code. I have not done a lot of work with these so I can not explain too indepth about them.

The BOXES folder is probably the MOST used folder by myself when I was trying to make my site functional and good looking. The boxes folder contains an individual .php page for each information box on your page. And information box is either the boxes on the left and right column of your page, or any other box you find within your page. The code inside of these files tells the website how to display the information on the page, and what to display. You will see an HTML table with the <tr> and <tad> tags. It will contain the header information of the box (whether you want an image or text) and will call on a class from the style sheet for the LOOK of the box (ie: outline, size, ect.)

There is a LOT of information about customizing your boxes here: The Knowledge Base

Then you have the LANGUAGES FOLDER, which can be INSANELY confusing because.. wait, you now have ANOTHER index.php page?? Its not as confusing as you think though. Before you get to the other index.php file, you will see you have three language folders, and three language FILES. Since I speak english, I'm going to explain what that one does. The others to the same thing but in a different language. If you open the english.php file, you will see a LIST of DEFINES.

You will see something like this:

CODE

define('BOX_HEADING_CATEGORIES', 'Categories');

That is a VERY easy thing to explain. All it says is where you see the words BOX_HEADING_CATEGORIES, the website should display the word Categories. Simple. So the code says that it is DEFINING the words in caps to say whatever it says in that sections of code. It seems redundant if you are only making a website in one language, but it is NESSECARY if you are making a website that uses multiple languages because depending on which language the visitor has chosen, it will call on a different define for the word.

So now inside of the ENGLISH FOLDER you have a bunch of pages that are named the same as the ones in your main catalog, HOWEVER these pages do not carry the functionality or look. They just tell the site to display certain words in that particular language, much like the english.php file. This just organizes it more so you dont have a TON of defines in your english.php. If you open them, they will look A LOT like the english.php file. So see, the second index file is not all that complicated. It just says that if you are on the index page, in the english language, to display certain words in ENGLISH.

You also have an ENGLISH images folder where you will put all of your buttons because obviously, Add To Cart is not the same in all languages. You NEED to have these because if you are in the german language, you don't want the CONTINUE button to show, you want the german counterpart to show instead. This is NOT the image folder where any other website images should be stored unless you only want them to show up if they are in a certain language.

So thats it for the layout of the site.

now i didnt REALLY explain the ADMIN section. Theres a reason for this. It is exactly the same but different. WHAT?? Well, the file structure is the same, but instead of creating the look and functionality of your website, it creates the look and functionality of the admin part of your site. These files will not change the look of your website AT ALL, but it will change your administration. SO if you add a contribution that creates a new section in your admin, you will NEED to access those files, otherwise you will not.

FIMBLE · November 14, 2008

What was that in reply to? You post in the wrong topc :-)

Here is the link to rounded boxes which is nothing like that in title which explains why you could not find it!

http://addons.oscommerce.com/info/1702

Pheebie · November 16, 2008

What was that in reply to? You post in the wrong topc :-)

Here is the link to rounded boxes which is nothing like that in title which explains why you could not find it!

http://addons.oscommerce.com/info/1702

Thank you so much!

The Mad4rc post does have some info on rounded corners (amidst everything else) so thank you for that too! I will enjoy playing with this tomorrow :D

Ta for helping out a n00b :)

Changing the Backgrounds to Boxes/Main Bodies etc

Recommended Posts

Pheebie

Link to comment

Share on other sites

FIMBLE

Link to comment

Share on other sites

Pheebie

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

FIMBLE

Link to comment

Share on other sites

Pheebie

Link to comment

Share on other sites

Archived

Browse

Activity