JD Seattle is a FREE multipurpose business Joomla template powered with powerful Astroid Framework and Bootstrap 4 framework. So if you are planning to develop a business, agency, travel or any portfolio website and running on a tight budget, JD Seattle is a perfect Joomla template for your business website.


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..

Click here to know how to add SCSS/CSS/JS file

Installing Extensions

To Install/update for Extensions:

For free version: Go to Extensions > manage> Update, select respective extension for update> Click on update.

For Paid version: Download the latest files, then go to your Admin panel-> Extension-> Install, Install the respective files.

NOTE: If "paid" version of extensions are updated via Joomla's updater you will downgrade extension to "free" version.

Basic Settings

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


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

AnimationHere you can select the animation for the preloader from the list.
ColorHere you can set the color of the animated element of a preloader.
BackgroundHere you can select the preloader background color which is to be displayed as a background for the preloader.
SizeThis 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.

IconHere you can select the icon style for your Back to top Button from the dropdown list.
Icon SizeYou can easily set the size of the icon in pixel to it’s is maximum value by moving an indicator in a horizontal fashion.
ColorHere you can set the icon color for back to top button.
BackgroundYou can set the background color for back to top button.
ShapeYou 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 ImageSelect a Background Image for boxed layout.
Background RepeatAllows 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 SizeAdjust the background image displaying. You can select one of the following values: cover, contain and inherit.
Background PositionChoose the position for the background image from the Dropdown list.
Background AttachmentSet 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 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.

  1. 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.

  2. 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.

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 tag-line as well.


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



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


Here you can configure color settings for the body.

Background ColorAllows you to set the default Background color for the body for the whole site.
Text ColorSet the Text color of the Body Content.
Link ColorSet the color of the link in the Body Content.
Link Hover ColorSet the color for hovered links; links hover when the mouse moves over it.
body color


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

Background ColorAllows you to set the default Background color for the Header section for the whole site.
Text ColorSet the Text color for the Header section.
Logo Text ColorSet color for your text logo.
Logo Tag Line ColorSet color for Tag Line in your text logo.
Backgroud Color for sticky headerSet background color of the Sticky Header.
heade color


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

Background ColorSet the default Background color for the Off-Canvas Menu.
Text ColorSet the Text color for the menu items in the Off-Canvas.
Link ColorSet the color of the link in the Off-Canvas menu for menu and Sub-menu items.
Active Link ColorSet the color for the active links (links become active once you click on them).
Active Background ColorSet the Background color for the active links.


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.

Footer color

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

  1. header
  2. header-top-1
  3. header-top-2
  4. header-top-3
  5. header-top-4
  6. banner
  7. slider
  8. astroid-top-contact
  9. astroid-top-social
  10. astroid-content-left
  11. astroid-home-page
  12. astroid-header
  13. astroid-footer
  14. breadcrumbs
  15. content
  1. position-1
  2. position-2
  3. position-3
  4. position-4
  5. position-5
  6. position-6
  7. position-7
  8. position-8
  9. position-9
  10. position-10
  11. position-11
  12. position-12
  13. position-13
  14. position-14
  15. position-15
  1. position-16
  2. position-17
  3. position-18
  4. position-19
  5. position-20
  6. left
  7. right
  8. bottom-1
  9. bottom-2
  10. bottom-3
  11. bottom-4
  12. footer-1
  13. footer-2
  14. fullwidth
  15. offcanvas
  16. debug


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 FamilySelect 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 FamilyIf the browser does not support the first font family, it tries the Alternate font family.
Font WeightSelect the font weight from the list, it will define how bold your text are.
Font SizeSet the font size you need to use in the text element.
Letter SpacingSet the needed distance between letters.
Line Heightline-height property specifies the height of a line.
Text TransformSet the font transformation, if needed (uppercase, capitalize and lowercase).

Custom Code

Here we can add Custom CSS , Custom Javascript

Tracking CodeA 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 CSSHere you can add custom CSS to add your own styles or overwrite default CSS, Wrapped within <style> tags.
Custom JSHere you can add custom javascript code here, Wrapped within <script> tags.
custom code

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:
    1. Inherit color.
    2. Brand color.
      In this section we have in all 19 types of Social Profiles :
      1. Behance
      2. Dribbble
      3. Facebook
      4. Flickr
      5. GitHub
      6. Google +
      7. Instagram
      8. LinkedIn
      9. Messenger
      10. Pinterest
      11. reddit
      12. Skype
      13. Slack
      14. SoundCloud
      15. Spotify
      16. Twitter
      17. Telegram
      18. Tumblr
      19. VK
      20. WhatsApp
      21. YouTube
custom code


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 PositionSelect a suitable module position where you want to display this feature.
Featured Load positionIf 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 NumberAdd phone number here. Leave blank if not required.
Mobile NumberAdd mobile number here. Leave blank if not required.
EmailAdd email address here. Leave blank if not required.
Open HoursAdd Opening hour here. Leave blank if not required.
AddressAdd your address here. Leave blank if not required.
DisplayHere you can choose to get the information (Phone number ,mobile number, Email, Open hours and Address) displays with Text or Icons.
Contact Information

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

LogoHere you can select a logo which will display on your coming soon Page, default template logo will be displayed if not selected.
Background ImageYou can select a Background image for your coming soon page.
TitleHere you can Enter the Title for your Coming Soon Page which will be displayed when your site is under construction.
Countdown DateHere you can set a date for countdown exactly when your site is going to be live.
ContentEnter description for your coming soon page.
Background RepeatSet if/how a background image will be repeated.
Background SizeThis property specifies the size of the background images.
Background PositionThis property sets the starting position of a background image.
Coming Soon

404 Error

Allows you to customize 404 page for your site

Show HeaderSelect If want to show header.
Background ImageSet a Background Image for 404 Error Page
LogoSet a logo for 404 Error Page, default template logo will be used if not selected.
Call To ActionEnter text to display on Call To Action Button.
404 Page ContentEnter the content of your 404 page.
Coming Soon


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

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

How to add Custom SCSS

  1. Go to template directory and find scss folder and create a folder named custom.
  2. Create a custom.scss file in custom folder.

How to add Custom CSS

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

How to add Custom JS

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

How to remove white space from a page?

Just add a simple class under Page Display tab.


  • 1) GO to Menu > Select the menu item
  • 2) Find Page Display Tab
  • 3) Add a class in Page Class: "article-padding-none"
  • 4) At last save and close


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.