JD Desire is a modern and creative Joomla template powered with powerful Astroid framework. This template is best suitable for Charity, NGO, or fundraising websites. So if you are running any non profit organization and looking for the website, don't waste your time and money to develop your website from the scratch. Simply buy this template and set up your website easily.

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.

Template Info

Technical Requirements

Joomla: 3.8+

PHP: 5.6+

upload_max_filesize = 4MB (or more)

memory_limit = 128MB (256MB suggested)

max_execution_time = 180 (300 suggested)

PHP upload_max_filesize = 4MB or more

Browser Support

Chrome 64+

Firefox 58+

Edge 14+

Safari 10+

Key Notes

Pro extensions are bundled in only Quickstart package

All the pro extensions used in the templates, are bundled only in the quickstart package. These are not provided separately. If there will be any update in the extensions version, we will release an update for the template with other changes possible. And if you want to get a licence or regular update for the extensions, you need to purchase licence key from the respective owner of the extensions.

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 can stay up-to-date with the latest version of the template as well.

NOTE: If "paid" version of extensions are updated via Joomla's updater you might be downgraded to the "free" version of the extension.

Basic Settings

Under Basic you have the following settings, here you can style the preloader, Back to top Button and select the layout settings.

Preloader

This option allows you to enable or disable the preloader for the site. It is displayed while the content is being loaded.

Animation

Here you can select the animation for the preloader from the list.

Color

Here you can set the color of the animated element of a preloader.

Background

Here you can select the preloader background color which is to be displayed as a background for the preloader.

Size

This option allow you to set the size of the preloader.

Back to Top

The “Back to top” button allows you to scroll smoothly to the top of the page with one click. This option allows you to show/hide the back to top button. This Button will display at the bottom right corner of the page after the user scrolls down a bit.

Icon

Here you can select the icon style for your Back to top Button from the dropdown list.

Icon size

You can easily set the size of the icon in pixel to it’s is maximum value by moving an indicator in a horizontal fashion.

Color

Here you can set the icon color for back to top button.

Background

You can set the background color for back to top button.

Shape

You can select Back to top Icon shape i.e. Circle, Round and Square

Layout Settings

You can use two main layouts for your site, Full-Width or Boxed. The full-width layout is the default layout for the template and it displays your content centered whereas in the boxed layout you can apply a background to your body and all your content will still be centered with the background flowing around it.

Background Image

Select a Background Image for boxed layout.

Background Repeat

Allows you to choose the repeat for the background image. You can select All Repeat, horizontal repeat, vertical repeat or disable repeat of the image.

Background Size

Adjust the background image displaying. You can select one of the following values: cover, contain and inherit.

Background Position

Choose the position for the background image from the Dropdown list.

Background Attachment

Set the background image attachment style: Scroll – background image scrolls with the content , Fixed – the background image is fixed and content scrolls over it(Select fixed if you want have parallax scrolling effect)

Header

Header section combines with the options such as logo, mega menu, mobile menu & off canvas menu etc that will appear at the top of each page when displayed. Disabling the header would disable all header options.

Header Module Position

Here you can select a suitable module position where you want to display header.

Header Mode

You can select from 6 different header types, the header layouts provide a visual representation of what your header on the frontend would look like.

Horizontal layout provides 3 different layouts with logo being on the left & mega menu being on the left, center or right. You also have an option to publish a block on the right that can either be a module position or custom HTML.

Stacked header layout provides with 3 different layout options:

Stacked Center: This layout provides you with the logo and menu in the center of the page with an option to add a block below the menu.

Stacked Separated: This layout provides you an option to have the logo between the menu, Half the menu items will appear on the left and other half on the right with an option to publish blocks above and below the menu/logo position.

Stacked Divided: This layout provides you with logo & menu on the left (on top of each other) with option to publish 2 blocks on the right, next to menu and/or the logo.

Header Blocks

Header blocks are positions that let you publish content inside the header. Based on the layout selected you may see 1 or 2 blocks. You can either directly publish HTML in each block or select a module position of your choice and publish modules to the selected position.

Mega Menu

You can select from the dropdown list which menu you’d like to publish as your main menu.

Mobile Menu

You can select from the dropdown list which menu you’d like to publish as your main menu on mobile.

Dropdown Animation

This options decides the animation that will be used for displaying the dropdown menu.

Logo Options

You can select a logo for desktop view, mobile view and sticky header.

Logo Type

Logo type gives an option to set the image for logo or the logo text.

Text Logo Settings - You can enter the text for the logo and an optional tagline as well.

Image Logo Settings - You can upload a logo for the desktop view and one for mobile view as well.

Sticky Header

A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. You can enable or disable the sticky header option, By enabling the option the header will stick to the top when you reach its scroll position.

