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

[ErikMM]

42. If you aren't doing menu sprites etc. you can (link):have a "horizontal drop-down or vertical fly-out menu, an expandable/collapsable tree menu, or even a plain vertical or horizontal menu"

[ErikMM]

43. I wish I would have found this sooner, GREAT tips!

 

http://multimixer.gr/tag/oscommerce-v23/

[ErikMM]

44. related to #27

 

Change left (or right) column width: http://www.oscommerce.com/forums/topic/369256-change-left-column-width/page__p__1555914#entry1555914

[ErikMM]

45. Fancybox in the new 2.3.1 is a nightmare. Getting image captions to show seemed impossible, or a big pain in the butt, as the 2.3.1 stock set-up doesn't work, or work easily. Nevertheless, this fellow found one solution: http://www.oscommerce.com/forums/topic/370034-fancybox-problem-on-product-infophp/page__p__1560697__fromsearch__1#entry1560697. Perhaps there are more, as the fancy box site shows, but for now I am happy with this version/solution of getting text to appear with a product image.

[ErikMM]

46. You really need to read this/do this: osCsid & why you SHOULD lose it (why forcing cookie usage is the ideal)

[ErikMM]

47. How to ROUND BOX CORNERS in 2.3.1: http://www.oscommerce.com/forums/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564287

 

48. How change the BOX BORDER COLOR in 2.3.1: http://www.oscommerce.com/forums/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564292

[ErikMM]

49. Want to get rid of the blue and white stripes in the product view for 2.3.1?

 

 

The entire product viewing box is actually clear/transparent (I think) and is coded for here:

 

catalog/stylesheet.css

.productListingData {
 table-layout: fixed;
background-color: #000000;
}

This had no color to begin with, the background-color, black (000000), was added. I believe it is transparent and shows the site's background if you do not add the background as I did above...that is, if you leave it alone, or stock/as originally coded for without the background: {table-layout: fixed;}.

 

The blue stripe is on top/above the background and can be changed here:

.productListTable tr.alt td {
 background-color: #000000;
}/*WAS ecf6fc*/

I changed it to black, it was originally ecf6fc as my note indicates.

[ErikMM]

50. Within a month of the official 2.3.1 release the USPS pulled a fast one by making API changes, leaving a lot of people scrambling for a fix. I don't think the current 2.3.1 downloads have a working USPS module yet. No worries, luckily a few wonderful and savvy types figured it out, and this module is ten times better than the stock 2.3.1 USPS module anyway.

 

This is a WORKING USPS add-on for 2.3.1 (although it says 2.2): 5.2.1 File drop for fresh osc2.3.1 Install

 

support here: http://www.oscommerce.com/forums/topic/146950-contribution-usps-methods/

[germ]

51. By default the "Configuration" menu is expanded when you log into the Admin.

 

If you want it collapsed at login make this change:

 

/admin/includes/column_left.php

 

Find this code:

 

