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.

Warning

If you want to recieve automatic updates for this template and don't want your customizations to disappear, we recommend adding new files for your custom code and NOT modifying the existing core files.Create a new file and write all the custom code in that file. So when there are updates, your custom work will stay and you get you have the latest version of template too.

Click here to know how to add LESS/JS file

Installing Template & Quickstart

We have recently covered an article where you will find a detailed guide to install Joomla Template and QuickStart Packages. Please click here to see in details.

Preset Color

There is an option where we can changes the styling choices like Background Shading, Text shading, Hover shading, Drop down menu shading. Change these styling options for desired design. Also, we have 4 different type of presets available for now, which can add varieties to our template.

Basic Settings

In basic setting, we have few thing important to take care off. We will go ahead and have look one by one. Before we move ahead with the documentation of our template JD Boston.Let's take a look what are the important features we cover here.

Boxed Layout

A boxed layout is a form of layout where we can set the boundaries for our main body or it is used to clearly define the main body. We can provide width to the template manually by using a custom width.

Wide layout (if No) is perfect for you, if you like airy websites, with no visible borders or page edges. A boxed layout (if Yes) is a form of layout where the boundary of the main body is clearly defined and you can choose to have the background be a custom image.

Page Preloader

A page preloader can be anything an image or an icon. Page Preloader is a nice and skillful way to show loader before the page is loaded completely. This can be handy when your website is bulky or contains a lot of data for the customers even when you have everything optimized.

Body Background Image

Body Background image is an option which allows us to set the background image for < main body > without adding any custom code CSS to it.

Image here:

  1. Select image: (JPG, PNG, GIF) image format will be used as the background.
  2. Background Repeat: By default, a background image is none or no repeated and the image is placed at the top left corner. Options available No Repeat, Repeat All, Repeat Horizontally, Repeat Vertically, Inherit from default settings.
  3. Background Size: Set the size of the background image. Default value is cover - is means scale the background image to be as large as possible so that the background area is completely covered by the background image.
  4. Background Attachment: An option where we can set whether a background image attachment is fixed or scrolls
  5. Background Position: Sets the initial or starting position of a background image.

Social Icons

There is an extra feature we can add Social Icons can be localized anywhere on the template, also 12 icons can be linked to popular social media networks.One addition icon is the custom if we wish to add a custom link. we can mouse over to see the description or little steps describing how to add.

Contact Information

We can also add the contact information anywhere on the website depending on the module position we select from, which include a phone number and e-mail address.

Coming Soon

JD Boston introduces a Coming Soon page which allows you to display a stylish page indicating that your site is either being worked on or under construction.

Error Page

Error Page implies that asked for a page that does not exist. This could be on the grounds that client has entered the wrong URL or that the address that client have asked for references assets that have been moved.Another probability is if a site has moved a page or asset yet did as such without diverting the old URL to the new one, particularly after relocation. At the point when that happens, you'll get a 404 mistake as opposed to being consequently steered to the new page. Presently you can help a tiny bit more yours "lost" clients.

Also, you can add module using "404" position.

All you have to do is add a new module(s) and publish it on "404" position. It can be very useful because you can add their search module, menu or custom code module.

Typography Settings

At this moment utilizing Google Font is significantly much simpler we additionally want to present an "Update Font List" feature. It enables us to revive the list Google text styles. So if there are any new ones, this catch enables you to update fonts with just one click and all new ones will be automatically added in the JD Boston template.

Typography settings enables you to pick font and its settings for extensive HTML tags: body, h1, h2, h3, h2, h5, h6 and navigation. All settings are from layout settings, so we have now a simple and productive approach to insert Google font to our site with a couple clicks of our mouse.

Custom Font

Custom font allows us to use custom Google font for selected CSS selector. We just need to turn on an option from font settings.

Custom code

We can simply customize template built for Joomla 3.8 with our own custom code, for example, CSS, JS, meta tags, links and verification code by using the custom fields in that section of settings.

Before < / h e a d >

Any code you place here will appear in the head section of every page of your site. This is useful when you need to add verification code, javascript or CSS links to all pages. Check following example how you can use it.

The Final result on front-end HTML5 code generated by browser engine. That line you can see on the image below was put by JD Boston engine before ending < / h e a d > section and before < b o d y > will start, it means it's fully W3C correctly solution.