There are 2 different ways you can show the sticky header

Sticky: A Sticky or Fixed header appears when a page is scrolled down.

Sticky on Scroll up: Sticky Header only appears when scrolled up to the page.

Sticky Header Logo

Select an image for your sticky header logo ( Sticky header logo is only for desktop and will not be visible on the mobile sticky header).

Sticky Header on Desktop

You can select whether you need the header to be sticky at all times or sticky on scroll up.

Sticky Header on Tablets

You can select whether you need the header to be sticky at all times , sticky on scroll up or to be static (not visible on scroll) in Tablet view.

Sticky Header on Mobile

You can select whether you need the header to be sticky at all times , sticky on scroll up or to be static (not visible on scroll) in mobile view.

Off Canvas Menu

Here you can customize Off-Canvas style for your site. This is how an off-canvas menu works: The user clicks an icon or performs some sort of action (e.g. slide in on Top , Reveal , Push ) that results in a vertical navigation menu sliding into the screen from off canvas.

Toggle Visibility

You can select whether you need offcanvas enabled on desktop or mobile only or you can have it displayed at all time.

Panel Width

You can set the width of the offcanvas navbar (in pixels), default is 240px.

Off canvas Animation

You can select the animation that will be used for opening the offcanvas bar.

Colors

This section allows you to style the color schemes on your site.

Body

Here you can configure color settings for the body.

Background Color

Allows you to set the default Background color for the body for the whole site.

Text Color

Set the Text color of the Body Content.

Link Color

Set the color of the link in the Body Content.

Link Hover Color

Set the color for hovered links; links hover when the mouse moves over it.

Header

Here you can set the Header color schemes for your site.

Background Color

Allows you to set the default Background color for the Header section for the whole site.

Text Color

Set the Text color for the Header section.

Logo Text Color

Set color for your text logo.

Logo Tag Line Color

Set color for Tag Line in your text logo.

Backgroud Color for sticky header

Set background color of the Sticky Header.

Main Menu

Here you can set the Main Menu color schemes for your site.

Link Color

Set the link color for the main menu.

Link Hover Color

Set the link hover color for the main menu.

Link Active Color

Set the appearance of a link while it is being activated.

Dropdown Menu

Here you can set the Dropdown color schemes for your site.

Background Color

Allows you to set the default Background color for the Dropdown menu.

Link Color

Set the color of the link in the dropdown menu for submenu items.

Hover Link Color

Set the color for hovered links; links hover when the mouse moves over it.

Hover Background Color

Set the Background color for the hovered links.

Active Link Color

Set the color for the active links; links become active once you click on them.

Active Background Color

Set the Background color for the active links.

Off-canvas

Here you can set the Off-Canvas color schemes for your site.

Background Color

Set the default Background color for the Off-Canvas Menu.

Text Color

Set the Text color for the menu items in the Off-Canvas.

Link Color

Set the color of the link in the Off-Canvas menu for menu and Sub-menu items.

Active Link Color

Set the color for the active links (links become active once you click on them).

Active Background Color

Set the Background color for the active links.

Layout

The following screen-shot highlights the default layout module positions that we used in current template. By using Layout builder in Astroid users will be able to move positions or change their size in the grid. Our in-build layout builder from template settings provide the opportunity to add new positions, columns, rows wherever you need as much as moving elements.

These are the all available template module positions which you can use:

header

banner

astroid-top-contact

astroid-top-social

astroid-content-left

astroid-home-page

astroid-header

astroid-footer

breadcrumbs

hero-section

position-2

position-3

position-4

position-5

position-6

position-7

position-8

position-9

position-10

left

right

footer-a

footer-b

footer-c

footer-d

footer-e

footer-f

fullwidth

offcanvas

debug

Typography

This is a fully customizable font-related section.You can change the fonts and their style accordingly, you can easily customize typography for all body, Menu, Sub menu text and the Responsive Headings, that define the Headings H1-H6.

Font Family

Select the font family from the drop-down list. Here you can select the System Font or the Google font to whole Body of your website

Alt Font Family

If the browser does not support the first font family, it tries the Alternate font family.

Font Weight

Select the font weight from the list, it will define how bold your text are.

Font Size

Set the font size you need to use in the text element.

Letter Spacing

Set the needed distance between letters.

Line Height

line-height property specifies the height of a line.

Text Transform

Set the font transformation, if needed (uppercase, capitalize and lowercase).

Font-Color

set the color of the text. The color is specified by: color name - like "red" , HEX value - like "#ff0000" , RGB value - like "rgb(255,0,0)".

Custom Code

Here we can add Custom CSS , Custom Javascript

Tracking Code

A tracking code is a snippet of JavaScript code that tracks the activity of a website user by collecting data and sending it to the analytics module.

