View Demo

View this demo to get the full view of the powerful features and presentation: Click Here For Demo

Screenshot

Click the thumbnail below for a detailed screenshot

Additional Specs and Information

Ability is an advanced, all-purpose X-Cart v4.4.x template solution, with a rich amount of layout possibilities and features built-in.

The idea behind Ability is to give you all the design flexibility and features you need, in one template, whilst keeping your costs down.

It can be used as the foundation to any web store. You’ll be surprised at what you can achieve with this template alone.

• Theme Options
  • Clean layout design with 20 ready made easily customisable colour themes, just 16 lines of CSS per theme
  • Multiple themes enables you to easily change the look and feel whenever you like, eg. seasonal
  • True unlimited colour themes with in-built theme designer – colour pickers for theme elements, choice of background tile or image
  • Over 800 background tiles and images included
  • CSS code generator for easy colour theme generation
  • Layouts based on a fluid/flexible version of the popular and easy to use 960 grid system
  • Option to set the fixed (pixels) and fluid (percentage) widths
  • Ability to set the following to fixed or fluid… overall store width / header / header content / body content / checkout / footer / footer content
  • Layout can be displayed as 3 columns, 2 columns left / right or 1 column (product layout can also have independant column style)
  • Homepage can be set to display as full width (1 column) – maximises the effects of your promotions
• Header Options
  • Choice of header style, or easily create your own custom header
  • Choice of 4 logo sizes and 4 search box sizes
  • Customer account dropdown menu box
• Category Menu Options
  • Horizontal menus included…
    • 5 level animated dropdown / flyout menu
    • 3 level mega dropdown menu, with full control over layout in category admin and option to display parent icons/descriptions
    • 1 level tabbed category menu
    • Tabbed speedbar menu
    • Tabbed custom menu
  • Vertical menus included…
    • 5 level animated flyout menu
    • 3 level tree menu, with persistence and choice of theme
    • 2 level sliding menu, with persistence
    • 1 Level basic menu style
    • Or use standard X-Cart menus
  • Additional categories page displaying all categories up to 3 levels
• Homepage Options
  • Promotional Displays Included…
    • Responsive image slider
    • 3D flash image slider
    • Featured image box
    • Horizontal image roundabout
    • Horizontal image accordion
    • Responsive static image or YouTube video (can be set in Ability settings and set to autoplay)
  • BBC style animated news ticker, dynamically lists the last x news headlines
  • Animated countdown to an event, eg. end of a sale, launch of new product etc.
  • Additional new and random products display (amounts configurable in Ability settings)
  • Featured products, bestsellers, new and random products can be displayed as animated carousels
  • … Or can be displayed in rows or grids, with ability to dynamically switch between row/grid
  • Featured products, bestsellers, new and random products can be grouped into a set of compact tabs
  • Manufacturers can be displayed as a carousel, or logos/links in columns (amount configurable in Ability settings)
• Products Display Options
  • Products display options
    • Grid and row switchers, with persistence
    • Smart columns, which adapt to the store width (for use with a fluid layout)
    • Masonry columns, which adapt to the store width in an animated fashion and are centered (for use with a fluid layout)
    • Basic tabular display
    • Or use default X-Cart products display
  • Upselling and recommended (random) products use the grid and row switchers display for SEO purposes
  • Default grid/row display and number of columns can be set from Ability settings
• Product Page Layout
  • Product layout can be displayed independantly as 3 columns, 2 columns left / right or 1 column
  • 2 types of custom tabbed product information display, either tabbed above or below
  • Vertical accordion product information display
  • Tabs and accordions have persistence feature
  • Or use standard X-Cart tabs below
• Footer Options
  • Choice of footer style, or easily create your own custom footer
  • Display rotating testimonials, news box, latest Tweets etc.
  • Display Footer payment icons, large or small
• Custom Fonts
  • Replaces H1/H2/H3 fonts which are loaded via the Google Fonts API
  • 397 fonts to choose from as of Jan 7th 2012
  • Includes local font previewer, or use the Google font previewer
