Joomla and WordPress Tutorials from experts.

How To Implement On-Scroll Animation In Joomla Template Using WOW.js

How To Implement On-Scroll Animation In Joomla Template Using WOW.js

Animation can amaze your visitors and give them a reason to stay for a long while or return back in the future only in a couple of seconds. It enhances your site usability and save your visitors' time. You can easy server your motto of your business.

In our previous tutorial we showed how you can create a one page website, in this tutorial I’ll show how you can make it more interactive with scroll animation. I’ll use a fantastic animation library called WOW.js

 

What is WOW.js ?

WOW.js is one the famous plugin for creating animation in a website. It counts browser scrolling position and keep the web element hidden. When you scroll down a website in a browser, WOW.js counts your scrolling position and reveal your hidden element with assigned animation. WOW.js works on any website, but it works best on one page type website. Make sure you followed our previous tutorial or you can continue.

Dependencies :

  • animation.css

In this tutorial I’ll show you, how you can use this awesome library in our ZenithII template.

wow-js.gif

Step 01

Download wow.js plugin from its official site. It comes with animation.css file which is responsible for the animation. If you are using any of our premium Joomla templates you don’t need to include it because our template already packed with the feature. You should include animation.css if you are working with other templates.

Log in to Joomla admin panel and head to the Extensions > Template Manager. Click on Tx_zenith_ii from Template column. And click on New File.

step-01.png

Step 02

Upload WOW.js file in JS folder. Make sure JS folder is selected

step-02.png

Step 03

Upload animation.css file as i uploaded WOW.js file in step 4.

step-003.jpg

Step 04

Open index.php file from Editor tab, and load WOW.js and animation.css file in head section.

step-04.png

Step 05

I will trigger WOW.js. Open template.js from JS folder and paste the following code.

new WOW().init();

step-04.jpg

Step 05

Select the font end area where you want add animation. Head to the Module Manager, Open Clean Admin Panel module (you can open your preferred module), Click on Toggle Editor. Select your preferred animation class from animation.css, Add WOW class and animation class simultaneously in each parent element. And press the save button.

In the image below you can notice, I have added WOW class, and added different animation classes for unique animation on each element.

step-05.jpg

Advanced Options

WOW.js provide maximum options to handle your animation. you can declare animation duration, delay, offset and iteration using following options.

data-wow-duration: Change the animation duration

data-wow-delay: Delay before the animation starts

data-wow-offset: Distance to start the animation (related to the browser bottom)

data-wow-iteration: Number of times the animation is repeated

 

Conclusion

We have added animation only in single section for demonstration, you cad animation whole in you website following the process. On thing you should remember too much animation might sick you visitors eyes, be professional while adding animation on you website.

Which on-scrolling JavaScript plugin do you use in project ?

How To Add Favicon In Joomla Website

How To Add Favicon In Joomla Website

Favicon stands for favorite icon, is also known as a shortcut icon, website icon, tab icon or bookmark icon. The favicon is an icon adjacent to a URL displayed in a browser’s address bar or subsequent to the site name in a bookmark list. When a visitor adds a website to his bookmarks list, the favicon is appeared before the website link.

Favicon is just an small icon makes your website more memorable and professional. Usually famous websites are known by their Favicon. Your favicon is like a trademark. People associate it with your "brand". If you're working to build brand name recognition, it is a mandatory, It helps its users to easily distinguish your site when it's opened on crowded browser.

crowded.png

Sometimes, little things make a big difference. So, we decided to write an article how to add favicon in Joomla website. Don’t panic about process, the whole process will take you only five to ten minutes. The process is comprised of two steps. In first step, we will create favicon and subsequently we will add the favicon in a Joomla website.

 

Creating a Favicon Image

According to W3C favicon must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The thing should be noted favicon.ico image should be simple and can be displayed in 16x16 pixels or 32x32 pixels format. Use your website logo or symbol that represent your brand. Apple use their iconic symbol of an apple. If your logo does have a symbol, you could use it as favicon following the intended steps.

Step 1

Open your company logo or brand symbol in your favorite graphics program, for example Photoshop. and resize your logo to 16x16 pixels or 32x32 pixels.

