Making Your Store Look Amazing

Exclusive offer: get 50% off this eBook here
Building E-commerce Sites with VirtueMart Cookbook

Building E-commerce Sites with VirtueMart Cookbook — Save 50%

Over 90 recipes to help you build an attractive, profitable, and fully-featured e-commerce store with VirtueMart book and ebook

$29.99    $15.00
by John Horton | July 2013 | Cookbooks e-Commerce Open Source

In this article, written by John Horton who has also authored the book Building E-commerce Sites with ViruteMart Cookbook, we will cover:

  • Removing the Joomla! branding at the footer
  • Installing a VirtueMart template
  • Installing a Joomla! template
  • Creating and installing a template with Artisteer design software
  • Installing the Warp framework/template
  • Installing the Gantry framework/template
  • Customizing the Gantry framework/template
  • Uninstalling a template
  • Cool header banners with jQuery and Sourcerer

(For more resources related to this topic, see here.)

Looks are everything on the web. If your store doesn't look enticing and professional to your customers then everything else is a waste. This article looks at how to make your VirtueMart look stunning.

There are many different approaches to creating a hot-looking store. The one that is best for you or your client will depend upon your budget and your skill set.

The sections in this article will cater to all budgets and skill sets. For example, we will cover the very simple task of finding and installing a free Joomla! template or installing a VirtueMart theme.

Then we will look at the pros and cons of using two different professional frameworks namely Warp and Gantry.

In the middle of all this, we will also look at the stunningly versatile Artisteer design software that won't quite give you the perfect professional job but does a very fine job of letting you choose just about every aspect of your design without any CSS/coding skills.

Removing the Joomla! branding at the footer

With each version of Joomla! and VirtueMart being better than the last one in terms of looks and performance, it is not unheard of to launch your store with the default looks of Joomla! and VirtueMart.

The least you will probably want to do is remove the Powered by Joomla!® link at the footer of your store. This will make your store appear entirely your own and perhaps have a minor benefit to SEO as well by removing the outbound link.

Getting ready

Log in to your Joomla! control panel. This section was tested using the Beez_20 template but should work on any template where the same message appears. We will also be using the Firefox web browser search function but again, this is almost identical in other browsers.

Identify the message to be removed on the frontend of your site as shown in the following screenshot:

How to do it...

This is going to be nice and easy so let's get started and perform the following steps:

  1. Navigate to Extensions | Template Manager from the main Joomla! drop-down menu as shown in the following screenshot:

  2. Now click on the Templates link (it is the one next door to the Styles link) as shown in the following screenshot:

  3. Scroll down until you see Beez_20 details and Files click on it as shown in the following screenshot:

  4. Now scroll down and click on Edit main page template .
  5. Next press Ctrl + F on your keyboard to bring up the Firefox search bar and enter <div id="footer"> as your search term. Firefox will present you with the following code:

  6. Delete everything between <p> and </p> both inclusive.
  7. Click on Save & Close .

How it works...

Check your Joomla! home page. We now have a nice clean and empty footer. We can add Joomla! and VirtueMart modules or just leave it empty.

Installing a VirtueMart template

In this section we will look at how to install a theme to make your store look great with a couple of clicks. There are a few things to consider first. Is your website just a store? That is, are all your pages going to be VirtueMart pages?

If the answer is yes then this is definitely the section for you. Alternatively you might just have a few shop pages in amongst an extensive Joomla! based content site. If this is the case then you might be better off installing a Joomla! template and then setting VirtueMart to use that. If this describes your situation then the next section, Installing a Joomla! template is more appropriate for you.

And there is a third option as well. You have content pages and a large number of VirtueMart pages. In this situation some experimentation and planning is required. You will either need to choose a Joomla! template that you are happy with for everything or a Joomla! template and a VirtueMart theme which look good together. Or you could use two templates. This last scenario is covered in the Creating and installing a template with Artisteer design software section.

