2.3.1: A "How To..." Road Map...(NO QUESTIONS, JUST HOW TO'S PLEASE)

[ErikMM]

This is a 2.3.1 thread as the other main "how to" thread is for 2.2

1. DON'T POST QUESTIONS HERE

2. DON'T BE THE THE FIRST ASS TO POST A QUESTION HERE AND CLUTTER UP THIS THREAD

 

3. DO post solutions or how to's-- preferably with numbers on the (a) picture* (*see b. below)

4. DO refrain from posting questions on this thread

5. DO ignore questions if you see them, here...but you shouldn't see questions here because this is supposed to just be how to's, but we all know how may asses there are in the world (currently there are 464 forum members, don't be one of the asses)

6. DO avoid cluttering this up (like the 2.2 how to thread) to make finding answers easier

7. DO post a better how to (or edit) if someone goofed or was not proper in the change/tip they posted (bad code, or technique etc.)

 

THE PICTURE(S)

a. They say a 1,000 words sometimes so please use them

b. your own (or a modified) picture of STOCK template page (demo pages)

c. screen snapshots or screen grabs can be made with this: screengrab tool

 

1. Please leave "powered by osCommerce"

-modify here: catalog/includes/languages/english.php

its at the very bottom

2. modify here: Admin Tool, Tools tab, Banner Manager, turn status to on or off

3. modify here: catalog/index.php

-to turn off or hide find <?php include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

change to: <?php // include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

4. modify here: catalog/includes/languages/english.php

- to modify find: define('TEXT_GREETING_GUEST', 'Welcome Guest, <a href="%s"><u>log in</u></a> or <a href="%s"><u>create an account</u></a>'); (this is not the exact syntax of the stock code, but this is where you can change it)

-For my shop, I put a home page image in this spot

5. modify here: catalog/index.php

If you don't want to see "What's New Here" find: <h1><?php echo $category['categories_name']; ?></h1> change to: <?php //echo $category['categories_name']; ?>

If you want to modify what it says go to: ? I don't remember at the moment, sorry

6. This is your "store logo"

modifying it is extremely easy in Admin Tool, Configuration, Store Logo

-if you make it too wide it will mess up the cart, account, and checkout buttons

-it may move the above buttons if people log in because then "log off" is added to the button set

-mine happens to 617 px wide and seems to work

7. The button text can be found here: catalog/includes/languages/english/index.php

find:

define('HEADER_TITLE_MY_ACCOUNT', 'Account');

define('HEADER_TITLE_CART_CONTENTS', 'Cart');

define('HEADER_TITLE_CHECKOUT', 'Checkout');

* note that the example above has "contents" removed from cart, and "my" removed from account

8. modify here: catalog/includes/language/english/modules/boxes/bm_search

all your boxes can be found in this box folder

below is how I modified mine, so you can compare it to the stock you see in your control panel:

define('MODULE_BOXES_SEARCH_TITLE', 'Search');

define('MODULE_BOXES_SEARCH_DESCRIPTION', 'Show search field');

define('MODULE_BOXES_SEARCH_BOX_TITLE', '<center>f I n D</center>');

define('MODULE_BOXES_SEARCH_BOX_TEXT', 'enter keyword(s)<br>or use');

define('MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH', 'Advanced Search');

9. a. want to move this box, or any of the boxes to the left or right...or hide them? Go to Admin Tool, Modules, Boxes

b. the blue background you see...its for all the boxes

that picture is here: catalog/ext/jquery/ui/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png

-if you mouse over it and right click it a pop up will ask to view the background image

-see it here for example: link to the blue background picture

- I made mine a transparent png, but the sky is the limit. Just name it the same and put it back in the same place.

c. the look and feel of the text in the box headers (among other things) is done here: ext-jquery-ui-redmond-jquery-ui-1-8-6.css

-you can also get new looks here: themeroller

-how to install themeroller is here: link

10. if you add text to a page don't forget that words with an apostrophe, like "don't," must be preceded by a \ like this... \' or don\'t if you don't put the \ your page or site may not load

 

11. BE PATIENT, DON'T POST QUESTIONS HERE...lets keep it clean and easy to find answers...more will come...you add it...we add it...also other page view pics from stock demo store snapshots

[ErikMM]

1. Please leave "powered by osCommerce"

-modify here: catalog/includes/languages/english.php

its at the very bottom

2. modify here: Admin Tool, Tools tab, Banner Manager, turn status to on or off

3. modify here: catalog/index.php

-to turn off or hide find <?php include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

change to: <?php // include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

4. modify here: catalog/includes/languages/english.php

- to modify find: define('TEXT_GREETING_GUEST', 'Welcome Guest, <a href="%s"><u>log in</u></a> or <a href="%s"><u>create an account</u></a>'); (this is not the exact syntax of the stock code, but this is where you can change it)

-For my shop, I put a home page image in this spot

5. modify here: catalog/index.php

If you don't want to see "What's New Here" find: <h1><?php echo $category['categories_name']; ?></h1> change to: <?php //echo $category['categories_name']; ?>

If you want to modify what it says go to: ? I don't remember at the moment, sorry

6. This is your "store logo"

modifying it is extremely easy in Admin Tool, Configuration, Store Logo

-if you make it too wide it will mess up the cart, account, and checkout buttons

-it may move the above buttons if people log in because then "log off" is added to the button set

-mine happens to 617 px wide and seems to work

7. The button text can be found here: catalog/includes/languages/english/index.php

find:

define('HEADER_TITLE_MY_ACCOUNT', 'Account');

define('HEADER_TITLE_CART_CONTENTS', 'Cart');

define('HEADER_TITLE_CHECKOUT', 'Checkout');

* note that the example above has "contents" removed from cart, and "my" removed from account

8. modify here: catalog/includes/language/english/modules/boxes/bm_search

all your boxes can be found in this box folder

below is how I modified mine, so you can compare it to the stock you see in your control panel:

define('MODULE_BOXES_SEARCH_TITLE', 'Search');

define('MODULE_BOXES_SEARCH_DESCRIPTION', 'Show search field');

define('MODULE_BOXES_SEARCH_BOX_TITLE', '<center>f I n D</center>');

define('MODULE_BOXES_SEARCH_BOX_TEXT', 'enter keyword(s)<br>or use');

define('MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH', 'Advanced Search');

9. a. want to move this box, or any of the boxes to the left or right...or hide them? Go to Admin Tool, Modules, Boxes

b. the blue background you see...its for all the boxes

that picture is here: catalog/ext/jquery/ui/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png

-if you mouse over it and right click it a pop up will ask to view the background image

-see it here for example: link to the blue background picture

- I made mine a transparent png, but the sky is the limit. Just name it the same and put it back in the same place.

c. the look and feel of the text in the box headers (among other things) is done here: ext-jquery-ui-redmond-jquery-ui-1-8-6.css

-you can also get new looks here: themeroller

-how to install themeroller is here: link

10. if you add text to a page don't forget that words with an apostrophe, like "don't," must be preceded by a \ like this... \' or don\'t if you don't put the \ your page or site may not load

11. SSL easy as 1, 2, 3

12. FAVICONS

13. Having a terrible time sorting and adding products in 2.3.1? Try this, it works great: AJAX AM + you will needs these modifications to install: link

14. Will add a screen shot soon, but to make your menu tree expand when people go to products then thank derben, the code below is from this link:

1. index.php ~line 37

Change:  if ($category_depth == 'nested') {
To:      if ($category_depth == 'nested' && isset($HTTP_GET_VARS['cPath'])) {

2. catalog/application_top.php ~line 437

Ch:  $cPath = '';
to:  $cPath = '22';

3. includes/modules/boxes/bm_categories.php ~around line 99

Find:   $parent_id = $categories['categories_id'];
Add:    $dbs[] = $categories['categories_id'];

4.includes/modules/boxes/bm_categories.php ~around line 109

change:   while (list($key, $value) = each($cPath_array)) {
to:       while (list($key, $value) = each($dbs)) {

-in line change #2 above remove the 22 and leave only ' ' if you don't want it to expand on your homepage...it will be collapsed

- with 22 it will make the first category bold and show the entire tree on your home page

 

***BE PATIENT, DON'T POST QUESTIONS HERE...lets keep it clean and easy to find answers...more will come...you add it...we add it...also other page view pics from stock demo store snapshots

[ErikMM]

15. Remove the continue button at catalog/the page you want to remove it from

-this example: catalog/privacy.php

-near the bottom find: <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?></span>

-put // before echo like this: <span class="buttonAction"><?php //echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?></span>

16. Change the text, or info you want @ catalog/includes/languages/english/the page in question...in this example: catalog/includes/languages/english/privacy

- Don\'t forget #10 if you have apostrophes

[ErikMM]

17. Add an about page...or other pages to the info box

a. add a file name @ catalog includes/filenames.php

-like this:

define('FILENAME_ABOUT_ME', 'about_me.php');

b. add a php file to the catalog folder

- I just copied ALL the code in privacy and pasted it in the new about_me.php, and made two changes to the code:

- this:

require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRIVACY);
$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_PRIVACY));

-became:

require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_ABOUT_ME);
$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_ABOUT_ME));