Space Before </head>

For the javascript before </head>

Space before </body>

For the javascript before </body>

Custom CSS

Here you can add custom CSS to add your own styles or overwrite default CSS, Wrapped within <style> tags.

Custom JS

Social Profile

This section allows you to display your social profiles on your site.

In this section we have :

Module Position : Select a suitable module position where you want to display this feature.

Social Load Position : If there are other module(s) published to this module position, you can select weather the content of this feature should be displayed below the or after the module(s) published to this position.

Style : Choose the style how you want to show Social profile on your site, default value is Inherit color.In style we have 2 Options to style our social icons:

Inherit color.

Brand color.In this section we have in all 19 types of Social Profiles :

Behance

Dribbble

Facebook

Flickr

GitHub

Google +

Instagram

LinkedIn

Messenger

Pinterest

reddit

Skype

Slack

SoundCloud

Spotify

Twitter

Telegram

Tumblr

VK

WhatsApp

YouTube

Miscellaneous

In this section, you can add contact Information, customize coming soon and 404 page, set favicon for your site and can also define the responsive breakpoints for your site.

Contact Information

Here you to add Phone number, Mobile number, Email address, Address and opening hours, also allows to customize the settings where you want to display your Contact Information.

Module Position

Select a suitable module position where you want to display this feature.

Featured Load position

If your selected module position for feature has also module then it will works. This is specially where you want to show this feature, before module or after module.

Phone Number

Add phone number here. Leave blank if not required.

Mobile Number

Add mobille number here. Leave blank if not required.

Email

Add email address here. Leave blank if not required.

Open Hours

Add Opening hour here. Leave blank if not required.

Address

Add your address here. Leave blank if not required.

Display

Here you can choose to get the information (Phone number ,mobile number, Email, Open hours and Address) displays with Text or Icons.

Coming Soon

Here you can customize the maintenance mode page when your site is under construction/maintenance.

If we enable the development mode than it will take your site offline and show a static coming soon page

Logo

Here you can select a logo which will display on your coming soon Page, default template logo will be displayed if not selected.

Background Image

You can select a Background image for your coming soon page.

Title

Here you can Enter the Title for your Coming Soon Page which will be displayed when your site is under construction.

Countdown Date

Here you can set a date for countdown exactly when your site is going to be live.

Content

Enter description for your coming soon page.

Background Repeat

Set if/how a background image will be repeated.

Background Size

This property specifies the size of the background images.

Background Position

This property sets the starting position of a background image.

404 Error

Allows you to customize 404 page for your site

Call To Action

Enter text to dislay on Call To Action Button.

404 Page Content

Enter the content of your 404 page.

Favicon

Allows you to upload your browser URL icon. It’s recommended to apply a size of 96x96 pixels to the favicon icon

Favicon image

Select an icon for a favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon.

JD Gallery

With the help of this Joomla module, you can create an image gallery easily. You can publish this module on any page or section of the website.

JD Graph

JD Graph Joomla module allows you to showcase graph of your spendings. In this NGO Joomla template, we have used this module to showcase the amount an organization have sent to different countries for different causes.

JD SkillSet

This Joomla modules allows you to showcase your key features or achievements with a counter. In this Joomla template, we have used it to showcase how many schools/hospitals we have built, how many awards we got and how many volunteers joined us.

JD Timeline

Display timeline or roadmaps with the JD Timeline module. With various customizations and design options you can create timelines like the ones below.

JD Testimonials

As the name suggesting, this Joomla module is used to showcase what our visitors said about our programs. You don't have to play with coding, you simply need to put the content and you are done.

JD Profiles

JD Profiles in JD Desire Joomla template, we have created a component to manage the team which allows you to create team thumbnail and also detailed page where you can showcase all the details of a volunteer.

JD Tabs

JD Tabs Joomla module allow you to create content in tabular form. You can place an image on tab which is a unique feature of this Joomla module.

JD Donation

JD Donation Joomla module allows you to display a donation box where user can fill the amount and pay using PayPal.

Register Login

This extension enables you to manage both Login and registration from a module itself without having the user to go the registration page.

List of features:

Option to disable login and display only registration in the module.

reCAPTCHA Support.

Fields Validation.

Option to display Radio Buttons to switch between login and Register either at the top or bottom.

Ajax Registration helps to register without reloading the entire page.

Option to select the process for new user account activation

Option to manage terms of use on registration.

Manage label for the input fields with single click.

How to add Custom SCSS

Go to template directory and find scss folder and create a folder named custom.

Create a custom.scss file in custom folder.

How to add Custom CSS

Go to template directory and find css folder and create a custom.css

How to add Custom JS

Go to template directory and find js folder and create a custom.js

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.