Getting ready

Find a template which is either free or paid and download the files from the template provider's site (they will be in the form of a single compressed archive) on your computer.

How to do it...

Installing a VirtueMart template has never been as easy as it is in VirtueMart 2. Perform the following steps for the same:

  1. Navigate to Extensions | Extension Manager from the top Joomla! menu.
  2. Click on the Browse... button in the Upload Package File area, find and select your template file as shown in the following screenshot:

  3. Click on the Upload & Install button and you are done!

How it works...

The VirtueMart template is now installed. Take a look at your shiny new store.

Installing a Joomla! Template

As there is clearly something of a supply problem when it comes to VirtueMart-specific free templates, this section will look at installing a regular Joomla! template and using it in your VirtueMart store.

Installing a Joomla! template is a very easy thing to do. But if you have never done it before read on.

Getting ready

Check the resources appendix for a choice of places to get free and paid templates. Download your chosen template on your desktop. It should be in the form of a ZIP file. Log in to your Joomla! admin area and read on.

How to do it...

This simple section is in two steps. First we upload the template then we set it as the active template.

  1. Select Extensions | Extension Manager from the top Joomla! menu.
  2. Click on the Browse... button in the Upload Package File area, find and select your template file as shown in the following screenshot:

  3. Click on the Upload & Install button.
  4. Now select Extensions | Template Manager .
  5. Click on the checkbox of the template you just installed and then click on Make Default .

How it works...

So what we did was to install the template through the usual Joomla! installation mechanism and once the template was installed we simply told Joomla! to use it. That's it. You can now go and assign all your modules to your new template.

Building E-commerce Sites with VirtueMart Cookbook Over 90 recipes to help you build an attractive, profitable, and fully-featured e-commerce store with VirtueMart book and ebook
Published: June 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Creating and installing a template with an Artisteer design software

I don't normally like to recommend one commercial solution over another. Mainly because I don't want to be held responsible for the vagaries and consistencies of a product or service and also because there are almost always pros and cons between the different product and service providers.

However Artisteer is a bit different. They have been around for years, the product does exactly what it says it does and there isn't really any alternative - the product is unique.

Artisteer is like having a CSS guru inside your PC. You can click on and choose from the whole site layout options to tiny button and tab configurations. You can even add Flash and pretty nifty scrolling banners and so on. We will do the latter in a minute.

Excessive use of these features raises the possibility of JavaScript conflicts with VirtueMart. Add a feature at a time and test regularly.

It is certainly true that you probably won't end up with a design as good as something bespoke that you pay a professional design studio for, but this section is for those of you who need a totally unique bespoke design for a bit over $100. The benefit over a bespoke design service is that you can use it for as many designs as you like and that Artisteer won't complain if you ask for extra design revisions over the agreed amount.

Getting ready

It always helps to have ideas in your mind. Look at competitor sites and other Joomla!/VirtueMart sites to have an idea of the colors and styles that you like. Artisteer is sure to have something similar.

Also, try and consider the best general layout for your site such as single or multiple columns. This will prevent you from going round in circles with the vast array of options that Artisteer is about to throw at us. Perhaps do a sketch on a paper.

You need have all the images that you want to use in the design on your desktop.

If you will have several different layouts, perhaps one for the home page and a different one for subpages/shop then that's fine. We will look at how to do this in Artisteer. Download and install the standard edition trial from http://www.artisteer.com/?p=downloads.

Obviously your design ideas will be quite different from the ones demonstrated in the book. But it should be trivial to adapt my specific instructions to suit your design.

Most likely you will want to spend a good amount of time wading through and sampling the different options that Artisteer offers. That's fine, I will just whiz through for now and we should have an acceptable design in minutes.

How to do it...