c. open: catalog/includes/languages/english/modules/boxes/bm_information.php

add:

define('MODULE_BOXES_INFORMATION_BOX_ABOUT_ME', 'About Me');

d. open: catalog/includes/modules/boxes/bm_information.php (*this is not the same file as 17c above, this is in another location, read carefully)

add:

'    <a href="' . tep_href_link(FILENAME_ABOUT_US) . '">' . MODULE_BOXES_INFORMATION_BOX_ABOUT_US . '</a><br />' .

[blr044]

7. The button text can be found here: catalog/includes/languages/english/index.php

find:

define('HEADER_TITLE_MY_ACCOUNT', 'Account');

define('HEADER_TITLE_CART_CONTENTS', 'Cart');

define('HEADER_TITLE_CHECKOUT', 'Checkout');

* note that the example above has "contents" removed from cart, and "my" removed from account

 

 

Like to make a slight correction to step # 7. The button text will be located here: catalog/includes/languages/english.php

[ErikMM]

7. Note change to #7 in the post above (Thanks Bennett!)

18. Add a bigger/wider "store logo" picture and MOVE the buttons above the picture. Original post.

Add a "store logo" in Admin Tool, Configuration, Store Logo. Pictures can be up to 950 pixels wide.

 

You will have to MOVE the buttons above the (wider) store logo picture:

 

