Introduction


JD Boston - Multipurpose Joomla Template

JD Boston is a multipurpose Joomla template best suitable for agency or startup website. This template has a professional, modern and exclusive design, best suitable to showcase your work, showcase your product online, company profile and professional portfolio. It comes with awesome blog layout where you can engage with your customer through your content.


Technical Requirements

  • Apache 2.2+ or Microsoft IIS 7
  • PHP 5.4+ (PHP 5.5+ Recommended)
  • MySQL 5.1+
  • Joomla 3.4+

Key Features

  • Fully Responsive
  • Cross Browser compatible
  • Fully SEO Friendly
  • Lightweight and fast loading template
  • Mobile Menu
  • Multiple blog layout
  • Social Icons
  • Custom 404 and Coming soon pages
  • Font Awesome Icons
  • Powered by powerful T3 Framework
  • Premium SmartSlider 3
  • MegaMenu Support
  • Typography
  • Newsletter Subscription through ACYMailing and much more.

How to install a Quickstart package ?

Some of our new users must be wondering what quick start is?? If yes, let’s know bit more about it. Quick start is a full demo site that includes: templates, databases, extensions “(are used to extend the functionality of Joomla) , images and everything we see on the demo websites. Now, we are aware what quick start is?

Let’s go ahead and see how we can install it.


Step 1- Start with the package download.

The first step is to download the quickstart package from site Joomdev.com.

JD Boston

Step2- Local host or your hosting?

Once you have the package,extract the downloaded package.


Local Host

If you’re working on local host…copy the extracted folder to: …\xampp\htdocs. If not “xampp” you can try “wamp” and copy the same extracted folder to …\wamp\www


How to install a Quickstart package ?

Xampp:

xampp

Server

Make sure you have the package downloaded properly from the site.

Okay, now please extract the downloaded package and upload all folders in the folder that you just extracted to the (public_html)

Note* using FileZilla (FTP)


How to install a Quickstart package ?

img

Step3- Create Database

For creating a database, navigate to the cPanel. And, create a new database.

img

How to install a Quickstart package ?


Step 4- Install Quickstart

Run the template installation wizard

  • Open your web browser and go to the folder that you uploaded your quickStart Package.

Now click next on the very first step.

There are few settings to edit before we can set quickstart to life.

See the screenshot below for configuration.


img

How to install a Quickstart package ?

  1. Select the database type to “MySQLi (preferred)”
  2. Type in Database server host name to “localhost”
  3. Type in Database server host name to “localhost”
  4. Database name is very important. In the earlier steps we have created a new database and called it”demotest” so type in same the database name here.
  5. Hit NEXT: D

As soon as we are done with our configurations and hit next, we would see something like, in the screenshot below:


When above process is complete. A small pop box will appear with the message

The database restoration was successful” and click next.

How to install a Quickstart package ?

We are doing pretty well till now. Let’s move to the next step. Once, we have the restoration done successfully. Screen will look like this:

On the same screen. Please put the following details under “Super User settings”

You can set the password you like or can leave it blank as well. If leave blank we should have the default username and password i.e.

How to install a Quickstart package ?

Username: admin

Password: admin

The last and final step is to remove the installation directory. We are Almost there!!!!

The moment we hit the remove directory it should bring a pop up on our screen to visit site frontend.

BOOM!! We are GOOD !!


Home Page Slider

We can have same layout to our website:

Before we start, we should install smart slider3 component to our Joomla website. Download the same component from the link below:

Smart Slider 3

Once, we have the component set up to our Joomla. Let’s move towards the next step i.e. is to add a new slide

In the Joomla backend, we can find this component present under the component section from the top Joomla menu under the name of Smart Slider 3.

#1 Click on Create Slider.

Step #2

Add name of your slider and select the layout to present. Click on create. As soon we are done with the new slider it should start appearing on the left of your screen. Click on it

For instance, we have one on the name of homepage slider.

There are many ways we can have our slider set to life on our website. You can select anyone of you like. We normally select via module. We can find these option on the same slider we created above.

