JSN Sun Framework Tutorials | Video 8: System Configuration

JSN Sun Framework Tutorials | Video 8: System Configuration

September 12, 2019 0 By Bernardo Ryan


In this tutorial, we will learn about how to configure the website system, another one of the unique and useful features of the JSN Sun Framework. JSN Epic template will be used as an example in this video. Now, let’s take a quick look the System Configuration. Go to Templates manager under Extensions, choose JSN Epic 2 – Default, Then click on the System tab. This System Configuration offers some down-to-earth but amazing features that most web owners need such as: Adding website favicon icon, Assets Optimization, Adding external tracking codes, Adding custom CSS and JS, Let’s get started to adding website favicon icon. This feature allows you to add a favicon for your website, make sure that your icon file is “.ico” type and the size should be 16×16 pixels. Upload and select your icon via media selector. Click on Save System and go to the front page, refresh to check the favicon. Next, explore the Assets Optimization. Here you can configure the compression settings such as: Asset Compression allows you to compress both CSS and JS, Only CSS, Only JS or nothing. Max File Size allows you to define the maximum size a compressed file can be. It’s recommended to set 100KB for most servers. Cache Directory allows you to specify the directory for storing compressed CSS/JS files. Exclude from Compression allows you to set a list of files you don’t want to be compressed. Enable Minify HTML, this will removes all empty spaces found either at the start or the end of each line or all the empty line. And Move JS to Bottom option allows you to move all script tag from header section to the end of body section. The next one is Adding External Tracking Codes. You can utilize this feature to add tracking codes required by Google Analytics, Google Tag Manager, or those of other tracking services before and after head and body tag. Hit Save System to save all the codes added. Finally is Adding Custom CSS and JS feature. For all customization purposes, Sun framework allows you to load multiple CSS/JS files, you customized without altering the template core files. To create your custom CSS or JS files, go to Templates manager under Extensions, click on Templates of the side menu on the left, and select Jsn_epic2_pro Details and Files. Here, click on New File button on the toolbar, enter the file name, choose a file type and click on Create button to create a new file. Now you can feel free to write your custom css code to new file. Do the same to create a CSS file if you want to create a JS file. Enter the file name, select JS file type and click on Create button. Here is your custom JS file. Only custom CSS, if you don’t want to create new file, you can use custom.css available file in the template. Let’s try to add CSS code to change the color of the section Main Menu. In the frontend, inspect element to get id of section main menu. Go back to custom.css available file in the template to add the CSS code for this id. We will set new background color is blue. Save the custom code. The next step is go to System Configuration page to put custom CSS/JS files. For the available file, you need to put the path of this file, with your own file just put the file name. Do the same if you want to load your custom JS. Don’t forget to save system. Go to frontend, and refresh to check the changes. The menu color has been changed from black to blue. Thank you for watching. Please check our other videos to learn more about how to work with the JSN Sun Framework.