This section is quite a long one, but step-by-step there is nothing overly complicated in this at all. If you find yourself itching to customize a bit further in any of the upcoming steps that is absolutely fine and is encouraged. Fire up Artisteer and let's start making our site.

  1. Your first choice on starting Artisteer is to choose your starting point. You can either select from a preconfigured template or a blank one as shown in the following screenshot:

  2. For the purposes of following this section precisely, choose the Blank template.
  3. From the top Artisteer menu select the Colors & Fonts tab as shown in the following screenshot:

  4. Select the Colors and Themes drop down and select the theme you like. We have chosen Ice Water under the Sky Blue menu in the example.
  5. Now that we have decided on a color theme, let's choose the font set. Click on the Font Set dropdown and choose a set of fonts to compliment the colors and your products. We chose the Salient font set because, it gives a clean modern-ish sans serif look.
  6. Finally click on Font Scale and choose 120 percentage because the default salient size is a little small.
  7. Now select the Menu tab and click on the Menu Area dropdown, and then click on Fill . Choose a smart menu fill color as shown in the following screenshot:

  8. Click on the text Enter Site Title and enter the name of your store. In the example, we put the store name as The Joomla DVD Store.
  9. You are probably beginning to notice that just about every aspect of every element can be changed in a vast number of ways. Just one more change and then we can wrap up the main page. Click on the Header tab. We will make a smart rotating banner in just a few clicks.
  10. In order to make a banner, find and click on the New Slide button as shown in the following screenshot:

  11. Here, as you can see the slides of your rotating banners can be an image you already own or custom designed in Artisteer from a blank page. Click on Blank . Do this for as many number of slides and whatever types you want.
  12. Now you can see that you can select from slides one through three by clicking on the navigation circles. Click on them in turn to see it flip between slides as shown in the following screenshot:

  13. Click on the first navigation circle. Let's define a background. If you chose a picture for your slide then you don't need to do this bit. Now click on the Background Image dropdown and choose something cool for the first slide.
  14. Select the second navigation circle, choose a background and repeat the same procedure for all your slides. Let's choose images from the Wind Glass section in the Background Image dropdown.
  15. Watch a preview of your slide show by clicking on the Play button in the Slide Show section of the main Artisteer tool bar.
  16. Now let's make the remaining content our own. Right-click on any images you want to change and select Change Image from the list of options. Browse to and choose the image to be replaced.
  17. Right-click on all links and select either Remove Hyperlink (if you do not need it) or Edit Hyperlink (to change the text and the target).
  18. Click on any text you want to edit and type your descriptions.

Designing your store pages

Since this is for an e-commerce focused VirtueMart site we will do things a little differently than usual in order to design your own pages using the Artisteer method.

We are going to further adapt this template and make it an entirely new and then when we upload, it we will assign it to just the VirtueMart menus. This way we have a perfectly matching design but with different features in the store. Perform the following steps:

  1. Export the template as it is. It will serve as the default Joomla! template. Navigate to File | Export | Joomla! Template . Select the correct version of Joomla! and set the Positions dropdown to position-1, position-2... .Make sure to check the boxes Zip Archive and Include content . Set the File Name: to ArtisteerDefault as shown in the following screenshot:

    If you have purchased Artisteer, then you can select File | Save as and name the file ArtisteerDefault. Now save the project again as ArtisteerVM. You can now make the changes you want on just store pages from here. You will then be able to revisit any aspect of either template and re-export it at your leisure.

  2. Now we will make some quick adaptations for the VM version of the template. Let's get rid of the extraneous menus. Hover over the block titled VMenu on the left-hand side. Find the tiny delete icon as shown in the following screenshot, second from the left after the light bulb icon:

  3. Click on it, the block is gone. In the block titled Block edit the title and text to be a welcome message to your store. Something like the following screenshot:

  4. Make any other changes you want on the store but not the main Joomla! template.
  5. We now have two templates, ArtisteerDefault and ArtisteerVM. Here is what you need to do. Log in to your Joomla! admin panel and from the main Joomla! menu select Extensions | Extension Manager .
  6. In the Upload Package File area, browse to the first template file and select it. Now click on Upload & Install . Wait for the install to complete. Do the same for the other template files. Wait for the install to complete. It doesn't matter which order you do it in.
  7. Now select Extensions | Template Manager . You should see the two templates you just installed as shown in the following screenshot:

  8. Check the box for ArtisteerDefault and click on the Make Default button. Now click on the ArtisteerDefault link to go to its Template Manager: Edit Style page. Press the button on the right-labeled Import Content from Template , then click on Import and finally Continue .
  9. Now click on the ArtisteerVM template to go to its Template Manager: Edit Style page.
  10. Click on the right-labeled Import Content from Template , then click on Import and then Continue . Scroll down to the Menus Assignment area and check the checkbox for Shop . Click on Save and Close .
  11. We are really close now. We just need to add in some of our VirtueMart modules to these templates and we are done here. Select Extensions | Module Manager from the main Joomla! menu.
  12. We want to add the VM Category module to position-7 and the shopping cart module to position-7 .
  13. Find and click on the VM - Category module.
  14. Click on the Select Position button and select position-7 .
  15. Scroll down to the Menu Assignment area and click on the Module Assignment dropdown and choose On All Pages .
  16. Click on Save and Close .
  17. Do exactly the same as discussed from step 13 to 15 for the VM - Shopping Cart module and any others you want to show.