For more info : Smart Slider 3 Documentation

Section : Fact About Us

To achieve like we have something above in the screenshot.

It’s a combination of custom module and Skillset module. It’s the perfect example of how we combine two modules in Joomla.

For the custom module go to extensions > module > select custom (from the listings). And, add this code in the content area. Don’t forget to add the position of the module from the side bar menu.

Code:

Lorem ipsum dolor sit amet cons ectetur adipiscing elit donec metus nibh sceler isque et suscipit id auctor vitae magna nam sollicitudin velit tortor ut efficitur velit sagittis.

Also, add module suffix in the “Advanced Tab”

*Module suffix : m-title-upper

Moving along, we will have the next module published on the same position i.e. “feature-1”

You need to download the module from:Skillset

Make sure we have the same setup as provided in the screenshot below:

Under “Advanced tab”

Change the settings to:

Latest Portfolio

We can have same layout to our website:

Before we start, we should install portfolio component to our Joomla website. Download the same component from the link below:

Download: KeenIT Portfolio

Once, we have the component set up to our Joomla. Let’s move towards the next step i.e. is to add a new project

In the Joomla backend, we can find this component present under the component section from the top Joomla menu under the name of KeenIT.

#1 Click on New and put in the important details.

By doing this, we can add number of projects we need.

Once, we have all the projects added to the component. Now it’s time to set them live, we do this from the module.

Go to Extensions > module > under search tools > Selec type = keen IT responsive portfolio.

Open the only module you see, please set the properties as shown in the screenshot below:

On the same module move to the Advanced tab and add “Module Class suffix”

m-title-c m-title-upper .module-title

And Hit Save.

Testimonials

We can have the same layout on our live site. How we do it ?

Step 1 - Download and install the module from the link below:

Ot Testimonial

Above module is the free download available.

Step 2- Is to set the important configuration under the module we need

1 - We have different layout to select from whether we need the slider with 1 columns or more.

In our template we are using Slider with 1 column layout.

*2 - There’s also an option where we can set the speed of the slider to any like we want. For the moment we are using 3000 milliseconds.

*3- Important don’t forget to add positioning or where we want this module to appear. In our template (JD BUSINESS) we have this module placed in “testimonials-1”

*4 Moving forward with the configuration , navigate to the “Advanced tab” on the same module and add module suffix

“ m-title-upper .module-title”

Join our newsletter

The question is "How we can publish the same layout or module to our live site?"

Here are few steps to achieve the same as show in the above screenshot.

Step 1: Download the Acymailing module from the link below:

Download : AcyMailing

Step 2- Is to configure the setting according to the needs. See screenshot for the configuration

Here is few thing to keep in mind while configuring:

Now navigate to the advanced settings for this mailing module. On the same module navigate to the Advanced Tab and add module suffix.

“ m-title-c m-title-upper .module-title”


About Page

Header Banner

For the header, we are using a module called “About us Header”. It comes with the following options listed below.

  • Select Image (Provides an option to add a background image)
  • Title (This option allows to place the title)
  • Description (An option to add description)

For this section, we have created an article and bind it together with the About menu item.

Go to content from the top menu in Joomla backend. Create a new article and add the following code below:

Click here

Next step is to bind this newly created article with the menu item.

Option Tab configuration to set to global except the title


JD Team Showcase

We can have same layout to our website:

Before we start, we should install component JD Team Showcase to our Joomla website. Download the same component from the link below:

Download: JD Team Showcase

Once, we have the component set up to our Joomla. Let’s move towards the next step i.e. to add new Team Members

In the Joomla backend, we can find this component present under the component section from the top Joomla menu under the name of JD Team Showcase.

#1 Click on NEW and add the followings.

#2 Add multiple team members and once we are done. We will move to the next step i.e. to have this component appear on the live site.

Once, we have all the projects added to the component. Now it’s time to set them live, we do this from the module.

Go to Extensions > module > under search tools > Select type = keen IT responsive portfolio.