Before < / b o d y >

Any code you place here will appear in the bottom of the body section of all pages of your site. This is useful if you need to input a tracking code for a state counter such as Google Analytics or Clicky.

This is useful if you need to input a tracking code for a statistics counter (such as Google Analytics(GA), Piwik, Woopra or Clicky. This tracking code will be available on every page of your Joomla 3.7 website.

Custom CSS

You can use custom CSS to add your own styles or overwrite default CSS of a template or extension. This option is good small changes in the stylesheets. For more extensive changes (more than 10 lines of code) we suggest to using the custom.css file.

As you can see CSS code was added in Custom CSS section and what is more important is it works smoothly.

Note! Please do not edit the template.css, legacy.css any other CSS file from the JD Boston template. The reason being that all of your changes will be overwritten by template engine. Instead, we suggest using custom.css file where you can override the default CSS code.

Custom Javascript

You can add custom javascript code. It loads your custom Javascript file after all other Javascript files (except special hard coded occasions), allowing you to be the last one who will affect your website.

Result

Advance Settings

This segment of 'JD Boston' settings enables us to lessen the size of loaded template files. By speeding up a template, we offer a superior better experience for our clients, enhance your page speed and make your CMS seem more steady and expert.

Compile LESS to CSS - JD Boston is developed with LESS system built-in. When customizing our site, we suggest working with LESS files. All our changes in the LESS files will be systematized into the final CSS files, located in our_root/templates/TEMPLATENAME/css folder. It will override previous changes.

Export/Import Template Settings

JD Boston also allows you to Export-Import its settings from “Advanced” tab. It means that you have to download generated text file (by clicking “Export Settings” button), then open in any text editor and paste inside Import field. It includes all basic settings of Template only!. If you're using Quickstart you don't have to do this, default settings are already there.

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.

  1. Select Image (Provides an option to add a background image)
  2. Title (This option allows to place the title)
  3. 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.

  1. Select Image (Provides an option to add a background image)
  2. Title (This option allows to place the title)
  3. 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.

  1. Custom
  2. Name
  3. Email
  4. Subject
  5. Message
  6. 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.

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.

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.

  1. title
  2. top1
  3. top2
  4. top3
  5. logo
  6. menu
  7. search
  8. slide
  9. user1
  10. user2
  11. user3
  12. user4
  13. left
  14. right
  15. feature
  16. slider
  17. position1
  18. position2
  19. position3
  20. position4
  21. position5
  22. position6
  23. position7
  24. position8
  1. bottom1
  2. bottom2
  3. bottom3
  4. bottom4
  5. breadcrumb
  6. footer-1
  7. footer-2
  8. footer-3
  9. footer-4
  10. comingsoon
  11. offcanvas
  12. pagebuilder
  13. 404
  14. debug
  15. showcase-1
  16. showcase-2
  17. showcase-3
  18. showcase-4
  19. feature-1
  20. feature-2
  21. feature-3
  22. feature-4
  23. utility-1
  24. utility-2
  25. utility-3
  26. utility-4
  1. maintop-1
  2. maintop-2
  3. maintop-3
  4. maintop-4
  5. mainbottom-1
  6. mainbottom-2
  7. mainbottom-3
  8. mainbottom-4
  9. extension-1
  10. extension-2
  11. extension-3
  12. extension-4
  13. addressbarbottom
  14. googlemap
  15. content-top-1
  16. content-top-2
  17. content-top-3
  18. content-top-4
  19. content-bottom-1
  20. content-bottom-2
  21. content-bottom-3
  22. content-bottom-4
  23. copyright

How to add Custom CSS File

  1. Go to template directory and find less folder and create a new file i.e(addition.less).
  2. Now, Open master.less file and simply import your addition less file i.e(@import 'addition';)

How to add Custom JS File

  1. Go to template directory and find js folder and create a new js file i.e(addition.js)
  2. Now, Open index.php file and find addJS and add your js file.

Google Map API

If you want to personalize Google map for your website, please follow our recent article here>

Support

Need More Help?

If you couldn't find an answer for your question in this documentation, feel free to contact us. For technical support, you can contact us via forum here

We’re in UTC +05:30 (Indian Standard Time) and we aim to answer all questions within 8 hours in weekdays. In some cases, the waiting time can be extended to 24 hours. Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.


Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating this theme.