<script type="text/javascript">
$('#adminAppMenu').accordion({
 autoHeight: false,
 icons: {
   'header': 'ui-icon-plus',
   'headerSelected': 'ui-icon-minus'
 }

Change to this:

 

<script type="text/javascript">
$('#adminAppMenu').accordion({
 autoHeight: false,
 active: false,
 icons: {
   'header': 'ui-icon-plus',
   'headerSelected': 'ui-icon-minus'
 }

All I did was add this line:

 

  active: false,

[frankl]

Add the product model to the product_info.php title:

 

Open catalog/includes/modules/header_tags/ht_product_title.php

 

Find line (line 37 in original file)

$product_info_query = tep_db_query("select pd.products_name " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");

 

 

and change to

$product_info_query = tep_db_query("select pd.products_name, p.products_model from " . TABLE_PRODUCTS . " p, " . TABLE_PRODUCTS_DESCRIPTION . " pd where p.products_status = '1' and p.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pd.products_id = p.products_id and pd.language_id = '" . (int)$languages_id . "'");

 

 

Then find (line 40 in original)

$oscTemplate->setTitle($product_info['products_name'] . ', ' . $oscTemplate->getTitle());

 

and change to

$oscTemplate->setTitle($product_info['products_name'] . $product_info['products_model'] . ', ' . $oscTemplate->getTitle());

 

That's it!

[germ]

53. Focus on forms.

 

To keep your customers from having to click in the box of some of the most commonly used forms before they can start typing try applying focus to them.

---

In /catalog/login.php:

 

BEFORE this code:

 

<?php
 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

ADD this code:

 

<script language="JavaScript">
<!--
function BodyOnLoad()
{
 document.login.email_address.focus();
}
BodyOnLoad();
//-->
</script>

---

In /catalog/contact_us.php:

 

BEFORE this code:

 

<?php
 }

 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

ADD this code:

 

<script language="JavaScript">
<!--
function BodyOnLoad()
{
 document.contact_us.name.focus();
}
BodyOnLoad();
//-->
</script>

---

In /catalog/create_account.php:

 

BEFORE this code:

 

<?php
 require(DIR_WS_INCLUDES . 'template_bottom.php');
 require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

ADD this code:

 

<script language="JavaScript">
<!--
function BodyOnLoad()
{
 document.create_account.firstname.focus();
}
BodyOnLoad();
//-->
</script>

[germ]

54. Accommodating a wide logo.

 

You make a store logo wide enough to span the entire usable width of the site, but upon implementation you find out that it pushes the "Cart Contents", "Checkout", and "My Account" buttons down the page wreaking havoc on the layout.

 

The solution:

 

In /includes/header.php find this line:

 

  <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

In that code change this part:

 

<div id="storeLogo">

To this:

 

<div id="storeLogo" style="position:absolute;z-index:-1;">

[germ]

55. Adding content to the left and right columns.

 

To add contents (images, SSL logos, etc.) to the end of the left or right colums follow these steps:

 

To add to the left column find this code in /catalog/includes/template_bottom.php:

 

<div id="columnLeft" class="grid_<?php echo $oscTemplate->getGridColumnWidth(); ?> pull_<?php echo $oscTemplate->getGridContentWidth(); ?>">
 <?php echo $oscTemplate->getBlocks('boxes_column_left'); ?>
</div>

Change it to this:

 

<div id="columnLeft" class="grid_<?php echo $oscTemplate->getGridColumnWidth(); ?> pull_<?php echo $oscTemplate->getGridContentWidth(); ?>">
 <?php echo $oscTemplate->getBlocks('boxes_column_left'); ?>

<!-- added content begin //-->
 <div style="align: center;">
<!-- DELETE THIS LINE AND INSERT THE ADDED CONTENT CODE HERE //-->
 </div>
<!-- added content end //-->

</div>

To add to the right column find this code in /catalog/includes/template_bottom.php:

 

<div id="columnRight" class="grid_<?php echo $oscTemplate->getGridColumnWidth(); ?>">
 <?php echo $oscTemplate->getBlocks('boxes_column_right'); ?>
</div>

Change it to this:

 

<div id="columnRight" class="grid_<?php echo $oscTemplate->getGridColumnWidth(); ?>">
 <?php echo $oscTemplate->getBlocks('boxes_column_right'); ?>

<!-- added content begin //-->
 <div style="align: center;">
<!-- DELETE THIS LINE AND INSERT THE ADDED CONTENT CODE HERE //-->
 </div>
<!-- added content end //-->

</div>

[pcsohio]

5. Modify Welcome to STORE_NAME [enhancing previous instructions]

 

Backup and edit catalog/includes/languages/english/index.php

Edit line 17: define('HEADING_TITLE', 'Welcome to ' . STORE_NAME);

 

Append text after STORE_NAME

define('HEADING_TITLE', 'Welcome to ' . STORE_NAME . ' new text');

Sample output: Welcome to STORE_NAME new text

 

Move STORE_NAME to the beginning with appended text:

define('HEADING_TITLE', ' ' . STORE_NAME . '\'s Online Shopping');

Sample output: STORE_NAME's Online Shopping

 

NOTE: The '\'s is to allow the apostrophe at the end of STORE_NAME, if needed. Always insert a \ before an echoed '

 

Font tags may also be used:

define('HEADING_TITLE', '<font face="Trebuchet MS" font color="#FF0000" size="5">' . STORE_NAME . '\'s Online Shopping</font>');

Output: STORE_NAME's Online Shopping

 

Of course, you can always eliminate or change the 'Welcome to ' to whatever suits your style.

However, if you want to remove the Welcome to, ensure you leave the ' ' in place.

[ErikMM]

57. If you know how to add boxes, you can add a nice and tidy "add this" box. outside link: addthis . com

 

I like it better than the stock social bookmarks: it has more links, plus its nice and tight/small (you can choose sizes at the addthis site-- free).

 

the top rectangle is the original size. it expands on hover

IMAGE LINK: http://howto.caspio.com/wp-content/images/ScreenHunter_49-Aug.-06-09.08.gif

 

1. Add a new box (see earlier posts...#25)

2. After you add a new box...(I called mine addthis) modifications here: /includes/modules/boxes/bm_yournewboxname.php

 

I included a little code before and after the changes so you can see where it goes

$data = '<div class="ui-widget infoBoxContainer">' .
		  '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_ADDTHIS_BOX_TITLE . '</div>' .

'  <div class="infoBoxContents">' .[/size]
[size="-1"]			  '<center> <br><!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pubid=xa-4db12fa86ec881d8"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db12fa86ec881d8"></script>
<!-- AddThis Button END --></center> ' .[/size]

[size="-1"]			  '  </div>' .
		  '</div>';[/size]
[size="-1"]	  $oscTemplate->addBlock($data, $this->group);
}

[ErikMM]

58. Add an event calendar. There are several ways to do this. There is an add-on, but at this moment it appears to have a bug, or improper install instructions. Anyway, if you search for jQuery calendars you could also get one to match your theme using themeroller.

 

Adding a calendar is simple enough, but what about a full custom and up-to-date event log? Something for posting sales or training events, up coming demonstrations, or shows for band websites etc.?

 

Google rocks! It would be nice to have the calendar in the admin panel, and notify the customer base thru it, but Google's current event calendar is great, and you know its only going to get better with time.

 

Benefits of a Google calendar? free, easy to use, and customizable (with a little outside help, even more-so), plus you can start to connect to all your contacts, send invites, add map links/directions, add photos and videos of the event after (or while it takes place), and Google users can easily add the event to their calendar...and see all the goodies you added after. There are even email, and phone reminder options.

 

How to implement?

A. build a new page as you would for an about page etc. see #17 (1. a new calander.php page in: catalog and catalog/includes/languages/english 2. add the page to catalog/includes/filenames 3. add a link to the box you want the link to appear in at catalog/includes/boxes/theboxyouwantit to appear in 4. make sure you also include the info for the new page at catalog/includes/languages/english/modules/boxes/theboxyouwantit to appear in)

B. all the above can all be skipped if you just want to install the calendar to an existing page. "easy, peasee"

C. Get close to the appearance/theme colors of your shop by installing one php file into the catalog. Since I can't post outside links on the forum, I will have to spell it out. The free provider is a site called "unitz". If you search for "color-customization-for-embedded-google-calendars" you'll find what you need including really easy instructions.

D. Currently the calendar customization thru Google is limited, but a few color changes can be made there, at your Google account. With the unitz customization, you'll get a lot closer to the look you want. I'm guessing Google will eventually make the calendars fully custom, but until then this will do.

 

*the Google i frame code is pasted into catalog/includes/languages/english/thenewcalendar.php file you made, or whatever page you want the calendar to appear

[ErikMM]

Customizing your shop 2.3.2 road map:

 

a. just post solutions, not questions

b. edit mistakes you see or alternate ways

 

Previous post summary by number

*previous dumb/wrong suggestion—see note

 

1. footer: powered by oScommerce @ catalog/includes/languages/english.php

2. footer: osCommerce banner image @ Admin control panel> tools > banner manager

3. home page: New products for Month on home page @ catalog/index.php OR @ Admin control panel> modules > font page (if you installed the front page module). There’s probably a better fix, but this is one way to hide it: <?php // include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?>

4. home page: Welcome Guest! Would you like to @ catalog/includes/languages/english.php define('TEXT_GREETING_GUEST', 'text here’ );

5. *home page: What’s New Here? @ catalog/index.php <h1><?php echo $category['categories_name']; ?></h1> not sure that you want to remove headers for SEO reasons. I still can’t find file to modify text, perhaps because I modified with front page module. See this: http://www.oscommerce.com/forums/topic/368458-231-a-how-to-road-mapno-questions-just-how-tos-please/page__view__findpost__p__1592359

6. Store logo: store logo Admin> Configuration> Store Logo If you make it too wide it will mess up the cart, account, and checkout buttons. It may move the buttons if people log in because then "log off" is added to the button set. 617 px wide is about as wide as you can go before making other modifications to make it work (see 18).

7. buttons: button text @ catalog/includes/languages/english.php

define('HEADER_TITLE_MY_ACCOUNT', 'My Account');

define('HEADER_TITLE_CART_CONTENTS', 'Cart Contents');

define('HEADER_TITLE_CHECKOUT', 'Checkout');

8. *box titles: modify here: @ catalog/includes/language/english/modules/boxes/all your boxes titles can be found in this box folder e.g. define('MODULE_BOXES_SEARCH_BOX_TITLE', 'Search'); Center the titles @ catalog/stylesheet.css .infoBoxHeading { }, add: text-align: center; between{ } However, this will put the breadcrumb Home » Catalog » Products etc. in the center as well. They can be moved back to the left @ 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 //$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER); //$breadcrumb->add(HEADER_TITLE_CATALOG, tep_href_link(FILENAME_DEFAULT)); see: http://www.clubosc.com/oscommerce-breadcrumb-tips.html complete removal is done @ catalog/header, 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>

9. *boxes: move left or right @ Admin> Modules> Boxes *(box color- use themeroller, don’t change ext-jquery-ui UNLESS you want something transparent, as themeroller does not do transparency or opacity as far as I know) more: http://www.w3schools.com/css/css_image_transparency.asp and http://css-tricks.com/rgba-browser-support/

10. if you add text to a page @ catalog/includes/languages/English/pagename.php 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 entire site may not load

11. SSL http://www.oscommerce.com/forums/index.php?showtopic=233458

12. Favicons: http://www.oscommerce.com/forums/topic/346818-any-one-know-how-to-add-favicon-ico-in-address-bar/page__pid__1552190#entry1552190

13. A much better way to add and sort products: http://addons.oscommerce.com/info/4063 + this needed http://www.oscommerce.com/forums/topic/195959-ajax-attribute-manager-support/page__st__1100

14. Menu tree expansion (go back to original post 13 for more details)

15. continue button (go back to original post 13 for more details)

16. don’t forget #10

17. Add an about page...or other pages to the info box (go back to original post 17 for more details)

18. store logo: bigger (go back to original post 18, and 54 for more details)

19. “Top" @ catalog/includes/languages/english.php define('HEADER_TITLE_TOP', 'Top');

20. Database Backup @ 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.

21. *reCAPTCHA—FAIL (success: http://addons.oscommerce.com/info/8323/v,23)

22. *Email, post it in lieu of the contact_us, but make it an image so bots spammers aren’t as likely to find you (go back to original post 22 for more details) *22. Entered 22 twice use themeroller

23. Add a background pic to an info box (go back to original post 23 for more details)

24. *use themeroller and stylesheet mods in lieu of ui changes

25. Add a new box: http://www.oscommerce.com/forums/topic/367702-creating-a-new-infobox-in-oscommerce-231/

26. Webdeveloper…most browsers now have built in element details, just right click to inspect element…chrome and firefox are better that ie in my opinion, Webdeveloper is better than firefox’s standard issue

27. 960 grid: (go back to original post 27 for more details)

28. *this was a pretty bad post, except the magnifying glass tid-bit (go back to original post 28 for more details)

29. size and style of your ALL link fonts @ catalog/stylesheet.css (go back to original post 29 for more details)

30. background image: (go back to original post 30 for more details)

31. button text: continue: (go back to original post 31 for more details)

32. background image to your site: (go back to original post 32 for more details)

33. sprite CATEGORY menu: (go back to original post 33 for more details) this solves the problem of having to click twice to see products

34. Banner rotator: (go back to original post 31 for more details)

35. Footer image: (go back to original post 31 for more details)

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

37. Add login box

38. Add ons: http://addons.oscommerce.com/category?v=23

39. Templates: (go back to original post 39 for more details)

40. Comodo SSL plus see post two down at original post

41. Continued

42. Other menu types

43. Great tips: http://multimixer.gr/tag/oscommerce-v23/

44. Similar to 27 http://www.oscommerce.com/forums/topic/369256-change-left-column-width/page__p__1555914#entry1555914

45. Images at product pages that work! (go back to original post 45 for more details)

46. http://www.oscommerce.com/forums/topic/370464-oscsid-why-you-should-lose-it/

47. Box corners http://www.oscommerce.com/forums/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564287 themeroller can change size/radius of corners

48. Box border http://www.oscommerce.com/forums/topic/370737-rounded-box-corners-in-v231/page__view__findpost__p__1564292 also themroller

I changed my boxes in the stylesheet and in the jquery stylesheet, though the later is not recommended, but its just css...

49. Product view stripes: (go back to original post 49 for more details)

50. Shipping: I gave up and don’t charge shipping because this was so frustrating, but perhaps someone else has info or a fix that works for shipping

51. Admin Configuration menu

52. product model to the product_info.php title

53. Focus on forms

54. Accommodating a wide logo

55. Adding content to the left and right columns

56. See #5

57. Social media links: nice and tidy "add this" box

58. Add an event calendar.

59. I suggest adding sitemaps: http://www.oscommerce.com/forums/topic/330175-google-xml-sitemap-seo/page__fromsearch__1 and adding the sitemaps to your robots.txt file

60. In addition to 59, you really should, at a minimum, open a Google Merchant, and Bing Merchant account. You can upload your sitemaps there, and more importantly list all your products, and get the ball rolling for better SE listing, and potential hits from the Google and Bing Shopping areas. There are a number of SEO add ons. I went with FWR’s packages, but there are others as well. I tried the Google feeder add on http://addons.oscommerce.com/info/4513 , but it won’t do for apparel as a lot of the fields were off. In turn, I created an Excel spreadsheet for my products and uploaded them directly to Google and Bing. They will tell you how to do this. Now my products are in their shops, with links directly to my site.

61. Security update: http://www.oscommerce.com/forums/topic/375288-updated-security-thread/page__view__findpost__p__1584648 + http://www.clubosc.com/hacked-oscommerce-essential-reading.html

62. SEO down low: http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

 

 

New versions are coming out..for better security, and other issues. I imagine a lot of the “look/feel” will be handled in a similar fashion to the above tips, but I don’t know yet…gonna give 2.3.3 a try! oh what fun!

[ErikMM]

63. pure css pop up! I use a pop up for a size chart on the product info pages of tee shirts I sell. I styled it with css. It pops up nicely over the product info, and disappears when not hovering over it. I used these to help me: http://meyerweb.com/eric/css/edge/popups/demo2.html and http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/ and http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow&preval=50px%2050px%205px%20black

 

catalog/stylesheet.css:

/*shirt size popup with border and triangle(box pointer)*/

#linkpop a img {height: 0; width: 0; border-width: 0;}

/*top moves the popup down, left moves it to the right, image will shrink to fit height/width,  25px changes shadow blur*/
#linkpop a:hover img {position: absolute; top: 20px; left: 55px; height: 500px; width: 500px; background-color:#ffffff; border-style:solid; border-width:1px; border-radius:6px; box-shadow: 12px 12px 25px black;}


/*lower % moves triangle to right, need to play with it to make it line up or appear*/
#linkpop a:hover:after, #linkpop a:hover:before{
border: solid transparent;
content: ' ';
height: 0;
right: 91%;
position: absolute;
width: 0;
}

/*width will change triangle size, higher top # moves it down*/
#linkpop a:hover:after
{  border-width: 14px;
border-right-color: #ffffff;
top: 247px;
}

/*note relationship between these numbers and numbers just above i.e. continuing 1px border theme*/
#linkpop a:hover:before {
border-width: 15px;
border-right-color: #663333;
top: 246px;
}

 

Then in my product info in admin I added the link "Size & Care". I lined the triangle (box pointer) up to come out from the link.

 

this went in the product build in admin in the Products Description box:

<div id="linkpop"><a href="http://www.mtbthreads.com/product_info.php/-all-mountain-dudette-p-115" alt="mountain bike clothing link"><b>Care & Size</b><img src="images/products/mTb_ThREADS_size_chart.png" alt="mountain bike clothing sizing, and care instructions"></a></div>

 

I'd like to make it an image swap link, but have had a hard go at combining swaps with the code above. I can live with a text link pop up sans java script!

 

similar to this^ BUT the box I built in the code above^^ has a thinner brown border, and the pointer is on the left, not right side, with white background, not gray...but you get the point

[ErikMM]

64. Cheater styling for your product listing <<prev 1 2 3 next>> links

 

admin>configuration>product listing (sets options for product listing)

 

mimic jquery redmond (shown below) or whatever buttons style you have playing with the code below @ catalog/stylesheet.css

 

A.pageResults {
 color: #66A2D6;
background: #E7F2F9;
border: 1px;
 border-style: solid;
 border-color: #bedcef;
 padding: 4px;
border-radius:5px;
}
A.pageResults:hover {
 color: #663333;
 background: #c5def1;
border: 1px;
 border-style: solid;
 border-color: #bedcef;
 padding: 4px;
border-radius:5px;
}

^ my hover text is brown to match my site's link styling

[ErikMM]

65. related to 63. Create a simple mouse-over image opacity change 'button' using css

 

I added a image to one of my boxes (includes/modules/boxes):

$data = '<div class="ui-widget infoBoxContainer">' .
		  '  <div class="ui-widget-header infoBoxHeading">' . MODULE_BOXES_ADDTHIS_BOX_TITLE . '</div>' .

'  <div class="infoBoxContents">' .
		  '<center></br>
<div id="navimba"><a href="http://www.imba.com/support-imba" target="blank" title="1% $$ to imba" alt="1% of sales profit donated to the international mountain bike association"/><img src="images/products/imbadonateGREEN2.png" width="81" height="42"></a></div>
</br><br>
<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pubid=xa-4db12fa86ec881d8"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db12fa86ec881d8"></script>
<!-- AddThis Button END -->
</center>' .
		  '  </div>' .
		  '</div>';

 

the ^image part that concerns us from above is this:

<div id="navimba"><a href="http://www.imba.com/support-imba" target="blank" title="1% $$ to imba" alt="1% of sales profit donated to the international mountain bike association"/><img src="images/products/imbadonateGREEN2.png" width="81" height="42"></a></div>

the link target, as you can see above, opens a new tab, and links outside the site

 

in catalog/stylesheet I did this

#navimba{
width:81px;
height:42px;
}
#navimba:hover{
opacity:.5;
}

 

on hover it fades to 50% opacity

 

clean and easy

[ErikMM]

66. same as 65, but link to an anchor on-site at an info page

 

basically if people hover on the image, it fades, and if they click it sends them to the anchor...i.e. jumps to and scrolls to that part of the info page, which will be located at the top of the browser

 

catalog/stylesheet

#navusa{
width:57px;
height:64px;
}
#navusa:hover{
opacity:.5;
}

 