Open the only module you see, please set the properties as shown in the screenshot below:

On the same module move to the Advanced tab and add “Module Class suffix”

m-title-c m-title-upper

And Hit Save.

About slider

You can have same slider like above by following the same steps mentioned above.

Create a new slider and put in the title you need.

For instance, we have it under the name of client’s 4

Next step is to add slides to the slider.

You can add the images to your choice


Header Banner

For the header, we are using a module called “Contact us Header”. It comes with the following options listed below.

  • Select Image (Provides an option to add a background image)
  • Title (This option allows to place the title)
  • Description (An option to add description)

Step2- How can we add form in the middle section?

Let’s see how to do it?

#1 - You should have the component called “Chronoform5” for it.

#2 - Create a NEW form.

Put in all the important details before you go ahead and save it. Next step, is to decide, add the number of fields to the form. In our template we are using the following.

  • Custom
  • Name
  • Email
  • Subject
  • Message
  • Submit

Note* Chronoform allow us to add fields with simple drag and drop.

#1

#2

#3

For name, email & subject, we are using a text box. Provided in the options on left.

For the message box, we are using text box area. As it provide more space for the end user to put in.

Chronoform also provide an option where we can add a button. This is what we are using for “Submit button”

LINK FOR CHRONOFORM DOC

Let’s just quickly go through with the fields above

Very first, on the top is custom field.

Custom field is being used to display the custom message provided by us. On the same new form, navigate to the advanced properties (on left)

On the right of the newly custom field click on edit and the follow steps provided in the screenshot below:

*< h3 class="module-title ">< span>Keep in Touch with us< /span>

And, click save.

Now, most of our users really want to know. How can we see it on the frontend or main site. We have various way to publish it. But, We prefer appearing it via Joomla menu.

We have the form appearing on the contact menu. So let’s see how we are doing it?

#1 Under the main menu go to the particular page or menu. For now, we have it on the contact menu.

#2 Click on select

And. select

On the same menu, navigate to the 2nd tab “options”. Put in the form name we created earlier.

And, hit save.

Step 3- Custom HTML (Section)

Question is how we create one like the one above.

For this section we are using a Custom module. We create one just go to extensions > modules > new > (from the list of options ) > Select Custom.

Paste code details below:

< div class="row main-contact-block-horizontal">
< div class="col-md-4 col-xs-4 contact-block-horizontal">
< a href="#">
< div class="icon">
< i class="fa fa-mobile">

< div class="content">
< div class="arrow">
< h3>.....
< p>.....




We have this module placed on position “addressbar”.

Okay, we pretty close to getting our contact page ready.

Let’s move ahead with the other section i.e. google maps

How we haeve this ?

#1 Go to googlemaps

#2 Look for the location we need.

#3 Copy the code from embed map.

#4 Now, we have the code copied. What next, create a custom module like we did earlier for the above section. And, paste.

Hit save.



Installing Extensions

  • Smart Slider
  • Virtuemart
  • JD Team Showcase
  • Ot Testimonial
  • AcyMailing
  • ChronoForms5
  • K2
  • Keen IT portfolio
  • JFlickr
  • Skillset

Layout Module Position

The Layouts panel in the Myriad template administration interface provides several options for configuring the layout of the template. Each modular section of the template design offers six module positions by default.

Topbar

topbar-1 topbar-2

Header

mainmenu
languageswitcherload

Headerimg

headerimg

Slider Head

slider-head

Position

position-1 position-2 position-3 position-4

Showcase

showcase-1 showcase-2 showcase-3 showcase-4

Auto

message

Auto

component

Auto

mast-col

Auto

sidebar-1

Auto

sidebar-2

navhelper

navhelper

Feature

feature-1 feature-2 feature-3 feature-4

Addressbar

addressbar

Fullwidth

fullwidth-1

Testimonials

testimonials-1

Addressbarbottom

addressbarbottom

Bottom

bottom-1 bottom-2 bottom-3 bottom-4

Footer

footer-1 footer-2 footer-3 footer-4

Copyright

Copyright