How it works...

Our finished site product page is as shown in the following screenshot:

The home page is as shown in the following screenshot:

Artisteer might make all but the best web designers around the world lose a little sleep and it will definitely please many with its flexibility, features, and cost as demonstrated.

There's more...

It is true that the simple difference between the two templates could have been implemented by not deploying the Artisteer generated modules in the VirtueMart area and a more realistic example might have been to have a product focused header instead of the generic one on the VM template. But the example works for demonstration purposes.

Installing the Warp framework/template

The Warp framework is created by YOOtheme. If you like working with this template, check out their fancier offerings on www.yootheme.com.

Advantages and disadvantages of using Warp

Warp extensions just work and are in my opinion unrivalled. If you are happy with the default theme used in this section or you like one of their themes from the YOOtheme website, then you are most likely to be satisfied.

You can also modify the Warp framework templates but only with a good knowledge of CSS/HTML and a bit of inside information about the framework as well.

If on the other hand you feel the need to make adjustments to columns, colors, fonts, and much more without any CSS/HTML knowledge, then check the next two sections that cover a competitor framework called Gantry.

Getting ready

Head over to http://www.yootheme.com/demo/joomla and click on the Master Theme download icon as shown in the following screenshot:

Click on the download button for your version of Joomla! and save it on your desktop.

How to do it...

The Warp theme takes just a few clicks to install and as we will see, it is well worth it. So let's do it.

  1. In the Joomla! control panel choose Extensions | Extension Manager from the top drop-down menu.
  2. Now click on Browse... in the Upload Package File area, select the file yoo_master_jxx.zip that you just downloaded on your desktop and click on Upload & Install as shown in the following screenshot:

  3. We can now see the following screenshot:

  4. Now we will switch to the framework/master theme. Navigate to Extensions | Template Manager . Select the check-box next to yoo_master - Default as shown in the following screenshot:

  5. Click on Make Default in the top row of buttons.

How it works...

The Warp framework and all its advantages are now installed. If you view your site/store, you will see that all the modules have disappeared. In the next section Customizing the Warp framework , we will get them back again as well as make some customizations.

Before you start to wonder what all this was for, resize your browser on the screen to about the size of a mobile phone or small tablet. You can see a significant advantage to the Warp framework compared to Joomla! 2.5 default themes.

The product page before the Wrap framework is not so good. We can see that the entire contents of the screen are just a squashed up mess as shown in the following screenshot:

With the Wrap framework, we have a responsive UI as shown in the following screenshot:

As we can see, the responsive (to screen size) framework of Warp has formatted our content really well, even on a mobile phone sized screen!

