JSN Fidem 2 Customization Manual Before We Start

Size: px

Start display at page:

Download "JSN Fidem 2 Customization Manual Before We Start"

Linda Simmons
5 years ago
Views:

JSN Fidem 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template.

1 JSN Fidem 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the most frequently asked customization questions and how to change the demo content in the sample data by your own data. We hope you can find the answer to your question here and satisfied with it. JSN PowerAdmin JSN PageBuilder 3 JSN PageBuilder 3 is built as a native Joomla! editor plugin. Therefore, it works perfectly on Joomla! articles, Custom HTML modules, and even third-party extensions. Besides editing articles in the backend, JSN PageBuilder 3 also enables you to edit your articles directly on the frontend thanks to the native Joomla! frontend editing mechanism. By using JSN PageBuilder 3, you can build complex Joomla! pages in minutes with no coding skills required. The FREE Edition of this extension is included when you install the sample data. You can download it for free here if you just install the layout and style of the template: Download JSN PageBuilder 3 For Free. ( Favicon Favicon is a small icon positioned on the left of the address bar of your browser. By default, Joomla! has an icon as shown on the screenshot below. Favicon presentation Here are instructions on how to do that: Step 1: Create Favicon File JSN PowerAdmin is a powerful tool that helps Joomla users enjoy Joomla with ease. This recommended tool is not only for Joomla newbies but also advanced users. It gets popular badge on JED and receives positive feedback from Joomla community. This extension is included when you install full sample data. You can download it for free here if you just install the layout and style of the template: Download JSN PowerAdmin For Free. ( Favicon is a regular 16px * 16px icon file with exact name favicon.ico. In most cases, favicon is the sized-down version of the company logo saved in the icon format. In some cases, the logo is too specific and favicon needs to be built from scratch. You can use some professional icon editor software like Axialis IconWorkshop ( Iconcool Editor ( to use online favicon generators. ( q=favicon%2bgenerator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla%3aen- GB%3Aofficial&client=firefox-a)The first method gives you better quality, but takes more effort. The second method is easier, but the quality is not the best.

Let s go to joomla_root_folder/images to create a new folder and upload the favicon file there.

2 Step 2: Upload Favicon File After you have got the favicon file, it is time to upload it to your server. You will need to upload the icon file to the template folder via FTP. Let s go to joomla_root_folder/images to create a new folder and upload the favicon file there. Upload favicon file Step 3: Change the favicon in the template settings Go to Extensions Templates Styles JSN Megazine 2- Default System tab Icons choose browse file in the Favicon parameter, here you need to select favicon.ico updated before, and then click on Save System to finish. Favicon selection Media selector is opened. Now, select your uploaded favicon file to change.

3 Select favicon file via media selector JSN Fidem Homepage The layout structure of JSN Fidem 2's homepage is was configured with several sections, built entirely by JSN Sun Framework and divided into 7 main sections as below.

5 JSN Fidem 2 Homepage presentation 1. Header Page 2. Main Menu 3. Promo 4. Main Content 5. Content Bottom 6. Content Bottom Below 7. Footer NOTE: As the JSN Fidem 2 - Default is assigning to all pages so we will edit it from here: Extensions Templates Styles JSN Fidem 2 - Default. If you choose the Green color as default, for example, please edit here: Extensions Templates Styles JSN Fidem 2 - Green color. JSN Fidem 2 Homepage - Default style Section: Header Page

6 Section: Header Page Header Page section presentation The Header Page section contains: 1. Layout Item: Logo 2. Module Position: Top Page To edit Top section, go to Extensions Templates Styles JSN Fidem 2 - Default Layout tab Header Page section. Header Page section configuration Now, let's go to the Logo Item: 1. Logo

7 Logo item configuration This logo item is created directly in JSN Sun Framework s Layout Manager. To config, click on logo item and make necessary changes to related settings on the right panel. Here you can change the Logo link on the desktop and mobile, Logo Alt, Text, Logo Link. 2. Top Page Top Page position configuration - Module position: top To edit this position, click View Modules Promo Top. Promo Top module This module is created by JSN PageBuilder 3 FREE Edition with some elements are: 1. Image Element 2. Heading Element 3. Paragraph Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Main Menu Main Menu section presentation

8 Main Menu section presentation By default menu of JSN Fidem 2 is Main Menu, you can change the menu by your own menu. Select the menu from your premade menus in the list to make it your site s main menu. Menu item configuration Enable Sticky Menu Your website will show a menu being sticky when the users scroll down the page. Sticky menu configuration To enable sticky menu you go to template layout, click on the Mainmenu Section and tick on the checkbox Enable Sticky. Section: Promo Promo section presentation

9 The Promo section contains four modules position, but three of them show on the homepage are: 1. Module Position: Promo 2. Module Position: Promo Right 3. Module Position: Content Top To edit Top section, go to Extensions Templates Styles JSN Fidem 2- Default Layout tab Promo section. Promo section configuration Now, let's go to each module position: 1. Promo Promo position configuration - Module position: promo To edit this position, click View Modules Homepage Slideshow. This area was built by JSN Imageshow Free Edition - a gallery extensions made by JoomlaShine.

10 Homepage Slideshow module configuration Module Class Suffix: demo-homepage-slider Showlist: Homepage Slideshow Showcase: Frontpage slideshow Overall width: 100% Overall Height: 430px Please refer to JSN Imageshow Documentation ( to see how to change the Showcase and Showlist. 2. Promo Right Promo Right position configuration - Module position: promo-right Once you have clicked View Modules Latest Blogs.

11 Latest Blogs module This module is created by JSN PageBuilder 3 FREE Edition with some elements are: 1. Image Element 2. Heading Element 3. Paragraph Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. 3. Content Top Content Top section configuration - Module position: content-top Select Content Top Click on View Modules search Join us every sunday. Join us every sunday module This module is created by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Icon Element 3. Paragraph Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Main Content

12 Main Content section presentation The layout for the Main Content section has 10 columns, but only one of them are used on the homepage is Main Body item.

13 Main Content section configuration The main body of JSN Fidem 2 is single articles with the menu Home, you can change them by a feature article item or other menu item type. Alternatively, you can go to Article Manager HP Fidem to change the default content by your own content. Home menu item configuration Click on Edit button or go to Articles Manager search HP Fidem to edit the contents. HP Fidem article

HP Fidem article This article is built by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Paragraph Element 3. Button Element 4. Image Element 5.

14 HP Fidem article This article is built by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Paragraph Element 3. Button Element 4. Image Element 5. Joomla Module Element: Upcoming Events HP (ID 244) You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Content Bottom Content Bottom section presentation To edit Content Bottom go to Extensions Templates JSN Fidem 2- Default Layout Content Bottom. Content Bottom section configuration - Module Position: content-bottom Select Content Bottom Click on View Modules to see modules assigned to this position.

Latest Updates module This module is created by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Tabs Element 3. Paragraph Element 4.

15 Latest Updates module This module is created by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Tabs Element 3. Paragraph Element 4. Joomla Module Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Content Bottom Below Content Bottom Below section presentation To edit Content Bottom Below section goes to Extensions Templates JSN Fidem 2- Default Layout Content Bottom Below. Content Bottom Below section configuration - Module position: content-bottom-below Once you have clicked View Modules you will see the all of the modules shown in this position.

Modules of the Content Bottom Below position 1. Donate Us Go to Module Manager search for Donate Us to show all of the customize inner this module.

16 Modules of the Content Bottom Below position 1. Donate Us Go to Module Manager search for Donate Us to show all of the customize inner this module. Donate Us module This module is built by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Paragraph Element 3. Button Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. 2. CTA About Us Go to Module Manager search for CTA About Us to show all of the customize inner this module. CTA About Us module This module is created by JSN PageBuilder 3 Free Edition with some elements: 1. Section Background: Click Section Styling tab Background Image. 2. Heading Element

2. Heading Element 3. Paragraph Element 4. Button Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module.

17 2. Heading Element 3. Paragraph Element 4. Button Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Footer Footer section presentation The Footer section contains: 1. Layout Item: Logo 2. Module Position: Footer 1 3. Module Position: Footer 2 4. Module Position: Footer 3 5. Module Position: Footer 4 6. Module Position: Footer To edit Footer section, go to Extensions Templates Styles JSN Fidem 2- Default Layout tab Footer section. Footer section configuration Now, let's go to edit each item: 1. Logo

18 Logo item configuration This logo item is created directly in JSN Sun Framework s Layout Manager. To config, click on logo item and make necessary changes to related settings on the right panel. Here you can change the Logo link on the desktop and mobile, Logo Alt, Text, Logo Link. 2. Footer 1 - Module position: footer-1 To edit this Footer 1 position, click on the position item on the layout View Modules Footer 1. Footer 1 module This module is built by JSN Pagebuilder 3 FREE Edition by elements: Paragraph. You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. 3. Footer 2 - Module position: footer-2 To edit this Page position, click on the position item on the layout View Modules Page. This module is a menu module, you can go to Module and Advanced tab to check all of the settings. Page module configuration You can check the same as positions: Footer 3 (Module: Features), Footer 4 (Module: Extensions). 4. Footer - Module position: footer Once you have clicked View Modules search Footer module.

Sticky Position JSN Fidem 2 includes six sticky positions on the top, middle and bottom sections.

19 Once you have clicked View Modules search Footer module. Footer module This module is created by JSN PageBuilder 3 FREE edition. This module included the only element is Paragraph. Sticky Position JSN Fidem 2 includes six sticky positions on the top, middle and bottom sections. Sticky positions presentation To setting for this sections, you can go to template settings page click on each position: Stick-lefttop, stick-righttop, stickleftmiddle, stick-rightmiddle, stick-leftbottom or stick-rightbottom, and then click on View Modules button on the page setting

20 leftmiddle, stick-rightmiddle, stick-leftbottom or stick-rightbottom, and then click on View Modules button on the page setting on the right to see the module was assigned for that position. Sticky positions configuration The image below shows all the sticky positions. You can replace them to your content by using CodeMirror or TinyMCE editor. Module the sticky positions

21 Module the sticky positions Go To Top To turn on/off the Go To Top button, click on the layout of the entire page Show Go To Top button. Go To Top configuration JSN Fidem 2 Church Homepage The layout structure of JSN Fidem 2's homepage is was configured with several sections, built entirely by JSN Sun Framework and divided into 7 main sections as below.

23 JSN Fidem 2 Homepage presentation 1. Header Page 2. Main Menu 3. Promo 4. Main Content 5. Content Bottom 6. Content Bottom Below 7. Footer NOTE: As the JSN Fidem 2 - Default is assigning to all pages so we will edit it from here: Extensions Templates Styles JSN Fidem 2 - Default. If you choose the Green color as default, for example, please edit here: Extensions Templates Styles JSN Fidem 2 - Green color.

24 JSN Fidem 2 Homepage - Default style Section: Header Page Header Page section presentation The Header Page section contains: 1. Layout Item: Logo 2. Module Position: Top Page To edit Top section, go to Extensions Templates Styles JSN Fidem 2 - Default Layout tab Header Page section.

25 Header Page section configuration Now, let's go to the Logo Item: 1. Logo Logo item configuration This logo item is created directly in JSN Sun Framework s Layout Manager. To config, click on logo item and make necessary changes to related settings on the right panel. Here you can change the Logo link on the desktop and mobile, Logo Alt, Text, Logo Link. 2. Top Page Top Page position configuration - Module position: top To edit this position, click View Modules Promo Top.

26 Promo Top module This module is created by JSN PageBuilder 3 FREE Edition with some elements are: 1. Image Element 2. Heading Element 3. Paragraph Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Main Menu Main Menu section presentation By default menu of JSN Fidem 2 is Main Menu, you can change the menu by your own menu. Select the menu from your premade menus in the list to make it your site s main menu. Menu item configuration Enable sticky menu Your website will show a menu being sticky when the users scroll down the page. Sticky menu configuration To enable sticky menu you go to template layout, click on the Mainmenu Section and tick on the checkbox Enable Sticky. Section: Promo

27 Promo section presentation The Promo section contains four modules position, but three of them show on the homepage are: 1. Module Position: Promo 2. Module Position: Promo Right 3. Module Position: Content Top To edit Top section, go to Extensions Templates Styles JSN Fidem 2- Default Layout tab Promo section. Promo section configuration Now, let's go to each module position: 1. Promo

28 Promo position configuration - Module position: promo To edit this position, click View Modules Homepage Slideshow. This area was built by JSN Imageshow Free Edition - a gallery extensions made by JoomlaShine. Homepage Slideshow module configuration Module Class Suffix: demo-homepage-slider Showlist: Homepage Slideshow Showcase: Frontpage slideshow Overall width: 100% Overall Height: 430px Please refer to JSN Imageshow Documentation ( to see how to change the Showcase and Showlist. 2. Promo Right

29 Promo Right position configuration - Module position: promo-right Once you have clicked View Modules Latest Blogs. Latest Blogs module This module is created by JSN PageBuilder 3 FREE Edition with some elements are: 1. Image Element 2. Heading Element 3. Paragraph Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. 3. Content Top Content Top section configuration - Module position: content-top Select Content Top Click on View Modules search Join us every sunday.

30 Join us every sunday module This module is created by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Icon Element 3. Paragraph Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Main Content Main Content section presentation

Main Content section presentation The layout for the Main Content section has 10 columns, but only one of them are used on the homepage is Main Body item.

31 Main Content section presentation The layout for the Main Content section has 10 columns, but only one of them are used on the homepage is Main Body item. Main Content section configuration The main body of JSN Fidem 2 is single articles with the menu Home, you can change them by a feature article item or other menu item type. Alternatively, you can go to Article Manager HP Fidem to change the default content by your own content. Home menu item configuration Click on Edit button or go to Articles Manager search HP Fidem to edit the contents.

32 HP Fidem article This article is built by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Paragraph Element 3. Button Element 4. Image Element 5. Joomla Module Element: Upcoming Events HP (ID 244) You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Content Bottom Content Bottom section presentation To edit Content Bottom go to Extensions Templates JSN Fidem 2- Default Layout Content Bottom.

Content Bottom section configuration - Module Position: content-bottom Select Content Bottom Click on View Modules to see modules assigned to this position.

33 Content Bottom section configuration - Module Position: content-bottom Select Content Bottom Click on View Modules to see modules assigned to this position. Latest Updates module This module is created by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Tabs Element 3. Paragraph Element 4. Joomla Module Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Content Bottom Below Content Bottom Below section presentation To edit Content Bottom Below section goes to Extensions Templates JSN Fidem 2- Default Layout Content Bottom Below.

Content Bottom Below section configuration - Module position: content-bottom-below Go to Module Manager search for Donate Us to show all of the customize inner this module.

34 Content Bottom Below section configuration - Module position: content-bottom-below Go to Module Manager search for Donate Us to show all of the customize inner this module. Donate Us module This module is built by JSN PageBuilder 3 Free Edition with some elements: 1. Heading Element 2. Paragraph Element 3. Button Element You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Section: Footer Footer section presentation The Footer section contains: 1. Layout Item: Logo 2. Module Position: Footer 1 3. Module Position: Footer 2 4. Module Position: Footer 3

4. Module Position: Footer 3 5. Module Position: Footer 4 6. Module Position: Footer To edit Footer section, go to Extensions Templates Styles JSN Fidem 2- Default Layout tab Footer section.

35 4. Module Position: Footer 3 5. Module Position: Footer 4 6. Module Position: Footer To edit Footer section, go to Extensions Templates Styles JSN Fidem 2- Default Layout tab Footer section. Footer section configuration Now, let's go to edit each item: 1. Logo Logo item configuration This logo item is created directly in JSN Sun Framework s Layout Manager. To config, click on logo item and make necessary changes to related settings on the right panel. Here you can change the Logo link on the desktop and mobile, Logo Alt, Text, Logo Link. 2. Footer 1 - Module position: footer-1 To edit this Footer 1 position, click on the position item on the layout View Modules Footer 1. Footer 1 module This module is built by JSN Pagebuilder 3 FREE Edition by elements: Paragraph. You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. 3. Footer 2

36 3. Footer 2 - Module position: footer-2 To edit this Page position, click on the position item on the layout View Modules Page. This module is a menu module, you can go to Module and Advanced tab to check all of the settings. Page module configuration You can check the same as positions: Footer 3 (Module: Features), Footer 4 (Module: Extensions). 4. Footer 3 - Module position: footer-3 To edit this Footer 3 position, click on the position item on the layout View Modules Socials. Socials module This module is created by JSN PageBuilder 3 FREE edition. This module included only element is List. 5. Footer 4 - Module position: footer-4 Once you have clicked View Modules search Connect with us module.

37 Contact with us module This module is created by JSN PageBuilder 3 FREE edition. This module included only element is List. Extra Pages There are 5 extra pages in JSN Fidem 2: Quick Tour, About Us, Contact Us, Coming Soon, 404. All these pages are built by JSN Pagebuilder 3 FREE Edition. Settings for all the related elements can be seen in the PageBuilder 3 Documentation ( Quick Tour

39 Quick Tour page presentation The Quick Tour page contains modules: 1. Quick Tour Promo module 2. 3rd Party extensions module 3. Main Features QT module 4. Multiple Colors module About Us

40 About Us page presentation The About page contains modules/article: 1. About Us Promo module 2. About Us article Contact Us

41 Contact page presentation Go to Articles Manager search Contact Us. Elements on this article: 1. GMap Element 2. Heading Element 3. Paragraph Element 4. Joomla Module: Contact Us ID 170. You should check all of the tabs: General, Styling and Advance to review all of the customize for each element in this module. Coming Soon

42 Coming Soon page presentation To edit it, go to Extensions Templates Style JSN Fidem 2 - Coming Soon. Coming Soon style To edit the contents of this page, go to Article Manager Coming Soon. 404 Page 404 page presentation To custom for this page, go to template setting page Extras tab Custom 404 click on Enable Custom 404.

43 404 page configuration After saving custom 404, you can see Destination Article is 404 error (ID: 137), click on Edit Article to adjust content for this page. Colors Variations JSN Fidem 2 provides six major color variations for you to choose from. Each color variation covers not only the main background, but also fills the drop-down menu, links, table s header and some others. All available colors are described below.

44 Theme Blue Theme Green Theme Violet Theme Red Theme Orange Theme Cyan To change template's color, you can go to tempalte style list, switch style from default to another style.

45 Template Styles List Here you can see eight styles of JSN Fidem 2. In each style color of template, we included logo image, general color different from other styles. The layout of them the same with style default, you can open each of them to check the setting and customizations. Template Configuration Now as you have learned how to customize the template. To fully understand the template's structure and hot features, please navigate to JSN Fidem 2 Configuration Manual. JSN FIDEM 2 CONFIGURATION MANUAL (

JSN Solid 2 Customization Manual Before We Start

JSN Solid 2 Customization Manual Before We Start The first thing we would like to say is this guide is not intended to cover everything you might want to customize the template. Here we disclose only the