Open: includes/header.php

 

Find: 
<div id="headerShortcuts">

 

Replace with:
<div id="headerbuttonsshort">

 

Find:
<div id="headerbuttonsshort">
 <?php
 echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
      tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
      tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

 if (tep_session_is_registered('customer_id')) {
   echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
 }
?>
</div>

<script type="text/javascript">
 $("#headerShortcuts").buttonset();
</script>

 

Move Above of:

<?php
/*
 $Id$

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 

Open: stylesheet.css

 

Find:
#headerShortcuts {
 float: right;
 margin-top: 15px;
}

 

Add After:
#headerbuttonsshort {
 float: right;
 margin-right: 4px;
 margin-top: 2px;
 margin-bottom: 1px;
}

 

19. Change "Top" to read "HOME"

open: catalog/includes/languages/english.php

Find:

define('HEADER_TITLE_TOP', 'Top');

Change 'Top' to 'Home' or whatever you want

 

Do not change the "TOP" in HEADER_TITLE_TOP

[ErikMM]

20. Warning, the "Database Backup" in Admin Tool, Tools, Database Backup, ONLY backs up the "data base," NOT all of your .php, and .css files in the Catalog folder. It will save categories and products info.

 

It is very important to backup the data base, but equally important to make a zip file or something for the rest of the site. In my case, I use an Archive function in the File Manager (webshell) provided by my host.

[ErikMM]

21. I don't think there is a working 2.3.1 reCAPTCHA yet. Here is what I did. It works, but from what I can see, it differs from 2.2 reCAPTCHA contributions, so perhaps I am doing something wrong, despite it working.

 

a. Make an account at reCAPTCHA to get your public and private keys to be used below.

 

b. add: the recaptchalib.php file to catalog

-find the file at Google or @ http://recaptcha.googlecode.com/svn-history/r7/trunk/recaptcha-plugins/php/recaptchalib.php

 

c. catalog/contact_us.php

 

below <head>:

<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'clean'};
</script>

before the continue button code place this code (pulled from the page shot you see above):

<center>
<?php
require_once('recaptchalib.php');
$publickey = "you public key number will go here"; // from Google reCAPTCHA account
echo recaptcha_get_html($publickey);
?>
<font color="#247AC4"><b> >Enter reCAPTCHA text and hit "continue"</b></font>
</center>

the code above goes right before this existing code for the continue button (which is below as a reference):

 <div class="buttonSet">
   <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null, 'primary'); ?></span>
 </div>
</div>

</form>

22. The code below was placed right after the continue button code above. It is for the contact info. Its an image, not text, as you don't want bots finding your email...

<img src="images/contact/mtbthreads-contact_INFO.png"/>

21. continued d. catalog/includes/modules/action_recorder/ar_contact_us.php

 

at the very top, before anything else:

<?php require_once('recaptchalib.php');
$privatekey = "your private key number will go here";
$resp = recaptcha_check_answer ($privatekey,
$_SERVER["REMOTE_ADDR"],
$_POST["recaptcha_challenge_field"],
$_POST["recaptcha_response_field"]);
if (!$resp->is_valid) {
die ("You are off the trail! Go back and reCAPTCHA it again.");
}
?>

If successful, when users hit "continue" they will see the normal oscommerce email success message (which you can manipulate @ catalog/includes/languages/english/contact_us.php). For errors, users will get a blank white page with your customized message (in this example: You are off the trail! Go back and reCAPTCHA it again.).

 

e. catalog/stylesheet.css

 

this was my way of shirking the reCAPTCHA as there is no way to get smaller versions...why I don't know. I have seen some really clean, tight and colorful ones at "Blogger.com" that I may try to get working.

 

this is how I modified catalog/stylesheet:

#recaptcha_widget_div {width: 210px; overflow:hidden;} /*width*/
#recaptcha_table {border-color: transparent !important;} /*outer border*/
#recaptcha_image img {width: 198px; height: 55px; border: 1px solid #C5DBEC;} /*words image size and border, border needed or it will not have four sides*/
#recaptcha_response_field {background-color: #DDECF7; border-color: transparent !important;} /*input field border, width is not controllable, but widget_div cuts it */

 

You can skip "e" (the stylesheet mods) if you want the stock themes.

The stock 'clean' theme (below) is what I manipulated.

Other themes are here: themes

 