Installing the Gantry framework/template

Gantry is extraordinarily configurable without coding, unlike the Warp framework and like the Warp framework, as we will see it is highly responsive to different screen sizes. So Gantry is ideally suited for the non-technical person, who wants a responsive website as well as making some simple customizations that make our site unique.

Getting ready

Download the framework for free from http://www.gantry-framework.org/download. Be sure to get the right one for your version of Joomla!.

When you have chosen your version of Joomla! you are faced with a few choices as shown in the following screenshot:

We need the Gantry template bundle for Joomla! x.x where x.x matches our version of Joomla!. Click on the Download button.

After getting it on your desktop, read on.

How to do it...

The Gantry framework like the Warp framework is well worth the few minutes it will take to install. Also, when we are done, be sure to take a look at how to configure it easily in the next section.

  1. From your Joomla! control panel select Extensions | Extension Manager .
  2. Click on the Browse... button and select your recent Gantry download, gantry-4.x.x-bundle.zip or similar.
  3. Now click on Upload & install .
  4. Almost done. Navigate to Extensions | Template Manager from the top Joomla! menu.
  5. Put a tick in the box to the left of Gantry - Default as shown in the following screenshot:

  6. Click on Make Default in the top row of buttons.

How it works...

The theme is now fully installed with the sample content for us to experiment with in the next section. The process apart from finding and choosing the files was nearly identical to a regular Joomla! template but how your site now performs is a little different.

Try resizing your browser or visiting your site from a mobile phone as shown in the following screenshot:

See how the menu implementation changes to mobile-friendly and the module arrangement just pops up to a neat column instead of being spread across the page and causing us to scroll down just to see the right-hand side. Joomla! 3.x does this almost as well using the Bootstrap framework. But alas, at the time of writing, VirtueMart is not compatible with Joomla! 3.

However the real advantage of Gantry over other modern Joomla! compatible frameworks such as Warp is how easily we can customize it to make it our own. That's covered in the Customizing the Gantry framework/template section.

Building E-commerce Sites with VirtueMart Cookbook Over 90 recipes to help you build an attractive, profitable, and fully-featured e-commerce store with VirtueMart book and ebook
Published: June 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Customizing the Gantry framework/template

We will go through configuring all the main Gantry options. Follow along exactly or vary what you do at various stages to end up with a different result.

Getting ready

See the previous Installing the Gantry framework/template section.

How to do it...

As mentioned at the start of this section, what makes Gantry different from other frameworks is the extent to which we can customize the look of our template without a single line of code. Let's make some customizations now as shown in the following steps:

  1. Navigate to Extensions | Template Manager and click on the Gantry - Default link. Select the Overview tab.
  2. First we are going to choose a preset. That is one of the preconfigured starting points from which we will begin customization. Click on the Presets button in the row of buttons near the top of the page. You will see a cool drop-down of preset configurations to choose from as shown in the following screenshot:

  3. Let's choose Preset 4 because it is light with blue elements. Nice. Now we can do some tweaking. Click on Save and check out your site so that you know where you are starting your customizations from.
  4. Now select the Style tab.
  5. Let's put our own logo in place of the Gantry one. In the row of controls labeled Logo , select the Type drop-down and select Custom . We now have these options in the Custom Logo row as shown in the following screenshot:

  6. Click on the Select button and then the Browse... button and choose your logo from your PC hard drive. Now click on Start Upload . Note that you might need to scroll down a bit to reveal the Start Upload button. Select the thumbnail image of the logo you just uploaded and click on Insert . Check your new logo on your store.
  7. Now we can configure the color of all our links. Click on the colored square (Next to the label Link Color ) which shows the current color and up pops this color chooser as shown in the following screenshot:

  8. Choose the new color for your links by choosing the color range from the vertical color bar and the precise color from the resulting color square.
  9. Finally on this tab we can choose a range of fonts from the Font Family dropdown. Try different fonts to find the one that looks good. Click on Save each time before you check the shop front. Try choosing the Coda Caption font family.
  10. Now, click on the Features tab.
  11. The top-five features on this tab are brilliant if you are setting up shop for a client. Every client will want a different combination of these features. It can be time consuming finding the code/module to add or switch these features off. Gantry lays it all out bare on a single page. We will try for as many features as possible, hence we will switch all the first five features to ON as shown in the following screenshot:

  12. Click on Save and have a look at the effect on your store front as shown in the following screenshot:

  13. After performing the previous steps, the following effects can be seen:
    • 1 —a dynamic date that changes each day making your content appear fresh
    • 2 —visitor changeable text size buttons so that people with different screen sizes and eyesight can set the text to suit them
    • 3 —it provides credits to the theme designer
    • 5 —it provides the copyright information
    • 4 —it gives a cool button to jump to the top of the site and save our scrolling fingers from having to do it with the mouse scroll wheel.
  14. Now lick the Menu tab.
  15. Here you can determine the type of experience your visitors will have from the mobile devices. Click on the dropdown in the Responsive Menu field. Choose Select Box for the style of menu shown in the following screenshot when browsing on small screen devices:

The Layouts tab

The layouts tab only makes sense to configure once you have a plan for your module positions and you have some content, articles, and so on. So we will look at it generically.

This tab allows you to select the number of module places and/or the shape of the module layouts in a specific section of the template. Play with the settings and if you have the Joomla! sample content installed, you will see how the click of a box can give you a whole new layout.

The Advanced tab

  1. Click the Advanced tab.
  2. The best option on this tab is the Load Transition option as shown in the following screenshot:

  3. Click on ON , and select Save , go and refresh a page in your store ( F5 on your keyboard). Watch the sweet fade-in effect which smoothens the loading of page elements. The effect is the same in most browsers.
  4. Now, click on the Assignments tab and you will see the following screenshot:

  5. We want this template in use for every area of our Joomla! site and VirtueMart store. Hence, we have checked every box as you can see in the previous screenshot. Click on Save and we are done.

How it works...

The Gantry framework is highly customizable without touching the CSS, JavaScript, or the PHP code. It is possible to create a fairly unique layout and a reasonably personalized color scheme without even buying a Gantry template. It must be said however that the RocketTheme templates which are all Gantry templates are some of the hottest non-bespoke templates around.

Uninstalling a Joomla! template

You might have tried out a few of the template sections. What will start to happen is that the content you installed from one will carry over and spoil the content from another.

Not to mention that you might have assigned certain links to another template altogether and the whole situation becomes a muddle.

The clean thing to do is only have templates you are actually using installed at any given time. This section will show you how to uninstall a template.

Getting ready

Log in to your Joomla! control panel.

How to do it...

We will now, very quickly remove an unwanted template. Repeat this section for each of the templates you will not be using as shown in the following steps:

  1. Select Extensions | Extension Manager .
  2. Click on the Manage tab as shown in the following screenshot:

  3. Now you are on the Extension Manager: Manage page. From the row of dropdowns. We will click on the Select Type dropdown and choose Templates as shown in the following screenshot:

  4. Now we can see a list of all your installed templates. Put a tick in the checkbox to the left of any templates you need to uninstall and click on the Uninstall button with the bin icon. You can see we just have the Bluestork admin template and the one other on your left as shown in the following screenshot:

How it works...

Using the friendly Joomla! template manager we have quickly and painlessly uninstalled all our unwanted templates.

Now you should be able to install any template from any section without annoying effects from the previously installed templates. You can also practice good template housekeeping by only having the templates that you need installed.

Cool header banners with jQuery and Sourcerer

Sourcerer is one of the most versatile add-ons for Joomla!. It allows us to add code (JavaScript, CSS, HTML, and PHP) just about anywhere in our website without editing a single file. This is useful in many ways . But this section fits here nicely because we can significantly enhance the appearance of our store by using Sourcerer to add some JQuery magic and implement some cool header banners.