the infobox (includes/modules/boxes/)

'<div id="navusa"><a href="about.php#usa" title="Because it matters!" alt="100% American Made"/><img src="images/products/usa_made2.png" width="57" height="64" hspace="35"></a></div>'.

I used ^hspace to line it up where I wanted

 

on the info page it links to I did this (the info page is my about page (actually at catalog/about...not catalog/includes/languages/english/about, though you can put it there, just watch the ' and do this \'))

<a name="usa"></a>WHAT?</b>
<ul><li><div id="popusa"><a href="http://www.mtbthreads.com/about.php" alt="made in the usa bike clothing">AMERICAN ThREADS. It matters.</b><img src="images/products/outsourcesweatshop.jpg" title="ben deter sweatshop poster" alt="http://bendeter.com/past/sweatshop-poster/"></a></div></li>
<li>USA Grown. Spun, dyed, cut, and sewn in California and New Hampshire.</li>
<li>Hand-crafted art on fiber.</li></ul>

 

the part you need, the anchor, from above is this

<a name="usa"></a>WHAT?</a>

 

the extra stuff after WHAT? and </a> is a css pop-up I created (as explained in #63)

[ErikMM]

67. instead of the hspace used in 65, and 66 you can line the image up in center of a box like this

 

(and you can add a border on hover in addition to the opacity change or in lieu of the opacity change--described below)

 

center like this (instead of hspace):

'<center><div id="navusa"><a href="about.php#usa" title="Because it matters!" alt="100% American Made"/><img src="images/products/usa_made2.png" width="57" height="64"></a></div></center>'.

 

centering will make adding or using hover image borders line up easier than hspace

 

to add a border on hover (see 65, 66) this code:

#navusa{
width:57px;
height:64px;
}
#navusa:hover{
opacity:.5;
}

 

becomes this:

#navusa{
width:57px;
height:64px;
border: 1px solid white;
padding: 1px;
border-radius: 5px;
}
#navusa:hover{
opacity:.5;
border: 1px solid black;
padding: 1px;
border-radius: 5px;
}

 