Be sure to change the theme in the script in the directions @ "c" above.

 

LASTLY. The same logic can be applied to get reCAPTCHA for "tell a friend."

 

23. I wanted a background pic in my info box. This is how I modified catalog/stylesheet:

 

#columnRight .infoBoxContainer:nth-of-type(2) .infoBoxContents
{
/*background-color: pink;*/ /*for testing*/
background-image:url('images/mtbTHREADS_threadNEEDLE.png'); background-repeat: no-repeat; background-position: 30px 30px; 
}

[ErikMM]

21. "d"...well this step will break 2.3.1 Admin Tool, Tool, Action Recorder... :( so stay tuned or try a 2.2 contrib, but I don't think any work without mods

[ErikMM]

 

before I begin, alot of this can be done with themeroller (see#9)

 

see 17 and 8 above as well

 

8- the title can be centered as described above in 8...you can also make style sheet mods to this, but I didn't, I did as described in 8.

 

22. The color of the header background (blue) can be changed as described in #9b, but here is more info:

 

catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

 

the stock css is this:

/* Component containers
----------------------------------*/
.ui-widget-header {
   background: url("images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") repeat-x scroll 50% 50% #5C9CCC; /*The stock background is #5C9CCC even though there is a pic covering it up. You can delete the background pic and change it to a color*/
   border: 1px solid #4297D7; /*see www.w3schools.com css for border styling etc., if you don't want a border then remove this line*/
   color: #FFFFFF; /*this is the header font color*/
   font-weight: bold;
}

 

read notes above between /* notes here */

 

Go to color hex website to choose colors. Pixie is a great tool to find what colors you want from other sites or whatever you want by just mousing over it.

 

23 + 24. change the background color of the boxes + border color

 

catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

/* Component containers
----------------------------------*/
.ui-widget-content {
   background: url("images/ui-bg_inset-hard_100_fcfdfd_1x100.png") repeat-x scroll 50% bottom #FCFDFD; /*you can relpace the image with another colored png (same size and name) or delete the pic info and modify the #hexnumbers*/
   border: 1px solid #A6C9E2; /*see my comments on colors at the end of #22*/
   color: #222222; /*text*/}

read notes above between /* notes here */

[ErikMM]

25. how to create a new box + add an image to the header of a box instead of text (same link page)

[ErikMM]

26.Awesome:

 

Web Developer

 

two screen shots below

 

[ErikMM]

27. Mastering the 960 Grid System

 

more: http://www.oscommerce.com/forums/topic/367731-width-of-template-231/

 

http://www.clubosc.com/960-grid-tutorial-understanding-prefix-and-suffix-classes.html

[ErikMM]

28. #8 revised, and how to change the magnifying glass

 

center ONE box heading = the old #8 (below) applies*

-catalog/includes/language/english/modules/boxes/bm_search

all your boxes can be found in this box folder

If you want to only center one heading do it @ define "TITLE":

define('MODULE_BOXES_SEARCH_TITLE', 'Search');

define('MODULE_BOXES_SEARCH_DESCRIPTION', 'Show search field');

define('MODULE_BOXES_SEARCH_BOX_TITLE', '<center>f I n D</center>');

define('MODULE_BOXES_SEARCH_BOX_TEXT', 'enter keyword(s)<br>or use');

define('MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH', 'Advanced Search');

*note that if you do this for the Search box (as just explained above) you will see "<center>f I n D</center>" when you mouse over the magnifying glass

 

A better way to center ALL box headings is described below:

-catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

/* Component containers
----------------------------------*/
.ui-widget-header { border: 0px solid #6f4949; color: #000000; font-weight: bold; text-align: center;}

 

Make sure you remove "center" from

define('MODULE_BOXES_SEARCH_BOX_TITLE', '<center>f I n D</center>');

@ catalog/includes/language/english/modules/boxes/bm_search

 

Change to a different Magnifying Glass (or eye etc.):

 

replace: catalog/includes/languages/english/images/buttons/button_quick_find.gif

 

with another 16 x 16 pixel gif file...SAME NAME: button_quick_find.gif

 

If you go bigger than 16 px it will get bumped down below the box, instead of to the right of it (unless you change the width of you boxes or shrink the search form box).

 

-Don't forget to keep the old one in case you want it back...or you can easily get from the stock site at another time.

 

29. Change the size and style of your ALL link fonts @

 

-catalog/stylesheet.css

A {
 font-style: italic;
color: #000000;
 text-decoration: none;
}

If you want to change the size add

font-size: 15px;

or whatever you want to change it to

 

*this will not change the number to the right, only the link

*note that the picture at the beginning of 28 has italic links, and note the style sheet code

 

If you want to change the link AND the number...or ALL the text in the boxes then go to:

-catalog/style sheet

.infoBoxContents {
 padding: 5px;
 font-size: 11px;
 line-height: 1.5;
}

and change the text as you wish

 

ON HOVER if you want to change the link text color (shown below) or style then adjust

catalog/stylesheet as desired here:

A:hover {
font-style: normal;
 color: #663333;
 text-decoration: none;
}

you could change the decoration to ONE of these

{text-decoration:overline}
{text-decoration:line-through}
{text-decoration:underline}
{text-decoration:blink}

I don't recommend the line decoration as even linked pictures will become underlined.

[ErikMM]

 

A better way to center ALL box headings is described below:

-catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css

/* Component containers
----------------------------------*/
.ui-widget-header { border: 0px solid #6f4949; color: #000000; font-weight: bold; text-align: center;}

 

Make sure you remove "center" from

define('MODULE_BOXES_SEARCH_BOX_TITLE', '<center>f I n D</center>');

@ catalog/includes/language/english/modules/boxes/bm_search

28. cont. The above can actually be done here, and it may be better/safer than messing with jquery:

-catalog/stylesheet

.infoBoxHeading {
 padding: 2px;
 font-size: 11px;
text-align: center;
}

the only thing is, both methods will put the breadcrumb Home » Catalog » Products etc. in the center as well

 

They can be moved back to the left here:

-catalog/stylesheet

A.headerNavigation { 
 color: #000000;
float: left;
}

 

HOWEVER, the » » will be stuck out in the middle!?

 

One solution, if you don't like the breadcrumb anyway is to remove it

-catalog/includes/application_top.php

 

add // before each line like so (nearly the bottom of the application _top file)

//$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);
 //$breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT));

 

more tips on the breadcrumb here: breadcrumb tips

[ErikMM]

more tips on the breadcrumb here: breadcrumb tips

 

for 2.3.1 complete removal is done @ catalog/header as well, only the middle div, or both (meaning everything), needs to be removed:

 

remove the middle div alone, or all of these lines

<div class="grid_24 ui-widget infoBoxContainer">
 <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

 

just remember what you did in case you want it back one day...

[ErikMM]

30. Add a background image (differently than an earlier post-- because I added a background to the entire site(#32), this in turn stopped the background image the way I originally made it work, so I had to do things differently...)

 

you can play around with the div and/or table, as there are many other ways to go about this, but this is what I did to get a background...and a background for the entire site #32):

 

catalog/contact_us.php

<div class="contentContainer" style="background-image:url(images/contact/mTbThreads_lever2RIGHT_small.png); background-repeat: no-repeat; background-attachment:fixed; background-position: center 112px">

 <div class="contentText">
   <table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
 <td colspan="2" align="center" height="85px"></td>
 </tr>

     <tr>
       <td class="fieldKey"><?php echo ENTRY_NAME; ?></td>
       <td class="fieldValue"><?php echo tep_draw_input_field('name'); ?></td>
</tr>

     the rest of the table code stayed the same

 </div>

I had to play with the background-position to get it where I wanted

here it is with a 1px border so you can see what it looks like...I added a top row to the stock lay-out to make the picture visible

 

31. Change "Continue" to "Send" or "whatever you want"

catalog/includes/languages/english.php

 

add the middle line:

define('IMAGE_BUTTON_CONTINUE', 'Continue');

define('IMAGE_BUTTON_SEND', 'Send');

define('IMAGE_BUTTON_CONTINUE_SHOPPING', 'Continue Shopping');

then modify catalog/contact_us.php

<div class="buttonSet">
   <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_SEND, 'triangle-1-e', null, 'primary'); ?></span>
 </div>

 

still haven't figured a reCAPTCHA yet...stay tuned

[ErikMM]

32. Add a background image to your site

 

There are many ways to do this. I decided, for now, to create a color gradient in Illustrator and repeat it here:

 

catalog/stylesheet

body {
 background-color: #ffffff;
 margin: 0px;
 font-size: 11px;
 font-family: Helvetica, Arial, sans-serif;
background-attachment: fixed;
background-image: url('mtbthreadsbackground.png');
background-position: 50% 50%;
background-repeat: repeat;}

 

this is the image I made:

you might want to use at least the white portion to see how wide that segment is (should be just about 960 px for 2.3.1 unless you messed with the 960 grid ;) ).

 

I have seen some layouts with different colors where the boxes are...imagine a stripe to the left (and/or right) behind the boxes.

 

Big images will slow load times. Try playing with compression or quality in Photoshop. I usually size art for 72ppi resolution when exporting images for saving.

[ErikMM]

33. Add a sprite CATEGORY menu

What is a sprite: http://www.w3schools.com/css/css_image_sprites.asp

 

There is another way to do this with imagerollover in lieu of a sprite, but I don't recommend it unless you only have a few links.

 

How to? Beyond the explanation below, there is info abound on the net...surf's up. Despite my instructions below, you might want to test the waters elsewhere and read up on sprites.

 

STEPS

a) Add a new box MODULE so you can move where ever you want through your Admin Panel! I had an epiphany at 2AM one evening, then found this after, but this is essentially what I did: (comment 3 by kymation)(http://www.oscommerce.com/forums/topic/367702-creating-a-new-infobox-in-oscommerce-231/

 

HOWEVER, I decided to use catalog/includes/modules/boxes/bm_search.php So you may want to do the same as that is what I am using in this example (but it doesn't matter).

 

I changed all the constants to "MENUPIC"...it was 2AM. ANYWAY, the important step you will need for the sprite is below (WARNING: backup, and be really careful because one bad character could ruin your day. In my trial and error I started to loose other modules...doh!).

 

a) I copied catalog/includes/modules/boxes/bm_search.php and renamed it bm_menupic

 

then this:

$data = '<div class="ui-widget infoBoxContainer">' .
             '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_SEARCH_BOX_TITLE . '</div>' .
             '  <div class="ui-widget-content infoBoxContents" style="text-align: center;">' .
             '    ' . tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') .
             '    ' . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: 75%"') . ' ' . tep_draw_hidden_field('search_in_description', '1') . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', MODULE_BOXES_SEARCH_BOX_TITLE) . '<br />' . MODULE_BOXES_SEARCH_BOX_TEXT . '<br /><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><strong>' . MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH . '</strong></a>' .
             '    </form>' .
             '  </div>' .
             '</div>';

was changed to this (you will see why later-- you will have to make it specific for your site):

$data = '<div class="ui-widget infoBoxContainer">' .

             '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_MENUPIC_BOX_TITLE . '</div>' .

             '  <div class="ui-widget-content infoBoxContents" style="border-color:transparent" id="sign">' .

'  <li id="navStickers"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_2_3_10' ).'"></a></li>'.
'  <li id="navCaps"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_2_3_33' ).'"></a></li>'.
'  <li id="navTotes"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_2_3_13' ).'"></a></li>'.
'  <li id="navArt"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_2_3_30' ).'"></a></li>'.
'  <li id="navJerseys"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_2_20' ).'"></a></li>'.
'  <li id="navCustom"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_2_3_21_29' ).'"></a></li>'.
'  <li id="navXCamETC"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_32' ).'"></a></li>'.
'  <li id="navDHfrDJ"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_25' ).'"></a></li>'.
'  <li id="nav29"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_24' ).'"></a></li>'.
'  <li id="navOne"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_26' ).'"></a></li>'.
'  <li id="navCause"><a href="'.tep_href_link( FILENAME_DEFAULT, 'cPath=22_31' ).'"></a></li>'.


 ' </div>' .
             '</div>';