You do not need to follow the Installing jQuery with Sourcerer section because it is not necessary to complete this section. In fact if you have completed the Installing jQuery with Sourcerer section, then you should disable that module before continuing here.

Most modern websites have a cool feature or two. One popular feature with all types of website including e-commerce is a sliding header. See www.hadronwebdesign.com for an example of what I mean.

The nice thing about sliding headers is that as long as the picture looks good and the slider well implemented, it will enhance the whole site. You can prepare the images with messages like special offers or featured products. Then whenever there is something new to highlight in your store; just make a new image, upload, and replace an old one.

The good news keeps coming. There are many free sliders in the Joomla! extension folder. It is true that an easily installable Joomla! extension would be a bit simpler than this section to install. But the bulk of the work which is preparing the images still has to be done.

The advantage of doing things the way we will see in this section is that you are not tied to just what is available in the Joomla! extensions folder. If you were to search for free jQuery slider, you will get a ton of genuine hits. One top result had over 80 headers to choose from on one site!

So by doing things this way, you have infinitely more choices and the vast majority is free. This is very useful when you are making a site for a client because you can give them so much more choice.

I have chosen a really cool but straightforward fade-in/out jQuery plugin from http://responsive-slides.viljamis.com/. It is published under the MIT license so you can do most things with it for free. You can get the full unaltered code with loads of different samples direct from the aforementioned URL.

I already mentioned that the advantage of doing things this way is the vast array of choices and different effects that are easily achieved for free. Even this single plug-in can be modified and configured in so many ways that I can't possibly mention them all here. I definitely recommend downloading the full package and experimenting. If you are wondering why I chose this particular option it is because it is responsive to different screen sizes and that's useful in this mobile age and for when we come to make our website in to an Android app later in the book. It is also a tiny file size which is great for the mobile world also.

I recommend that if you are new to jQuery/JavaScript or using them in a Joomla! context, you can copy the code from this section or download it from the Packt Publishing website.

Getting ready

Before we begin, prepare three nice images to use as your slides. Mine are 800 pixels wide and 250 pixels high. Yours don't have to be the same size as mine I suggest you experiment with different sizes and images to see what works best for you.

I will be showing you how to put the code into the top featured article so the code appears directly below the header on the home page. But you could just as easily include the code directly in the header itself or even in the description box of a VirtueMart category or product to showcase some aspect of your product range etc. Just as long as the code is wrapped in the {source}{/source} tags Sourcerer/jQuery will do the rest.

Next, unless you love typing, download the folder containing all the code and files that you need from the Packt Publishing website.

How to do it...

  1. Name your images 1.jpg, 2.jpg, and 3.jpg respectively or modify the blank slides provided for your convenience in the download from the Packt Publishing website.
  2. Upload them to the images folder in the root of your Joomla! install folder.
  3. From the folder you downloaded, upload the following files, responsiveslides.min.js and responsiveslides.css to the root of your Joomla! install folder. These are the files provided by http://responsive-slides.viljamis.com/ and contain the clever jQuery/JavaScript and the responsive screen size CSS.
  4. In order to create banners in an article, from the Joomla! admin panel select Content | Article Manager | New Article .
  5. Enter Cool header in the Title field as shown in the following screenshot:

  6. In the Category drop-down box choose Featured to make the article appear on the home page as shown in the following screenshot:

  7. Now type the following code or copy and paste it from the source_to_paste.txt file to the Article Text box:

    {source} <link rel="stylesheet" href="responsiveslides.css"> <script src =
    "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script> <script src ="responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow 1 $("#slider1").responsiveSlides({ maxwidth: 2000, speed: 800 }); }); </script> <!-- Slideshow 1 --> <ul class="rslides" id="slider1"> <li><img src ="images/1.jpg" alt=""></li> <li><img src ="images/2.jpg" alt=""></li> <li><img src ="images/3.jpg" alt=""></li> </ul> {/source}

    The following screenshot is a glimpse of the Article Text box:

From the list of drop-down options on the right-hand side of the screen navigate to Article Options | Show Title | Hide .

We examine how the code works in the How it works... section next. Click on Save and Close and then read on.

  1. Now we will make the article look like a proper banner by removing extraneous information as shown in the following screenshot:

  2. Select Menus | Main Menu and then click on Home .

    Depending on your configuration your home menu item might be called something different or be on a different menu. If so select it and read on.

  3. From the list of drop-down options on the right-hand side of the screen, configure the following options as stated.
  4. Navigate and configure Article Options | Show Category | Hide .
  5. Navigate and configure Article Options | Show Author | Hide .
  6. Navigate and configure Article Options | Show Publish Date | Hide .
  7. Navigate and configure Article Options | Show Hits | Hide .
  8. Navigate and configure Article Options | Show Icons | Hide .
  9. Navigate and configure Page Display Options | Show Page Heading | No .
  10. Click on Save and Exit and have a look at your home page.

How it works...

We uploaded the cool code that makes the whole thing work and configures the slider from http://responsive-slides.viljamis.com/.

The code we pasted into the article is surrounded by the {source}{/source} tags, thus the Sourcerer prevents it from simply being displayed as a normal article and the code is executed like it were a part of the Joomla! source files.

Here is a high level explanation of the code which should help you to quickly install other variations of it should you wish to.

{source} //The Soucerer start point //The code to load the simple but neat responsive CSS file we
// uploaded earlier. <link rel ="stylesheet" href="responsiveslides.css"> //The code to load the jQuery library, this time from Google. <script
src ="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> //The code to load the banner code we uploaded earlier and to
//initiate jQuery. <script src ="responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { //Load the specific piece of code from the main slider code. This will
//be one area to change when experimenting with other options. // Slideshow 1 $("#slider1").responsiveSlides({ maxwidth: 2000, speed: 800 });... //The HTML formatted images to be manipulated. This section too would
//change when customizing. <!-- Slideshow 1 --> <ul class="rslides" id="slider1"> <li><img src ="images/1.jpg" alt=""></li> <li><img src ="images/2.jpg" alt=""></li> <li><img src ="images/3.jpg" alt=""></li> </ul> //The Sourcerer end point. {/source}

The following screenshot shows how it looks on your desktop:

On a mobile phone, the slider is shrunk to the appropriate width, the menu links are converted to a mobile-friendly style and the VM - Currencies Selector module is popped neatly underneath, instead of to the side as shown in the following screenshot:

Summary

This article explains some of the template options available in Joomla!/VirtueMart, including pre-built frameworks to simple but the powerful GUI template creation software.

Resources for Article :


Further resources on this subject:


About the Author :


John Horton

John Horton spends his working hours helping people make their websites/apps/e-commerce enterprises successful through his business, www.HadronWebDesign.com.

He also encourages the pursuit of mathematics through the free Android app, MathLegends which is available on www.MathLegends.com.

In his spare time he likes shooting zombies with his two sons.

Books From Packt


Instant E-Commerce with Magento: Build a Shop [Instant]
Instant E-Commerce with Magento: Build a Shop [Instant]

Building E-commerce Sites with Drupal Commerce Cookbook
Building E-commerce Sites with Drupal Commerce Cookbook

PrestaShop 1.5 Beginner’s Guide
PrestaShop 1.5 Beginner’s Guide

Getting Started with nopCommerce
Getting Started with nopCommerce

Joomla! VirtueMart 1.1 Theme and Template Design
Joomla! VirtueMart 1.1 Theme and Template Design

Joomla! Cash
Joomla! Cash

Joomla! Web Security
Joomla! Web Security

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Y
2
G
a
4
a
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software