How to install the template backup

 

How to use Akeeba to make your page look just as the template as seen in the Template demo on www.crosstec.org


IMPORTANT:
Before we start, it's important to note, that the backup file, we'll be using later on, is from a Joomla!® 3.2 Template.
Also: the backend login changes after installing the backup to this:

ID: Admin
Password: test

And last but not least, you should always create a new Joomla!® installation when you want to install a backup using this method.

What we'll need:

1.) The backup file (in this case it's the naturalway.zip)
2.) "Akeeba Backup"
3.) "Akeeba Kickstart"

both Akeeba Backup and Akeeba Kickstart can be downloaded free of charge from:

https://www.akeebabackup.com/download.html

Now that we have downloaded this two things lets get right to it:

So after creating a new Joomla!® installation and the coressponding Database, the next thing we need to do is extract the "kickstart.php"-file from the Akeeba Kickstart container. (Don't mind the other files, they are not necessary).

Now move the kickstart.php file into your site's root directory.

In my case it's the: C://xampp/htdocs/naturalway2/ directory.

 

After moving the kickstart.php file into this directory, you'll have to move the backup file, in our case the "naturalway.zip" into the same root directory.

Now back to the browser, go to:

localhost/nameOfYourSite/kickstart.php

you should be redirected to a new page where, unless you have more than one backup file in the root directory, the correct file should be selected by default.

Change the "Write To Files" dropdown menu from "Hybrid" to "Directly" and then klick the green START-button on the bottom of the page.

 

 

Now Kickstart will be extracting the backup file, 

 

 

after this is done you'll have to klick the green "RUN THE INSTALLER" -button. In the next page, you can just klick the next-button, situated in the upper right-hand corner of the screen.

In the new page (Recovery of Main Database) change the Database name and the Database table name prefix to the one you created to use with this site. Afterwards proceed by klicking next.

 

 

The Database recovery should now start and after it finishes klick the red button to delete the installation directory and in the now opening page klick the green button to go to your page's frontend.

If everything went as planed your page should now look like the one you saw in the template demo you saw at: www.crosstec.org

This is it. I hope you enjoyed this litte "how-to" and that you'll have a lot of fun with this new page.
If there is anything we can do to help, write us a message in our forum or mail us at: support@crosstec.org

WorldBiz documentation

After setting up a new Joomla!® installation and a new Database for the Template, you should be able to install your template, just follow the next steps and you will soon be able, to build your very own website:

NOTE: The screenshots in this tutorial are all taken with a resolution of 1920x1080px.
In case you have a different resolution, the screenshots shown here might not be the same as what you will see on your screen, this is due to the templates responsiveness, which will change the sites appearance depending on the resolution.

1.: Installing the new Template

To install the new template, go to your Joomla!® backend (in my case: localhost/testtemplate/administrator), you should replace "testtemplate" with the name you have chosen for your Joomla!® installation. The page should look like this:

 

 

After loging in to your admin account, you should find yourself on this page:

 

 

To install the template, you have to klick on: "Extensions", situated on the top of your screen, in the dropdown column which should open now, klick on "Extension Manager",(it should be the first entry) as seen in the image below.

 

 

Now you should be on the "Extension Mangager: Install"-site.

 

 

Once on the page, klick -if not already selected - "Upload Package File" and then on "Choose File". A window should open up, and you will be asked to select the template file.

 

 

Once you have selected the file, klick open (the window should close again) and now proceed to click the blue "Upload & Install"-button. After a few seconds the installation should be completed, and you should get a green message confirming the successfull installation

 

 

To select the newly installed template you first will have to set is as the default template:
First klick on Extensions, and this time select "Template Manager 

 

 

on the "Template Manager"-site you should klick the star-icon on the right next to the templates name (in my case it's "worldbiz") to set the template as the default.

 

 

This should, again, be confirmed by a green message on the top of your screen.

 

 

You can now check the "frontend" of your site on the URL: localhost/nameOfYourTemplate 
If everything went well and you've purchased the WorldBiz template, you should find yourself on this page now:

 

 

You might noticed the "Home" underneath the grey line, I will explain how to remove it, a bit later when we get to Articles and Categories.Congratulations! the template-installation-part is now over!



2.: Creating a menu

 

I will now proceed to show you how to make the page look like the one you have seen in the template demo on www.crosstec.org
Let's start with the menu. To do so, we have to go back to the backend, once open, we klick on "Menus" and on the dropdown-column klick "Main Menu"

 

 

we should find yourself on the "Menu Manager"-page. Notice, that the "Home" item you saw on the frontend is already there!
To add new menu "items" we just have to klick on the green "New"-button, conveniently placed on the upper left-hand corner of your screen.

 

 

Now we can create a New Menu Item!

 

 

Let's give the Item a name first! and since this will be a copy of the template demo's version, I will call mine "Examples", you can of course name yours however you want.

To do so: klick the Text-field right next to the words "Menu Title", in the top-left corner, and choose the name best befitting you.

You can leave the "alias" field blank if you want and it will get an auto-generated name later, I however will just call it examples too, for simplicity reasons.



Now we will have to select the Menu Item Type. To do so, just klick the blue "Select" button, and in the popup window klick "System-Links" and choose "Text Seperator"

Text Seperator basically means, that the created item won't behave like a link, one could klick on it all day long and nothing would happen, unlike home, where the klicking would result in a redirect to the Home page.

 

 

For now you can leave everything else on the page as it is. just klick "Save & Close" on the top-left corner, to close the site and return to the Menu-overview.

 

 

Now you should -once again- get the green Message confirming the new Item, and the item should be displayed below the "Home" item we saw earlier

 

 

On the frontend you can now see the new item (you might need to refresh the page before it shows up), it should then look like this:

 

 

Note, that both items on the screenshot have a grey background, this is due to the fact, that the "active" menu item (in this case "Home", because we are on the home page)

will always have a grey background. The "Examples" item is grey, because the cursor is currently hovering over it, it will lose it's grey background once you move the cursor away.

Let's now proceed to make it a dropdown menu.

In order to do that, we will need to make a couple of new items. Don't worry, I won't be howing how to make each and everyone of them since it would get a little too repetitive I will try to focus on the important parts, apologies in advance if you think this is too much, but I'll try to make it as comprehensive as possible.



2.1.: Submenu



To make a drop down item we'll first of all have to go back to the "Menu Manager" (see the image on page XXX if you forgot where to find the Menu Manager).

Once there klick "New". Give the item a name, I'll call it "Contact form" and as a "Menu Item Type" select "Featured Articles", once you did, pay attention to the right-hand side.

In order to make a menu item to a "sub menu item" or "child item" you have to assign it, to a "Parent Item". So klick the dropdown box under "Parent Item" on the right-hand side of the screen. Once klicked choose the Parent item - this will be the one, that users will have to hover over to make the child-items appear. For now we'll choose Examples.
To give it the finishing touch, klick on "Dropdown Menu Options and in the third box (the one next to "Menu Icon") choose "icon user"

 

 

this will put the insert a little icon left to te "Contact form" text.

 

 


now that we are done, klick Save & Close.
If you check the frontend again you might notice that, unlike previous dropdown columns, this child-item is not directly underneath "Examples".

That's because the worldbiz template's menu is made in a "Mega Menu" layout.

 

 

If you want to make create new child-items underneath the newly created one, just create one like we did before, only difference: in the "Parent Item" field, choose the child item for instance "Contact Form" to be the Parent-Item to your next item. 
In case you want a new child item just like "Contact form" proceed like with Contactform. It just needs a different name and after saving it, it should appear right next to "Contact form", no need to change anything else.



2.2.: Articles and Categories

 

As you proceed to add new menu items, you will eventually make a item which will need an article in order to work, so let's create one! 
To do so just klick on "Content" right next to "Menus", situated in the top of your Joomla!® backend, and choose "Article Manager".

 

 

Creating a article is just as easy as creating a menu item.

Klick New, give the Article a name and of you are done ... , but!, if you want you can write something in the Text-box, you can also add images or videos.

You can even add your own HTML to change the way your article looks and behaves, by klicking on "Toggle editor" underneath the bottom-right cornor of the text-box. I will explain how to add a video or image to an article, but for now, it is enough to just give the article a name and leave everyting else, as it is. 

 

 

You might noticed the "Category" dropdown box and the "Tags" box there you can assign the Article to a Category and add some Tags, so you or your users can easily sort and search your Articles by Categorys or tags.

To create a Category you just klick on Content and then on "Category Manager" just as you did when creating a new Article.

You will, by default, already have a category called "uncategorized", this is the category all articles will have -unless you create one yourself and assign the article to it.

To make the new one, as always - klick new, give the Category a name and if you don't want anything else to be displayed in this category, just klick Save & Close and of you go!

Categories are just like articles and menu items, you can add Tags for categorizing and assign them Parent-Categories and of course - add your own images, videos and HTML elements.

2.3.: Insert modules into the menu

You might have noticed, that in the template demo on www.crosstec.org , the mega menu had a login module inside it, we'll now learn how to make one just like that ourselves.

So lets begin: First by adding a new module!

In order to that, we have to klick on "Extensions" and select "Module Manager".

 

 

you will now see, that there already are a couple of Modules active in this template

 

 

Ignore them for now, we want to make a new one, so as always, klick on the New button and in the new site choose "Login"

 

 

Give it a name and if you don't want it to be displayed along side it, klick on Hide on the button on the right-hand side of your screen. It should turn red when you klick it.

Directly underneath the "Show Title" select-box, you can choose the position you want it to be displayed in. Choose the position "Navigation [Position-1]"

it's under the "Protostar" section, don't worry about it being in the Protostar section, it isn't important for now.

Now that we gave the new module a name and a position it would already work, but since we want it to be displayed inside the mega menu, we'll have to change something in

the menu-item section. So let's go to the Menu Manager.

We'll want to add a new menu item. And after giving it a name and assigning it to it's parent item, we'll just have to do one more little thing:

Klick on "Dropdown Menu Options" (it's under the Menu Title field), once it is has opened up should look for "Custom CSS Class"

here you can add a name of a custom css class, the template already has a class predifined in order to get the login module into the menu.

The class has the name "ct-megamenu-300" so what we want to do is: write this name into the text field.

 

 

And now to finish this: on the bottom of the page, in the radio box, "Child Item Type" select Modules.

A new dropdown box should appear and now we can finally select the login module we just made.

Save & Close the item and refresh the frontend of your site! it should look somewhat like this

 

 

 

So there you go!, this is how you can add a (login)-module to your mega menu.

2.4 Inserting a module

Now we have a login module inside the mega menu - which by itself might be great - but users who don't know it's there might not look for it there, so let's put another login module above our menu, just to be on the safe side of things.

To do so we'll just have to make a new module, exactly like the last login module, so as always:

Go to the Module Manager, and click new. Then as we did before: select "Login", Name it and - if you so wish - hide the name. Here comes the tricky part: unlike last time, we don't want it to be inside the menu, so we need it to be on a different module position. To place it in the position as it is in the template demo, we'd have to select the "Top B" position, as seen in the following screenshot.

 

 

If we leave now and save, we'd get a perfectly fine login form, but we (or rather, I) want it to be displayed horizontaly, in order for it to be displayed this way we klick on the "Advanced" tab and in "Alternative Layout" choose horizontal 

 

 

Now we can Save & Close and the module should be displayed above the menu.

By the way: if you want to know, where the different module positions are situated you just have to check out the "preview" page. Here is how you to get there:
Klick on the Extensions Tab in your Joomla!® backend, and select "Template Manager".

 

 

Once in the Template Manager, klick "Options", it's in the upper right corner of the screen. 

Now all you've got to do is simply set the option "Preview Module Position" to Enabled.

 

 

Save & Close, now we should find ourselves back in the Template Mangager. To finally see the preview and all the module positions in all their glory you just have to klick on the blue eye-like symbol next to the templates name.

 

 

Now that you've learned it the hard way you might as well know that you could have saved yourself the time and the trouble and just go to: http://crosstec.org/templatedemos10/index.php/test/module-positions.html
But where is the fun in that ;)?

Now that the Preview mode is enabled it will stay enabled until you decide to disable it again. so if you want to preview your template again, just klick the eye symbol and you should be good.

Now let's add the Search Bar to be done with the top of our page.
Just add a new module, choose "Search" as Module Type (duh)

 

 

and in Module Position select "Top-C", if you want it right next to the login form that is.

 



Save & Close and that's it!
This is how it should look like now:

 



Only one more top-related thing remaining!
If you're wondering how you can change the Page logo on the top-left, well: wonder no more!.

Go to the "Gantry" backend, this awesome piece of web-design sourcery is hidden in the very same Template Manager we use to see the preview page.

Instead of clicking the eye-symbol of the preview mode, just klick on the template name!!
You should find yourself in the "Gantry" Overview page.

 

 

Using Gantry you can change everything relating the colors, fonts, logo and even, to some extent, the layout of your page you should play around it some time to get used to it, it's a very powerful and easy to use tool. But lets focus on the logo part for now.

To change it, we klick the "Style" tab and in the first entry conveniently dubbed Logo, select in the "Type" dropdown box Custom

 

 

In the now opened window we can select from the pre-installed images, or at the very bottom of the page, upload our own images to the templates directory like so:

 

 

The uploaded image should now be available to be selected as Logo, just select it, and on the top klick "insert".

 

 

In order to save the changes we've made in Gantry just klick the blue "Save" button in the top-right corner. The new logo should be displayed in gantry now,

 

 

Refresh your homepage and your image should now be displayed, just like mine. (success ;)).

 

 

Depending on the image size, your "top" module position might get a little higher in size, so if you want to keep the layout as it was, you might want to try to keep the images small.

Let's take a moment to reflect upon our achievements, or rather your achievements. You've (hopefully) learned how to:

-create a Module and how to insert it into the menu,
-make Articles and Categories
-make Menu items, and sub-menu- or "child-items".
-enable the preview mode and now you can always look up all the menu positions.
-You've taken up with this Tutorial (which in itself is quite a stellar ... ;))

But eventhough we just finished the top-part of our page there is still plenty to come! So get in a comfortable position, you're in for a treat!

3.: Image Slider

Now we want to setup the image slider, which might be easier than you think!.
Creating the image slider is just as creating any other module. Create a new module, choose the "Responsive Slideshow type", name it ... you now the dril ;), choose the "Showcase-A" position under the "worldbiz" section. Then switch to the "Menu Assignment Tab" and select "Only on pages selected", here you can decide where you want this module to appear, this works with any module, 

 

 