b.) I didn't want a border (see the div style above), and I didn't want the text heading...the heading is changed here

catalog/includes/languages/english/modules/boxes/bm_menupic.php

define('MODULE_BOXES_MENUPIC_TITLE', 'Menu');
 define('MODULE_BOXES_MENUPIC_DESCRIPTION', 'Show menupic field');
 define('MODULE_BOXES_MENUPIC_BOX_TITLE', '');
 define('MODULE_BOXES_MENUPIC_BOX_TEXT', '' 

);

c) The sky is the limit on images for you menu. I had a cool rustic sign and post at one time.

 

I added a drop shadow in Illustrator.

 

My image is a little big in this example, so you can understand the logic easier on the stylesheet. I rarely use Dreamweaver, but it helped in this case because I could see where the divs and links were lining up over each part of the image.

d) the fun part

 

catalog/stylesheet.css

 

I added this:

#sign
{
width: 157px;
height: 400px;
background: url(images/menu/mtbthreads_sign_sprite.png);
margin: 0px auto;
padding: 0;
position: relative;

}
#sign li
{
margin: 0;
padding: 0;
list-style: none;
display: block;
position: absolute;
}
#sign a
{
display: block;
}

#navStickers
{
left: 25px;
top: 12px;
width: 60px;
height: 60px;
}
#navCaps
{
left: 25px;
top: 74px;
width: 60px;
height: 60px;
}
#navTotes
{
left: 25px;
top: 136px;
width: 60px;
height: 60px;
}
#navArt
{
left: 25px;
top: 198px;
width: 60px;
height: 60px;
}
#navJerseys
{
left: 25px;
top: 260px;
width: 60px;
height: 60px;
}
#navCustom
{
left: 25px;
top: 322px;
width: 60px;
height: 60px;
}
#navXCamETC
{
left: 88px;
top: 42px;
width: 60px;
height: 60px;
}
#navDHfrDJ
{
left: 88px;
top: 104px;
width: 60px;
height: 60px;
}
#nav29
{
left: 88px;
top: 166px;
width: 60px;
height: 60px;
}
#navOne
{
left: 88px;
top: 228px;
width: 60px;
height: 60px;
}
#navCause
{
left: 88px;
top: 290px;
width: 60px;
height: 60px;
}
#navStickers a
{
height: 60px;
}
#navCaps a
{
height: 60px;
}
#navTotes a
{
height: 60px;
}
#navArt a
{
height: 60px;
}
#navJerseys a
{
height: 60px;
}
#navCustom a
{
height: 60px;
}
#navXCamETC a
{
height: 60px;
}
#navDHfrDJ a
{
height: 60px;
}
#nav29 a
{
height: 60px;
}
#navOne a
{
height: 60px;
}
#navCause a
{
height: 60px;
}
#navStickers a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -25px -429px no-repeat;
}
#navCaps a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -25px -491px no-repeat;
}
#navTotes a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -25px -553px no-repeat;
}
#navArt a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -25px -615px no-repeat;
}
#navJerseys a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -25px -677px no-repeat;
}
#navCustom a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -25px -739px no-repeat;
}
#navXCamETC a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -88px -459px no-repeat;
}
#navDHfrDJ a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -88px -521px no-repeat;
}
#nav29 a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -88px -583px no-repeat;
}
#navOne a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -88px -645px no-repeat;
}
#navCause a:hover
{
background: url(images/menu/mtbthreads_sign_sprite.png) -88px -707px no-repeat;
}