• Addons
  • Dynamic AJAX search box – lists products after 3 characters typed
  • BBC style animated news ticker, dynamically lists the last 5 news headlines – enable / disable
  • Animated countdown to an event, eg. end of a sale, launch of new product etc. – enable / disable and configure date in Ability settings
  • Advanced animated breadcrumbs, collapses and becomes compact if you have many subcategories
  • Lazy loader for product images – delays the loading of images until browser focuses on them
  • Page peel effect – displays animated promotional message in top right corner
  • Google map display for contact us page – displays map and streetview
  • FAQs for contact us page in accordion style list
  • Advanced lightbox to replace ColorBox, with 10 different themes and ability to display videos, inline content etc.
  • Custom floating social bookmarking links for product page – alternative to Socialize module
  • Google translator menu box
  • Image gallery with categories, automatic thumbnail generation and lightbox
  • Display first detailed image as sticky tooltip on product thumbnails hover
• Advanced Minicart
  • AJAX minicart that can be displayed in header or menu box
  • Instantly displays cart contents on adding to cart, with option to change quantities
  • Products can be grouped by category and minicart height is configurable
  • In addition, when an empty cart is viewed, bestsellers, new and random products are displayed to the customer
• RSS Feeds
  • Generates feeds for latest news and latest products (generate manually, or set up cron jobs)
  • Number of items per feed and additional text, thumbnail size etc. configurable from Ability settings
• Miscellaneous
  • Choice of menu and dialog box style – rounded, square or basic borderless
  • Basic promotional menu boxes can be enabled to display any extra info, such as payment seals etc.
  • Choice of manufacturer menu box – dropdown version includes its own search facility if more than 30 manufacturers
  • Configure bestsellers and recently viewed image sizes from the Ability settings
  • Animated ‘back to top’ button that appears in bottom right corner
  • Choice of ‘easing’ effect, autoplay and mouse wheel feature for carousels
  • Option to redirect old IE browsers to a browser upgrade page
• Just For Fun
  • Animated snow effect
• Design Features
  • Well organised template structure
  • Well commented CSS code
  • Wide choice of homepage promotion options
  • Flexible width carousels
  • Scrollable content boxes
  • Easy to use tooltips
  • Customised view cart page
  • And much more…

Requirements

• X-Cart v4.4.4 + highly recommended.
• Good working knowledge of the X-Cart system.
• Basic-intermediate skills in HTML, CSS and Smarty.

View Demo & Purchase Info

View this demo to get the full view of the powerful features and presentation: Click Here For Demo

Share on Facebook

The initial phase is done in strict CSS/XHTML with a dose of PHP for running the dynamic form system. The 2nd phase of the project will consist of the use of a content management system (CMS) that will contain multiple areas of content including password protected elements.

Screenshot

Here is a screenshot of the actual live phase one site:

Foreclosure Lawyers.com design by SimcoMedia

Share on Facebook

Share on Facebook

The site is built around WordPress so the client can update and add to their content over time. It also features some advanced plugins for social networking, video and photo galleries and communications.

Screenshots / Preview

Here are a couple of screenshots of the home and supporting pages.

Share on Facebook

Creating these using CSS is a pretty simple proposition. All you need is the icons that would represent each type of box: warning, info, success and error (or, whatever type of ox you wish like ‘download’, etc).

The CSS

Here’s the CSS which is pretty straightforward by creating a class for each type.

.infoBox, .successBox, .warningBox, .errorBox {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}

.infoBox {
 color: #00529B;
background-color: #BDE5F8;
background-image: url('images/info.png');
}

.successBox {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('images/success.png');
}

.warningBox {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('images/warning.png');
}

.errorBox {
color: #D8000C;
background-color: #FFBABA;
background-image: url('images/error.png');
}

The HTML

This part is simple. All you do is create a div using the class name of the type of box you wish to display then add your content.

Content here

That would look like this:

The Images

Below are the images I’ve used in my examples for you to download if you wish

Share on Facebook

The previous version of the site was outdated and not easily modified for adding new content. We’ve switched to a WordPress based platform to allow for ongoing edits and content control. 

Preview:

Here are some screenshots of the latest design.

Share on Facebook