Step 2

Save your newly resized logo as a PNG, GIF or JPG image. The best is to save your file as a PNG or GIF with a transparent background. In the image below you can see, how we have resized our logo.

b2ap3_thumbnail_1966746_735998189766153_2078754392_t.png

Step 3

Your logo now needs to be converted to the .ICO format. There are many favicon generators available in online. My favourite is the Dynamic Drive generator. Go to their website, click Browse and find the resized image on your computer. Click Create Icon and press click Download FavIcon button.

output.jpg

Adding Favicon In Any Website

Upload favicon.ico image to your project root or template root folder. Open your index.php/html file and add this code before section.

 


Replace IMAGE_PATH to your favicon.icopath file.

How to add favicon in Joomla Template

Once created, upload favicon.ico to your JOOMLA TEMPLATE folder. In live server the path might be ‘public_html/templates/YOUR_TEMPLATE_NAME/favicon.ico’. If there is not ‘public_html’ folder check for ‘www’ folder instead. Joomla will autoload your favicon image.

Conclusion

Though favicon does not provide direct benefits of SEO. it leads to increase brand recognition and higher crt in the SERPs (Search Engine Results Pages). Higher SERPs ctr is arguably a very important SEO element.

Did you used favicon for your website?

How to Create One Page Joomla Template

How to Create One Page Joomla Template

One Page Website is one of the hottest and newest trend in web Design. The fascinating trend are getting popular for number of factors, but the most important is: All the necessary contents of a business can be displayed on the same page instead of using lot of pages.

We received numerous requests from our client about how to turn ZenithII joomla template as one page template. Here is our process to turn a standard Joomla template to one page template. Creating one page website in Joomla is pretty easy. To learn this process, you required basic understanding of CSS and Developer tool such as : Chrome developer tool or Firebug. In this tutorial we'll use Chrome developer tool.

If you wish, check our latest post for creating one page template -A Complete Guide to Create Marketplace Ready Onepage Joomla Template

Before digging deeper we need to know what is the key elements on any one page template:

  1. Sticky Header
  2. Scrollspy - It is for automatically updating nav targets based on scroll position.
  3. Smooth Scroll - It is for scrolling between section smoothly
  4. Some animation on scrolling ( optional )
Continue reading

How To Customize Joomla Template

How To Customize Joomla Template

Customizing any of our joomla templates is very easy. It requires only very basic knowledge of CSS. If you do not have knowledge of basic CSS, don't panic - there is an easy way to customize CSS for non-developers. Here are some examples of how easily you can customize a template, both easy and advanced.

Continue reading

How to change Joomla! Contact form layout?

How to change Joomla! Contact form layout?

A lot of our users don't like Joomla's default contact form accordion layout and question us how to change it. It's really very easy to change the layout without writing any code! In this tutorial i'll show you how to do this.

Go to Contact component and click the Options button on the top right. You can see an option Display format. Now click the list and it will show 3 options:

  1. Sliders
  2. Tabs
  3. Plain

tut-contact-layouts.jpg

1. Sliders: This is the default accordion layout.

2. Tabs: Tab style layout

3. Plain: Basic plain layout

If you want the old fashioned Joomla! form then plain would be your choice.

How To Fix A Hacked Joomla Website

how_to_fix_a_joomla_hacked_website

Do you know what is a webmaster's biggest nightmare? You're right. It's the hackers. Every now and then, website administrators get to deal with hackers. It's not possible to make your website 100% hack-proof.

A small security hole in your entire website's coding can give an experienced hacker access to the backend of your website. And if they manage to crack it down, you may have a hard time figuring out what to do if you didn't have a backup.

However, if you do have a backup, you can restore the site. But what's the guarantee that it won't be hacked again? How do you exactly determine which security hole gave the hacker access to your server in the first place?

There is one tool that can do the job of finding out what's the security hole and what other weak points there are on your website. The tool is called My Joomla. If you remember, we faced the same Joomla hacked experience a while ago at ThemeXperts.

This is the tool that made our website's security stronger and protected. But before we talk about how to audit your website with this tool, let's first look at some of the basic features the site comes with.