[ErikMM]

34. Banner rotator (see pic in #33 above)

 

I added a box and named it something unique and stupid as described (sorta) in #33 above.

 

Then this (as explained a little more in #33 above):

$data = '<div class="ui-widget infoBoxContainer">' .
             '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_SEARCH_BOX_TITLE . '</div>' .
             '  <div class="ui-widget-content infoBoxContents" style="text-align: center;">' .
             '    ' . tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get') .
             '    ' . tep_draw_input_field('keywords', '', 'size="10" maxlength="30" style="width: 75%"') . ' ' . tep_draw_hidden_field('search_in_description', '1') . tep_hide_session_id() . tep_image_submit('button_quick_find.gif', MODULE_BOXES_SEARCH_BOX_TITLE) . '<br />' . MODULE_BOXES_SEARCH_BOX_TEXT . '<br /><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><strong>' . MODULE_BOXES_SEARCH_BOX_ADVANCED_SEARCH . '</strong></a>' .
             '    </form>' .
             '  </div>' .
             '</div>';

 

was changed to this:

$data = '<div class="ui-widget infoBoxContainer">' .
             '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_LOGOLEFT_BOX_TITLE . '</div>' .
             '  <div class="ui-widget-content infoBoxContents" style="text-align: center; border-color:white">' . 

tep_display_banner('dynamic', 'logos')

              .'  </div>' .
             '</div>';

"logos" is what I called the group of images for that banner...I added the images in Admin>Tools>Banner Manager

 

I uploaded logo images and quotes that were actually made into image files (png and transparent in most cases), but you could just add text right in the Banner Manager. I also made them slightly big (190px wide) to hover over some of the inner product borders just to give it a 3Dish feel. I knocked out the white/backgrounds so they appear to float. If you make them too big they may start to interfere with other additions you have on your site.

 

BANNER MANAGER how to:

a) add new banner @ Admin>Tools>Banner Manger>+New Banner button

b.)Title: give it the title you want

