Tag Archives: layout

how to modify the visual verify code (VVC) system

The visual verify code (or VVC) is a feature of cre loaded and other oscommerce-based carts and is designed to reduce the amount of spam and automated bot abuse of a store’s email system. It can appear (and be enabled/disabled through the admin) in several parts of the cart, each involving some sort of form submission to the owner of the store. So it’s an attempt to prove that it is a person sending the email and not a crawler or automated script.

In cre loaded, it is used for:
– password recovery
– creating a new account
– contacting the store owner via contact us
– product or article review submission
– sending tell-a-friend emails about a product or article
– submitting a link

However, it’s effectiveness is limited and in some cases it can be more hassle than it’s worth – eg sometimes the vvc code is difficult for us humans to read due to similar characters or the size of the display etc. These modifications may help if you’re experiencing problems.
image of visual verify code modifications to cre loaded vvc

#1 – Change the size of the pool of characters that the code can be drawn from
In some fonts upper- and lowercase I i L l as well as O o and the number 0 can appear very similar and can cause confusion. The pool of letters and numbers the visual verify code system uses is defined in the file /includes/languages/english/english.php :


define('VISUAL_VERIFY_CODE_CHARACTER_POOL', 'ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz123456789');  //no zeros or O

replace with:
define('VISUAL_VERIFY_CODE_CHARACTER_POOL', '123456789');  // numbers only

The replacement pool of only numbers may seem drastic, but it is a lot easier for customers to verify the code correctly.

#2 – Change the size of the input box where the code is to be entered


<td class="main"><?php echo tep_draw_input_field('visual_verify_code', '', 'size="15"') . '&nbsp;' . '<span class="inputRequirement">' . VISUAL_VERIFY_CODE_ENTRY_TEXT . '</span>'; ?></td>


<td class="main"><?php echo tep_draw_input_field('visual_verify_code', '', 'size="' . VVC_INPUT_SIZE . '"') . '&nbsp;' . '<span class="inputRequirement">' . VISUAL_VERIFY_CODE_ENTRY_TEXT . '</span>'; ?></td>

This will tidy up the VVC area and also supports a reduced number of characters being used. Various template or catalog files would need to be edited here, as per the list given above. This means by default you’d need to change this in each occurance of the VVC code. A way to improve this is to create a switch in the VVC configuration area of the admin, and set the input box width there (using the second block of code above, together with the sql query below.) You would still have to edit several template related files, but from then on changing this setting in the admin page would change them all.

INSERT INTO `<<the name of your database goes here>>`.`configuration` (`configuration_id`, `configuration_title`, `configuration_key`, `configuration_value`, `configuration_description`, `configuration_group_id`, `sort_order`, `last_modified`, `date_added`, `use_function`, `set_function`) VALUES (NULL, 'VVC Input Box Size', 'VVC_INPUT_SIZE', '15', 'Size of the VVC input box', '420', '9999', '0000-00-00 00:00:00', '0000-00-00 00:00:00', NULL, NULL);

#3 – Reduce the length of the VVC code and width of the VVC Image box
By default, from 3 to 6 alphanumeric characters are displayed as the visual verify code. By changing the numbers, a different range can be used:


By default - 3 to 6 characters:
for ($i = 1; $i <= rand(3,6); $i++){

Here - 3 to 4 characters:
for ($i = 1; $i <= rand(3,4); $i++){

After reducing the number of characters displayed, you may need to resize the width of the code box. This is done easily through admin >> configuration >> vvc configuration >> VVC Image Width – in the example, this was set to 125.

free smooth javascript scroller for the bestsellers scroll infobox

The HTML ‘marquee’ tag is used to make the product images scroll vertically in the bestsellers_scroll infobox. It works, but creates a choppy display (as this horizontal example of the tag shows):

Hello! This is an example of a horizontal marquee plus image marquee scroll effect using wordpress icon


The following code is for a vertical scroll effect that is much smoother. There are some user editable settings in the jscript file defining delay, speed and mouse over actions. Colours are set in the #marqueecontainer css script.

This is a fairly easy mod to do – 1 new file, 3 small modifications to existing files.

Create this new file from the code below: /includes/javascript/marquee.js

  $Id: marquee.js
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.

var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?


var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))

function initializemarquee(){
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)

Add this line into: /templates/your template/mainpage.tpl.php

<script type="text/javascript" src="<?php echo DIR_WS_JAVASCRIPT;?>marquee.js"></script>

Modify your file: templates/your template/boxes/best_sellers_scroll.php

$info_box_contents[] = array('align' => 'center',
                             'text' => '<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"><div id="vmarquee" style="position: absolute; width: 98%;">' . $bestsellers_list . '</div></div>');
      new $infobox_template($info_box_contents, true, true, $column_location);

Add this at the end of the file: template/your template/stylesheet.css

position: relative;
width: 200px; /*marquee width */
height: 100px; /*marquee height */
background-color: white;
overflow: hidden;
border: 1px solid orange;
padding: 2px;
padding-left: 4px;

change number of records shown in admin

Problem: the number of orders displayed by default is a mere 20. You have to use a dropdown to see results 21-40.

Go to Admin > Configuration > Maximum Values and change the Search Results figure to something more useful, as shown in the screen below:

screenshot of cre loaded admin, configuration, max values, search results

The Search Results setting controls the number of results displayed on each page in several different areas of the Admin, including Countries listed, Customer accounts shown, products on Specials … handy to know about this well-hidden setting!

how to change the width of the left column in Admin

The width of the Admin left column is controlled by the css below.

If the css width is removed, the column width will default to 200px as specified in admin/include/left-column.php.

File: admin/includes/stylesheet.css, line 262

.menu-container {
  background-color: #f8f8f8;
  width: ???px;  // default is 180px
  border-right: solid 2px #ccc;
  padding-top: 12px;
  padding-bottom: 12px;

Change the ???px value to the desired width in pixels.