Here is a partial list of many of the new innovations and changes involved:

• New design based upon the SmartCar ad campaign
• Utilize actual signage for identification purposes
• Create and integrate random testimonials to display in left column
• Create slideshow for featured specials
• Create tabbed interface for basic service information
• Utilize AJAX for summoning content on various pages and elements
• Establish a remote CMS system for editing specific content areas of the site’s pages
• Linked the site to various social networks (Facebook, LinkedIn, Twitter)
• Updated an internal newsletter subscription system to enable creation and integration of surveys

The new design uses variations of the color scheme evident on the SmartCar loaner fleet’s custom paint jobs. This client has 4 of these cars provided to customers free of charge who need to leave their autos for extended periods of time while it’s being repaired or serviced. They make a great advertisement and are coordinated with the new website design. Below is a screenshot of the new home page:

Integrity Automotive Maintenace and Repair Website Redesign

Additionally, we utilized the JQuery based FancyBox plugin for the display of their cabinet photo gallery. This allowed for thumbnail viewing as well as slideshow interactivity. It loads quickly and is a great way to integrate a photo gallery for easy viewing.

Here are some screenshots of the before and after:

Before Redesign by SimcoMedia

Home Page After Redesign by SimcoMedia

Gallery Page After Redesign by SimcoMedia

We also provided several hours of phone tutorial support in order to walk through the process of adding products, uploading images, and associating their product options.

Do YOU have a need for Xcart assistance? If so, Please contact us today!

So, the three images consist of:

1. the top including the ribbon
2. the repeatable middle section
3. the bottom

These were all created in Photoshop as one image then sliced against a transparent background and saved in PNG format. Pretty simple stuff.

Then it was time to create the container and divs that would hold the info. We’ll start with just the container div:

 

.ribbonBox {

 width: 190px;

 float: left;

 margin-bottom: 15px;

 }

 

Now, you can adjust everything to your dimensions but my sidebar is a little skinny and the main container div had to allow for some margins so it didn’t hit the left and right borders. The margin-bottom is there so I can stack the boxes on top of each other and there will be some space in between them. Now we do the 3 inner divs that hold the images:

 

.ribbonTop {

 width: 190px;

 background: transparent url('../images/ribbons_top.png') no-repeat;

 height: 52px;

 }

.ribbonTop h2 {

 color: #fff;

 font-weight: normal;

 font-size: 18px;

 padding: 15px 0 0 10px;

 }

.ribbonMid {

 width: 190px;

 background: transparent url('../images/ribbons_mid.png') repeat-y;

 float: left;

 }

.ribbonMid p {

 margin: 0 10px;

 }

.ribbonBot {

 width: 190px;

 background: transparent url('../images/ribbons_bot.png') no-repeat;

 height: 14px;

 float: left;

 }

 

And, last but not least, the HTML

    


Recall News::



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan

        


	

Notice I also gave some formatting to the H2 title so it would display in the right location and look good against the color of the ribbon background.

The end result would produce a box like so:

The three pieces are as so (right click, Save As if you wish to use them:

By using repeat-y on the middle section it will automatically repeat downward as the content increases or decreases. Using this 3 image method cut out the need to have literally dozens of CSS3 statements and used about half the code to get the same effect. Going this route assured me that the look would be the same across browsers. As much as i’d like to be a ‘purist’ and try to do everything with strict code and no images, the world just isn’t quite ready for it.

The client was happy with the overall design but needed to have the following steps taken to get their store ready for business:

• modify their logo to fit within Xcart parameters
• Create multiple versions of the logo for invoice, checkout and main page purposes
• modify product display to eliminate sku display
• modify category product display to include links to View Cart and Checkout so customer would not need to scroll up constantly to reach main menu.
• configure and activate shipping via USPS
• configure PayPal payment method

Mimosa Hostilis Xcart Customization

The version of Xcart in use also dictated how we could make the improvements. The version is 4.1.x which is entirely table based and less flexible to design changes than the newer 4.3.x version which utilizes primarily CSS for layout control.  We pondered doing an upgrade to the latest version but, after careful consideration, declined to do so since there’s a danger the custom functionality of the cart would be overwritten.

Screenshots

Probes Online Custom Redesign By SimcoMedia

Features of Multi-Track Video Player:

Creates FLV Players that play multiple files or tracks all in one player

Extracts Thumbnail images from video file to be displayed in the player.

Produces all html and flash code. No Coding experience necessary

Easy to use Point and Click Interface.

Builds Image and/or Text Title Driven Menus.

Saves project settings for easy

12 Multi-Track FLV Player Styles to choose from.

FLV Player Style Examples.

Multi-track Flash Video bottom menu

Multi-track video left menu

Multi-track video right menu

How To Get

To learn more and to purchase this great tool CLICK HERE

We’re going to make a simple panel slider using the JQuery toggle function. Here’s how the code will look:

Code Explanation

Let’s break this down to show how simple it is using JQuery

$(document).ready(function() {

Our standard JQuery statement declaring that when the document is fully loaded we can execute the following

$(“.trigger”).click(function(){

Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on

$(“.panel”).slideToggle(“slow”);

Here we see the details of our instructions for when the ‘trigger’ is clicked. Essentially telling the div with the class name ‘panel’ to ‘slide – Toggle’ open. The ‘Toggle’ part means that it will open when clicked then close when clicked again.

The HTML

The HTML is relatively simple. First, though, we need a little styling for our elements

Followed by our HTML which is entirely up to you how you want it to look. For our demo purposes we’re using just the standard Lorem Ipsum text jargon:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Section 1.10.32 of de Finibus Bonorum et Malorum, written by Cicero in 45 BC


The standard Lorem Ipsum passage, used since the 1500s

Live Demo

To get a live view of the sliding/toggling panel Click Here

$(document).ready(function(){
  $("#link1").click(function() {
  $('#text').load('latin.txt');
});
  $("#link2").click(function() {
  $('#text').load('latin2.txt');
});
  $("link3").click(function() {
  $('text').load('latin3.txt');
  });
});

Ok, what we’ve created here is a series of functions that specify the id’s of 3 hyperlinks (shown below) that, when clicked, will ‘load’ the external pages referenced (latin.txt, latin2.txt and latin3.txt) into the same div element with the id of ‘text’. Here’s the HTML:

This text will be replaced when you click the hyperlinks below

Link One
Link Two
Link Three

Explaining The Code

JQuery is pretty easy to learn once you get the hang of how the functions flow. Here’s some tidbits about this simple AJAX call:

$(document).ready(function(){

JQuery uses the $(document).ready(function() { to ensure that the document is fully loaded and ready to provide you with the ability to execute your code

$(“#link1″).click(function(){

We are stating here that the hyperlink with the #id of link1 should perform a function when it is clicked. So, basically, if you read it like a sentence it states “when someone clicks on the #link1 do the following”.

$(‘#text’).load(‘latin.txt’);

The function we want to perform is to insert content into a specific div element in our page. The first part, $(‘#text’) identifies the element by using it’s id tag #text, the id of our target div. The second part, .load(‘latin.txt’);, tells what content to load into that location. So, reading it like a sentence it says: “find the div with the id of ‘text’ and load this file into that location”.

I’ve repeated the process three times in order to identify the 3 different links. The hyperlinks can be placed anywhere on your page and point to your target div. The content you summon can be a wide variety of formats including txt, html, images, etc..

For our external files they reside in my public folder and contain the standard Lorem Ipsum text for this demo. Here is the ‘live’ example of how this would look when arriving at your page.

Link One | Link Two | Link Three

Clicking on the links will summon the different content without having to refresh the page. This saves on load time and at the same time allows you to designate a specific area for as much content as you’d like to cycle through instead of having a new page for each one.

Live Demo

To see this work Click Here

Methods

There’s 3 basic ways you can create a rollover effect:

Flash animation

Javascript

CSS

For our purposes we’re going to skip the first two and use strictly CSS and a tad bit of HTML to make it all work. We’re going to be using a sprite in order to accomplish this. If you don’t know what a sprite is it’s basically a single image with all of your different colored effects self contained. The fact we use a single image means that there’s no additional preloading that has to be done which, when using multiple images, can cause a flicker or pause in the initial display of the mouseover event. Here’s an example of a sprite image which consists of two identical designs but with different colored backgrounds:

The goal here is to use this image in a rollover event for a hyperlink.

CSS

Here’s the CSS Code we’ll be working with:

#imageLink
{
  display: block;
  width: 200px;
  height: 40px;
  background: url("compare-sprite.jpg") no-repeat 0 0;

}

#imageLink:hover
{
  background-position: 0 -40px;
}

#imageLink span
{
  display: none;
}

First, keep in mind that we are creating a hyperlink. Therefore we are going to utilize this code when we create our link by assigning the id to the hyperlink like you would a class. We’re going to explain the code just a bit.

• the height and width represent the single button, not the entire image. So, if the entire image is 80px tall and divided perfectly between the two versions then we set our height at 40px.
• On the :hover we want the background position to move down 40px. Therefore we set the position to -40px to make the effect. Same image, just showing a different portion of it.
• The use of the span tag is to complete our hyperlink since the background image isn’t really creating a link. Therefore, something tangible has to be there. But, the trick is, we set the display to none which makes it invisible to the viewer and all they see is the image

The HTML

Here’s the HTML:

Some text here

You can have as many rollovers on one page or throughout your site as you wish using this code. But, you have to copy the code and assign each one its own unique ID. And, of course, their own images if applicable.