c) URL: elaborated on below

d) Group: name a new unique group...mine was "logos"

-each group will control, or popup the images in that group...so when you upload images make sure you have them in the group you want

e. option1) Image: use the "browse" box upload a file from your computer and in the 2nd box below (actually the 3rd image box), tell it where you want it to go...I made a file in my images folder called logos (catalog/images/logos)

 

option1 Example: I picked mtbTHREADS_logo_24.png from my computer. Then in the 2nd box below (actually the 3rd image box) I put logos/...don't forget "/" because I had a folder waiting for it :) in catalog/images called "logos"

e. option2) or if you already saved your banner images to the server to catalog/images or catalog/images/whateverfolderyounamed then in the middle, or second Image box, type: logos/mtbTHREADS_logo_24.png or whateverfolderyounamed/imagename.imagetype

 

re: c) URL

use the full path: http://www.yoursite/links/to/products/or/categories

or use: /links/to/products/or/categories...don't forget the first "/"

 

You are stuck, for now, having banner link targets to parent, self, blank, and I believe top, and frameset, thought I have not played with the last two. http://www.w3schools.com/tags/att_a_target.asp

 

For me, tabbed browsing, "blank" opens a new tab, not window.

 

Where do you change the target?

catalog/includes/functions/banner.php

$banner_string = '<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=banner&goto=' . $banner['banners_id']) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_title']) . '</a>';

 

This kinda needs some improvement. I am not the one to do it. I tried and failed hard. :'(

-Why did I try to improve this awesome tool? Because in some banner groups I want people to exit to a new tab, or leave to a new window, or stay in the same tab.

-Why did I fail? cause I'm not a coder by any means, but I tried as I didn't think that much coding was involved, but it was enough to trip me up.

 

Enjoy the great 2.3.1 Banner feature regardless.

 

For me, I use banners for aesthetics, not ads-- well sort of, as some link to my products. Some to outside sites or videos etc. Its more about giving pages a fresh feel. The same page always seem new because the banner is. B) I have 63 in the logo group! Some are turned off*. My only wish is having target control within a group...I am sure it will come.

 