Go to the setup tab and change the "Type of Animation" to Fade and change the transition any number you want, and set Display Pagination to No. (the 7500 represent the time it takes for the images to change in miliseconds for example 10000 would be 10 seconds)

 



On the Slides tab, you can now provide Image paths for your own images if you want, or add your own HTML in the editor box.

 



Now your showcase should be displayed on the homepage, if you haven't added your own HTML in the editor the page will lack the blackish textboxes though.
[Code von slideshow textboxen einfügen]
If you did everything as shown in the images, your slideshow module should now be able to recognize touch gestures too.

4.: The Breadcrumbs

To make the so called "breadcrumbs", the module responsible for the grey bar underneath the image slider, is as easy as it gets, just create the module, as a breadcrumbs type, everything else is just as you imagine. However, if you do it this way, you'll just get a grey bar stating your current location on your site (for instance: You are here: Home) But if you want a breadcrumbs as shown in the template demos, you'll have to create a "Custom HTML"-type Module as shown in these pictures,

 

 

and:

 

 

and "unpublish" other breadcrumbs you don't want - that is, if you have any other modules on the breadcrumb position.


5.: Insert articles into the content area


In order to create the "Live The Dream" part in the mainbody position you'd first have to make a new article, and add this new article to the "Home" menu item.
Pretty straight forward, nothing new here ;)

Here's the code I used ( custom HTMLCODE hier einfgügen)



6.: Main bottom Modules



The 4 images in the "mainbottom" position are made using my own "Custom HTML", each of the images - with it's respective text are all situated in different module positions, but of course you are open to all posibilities when it comes to making your own modules.

Note: if you want the images to be displayed with the same height//weight, you need to scale the images to same dimensions.

Also: if you want the to have a word or a phrase displayed as a button, just use this: <button class="btn">Benjamin</button>



7.: Iconic Button Modules



Next in line are the "Iconic Button"modules, as you probably can imagine, these are created just like any other module, the only exception being, that you have to choose "Crosstec IconicButtons" as module type. the different modules have distinct names so you shouldn't have any problem finding the one you want!.

 



This is pretty much everything you need to know, . You should now be able to create the rest of the page yourself since there is nothing new coming up and most other modules are just images.

Have fun creating and editing your page, if you by any chance run into trouble, feel free to ask our support team.

Ask for Pedro ;)


To conclude our not-so-little tutorial I present you the final page:
Remember: the module positions are chosen just as in the templatedemo you saw on www.crosstec.org
but I've hadded some different images. Anyway here it comes:

 

Special Offer

Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!