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
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.
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.
|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. |
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: |
|Background Position||Choose the position for the background image from the Dropdown list.|
|Background Attachment||Set the background image attachment style: |
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.
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
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 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.
This options decides the animation that will be used for displaying the drop-down menu.
You can select a logo for desktop view, mobile view and sticky header.
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.
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.|
This section allows you to style the color schemes on your site.
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.|
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.|
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.|
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:
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).|
|Custom CSS||Here you can add custom CSS to add your own styles or overwrite default CSS, Wrapped within |
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.
Copyright is a small section at the bottom of each page. You can Enable or Disable the footer copyright bar, by enabling this section it enables you to edit the content of the bottom copyright information of the page.
|Custom HTML||Here we can enter the text that displays in the copyright bar.|
|Module Position||Select a suitable module position where you want to display this feature.|
|Featue Load Position||If there are other module(s) published to this module position, you can select to display the content of this feature either below or after the module(s) published to this position.|
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 mobile number here. Leave blank if not required.|
|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.|
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.|
Allows you to customize 404 page for your site
|Show Header||Select If want to show header.|
|Background Image||Set a Background Image for 404 Error Page|
|Logo||Set a logo for 404 Error Page, default template logo will be used if not selected.|
|Call To Action||Enter text to display on Call To Action Button.|
|404 Page Content||Enter the content of your 404 page.|
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.|
How to add Custom SCSS
How to add Custom CSS
How to add 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:
- 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.