* If you want to turn one or more banners in a group off just hit the red button(s) on the main Banner Manager Tool...simple as that.

[ErikMM]

35. Add a image to your footer (image in #33 above).

 

I put a white layer in Illustrator (or Photoshop) over mine and turned the opacity of that layer down to expose the image below as you see it in #33 above because I didn't want to detract from the rest of the page...to make the image more subtle.

 

a. Add your image to the folder you want.

b. catalog/includes/languages/english.php

define('FOOTER_TEXT_BODY', '<a href="' . tep_href_link(FILENAME_DEFAULT) . '"></a><br/><font color=#C4BBA7>Powered by <a href="http://www.oscommerce.com" style="color:#C4BBA7" target="_blank">osCommerce</a><br><img src="images/footer/creditlogos_small_mtbthreads.png"><a href="http://mtbthreads.com/catalog/privacy.php"><img src="images/footer/comodoSSL.png"></a>');

I made the SSL image a link to my privacy page...you could do the same for the credit logos as well.

[ErikMM]

36. Change "Categories" into a jpg or gif: http://www.oscommerce.com/forums/topic/369356-how-can-i-change-categories-into-a-jpg-or-gif/

 

37. Add login box in right column v2.3.1: http://www.oscommerce.com/forums/topic/369130-how-to-add-login-box-in-right-column-v231/ Personally, I don't see the point of this as the "Account" button will suffice, but to each their own...

[ErikMM]

38. 2.3.1 Add-ons: 2.3.1 Add-Ons

 

39. Templates can be a bad idea: link

 

There are some people you can trust not to hack, like perhaps Gary: Club OSC

 

The point of this thread is to help you make the changes so you know what you did, (and how) in case you want to undo what you did. If you get a template you are often walking in the dark. Pay close attention to some of the posts and problems on this site. Quite often it involves a template (and/or a contribution).

 

Add-Ons are safer. Here are two new Add-Ons for themes in lieu of themroller: 1) 1.8.6 jquery themes got oscv2.3.1, 2) Admin_theme_switcher v1.0

 

Note: if you made changes to Redmond/jQuery (as mentioned in this thread in one or more situations) save what you did as changing back and forth to different themes with the above add-ons, or themeroller, will not regenerate the changes you made to jQuery. On that note, it's better to make changes in catalog/stylesheet, but some jQuery/redmond stylesheet changes are needed depending on how you want to change the look of your site. I wouldn't recommend any jQuery changes beyond the stylesheet.

[ErikMM]

40. If you have Comodo SSL and want one of these:

 

the site: http://www.trustlogo.com/trustlogo_choice.html

 

says http://www.trustlogo.com/ssl-certificate-support/index2.html:

Copy/Paste the following piece of code and insert EXACTLY before your </HEAD> tag.

 

AND

 

Copy/Paste the following piece of code and insert EXACTLY before your </BODY> tag.

 

I wanted the red corner logo. In lieu of adding a head and body tag to a php page, I just put both snippets of code on all the SSL pages at the end after "?>" like so:

?>
<script language="javascript" type="text/javascript">
//<![CDATA[
var cot_loc0=(window.location.protocol == "https:")? "https://secure.comodo.net/trustlogo/javascript/cot.js" :
"http://www.trustlogo.com/trustlogo/javascript/cot.js";
document.writeln('<scr'   'ipt language="JavaScript" src="' cot_loc0 '" type="text\/javascript">'   '<\/scr'   'ipt>');
//]]>
</script>
<a href="http://www.instantssl.com" id="comodoTL">Comodo SSL Certificate</a>
<script language="JavaScript" type="text/javascript">
COT("http://mysite.com/catalog/images/home/cot.gif", "SC2", "none");
</script>

 

I added the code to the end of all the SSL pages: catalog/ all "account_", "checkout_", "address_", and "create_" files...also login, logoff, and password_forgotten

 

There is probably a faster way to get it it show on all SSL pages, but what I did will suffice.

 

41. I made my "privacy" page SSL as well, to show customers, as an example, what they will see on SSL pages....the http"s" and the logo etc.

 

To create a SSL page (in my case the privacy page), you need only modify the link to that page. The link was in the info box for me: catalog/includes/modules/boxes/bm_information

 

this:

'    <a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . 
MODULE_BOXES_INFORMATION_BOX_PRIVACY . '</a><br />' .

was changed to this:

'    <a href="' . tep_href_link(FILENAME_PRIVACY, "", "SSL") . '">' . 
MODULE_BOXES_INFORMATION_BOX_PRIVACY . '</a><br />' .

simple

 

I wouldn't recommend making your entire site SSL, it is not necessary. 2.3.1 already has all the appropriate pages set-up for when you do get a certificate.

[ErikMM]

40. Modification to #40 above:

 

make sure "s" is added to the second script

COT("http://mysite.com/catalog/images/home/cot.gif", "SC2", "none");

like so

COT("https://mysite.com/catalog/images/home/cot.gif", "SC2", "none");

 

Otherwise you may lose your blue or green address bar.