Share on Facebook

The Mega Menu allows you to create multi-column dropdown style sub-menus with images, icons, descriptions…even forms! There’s even a control panel for modifying how the menu responds regarding speed, size and more. Plus, it comes with 21 preset styles to select from so there’s already a great chance one matches your theme.

The Mega Menu works off the existing WordPress menu system. Therefore it’s compatible with all of the latest versions (you really should be current anyway at version 3.1.3). It’s designed to replace your main menu and works in horizontal or vertical settings.

It also works off the existing JQuery that loads with WordPress. Therefore no conflicts! It supports images, shortcodes and your own CSS if you wish.

Screenshots:

Share on Facebook

Basically the concept is to summon the email address using an Ajax function so that it displays in the specified location on your web page. The email address itself is kept in a separate file. Therefore it’s not part of the source code that the spambots cruise through to snag email addresses. Here’s how it works:

First Step: The External File

This step is simple. Create an HTML page with only one item in the body section… the email address! That’s going to look like this:

mailto:email@mydomain.com

Step Two: The JQuery Code

This is also simple since it’s one function. Here’s the JQuery code:

Let’s explain a little on how this is going to work within your page. The element we’re looking for in your target web page is the item with the .email class name. Once JQuery locates that it’s going to load the content in the parentheses which in this case is our external file that we named email_address.htm (code posted above). Essentially JQuery, as soon as the document is ready, finds the .email class item and loads that content into it. The location where this will be inserted can be located anywhere on your page. Here’s the HTML tag you will need for that to happen:

Step Three: The Target HTML

This is very simple. Place this tag where you want the email address to display:

JQuery will insert the email file between those two span tags and keep it out of the hands of those nasty spammers

Share on Facebook

For the purposes of this tutorial we’re using some very basic methods of table creation, CSS and very simple JQuery methods to accomplish our goals. What we will be doing is adding a stripe to every other row and then adding a hover effect to the others. This tutorial is only designed to show you how these actions can be implemented. You can redo the CSS and table layout any way you wish.

The HTML

Let’s start with a basic table. But, for our purposes, we are using all the necessary table tags like tbody, tfoot and theadso we can further isolate exactly what rows we want to have striped. This makes it easier for JQuery to differentiate between those rows in the area that you may wish to be excluded.

Example Title
Example Title
Example Title




Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


Some Content Here
Some Content Here
Some Content Here


 
Zebra Stripe Demo

Notice that I gave the table an ID of ‘zebra’. This is so you can specify this particular table in the event you have others on your page or even on other pages since JQuery will apply its magic to any table unless specified.

The CSS

This is pretty simple and the body styling is just for the demo purposes and not necessary for the JQuery to do its thing.

body { 	font-family: Arial; font-size: 10pt; }

.zebra { 	background-color: #9CF; 	color: #fff; }

caption { 	font-weight: bold; color: #ff0000; font-size: 14pt; }

#zebra td { padding: 5px; }

.grey { background-color: #ddd; }

The JQuery Code

And, finally, the JQuery code that identifies the table ID, sorts through the elements to identify just those that we wish to apply the changes to, and works its magic. I’ll explain below.

JQuery works off the ID and class names of your elements and CSS. So let’s walk through it. First, we’ve asked it to identify the even table rows bu only inside the tabled with the ID of zebra and only the ones within the tbody tag. This excludes the thead area in case you wish to format that differently than the rest. What we want to do is add a CSS ‘class’ to those even rows. Using JQuery’s addClass function alllows us to do just that. The result is the even rows ONLY within the

tag have the blue background applied. The odd rows remain untouched.

Now we thought it would be fun to add a hover effect to the other rows. For this we add a function that sorts through the ODD rows and uses the mouseover JQuery function and the addClass function to accomplish. Now, keeping in mind that this works on the mouseover, we need to add a mouseout function to return it to normal. Otherwise the mouseover effect will be permanent, the background will remain grey. A true hover effect would change the color then return it to normal after the mouse leaves. So what we’ve done is simply apply the removeClass on mouseover function. Mouse on… mouse off!

Demo

Share on Facebook