^the pre-hover border is the same color as my background, on hover in the example above it changes to black (with opacity applied to the border as well).

 

You can ditch the opacity if you just want to go with a border alone on hover.

 

If you don't add the pre-hover border the image will jump or shift on hover with the border. If you like the jump/shift effect don't add the border before hover.

 

The padding is needed to allow the rounded corners to show. If you don't want rounded corners you can remove the appropriate lines.

[ErikMM]

68. Chrome will mess up or misalign your header buttons (cart, account etc.). The fix is here: http://www.oscommerce.com/forums/topic/389958-headershortcut-fixes/

[ErikMM]

69. Staying high(er) in search results. Other than some of the SEO hints in posts above^. If your store is pretty static, as far as products go, I reccomend making minor changes to product descriptions, your about page, shipping page...anything...on a weekly basis to stay higher in search results. Small weekly tweaks will ensure you keep getting crawled and listed higher. Even better imo, if you have enough material to start a blog, this may be a way to connect to customers in regards to you, your products, or other things of interest that will help keep your product site/blog stay new. I installed a wordpress blog at mysite.com/blog, and linked to my products of course. So far so good.

[ErikMM]

70. There is only one banner allowed on the front page through the admin panel. To add two or more banners (and/or rotators) to the front page do the following :

 

a. create a banner as you normally would in the admin panel/tools/banner manager section (also see #34: http://www.oscommerce.com/forums/topic/368458-231-a-how-to-road-mapno-questions-just-how-tos-please/#entry1557278)

b. record the "group" name you gave the banner

c. find this code in catalog/index.php

<?php
} else { // default page
?>

<h1><?php echo HEADING_TITLE; ?></h1>

<div class="contentContainer">
<div class="contentText">
<?php echo tep_customer_greeting(); ?>
</div>

<?php
if (tep_not_null(TEXT_MAIN)) {
?>

<div class="contentText">



<?php echo TEXT_MAIN; ?>
</div>

 

d. add this before the last </div>

<?php
if ($banner = tep_banner_exists('dynamic', 'your banner group name')) {
?>

e. or this (the second banner is whichever one you turn on in admin panel)

<?php
if ($banner = tep_banner_exists('dynamic', 'your banner group name')) {
?>
<?php echo tep_display_banner('static', $banner); ?>