Features

  • My Joomla scans your entire website in just a few moments. You have to first sign up with them and you will be provided with a downloadable extension that you need to upload and install on your Joomla site. The tool then scans for all potentially harmful contents in your website and shows you possible reasons of Joomla hack.

  • During a Joomla hack, a hacker may leave a backdoor on any of your website's core files so that they can gain access later. My Joomla will instantly scan and recognize those changes in the file that are suspicious.

  • If you're using too many extensions and your site is very large, you might be wondering which files are untouched and which files are affected. With My Joomla, you can easily revert the core files to their distributed state making sure everything is at their default.

  • Like I already said, you will never know where the security holes are. My Joomla can look them up for you on you Joomla hacked site and you can make very technical changes in your Joomla quite easily with the tool.

  • You can also get suggestions for best practices by using this tool and prevent chances of future Joomla hack. For example, if you are using root username to connect the database, you're at risk. The tool My Joomla will suggest you to change that username to something more complex so that hackers can never guess what it is.

What to do after a Joomla site is hacked

You can use the tool to secure and fix hacked website of yours and NOT to backup or restore the content. My Joomla offers two types of auditing. The easiest way is to let them do the job.

But if you're a little familiar with Joomla administration interface and how these things work, you can do the audit by yourself. You need to register with a username and add your website before you can audit it. Just so you know, the first audit is totally free of charge. From second audit onwards, however, you will have to pay which is worth the service.

So, let's fix and secure your Joomla site for free!

Install and Activate

After you add your first website, you'll see a screen idential to the one below. You must click the Generate new connector for the extension to be ready.

generating_ready

Within moments, the download button will show up and you can download and install the extension to your Joomla website the usual way.

download_install

As you can see, you can also use the button on Step 2 go to go the Joomla administration panel on your website directly.

upload_install

Once the plugin has been installed, you'll see a message saying that there isn't anything more you can do from your Joomla administration. You need to go to the first tab and continue with the following.

The buttons to test endpoint are self-explanatory. Click accordingly. test_endpoint

If connection was established, you will see the word “endpoint” upon clicking the button. Remember to click the right button. If you are using Joomla 1.5.x, use the 1st button. If Joomla 2.5+ is running on your site, use the second button. Now, click the Connection Test button to make sure that the connection has been established. If connection is established, you'll briefly see the success message.

You will then be redirected to start audit page. You will have to confirm that you want to start auditing now. The page here will look identical to the one below:

start_new_audit

As soon as you click the start button, My Joomla will start its magic on your Joomla hacked site. You will see a live screen of what the plugin is doing on the next screen. Be patient, though; this may take a while if you have a very large website.

audit_progress

As the audit finishes, you'll see a screen with all the details of audit results. From there, you will be able to view what problem fond on your Joomla hacked site. If it has found any problem, there will be blue button that reads “next steps” next to the configuration name.

joomla_audit_next_step

audit_result_analysis

If you click the next steps button, you'll see all the details of what the problem was and what the tool recommends you to fix the issue of your Joomla hacked site.

If you scroll through the audit results, you might be a little bit overwhelmed. The tools developer writes,

Remember, the object is NOT just to get green OK for each item, the aim is to understand more about your site and its integrity at this moment in time. In fact it's impossible to resolve all items in this list as some checks have knock on effects to others.

If you've got enough time or a dedicated developer, you can have them check the entire result and take action to better protect your website from hacking attempts. If you'd rather leave it to the tool's developer, you can always pay and get their service right over to you. Fees for the service can be found here.

As you might have already realized, the service is really amazing. The tool takes deeper-than-any-human-can-do look into your Joomla's core files and comes up with an incredibly detailed result and possible fixes within minutes. This is some serious stuff that every serious web developers and administrators should have on their Joomla website.

Just as a reminder, the first audit is free. But you cannot audit your website again without paying the charges.

Your Turn

What security measures have you taken to protect your Joomla powered website? How do you find out after your site has been hacked where the problem or security hole lies? Let us know if you have come across any other tool that does better job than My Joomla!