Drop Files Joomla Nulled Templates

3 views

Skip to first unread message

January Winslette

unread,

Dec 7, 2023, 8:26:22 PM12/7/23

to GEPS71-76

Dropfiles, the easiest and powerful files manager for Joomla. The AJAX interface save you a lot of time and allows you to manage a massive amount of files. Now it comes with a Google Drive integration.

No more need to go in a component and go back in a menu or in an article to manage files. You just need to create a category of file, drag and drop files, then insert your file or category in your editor. Upload and display as many files as you want in only 3 clicks.
You can also apply advanced file restriction access for file administrator and for end users. Native Joomla access level can be applied in one click on each file category and you can set authorized action for file administrator. Dropfiles works the same for backend and frontend. Perfect to work fast to all type of user.

Check the video demo here:

The Google Drive integration brings a two way sync system, you can add and sync files from Dropfiles or from Google Drive. An import file tool is also available to take back files from other component or server folder.

** Administration main features **

- K2 dedicated integration: manage categories of files and single files from K2 item main editor. no need to load a third party component.
- Upload and display files in 3 click
- Manage files, categories, file options, themes from the text editor (no need to go in the component)
- File and categories are automatically opened on editor button click
- Apply one of the 4 theme per category
- Set category level and ordering using drag'n drop
- Category accordion and compact interface to manage numerous files
- File import from any other component or server folder
- Order files with drag'n drop
- Possibility to restrict file display / category per Joomla user
- Possibility to copy or move files (copy/cut/paste) from one categories to another with drag'n drop
- Advanced ordering tool: order file by type, title, description, file size, date, version, hits
- Advanced ACL for file administrators by action (create, update files, manage own files,...)
- Column AJAX filtering in file listing
- Send custom Email notification on action: file upload, file modification, file download, file remove
- Define the display information in theme
- HTML5 fast uploader
- Create a theme easily, just duplicate a folder
- jQuery compatibility parameters
- Download and upload files from mobile devices
- Backend mobile support
- Add a remote download file (file stored on an external server)

** Frontend main features **

- Frontend file management with dedicated template
- Manage all files in the same way as in the backend
- 4 responsive themes with icons set
- Native Joomla ACL on files categories in one click
- Google previewer tool integrated
- Video and sound player
- SEO optimization with file rename and prefix option
- Visual customization of each theme
- File search engine with plein text
- File seach and filtering by categories, tags or dates
- Define ACL on file action (edit file, edit own files, delete files...) per joomla user groups

** Google Drive integration **

- Connect with your Google Drive account
- Insert and manage Google Drive category of files
- Files are uploaded in a dedicated folder and sub folder on your Drive
- Upload files on Google Drive website folder and push the files on your Joomla website!
- Title, version, description are also sync
- Preview and download of native Google documents

Drop Files Joomla Nulled Templates

DOWNLOAD https://shurll.com/2wJ1uX

Templates can also be installed via FTP without packaging them. Simply select the template folder on your PC and upload it to your server, using your favourite FTP software. Be sure you upload the template folder to the directory: /path_to_joomla/templates/ - where /path_to_joomla/ is the location of your Joomla! installation on the server. This method is mostly used when you have created a template yourself, and do not want to have to package it to install the template, or if you want to upload more than one template at once. You must then go into extension manager and click on Discover in the sub menu. Click on "Discover" in the toolbar if your template doesn't immediately appear. A list of uninstalled items in the FTP should then appear. Click the checkbox to the left of your template and click on the button 'Install'.

The most basic files, such as index.php, component.php, templateDetails.xml, template_thumbnail.png, favicon.ico, params.ini should be placed in your /templates folder. The usual practice is to place images, CSS files, JavaScript files etc. in separate folders. The Joomla override files must be placed in folders in the /templates//html folder.

When making the template folder, your language files should be copied to your /templates folder. The ones for the Frontend site should be placed directly in the template folder. If you have language files for the Backend, these should be placed in a folder, named, for instance, /administrator. All the language files will be copied automatically to the right folders if listed correctly in the templateDetails.xml.

Templates can also be installed via FTP without packaging them. Simply select the template folder on your PC and upload it to your server, using your favourite FTP software. Be sure you upload the template folder to the directory: /path_to_joomla/templates/ - where /path_to_joomla/ is the location of your Joomla! installation on the server. This method is mostly used when you have created a template yourself, and do not want to have to package it to install the template, or if you want to upload more than one template at once. You must then go into Extension manager and click on Discover in the sub menu. Click on "Discover" in the toolbar if your template doesn't immediately appear. A list of uninstalled items in the FTP should then appear. Click the checkbox to the left of your template and click on the button 'Install'.

T4 Framework is a powerful and advanced responsive template framework for Joomla. It is a modern, flexible and highly customizable framework to build beautiful Joomla websites easier.\r\n\r\nThe all-new, modern and flexible Joomla framework features:\r\n\r\n

New admin panel interface\r\n\t
New layout builder\r\n\t
New megamenu builder\r\n\t
Theme customization tool\r\n\t
Advanced site configuration options\r\n\t
CSS and JS optimization\r\n\t
Bootstrap 4 integation, developed with SASS\r\n\t
Custom code\r\n\t
Custom CSS\r\n\t
And more\r\n\r\n\r\nT4 Demo T4 Features\r\n\r\nCopyrights and License\r\n\r\nT4 Framework is licensed under a GPL open source license. It is free to download and use. You can sell your own template based on T4 framework, no license fee or credit required. But please do not remove copyrights from the source code.\r\n\r\n
- Copyright (C) 20021 joomlart.com. All rights reserved.\r\n\t
- Distributed under the GNU General Public License version 2 or later.\r\n\r\n\r\nSystem Requirements\r\n\r\nT4 Framework is native with the latest Joomla 4 and Joomla 3. Please make sure your system meets the latest Joomla requirements, you can check the following requirements:\r\n\r\n\r\nJoomla 4 system requirements:\r\n\r\n\r\n\t\r\n\t\r\n\t\tSoftware\r\n\t\tRecommended\r\n\t\tMinimum\r\n\t\tMore Info\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\tPHP\r\n\t\t8.0\r\n\t\t7.2.5\r\n\t\t\r\n\t\t\thttps:\/\/www.php.net\r\n\t\t\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\tSupported Databases\r\n\t\r\n\t\r\n\t\tMySQL\r\n\t\t5.6 +\r\n\t\t5.6\r\n\t\t\r\n\t\t\thttps:\/\/www.mysql.com\r\n\t\t\r\n\t\r\n\t\r\n\t\tPostgreSQL\r\n\t\t11.0 +\r\n\t\t11.0\r\n\t\t\r\n\t\t\thttps:\/\/www.postgresql.org\/\r\n\t\t\t(ext\/pgsql support in PHP has been removed. Now uses the PostgreSQL PDO Driver)\r\n\t\t\r\n\t\r\n\t\r\n\t\r\n\t\r\n\t\tSupported Web Servers\r\n\t\r\n\t\r\n\t\tApache\r\n\t\t2.4 +\r\n\t\t2.4\r\n\t\t\r\n\t\t\thttps:\/\/www.apache.org\r\n\t\t\t(with mod_mysql, mod_xml, and mod_zlib)\r\n\t\t\r\n\t\r\n\t\r\n\t\tNginx\r\n\t\t1.18 +\r\n\t\t1.10\r\n\t\t\r\n\t\t\thttps:\/\/www.nginx.com\/resources\/wiki\/\r\n\t\t\r\n\t\r\n\t\r\n\t\tMicrosoft IIS\r\n\t\t10 +\r\n\t\t8\r\n\t\t\r\n\t\t\thttps:\/\/www.iis.net\r\n\t\t\r\n\t\r\n\t\r\n\r\n\r\nJoomla 3.x system requirements:\r\n\r\n\r\n\r\n\r\n\tSoftware\r\n\tRecommended\r\n\tMinimum\r\n\tMore Info\r\n\r\n\r\n\r\n\r\n\tPHP\r\n\t8.0\r\n\t5.3.10\r\n\t\r\n\t\thttps:\/\/www.php.net\r\n\t\t(Magic Quotes GPC, MB String Overload = off)
  (Zlib Compression Support, XML Support, INI Parser Support, JSON Support, MB Language = Default)\r\n\t\r\n\r\n\r\n\r\n\r\n\tSupported Databases\r\n\r\n\r\n\tMySQL\r\n\t5.5.3 +\r\n\t5.1\r\n\t\r\n\t\thttps:\/\/www.mysql.com\r\n\t\t(InnoDB support required)\r\n\t\r\n\r\n\r\n\tSQL Server\r\n\t10.50.1600.1 +\r\n\t10.50.1600.1\r\n\t\r\n\t\thttps:\/\/www.microsoft.com\/sql\r\n\t\r\n\r\n\r\n\tPostgreSQL\r\n\t9.1 +\r\n\t8.3.18\r\n\t\r\n\t\thttps:\/\/www.postgresql.org\/\r\n\t\r\n\r\n\r\n\r\n\r\n\tSupported Web Servers\r\n\r\n\r\n\tApache\r\n\t2.4 +\r\n\t2.0\r\n\t\r\n\t\thttps:\/\/www.apache.org\r\n\t\t(with mod_mysql, mod_xml, and mod_zlib)\r\n\t\r\n\r\n\r\n\tNginx\r\n\t1.8 +\r\n\t1.0\r\n\t\r\n\t\thttps:\/\/www.nginx.com\/resources\/wiki\/\r\n\t\r\n\r\n\r\n\tMicrosoft IIS\r\n\t7\r\n\t7\r\n\t\r\n\t\thttps:\/\/www.iis.net\r\n\t\r\n\r\n\r\n","id":"2108"},"title":"Installation instructions","url":"\/documentation\/t4-framework\/installation-instructions","content":"Installation instructionsThe section will help you with steps to install T4 template framework. There are 2 options to install T4 Template framework:\r\n\r\n\r\n
- Quickstart installation: replicate T4 demo to your server.\r\n
- Manual installation: install template, plugin manually on your Joomla site\r\n\r\n\r\n Download packages\r\n\r\n T4 Framework download section includes following files:\r\n\r\n \r\n
- T4 Framework for Joomla 4 - quickstart\r\n
- T4 Framework for Joomla 3 - quickstart\r\n
- T4 Blank Bootstrap 5 Template\r\n
- T4 Blank Template\r\n
- T4 System Plugin\r\n \r\n\r\n \r\n \r\n Download T4 Framework \u2192\r\n\r\n 1. Quickstart installation\r\n\r\n Using quickstart installation allows you to replicate T4 demo to your server with all T4 extensions installed and demo content Site Template Styles and set the T4 Blank template as your website default template style.\r\n\r\n \r\n\r\n\r\n Install T4 Framework on your Joomla 3 website\r\n \r\n From your back-end setting panel, go to: \"Extensions \u2192 Extension Manager\", browse T4 plugin installation file then hit the \"Upload and Install\" \r\n \r\n By default, T4 plugin will be auto-enabled after installed. You can check this by going to: \"Extensions \u2192 Plugin Manager\" then find T4 Plugin.\r\n\r\n \r\n \r\n Step 2: Install T4 Blank template\r\n \r\n From your back-end setting panel, go to: \"Extensions \u2192 Extension Manager\", browse T4 Blank template installation package then hit the \"Upload and Install\".\r\n \r\n Go to: \"Extensions \u2192 Template Manager\", set T4 Blank template style as your default template style.\r\n \r\n \r\n\r\n Upgrade instruction\r\n\r\n Take a full backup before doing upgrade\r\n\r\n Please always make a back-up before proceeding to any of the upgrade processes. In case there is any problem, you can always restore from the back-up files.\r\n\r\n The best method to upgrade JoomlArt products is using JA Extension Manager. The FREE extension brings a new way to manage extensions: upgrade , roll back, remote install, internal repository and compare versions and more.\r\n\r\n 1. Set up JA Extension Manager Component\r\n \r\n Download this free extension from this link. Install the extension to your website.\r\n\r\n Go to Components \u2192 JA Extension Manager then select Service Manager, now set JoomlArt as your default service. Next, hit the \"Edit\" button then add your account.\r\n \r\n \r\n \r\n 2. Upgrade T4 framework plugin and T4 Blank template\r\n \r\n Using the search and filter to find T4 plugin and T4 Blank template then hit the button Check Update to check new versions of those extensions.\r\n \r\n \r\n\r\n You can check changelog, compare files and update to the new version. You can roll back to the old version if the upgrade has issue.\r\n\r\n \r\n\r\n 3. Upgrade other JA extensions\r\n \r\n In case you use other products from JoomlArt, you can use the JA Extension Manager to update to the new version just like you did for T4 Framework.\r\n\r\n Using the filter to find the extensions you want to upgrade (JoomlArt products only), hit the \"Check Update\" button to check for new version then hit the Upgrade Now to upgrade the extension to latest version.\r\n\r\n Check out more details about JA Extension manager\r\n\r\n ","id":"2109","title":"Getting Started","url":"\/documentation\/t4-framework\/getting-started","content":"Getting StartedHelpful information before you start working with T4 Joomla template framework.\r\n\r\nAccess working panel\r\n\r\nOn Joomla 4\r\n\r\nTo access working panel of T4 Blank template (or any template built with T4 Framework), from your site back-end, go to System > Site Template styles.\r\n\r\n\r\n\r\nIn the panel, you will see list of all front-end template styles. Select T4 template style.\r\n\r\n\r\nOn Joomla 3\r\n\r\nOn Joomla 3, go to Extensions > Templates and open the T4 template style you just installed.\r\n\r\n\r\n\r\nEnable Dark Mode\r\n\r\nT4 Framework working panel supports light theme and dark theme. To enable the Dark theme, from the setting panel, enable the Dark Mode option on the toolbar bottom.\r\n\r\n\r\n\r\nCreate a new T4 template style\r\n\r\nFor each T4 template, you can create multiple template styles with different settings and assign to specific menu items. \r\n\r\nTo create new template style, you can duplicate the default style or you can save as copy in setting panel of any style.\r\n\r\nDuplicate a template style in Joomla 4\r\n\r\n\r\n\r\nDuplicate a template style in Joomla 3\r\n\r\n\r\n\r\nOr Save as Copy\r\n\r\n\r\n\r\nEnable Development Mode\r\n\r\nWhen you are developing your site, you should enable this option so any update you made will be instantly displayed, no cache.\r\n\r\nTo enable or disable this option, go to System > Global Configuration > System and find the option Devlopement Mode.\r\n\r\n\r\n\r\nAnd when you are not developing your site, you should disable the option to activate T4 cache and improve your site performance.\r\n\r\n\r\n\r\n\r\n","id":"2110","title":"Site Settings","url":"\/documentation\/t4-framework\/site-settings","content":"Site SettingsThe site settings include configuration for your site name, logo and page display.\r\n\r\nSite Setting Profile\r\n\r\nSite Settings panel includes configuration for the site name, site slogan, logo image, custom favicon and more. Now, you can create multiple Site Settings profiles with different configurations for the mentioned settings and assign the profile for different template styles. Thus, you could have different logos, favicon, site name for different pages.\r\n\r\nIn which cases you can use the Site Settings Profile?\r\n\r\n
  \r\n\t
  Want to have different logo, favicon on different pages\r\n\t
  Want to have different site name, site slogan on different pages\r\n\r\n\r\nCreate new Site Settings profile\r\n\r\n\r\n\r\nAssign profile for the template style\r\n\r\n\r\n\r\nYou have full control of the Site Settings profile:\r\n\r\n
  \r\n
  Configure all available settings in the Site Settings\r\n
  Restore default settings of default Site Settings profile\r\n
  Clone any Site Settings profile\r\n
  Delete profile (only cloned items)\r\n\r\n\r\nSite name & Logo Settings\r\n\r\nThe configuration panel includes settings for site name, site slogan, and logo. The settings can be different from different profiles. \r\n\r\n\r\n\r\n
  \r\n\t
  Site name: added to the title tag of site name. In case the logo image is not set, the site name will be used as text logo.\r\n\t
  Site slogan: add slogan for the site. When text logo is used, the slogan will be shown below text logo.\r\n\t
  Logo Image: browse logo image or upload logo image.\r\n\t
  Logo on mobile: the logo image will be shown on mobile layout. If it is not set, it will use global logo.\r\n\r\n\r\n\r\n\r\nOther settings\r\n\r\nFor now, the panel includes 2 settings for custom favicon and back to top button.\r\n\r\n\r\n\r\n
  \r\n\t
  Change favicon: browse image for the site favicon. You can browse any image, it will be auto generated to .ico file and it will stored in folder: media\/t4\/t4_blank\/\r\n\t
  Show back to top button: enable this option to show the Back to top button.\r\n","id":"2111","title":"Global Settings","url":"\/documentation\/t4-framework\/global-settings","content":"Global SettingsThe Global settings include configuration for CSS & JS optimization, Custom code and Addons management.\r\n\r\nCSS & JS Optimization\r\n\r\nWhat is JavaScript (JS) and CSS Optimization ?\r\n\r\nIn short, JS and CSS optimization is the process of making your website smaller and faster to load by minifying the JS and CSS codes.\r\n\r\nThe JS and CSS optimization includes:\r\n\r\n
  \r\n\t
  Removes whitespace\r\n\t
  Combine T4 Framework JS and CSS files and relement Joomla JS, CSS files.\r\n\t
  Remove unnecessary and redundant JS, CSS codes\r\n\t
  Optimize\/shorten comment programming patterns.\r\n\r\n\r\nEnable CSS & JS optimization in T4\r\n\r\nThe new modern T4 framework comes with built-in CSS and JS optimization options that will remove unnecessary and redundant codes in CSS, JS files to reduce file size & combine CSS and JS files to decrease file size number of requests will be decreased and page load speed will be faster.\r\n\r\nTo enable this option, from T4 template style setting panel, open the Global Settings > Optimization and turn on CSS and JS Optimization options then save.\r\n\r\n\r\n\r\nCSS and JS optimization options help compress almost all template's CSS and Javascripts and relevant Joomla's files to improve website performance.\r\n\r\nWhen CSS & JS optimization is ENABLED\r\n\r\n\r\n\r\nWhen CSS & JS optimization is DISABLED\r\n\r\n\r\n\r\nImprove your website page speed score\r\n\r\nPage loading helps you to give a better experience to visitors and also improve your SEO score. You can test the page load speed using different online tools. We recommend 2 popular tools: Google PageSpeed Insights and Pingdom.\r\n\r\nWhen enable CSS & JS optimization\r\n\r\n\r\n\r\nWhen disable CSS & JS optimization\r\n\r\n\r\n\r\nHow to exclude specific JS and CSS files from compression ?\r\n\r\nT4 framework will give you full control over the optimization and compression tool. If any of CSS and JS file you do not want to compress, you can exclude the files from optimization by adding the files in the file exclude field.\r\n\r\n\r\n\r\nYou can add full path to the JS, CSS files\r\n\r\ntemplates\/t4_blank\/js\/scripts.js\r\n\r\nor add the file name only.\r\n\r\ncustom.css\r\n\r\nCustom Code\r\n\r\nYou can insert any CSS, JS, meta tags, links, and verification codes using the custom code option. With multiple options to add custom to specific tags.\r\n\r\n\r\n\r\n
  \r\n\t
  After : the code added to this field will be inserted after tag\r\n\t
  Before : the code added to this field will be inserted before tag\r\n\t
  After : the code added to this field will be inserted after tag\r\n\t
  After : the code added to this field will be inserted before tag\r\n\r\n\r\nSome cases you can use the custom code feature:\r\n\r\nGoogle Analytics: you can quickly add Google Analytics code for your website to the field: Before \r\n\r\nLive chat integration: the live chat service provider normally proivde you scripts to add to specific tag to embed the live chat. \r\n\r\nAddthis: if you use the social sharing took, you can add the scripts to the field Before \r\n\r\nAddons Management\r\n\r\nThe Add-ons panel includes settings to enable or disable font icons like Font awesome, Iconmoon. When an Addon is disabled, its CSS and JS will not be loaded in your website, this is to help keep your site clean and load faster.\r\n\r\n\r\n\r\nAdd custom Addons\r\n\r\nYou can add your custom addons to load specific CSS and JS files. \r\n\r\nFor example, you want to use Owl Carousel, you can download the library, add to your template folder: \r\n\r\ntemplates\/t4_blank\/js\/owl-carousel\/\r\n\r\n\r\n\r\nNext, create new addons, add addon name and CSS & JS files. You can add multiple files by putting each file in one line.\r\n\r\n\r\n","id":"2127","title":"Layout Builder","url":"\/documentation\/t4-framework\/layout-builder","content":"Layout BuilderT4 Framework comes with super powerful layout builder tool, make it easy and fun to build from basic to a complicated layout without any coding.\r\n\r\nThe section helps you understand more about T4 Joomla template framework layout builder, how it works and how to fully manage your website layouts.\r\n\r\n\r\nT4 Layout Builder Intro\r\n\r\nLayout builder is one of the amazing features in T4 Framework to help you build from simple to complicated layout with ease based on module positions and to customize the existing template in almost any shape without code customization.\r\n\r\nA layout is a set of sections (rows), each row can have different settings and include one or multiple columns.\r\n\r\n\r\n\r\nQuick overview about T4 layout builder: \r\n\r\n
  \r\n
  A layout is set of sections (rows).\r\n
  Each row has its own settings and can include one or multiple columns.\r\n
  Supports multiple content type to assign to column\r\n
  Drag and drop to move a section\r\n
  Add new section on any place you want\r\n
  Support 2 header styles by default\r\n\r\n\r\nLayout grid\r\n\r\nT4 integates Bootstrap 4 and its layout is based on 12 column layout from Bootstrap 4 with powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.\r\n\r\nWhen create a section, you can use set number of columns and configure width for each column (based on 12 column grid). The grid system is responsive by default where columns are re-arranged depending on the screen size. You can also customize the width of each column on specific responsive layout. \r\n\r\n\r\n\r\nManage Layouts\r\n\r\nAssign layout for a template style\r\n\r\nIn the Layout setting panel, there are multiple default layouts, user can quickly select a layout for any template style from the layout dropdown selection.\r\n\r\n\r\n\r\nCreate new layout by cloning any layout\r\n\r\nFor each selected layout, user can select to edit or clone the layout and do updates for the layout.\r\n\r\n\r\n\r\nAdd layout name and save. Now, you can configure the cloned layout.\r\n\r\n\r\n\r\nRestore layout settings (for default layouts only)\r\n\r\nAfter edit, customize a default layout, user can restore all the settings to the default settings of the layout using the restore button.\r\n\r\n\r\n\r\nDelete cloned layout\r\n\r\nFor cloned layout, user can delete if they don't want to use the layout, select the layout and press the detele button.\r\n\r\n\r\n\r\nLayout configuration\r\n\r\nSection (row) configuration\r\n\r\nFor each row\/section, it includes 3 configuration panels: General, color palletes and overlay\r\n\r\nGeneral settings\r\n\r\n\r\n\r\nGeneral settings includes:\r\n\r\n
  \r\n\t
  Section title: Add title for section, the section will be generate to section id and css. For example, if you add Main Body, it will be generated: to help you add custom style for each section easier. So the section title should short and simple.\r\n\t
  Container: Configure the section container to be fix, full width or none (default).\r\n\t
  Section layout: This setting allow you to add multiple columns to a section. You can define width for each column on specific responsive layout or select to use auto where all columns will have same width.\r\n\t
  Responsive settings: You can customize width for each column on specific responsive layout and also select to show or hide columns on selected devices, related with screen resolution:\r\n\t\r\n\t
  \r\n\t\t
  Hidden on Smartphone - screen width less than 576px\r\n\t\t
  Hidden on Largen Smartphone - screen width equal to or greater than 576px\r\n\t\t
  Hidden on Tablet - screen width equal to or greater than 768px\r\n\t\t
  Hidden on Smaller Desktop - screen width equal to or greater than 992px\r\n\t\t
  Hidden on Desktop - screen width equal to or greater than 1200px\r\n\t\r\n\t
  Other settings:\r\n\t
  \r\n\t\t
  Add Custom CSS Class Name\r\n\t\t
  Set section padding\r\n\t\t
  Set section margin\r\n\t\t
  Sticky setting: Sticky top, sticky botton or none\r\n\t\r\n\r\n\r\nColor Palettes\r\n\r\nColor palettes is built to help user customize style faster and easier when building layout. Each color palettes is a set of color setting: background color, text color, link color, link hover color.\r\n\r\nFor each template, there will be multiple default color palettes created by developer. User can use the default ones or clone new ones, customize and use.\r\n\r\n\r\n\r\nThe color palettes configuration includes the color palettes settings and live preview so you can see how a section will look like if you use the color palettes.\r\n\r\n\r\n\r\nUser has full control of color palettes:\r\n\r\n
  \r\n\t
  Select color palettes for current section\r\n\t
  Edit any color palettes\r\n\t
  Clone any color palettes\r\n\t
  Delete color palettes (only cloned items)\r\n\t
  Revert to default setting for default color palettes\r\n\r\n\r\nImage and video overlay background \r\n\r\nT4 Framework template allows you to make image overlay or video overlay for any section. For each section in layout builder, there is Overlay configuration panel where you can select image or video overlay type, configure the display for selected overlay type based on corresponding settings.\r\n\r\nImage overlay background\r\n\r\nYou can select any image to show as overlay background for a section.\r\n\r\n
  \r\n
  Browse overlay image\r\n
  Configure settings for background: background repeat, backgorund size, background attachment and backgroun position.\r\n
  Set opacity for overlay background image\r\n\r\n\r\n\r\n\r\nVideo overlay background\r\n\r\nFor now, T4 Framework supports 2 video sources for overlay video background: Youtube and Vimeo.\r\n\r\n
  \r\n
  Select video type: youtube or vimeo\r\n
  Add video ID\r\n\r\n\r\n\r\n\r\nColumn options\r\n\r\nColumn is used to show content for section by assigning supported column type: component, module position, module, block and element. You can add custom CSS Class for each column if you wish to style particular content element differently.\r\n\r\n\r\n\r\n
  \r\n\t
  component: You can assign component for a column to make the column as a Joomla component main content area.\r\n\t
  module position: Select any suitable module position. The published modules in the position will be displayed in the column.\r\n\t
  module: Select a module to show in the column.\r\n\t
  block: Block is a spcial content type supported for T4 Framework layout builder to help user build a content block faster using their own custom HTML mockup. \r\n\tIn the layout builder, when edit content block, you can edit the block HTML mockup directly in the panel. The editor is friendly and easy to add and update HTML code.\r\n\t\r\n\t\r\n\t
  element: Element is also special content block defined by developer.\r\n\r\n\r\nLayout position preview\r\n\r\nWhen working on layout builder, you can view all positions in the layout using the feature Layout Position Preview. This will give you better overview about the layout structure, positions with content assigned and empty positions.\r\n\r\n\r\n\r\nLayout FAQs\r\n\r\n\r\n\r\nT4 Framework layout FAQs:\r\n\r\nWhere edited layout and cloned layout files are stored ?\r\n\r\nThose layout files are stored in \"local\" folder. \r\n\r\ntemplates\/t4_blank\/local\/etc\/layout\/\r\n\r\nWhere default layout files are stored ?\r\n\r\nYou can find the default layout files in \"layout\" folder: \r\n\r\ntemplates\/t4_blank\/etc\/layout\/\r\n\r\nWhat is layout file format ?\r\n\r\nEach layout is a .json file that includes the layout file settings.\r\n\r\nCan user delete default layout in the layout builder panel ?\r\n\r\nNo, default layouts are important and they are used to help user revert settings when something goes wrong.\r\n\r\nEdited layouts and cloned layouts get lost after update template ?\r\n\r\nNo, all edited layouts and cloned layouts files are stored in \"local\" folder that is not included in template folder by default so when upgrading template, the folder is not overridden.\r\n\r\n","id":"2112","title":"Theme Settings","url":"\/documentation\/t4-framework\/theme-settings","content":"Theme SettingsT4 Framework admin panel includes advanced settings to help user customize the style of their whole websites easier, without touching coding. The theme customization workflow has been improved to meet the purpose.\r\n\r\nTheme management system\r\n\r\nT4 Framework provides all important features to customize style in the admin dashboard. Now, with the theme management system, it is even easier to customize style for their website.\r\n\r\nIn the Theme Settings panel, user can select a theme from the supported themes for current template style.\r\n\r\n\r\n\r\nFor each selected theme, user can select to edit or clone the theme and do updates for the theme.\r\n\r\n\r\n\r\nGoogle Fonts\r\n\r\nT4 Framework allows users to customize font that including font family, font size, font weight in the advanced Fonts Manager panel. You can select default pre-defined fonts, Google fonts or add your own custom fonts to use.\r\n\r\nGoogle Fonts\r\n\r\nGoogle Font is supported by default in T4 Joomla Framework. The inbuilt Google Font selection panel makes the font setting become easier, faster and more friendly. You can search for font family, select font family and supported font-weight.\r\n\r\n\r\n\r\nNow, you can configure font settings in the Typography and Heading panel. \r\n\r\n\r\n\r\nAdd font styling using this font in your entire site.\r\n\r\nThe Google Fonts added in the Font Setting panel will be loaded in your entire website. You can add your custom CSS font family for any elements in your website.\r\n\r\n\r\n\r\nCustom Fonts\r\n\r\nBy default, for each template, it will include Google font and fonts used in the template defined by the developer. To help user customize font easier, we added new feature: Custom font.\r\n\r\nThis feature allows users to add their own fonts and use the fonts on their website instead of using default fonts. \r\n\r\nFrom the back-end, access menu Theme Custom and in the font setting of any element hit the change font family. Now, you are in the Font Manager panel, open the Custom Fonts to add your own fonts.\r\n\r\n\r\n\r\nFont CSS Url\r\n\r\nYou can add one or multiple fonts at the same time by adding font CSS file URL, it can be an internal or external link.\r\n\r\n#1. External Font CSS Url format\r\n\r\nhttps:\/\/fonts.googleapis.com\/css?family=Roboto&display=swap\r\n\r\n#2. Internal Font CSS Url\r\n\r\ntemplates\/t4_blank\/fonts\/earthbound\/style.css\r\n\r\nFont File Url\r\n\r\nIf you don't have a font CSS file, you can add the path to the font file, the following is the sample format of the font file URL. \r\n\r\ntemplates\/t4_blank\/fonts\/google-sans\/ProductSans-Regular.ttf\r\ntemplates\/t4_blank\/fonts\/tempora-lgc\/TemporaLGCUni-Regular.otf\r\n\r\nTypography Settings\r\n\r\nTypography is the settings for the global font settings for current theme. \r\n\r\n\r\n\r\nThe elements that are specificly styled will not be applied.\r\n\r\nExample:\r\n\r\nul.category-module.mod-list \r\n font-family: Roboto;\r\n font-weight: 400;\r\n line-height: 1.5;\r\n\r\n\r\nPage settings\r\n\r\nThe page settings panel includes color configuration for the display of pages that use current theme and template style including:\r\n\r\n
  \r\n\t
  Text color: customize default text color. Elements that are specificly defined like header, menu, footer, the setting will not be applied.\r\n\t
  Link color: customize default color for link. \r\n\t
  Link hover color: customize default color for link when hovering\r\n\t
  Background color: customize default background color for pages\r\n\t
  Background image: set background image then configure additional settings for repeat, size and position.\r\n\r\n\r\n\r\n\r\nColor settings\r\n\r\n1. Brand color settings\r\n\r\nThe brand colors are the major standard colors of Bootstrap. The brand colors are the color variables of Bootstrap, but already customized in each template, so when you change the color of one brand here, it will override the color of the corresponding color variables.\r\n\r\nThe brand color settings are in theme level, it means, if you are configuring for Template style A, the color settings will be applied for the pages that use the template style A only.\r\n\r\n\r\n\r\n2. User color settings\r\n\r\nBesides the pre-defined brand colors, user can add their own custom color for a specific purpose like text color, heading color.\r\n\r\n\r\n\r\nCreate new user color:\r\n\r\nYou can add as many color items as you want, set a default color for each user color item. Delete or change color label are processed in the Master template style only.\r\n\r\n\r\n\r\nConfigure color for different theme\r\n\r\nUser color value configuration is on theme level, it means, in each template style, you can override the color settings for user color items in Master templates tyle.","id":"2131","title":"Navigation Settings","url":"\/documentation\/t4-framework\/navigation-settings","content":"Navigation SettingsT4 Framework is built for both developers and users. For users, it provides all important features easily accessible via the admin panel and developer can adapt it easily to roll out their own custom templates for their projects or users.\r\n\r\nNavigation Profile\r\n\r\n On one website, you may use different menus on different pages. The Navigation profile is designed to help manage your navigation system faster and easier.\r\n\r\n\r\n\r\nYou can create multiple navigation profiles, each navigation profile could have different configurations of:\r\n\r\n
  \r\n\t
  Megamenu: select a menu and build megamenu for the menu using the megamenu builder\r\n\t
  Off-canvas: configuration for off-canvas menu\r\n\t
  Menu breakpoint: select the screen that mobile menu will be enabled\r\n\r\n\r\nYou have full control of the navigation profile:\r\n\r\n
  \r\n\t
  Configure megamenu, off-canvas in the profile\r\n\t
  Restore default settings of default navigations\r\n\t
  Clone any navigation profile\r\n\t
  Delete navigation profile (only cloned items)\r\n\r\n\r\n\r\n\r\nIn which cases the Navigation profile is useful ?\r\n\r\n
  \r\n\t
  Multilingual websites: requres menus for corresponding language \r\n\t
  Want to have different mengamenu on different pages\r\n\t
  Want to have different menu on different pages\r\n\t
  Want to have different off-canvas menu on different pages\r\n\t
  Want to have different logo, favicon on different pages\r\n\r\n\r\n\r\nMegamenu builder\r\n\r\nThe megamenu builder will help you setup megamenu faster and easier. You can build a mega menu with multiple rows, each row can include multiple columns.\r\n\r\n\r\n\r\nThe megamenu settings include 3 main configuration sections:\r\n\r\n1. Menu item settings\r\n\r\nEach menu item include following settings:\r\n\r\n
  \r\n\t
  Extra Class: extra class for the menu item if you want to add specific style\r\n\t
  Item Icon: add icon class to show for the menu item. By default, it supports Bootstrap 4 and Bootstrap 5. Example: fab fa-joomla. In case you want to use other font icon, you can define the font icon in the Global Settings > Addons.\r\n\t
  Item caption: add caption for the menu item\r\n\r\n\r\nMegamenu basic settings\r\n\r\nWhen Megamenu is enabled, each megamenu item will have following basic settings:\r\n\r\n
  \r\n\t
  Submenu Width (px): the megamenu item width\r\n\t
  Extra Class mega Item: add extra class if you want to add custom style for each megamenu item\r\n\t
  Alignment: set the megamenu item to display on left, right, center or make it justify\r\n\r\n\r\nMegamenu builder: build megamenu structure and content assignment\r\n\r\nEach megamenu item can include multiple rows, you can drag and drop to change the position of rows. \r\n\r\nRow Settings\r\n\r\nIn each row you can add up to 12 columns. You can also change width for columns using the Bootstrap grid system of 12.\r\n\r\n\r\n\r\nColumn Settings\r\n\r\n\r\n\r\nColumn is designed to load content into megamenu. Each column includes following settings:\r\n\r\n
  \r\n\t
  Column Title: the title will be shown as column title in front-end\r\n\t
  Column Type: assign content to load into the column. It supports:\r\n\t\t
  \r\n\t\t\t
  Module position: add a module positions and published modules in the position will be display in the column\r\n\t\t\t
  Module: select a module from the created modules to show on the column. \r\n\t\t\t
  Menu item: you can select specific menu items from a menu to show on the column.\r\n\t\t\r\n\t\r\n\r\n\r\n\r\n\r\nYou can preview megamenu directly in the preview panel while you are configuring for megamenu. This will help save more time and easier to work with.\r\n\r\n\r\n\r\nAnimation settings\r\n\r\nThe animation settings includes:\r\n
  \r\n\t
  Animation type: fade, slide, zoom or elastic\r\n\t
  Animation duration (in milliseconds)\r\n\r\n\r\nOff-canvas menu\r\n\r\nOff-canvas is a popular menu type and navigation for a website, it can be used for mobile menu or even in desktop layout. \r\n\r\nOff-canvas can also be used for other purposes like alternative menus, highlight content, banner, etc. \r\n\r\n\r\n\r\nT4 Framework supports Off-canvas by default with an easy configuration panel.\r\n\r\n\r\n\r\nOff-canvas configuration:\r\n\r\n
  \r\n\t
  Menu Module : Create menu module that you want to show in off canvas sidebar and assign it on position Off-canvas.\r\n\t
  Module Position: assign a module position where published modules in the position will be displayed in the Off-canvas.\r\n\t
  Module Style: select a style for module\r\n\t
  Effect: select an effect when open the Off-canvas. It supports 14 effects.\r\n\t
  Show on right side: enable this option if you want to show the Off-canvas in the right side. By default, it is displayed on left side.\r\n\t
  Show on Desktop: enable this option if you want to show the Off-canvas on desktop layout. By default, it is enabled for SM (Tablet) and XS (Mobile) layouts.\r\n\r\n\r\nMegamenu break point\r\n\r\nT4 Framework allows you to set the breaking point to show the Megamenu as in some cases, users may want to show Megamenu on tablet layout.\r\n\r\nSimply select a screen size: Small Screen (SM), Medium Screen (MD) or Larger Screen (LG) to be the breaking point to show the Megamenu. For example, when you select Medium Screen (MD), Megamenu will set this screen as a breakpoint, and the Megamenu will not be shown on the screen sizes below the Medium screen.\r\n\r\n\r\n\r\nMulti Megamenu Setup\r\n\r\nOn one website, there is normally 1 megamenu that is used as the website main menu. In some specific cases, users want to show multiple mega menus, this guide will help. Following is the instruction to create multi megamenu on one website.\r\n\r\n\r\n\r\n1. Add new section in layout builder to load megamenu\r\n\r\nIn the layout builder, create new section and select:\r\n
  \r\n\t
  Column Type: Element\r\n\t
  Content Element: megamenu\r\n\t
  Extra Prams: menutype=\"menu type name\"\r\n\r\n\r\n\r\n\r\nTo get menu type name, go to: Menu > Manage and copy the menu type name of the menu you want to show.\r\n\r\n\r\n\r\n2. Configure megamenu for selected menu\r\n\r\nThe best way to configure megamenu is by using the in-built megamenu builder. Go to Navigation, enable the edit mode and select the new menu, use the supported tools to build a mega menu for the menu. Once done, save the settings.\r\n\r\n\r\n\r\nNow, you need to switch the menu type for Megamenu to the default one as it is the main menu of your site .\r\n\r\n\r\n\r\n","id":"2136","title":"Author page settings","url":"\/documentation\/t4-framework\/author-page-settings","content":"Author page settingsAs Author is an important part of any blog, news & magazine website, it\u2019s still one of Joomla\u2019s weaknesses. And we have improved it with our Author-page solution include articles, lists, and details pages for all authors. Now you can easily build a multi-author blog, news & magazine website.\r\n\r\n\r\n Upgrade T4 Framework 1.1.5\r\n The author feature is available in T4 Framework version 1.1.5, make sure it is upgraded.\r\n\r\n\r\n1. Enable the Joomla user profile plugin\r\n\r\nEnable the Joomla user profile and configure the fields that you want to use. When user add data for those fields, they will be displayed in the Author block.\r\n\r\n\r\n\r\nAdditional user profile fields are added in the T4 Framework core, so all templates that built with T4 Framework will have the feature. In the user profile page, the fields are added to the User info tab, it includes:\r\n\r\n\r\n\r\n
  \r\n
  User avatar: browse user photo to show as user avatar\r\n
  User Position: job title, position of the user\r\n
  Social info: social channels of the user, use font awesome icon class for the social channel icon, such as: fa fa-facebook\r\n\r\n\r\nWhen user edit their profile from front-page, they could update the fields.\r\n\r\n\r\n\r\n2. Create author page\r\n\r\nIn case you want to build a page that show a list of authors, here is the steps.\r\n\r\nStep 1: create a new menu item > Articles > Authors\r\n\r\n\r\n\r\nStep 2: select user group, number of authors and configure the author's article list.\r\n\r\n\r\n\r\nAfter this step, you will have a page with a list of authors with avatar, user name, title, description, social icons. Following is an example.\r\n\r\n\r\n\r\n3. Configure Author block in article details page\r\n\r\nIn article details page, you can show or hide the author block and set position to display the author block: after title, after content, before content.\r\n\r\nTo configure this, open the T4 Template style setting > layout setting > Author settings.\r\n\r\n\r\n\r\n
  \r\n\t
  Hide: hide the author block in the article detail page\r\n\t
  After display Title: to show the author block below the article title\r\n\t
  Before display content: to show the author block before the article main content (after the article intro section)\r\n\t
  After display content: to show the author block below the article detail.\r\n\r\n\r\n4. Customize author page\r\n\r\nCustomize and override the author page\r\n\r\nAll the author layout files are stored in the folder plugins\/system\/t4\/themes\/base\/html\/com_content\/author\/.\r\n\r\n\r\n\r\nIf you want to customize the author page, copy the author folder and override it in the template level by adding the folder to templates\/your_t4_template\/html\/com_content\/\r\n\r\nCustomize and override the author block\r\n\r\nThe author block file is stored in plugins\/system\/t4\/themes\/base\/html\/layouts\/t4\/content\/author_info.php.\r\n\r\n\r\n\r\nIf you want to customize the author block, copy the author_info.php file and override it in the template level by adding the file to templates\/your_t4_template\/html\/layouts\/content\/ and customize it your ways.","id":"2308","title":"Multilingual Configurations ","url":"\/documentation\/t4-framework\/multilingual-configurations","content":"Multilingual Configurations This Section will help you to make multilingual website in T4 framework. \r\n
  \r\n\t
  Installing a new language: Install the Joomla language you want to make multilingual site. \r\n\t\t
  Enable System - Language plugin: Enable language plugin to enable language associations.\r\n\t\t
  Multilingual content: Add Articles category, articles and module for each language. \r\n\t\t
  New Menus: Create new menu item for each language. \r\n\t\t
  Set default home pages: Set default Homepage of each language. \r\n\t\t
  Multilingual Associations: Set menu\/articles association. \r\n\t\t
  Duplicate the template Style: Duplicate template styles for each language. \r\n\t\t
  Language Switcher module: Enable the module to show language Names\/Flags. \r\n\r\n\r\n\r\n\r\nInstall Language\r\n\r\nThe first steps to make a multilingual site in Joomla is installing the languages that you want to use on-site. \r\n\r\nThere are two options to install Language on Joomla :\r\n1. Install via Live server using Joomla updates \r\nLogin to Joomla admin panel > extensions > Languages > Installed > Install language. Install the language you want by click on install button. You can install any no. of languages offered by Joomla language packages to make multilingual website.\r\n\r\n\r\n2. Manual Installation\r\nIn this method you can install a language package manually on your Joomla site. Visit Joomla community translation packages to download it.\r\n Once a package is downloaded in zip formate, you can install it via Joomla > extension > Install > Choose the package and install it.\r\n\r\n\r\nEnable Content language\r\n Once the language packages are installed on site, you must be enable the content languages so it will show when you create the multilanguage contnet. Open Extensions > Languages > content languages > select the language you installed and enable it.\r\n\r\n You can also customize the language code via content language options and customize language flags.\r\n\r\n\r\nLanguage Plugins\r\n\r\n System Language Filter plugin helps you to show the content based on the language selection on the website. This plugin must be enabled. \r\nThere is also a plugin for System language code that will help you to hide the language code in HTML code of the website, it plays an important role in the SEO.\r\nHere are the steps to enable these plugins: \r\n\r\n\r\n\r\n
  \r\n
  1. Go to Extensions -> Plugin.\r\n
  2. Serch for the Language in the search bar to find plugin easily.\r\n
  3. Enable 2 plugins: System - Language Filter and System - Language Code.\r\n\r\n\r\n\r\n\r\nMultilingual content\r\n\r\nOnce the Language and plugins are enabled, you can start adding new content for each language. As an example we added Arabic language as 2nd language of website.\r\n To add multilanguage content you need to create below content:\r\n
  \r\n
  Add Categories\r\n
  Add Articles\r\n
  Add Modules\r\n\r\n\r\n\r\n Add new category\r\nTo create different language content we have to add new category for each language.\r\n1. Go to Content > Categories > Add new Category.\r\n2. Select the language for category from Language > dropdown and save.\r\n3. Save category and publish it\r\n\r\n\r\n4. Repeat this process for 2nd language(English\/Arabic) \r\n\r\n\r\nAdd new Articles\r\nTo create different language article content we have to add new article for each language.\r\n1. Go to Content > Articles > Add new Article.\r\n2. Select the language for article from Language > dropdown and save.\r\n3. Save Article and publish it\r\n\r\n\r\n4. Repeat this process for 2nd language(English\/Arabic) \r\n\r\nAdd Modules\r\nOn a multilanguage website you have to show different module for each language so it will fetch different language content. this step you can do at the last of the all other steps as a module would be assigned to a menu item. So first you have the menu items published for each language to assign modules on web pages.\r\n\r\n\r\n\r\n\r\nAdd Menu\r\nIn multilingual site you need to create different Menu first so you have different megamenu to select on other language pages. Here are the steps: \r\n Navigate to Menu > Manage > Add New menu ( for exam Main menu EN) Repeat the same for 2nd language.\r\n\r\n Add new menu items\r\nOnce the Menu are created for each language. You need to add new menu items for each Main menu.\r\n\r\n\r\n\r\n\r\n
  \r\n
  Open Main Menu EN >> Add New Menu item.\r\n
  Select language from dropdown > select English and save.\r\n
  Do the same steps for 2nd language(arabic).\r\n\r\n\r\n\r\n\r\n\r\n\r\nMultilingual Associations\r\n\r\nMultilingual Associations is used to redirect one language articles or menu to another language when you click on the language switcher flag. \r\n This option can be done by two methods :\r\n\r\n1. Menu association via Menu item:\r\n When you will add a menu item and save it by selecting a language, it will show the options for Associations. A new tab will appear As Associations. In this tab, you can choose the menu item of the 2nd language. The same option will appear for Joomla content items.\r\n\r\n\r\n\r\n2. Multilingual Associations\r\n\r\n\r\nJoomla has inbuilt component for multilingual association. To navigate this component navigate > Components > Multilingual Associations. It will give following options:\r\n
  \r\n
  Articles : You can select this filter to give all list of article\/category of a language do association.\r\n
  Contacts : This option will list out the contact items for language association.\r\n
  Menu items : Using this option you can do language associations for all menu items on your website.\r\n
  News feeds : Helps to do newsfeeds translation if you are using newsfeeds component in Joomla.\r\n\r\n\r\n\r\n\r\n\r\n\r\nDefault page\r\nIn this step we will set a default page for each language menu. As example open Main Menu EN > click on the Star icon to set the menu item as default. \r\n A default menu item will be set for each language menu. This menu will appear as default when user visit the site (homepage).\r\n\r\n\r\n\r\nDo the same step for other language to set default Homepage \r\n\r\n\r\n\r\n\r\nTemplate Style Settings\r\n\r\nIn this section we will set up the template style for each language. It will help to set different Megamenu for each language. \r\n\r\nNavigate to Template Manager > Style \r\n\r\n\r\nSelect your template default style > click > duplicate \r\n\r\n\r\n\r\nOpen the duplicate template style > Rename it for default EN ( to use this template style only of English language. \r\n\r\nOpen Navigation tab > Click no Clone icon to make a copy of navigation setting ( example : name the clone setting Menu EN).\r\n\r\n\r\nSelect the Clone settings (Menu EN) > save settings.\r\nOpen Navigation settings > click Edit icon > Select Mega menu > Main Menu EN (in example screenshot its Section Menu).\r\n\r\n\r\nOnce the Menu is selected click on save.\r\n\r\nNow click on the Menu assignment Tab > Select only English language menu items and save.\r\n\r\nRepeat the steps for other language(Arabic).\r\n\r\n\r\n\r\n\r\nLanguage Switcher Module\r\n\r\nIn the final and last step we need to publish the language switcher module, that allows site visitors to switch the language from one language to another using language flags\/name based on the module configurations. \r\n\r\n\r\nOnce the module published you can visite the frontend\r\n\r\n\r\n\r\n\r\n Feel free to contact on our support forum for any query related to T4 framework\r\n","id":"2234","title":"CSS & SCSS Customization","url":"\/documentation\/t4-framework\/css-scss-customization","content":"CSS & SCSS CustomizationT4 Joomla Framework provide multiple tools to help user manage their website easier in the Tools working panel including CSS customization and SCSS (SASS) customization.\r\n\r\nCSS Customization\r\n\r\n#1: Using custom.css file\r\n\r\nT4 Framework allows user to add their custom CSS in the custom.css file inside template folder:\r\n\r\n templates\/t4_blank\/local\/css\/custom.css\r\n\r\nBy default, the file is not included in the template folder so the user needs to create the file by themselves. The file is not overridden when upgrading template to new version.\r\n\r\n#2: Using inbuilt Custom CSS editor\r\n\r\nCustomizing style for your site is even more simple with the inbuilt custom CSS Editor. In the Tools panel, hit the Edit Custom CSS button and you can add your own custom CSS rules to the editor.\r\n\r\n\r\n\r\n\r\n\r\nSCSS customization tool\r\n\r\nT4 Framework comes with super powerful and friendly admin panel with built-in tools to help the user manage their website easier as well as customize theme and style using theme settings.\r\n\r\nWe also offer multiple ways to customize CSS and SCSS with built-in tools in the Tools working panel.\r\n\r\nCustomize SCSS variables\r\n\r\nYou can override the default variables in the Variables customization editor.\r\n\r\n\r\n\r\nBy default, you can view the default variables in the file:\r\n\r\ntemplates\/t4_blank\/scss\/_variables.scss\r\n\r\nFind the variables you want to override and add to the editor. You can also define new variables.\r\n\r\nCustomize SCSS style\r\n\r\nYou can also customize SCSS in the CUSTOMIZE STYLE editor.\r\n\r\n\r\n\r\nOnce done, hit the Save & Compile then the custom SCSS will be saved and also compiled to CSS.\r\n\r\n\r\n\r\nNotes:\r\n\r\n#1: The overridden SCSS variables is stored in the file:\r\n\r\ntemplates\/t4_blank\/local\/scss\/variables.scss\r\n\r\n#2: The customized SCSS style is stored in the file:\r\n\r\ntemplates\/t4_blank\/local\/scss\/custom.scss\r\n\r\n\r\n\r\n#3: After compiled to CSS, what file the customized style is stored store in the file:\r\n\r\ntemplates\/t4_blank\/local\/css\/template.css\r\n\r\n#4: when click on the button Remove Local CSS, the compiled CSS file templates\/t4_blank\/local\/css\/template.css will be completely removed.\r\n\r\n#5: all the customized SCSS are stored in \"local\" folder and this folder is not included in template folder by default so when upgrading template, the folder is not overridden.\r\n\r\n","id":"2130","title":"Rename T4 Blank Template","url":"\/documentation\/t4-framework\/rename-t4-blank-template","content":"Rename T4 Blank TemplateIn this guide, we will show you how to rename T4 template. You need to follow the steps in this guide, it is not just rename the template folder. In Joomla, the template is a kind of extension and its information is stored in different files, and also in the database so renaming template name needs to be done in proper ways.\r\n\r\n\r\n\tWarning:\r\n\tWhen you rename template name, you will not be able to upgrade the new version of the template for improvements & bug fixes since the upgrade is based on template name. You will need to do the upgrade manually by uploading the updated files via FTP\/SFTP\r\n\r\n\r\nRename T4 Template name\r\n\r\nSince the template name is also stored in the database, you have to rename the template before installation.\r\n\r\nIn this example, we will rename the template name from T4 Blank to Business.\r\n\r\n1. Download T4 template\r\n\r\nFrom the T4 Framework download page, download T4 Blank template and extract the template file\r\n\r\n2. Rename language files\r\n\r\nOpen the folder: language\/en-GB and change name for the languages files:\r\n\r\nen-GB.tpl_t4_blank.ini to en-GB.tpl_business.ini\r\nen-GB.tpl_t4_blank.sys.ini to en-GB.tpl_business.sys.ini\r\n\r\n3. Update templateDetails.xml file\r\n\r\nOpen the templateDetails.xml file and update the following info: \r\n\r\n#1. update template name\r\n\r\nt4_blank\r\n\r\nChange to:\r\n\r\nbusiness\r\n\r\n#2. update language file names in step 2\r\n\r\n\r\n\ten-GB\/en-GB.tpl_t4_blank.ini\r\n\ten-GB\/en-GB.tpl_t4_blank.sys.ini\r\n\r\n\r\nChange to:\r\n\r\n\r\n\ten-GB\/en-GB.tpl_business.ini\r\n\ten-GB\/en-GB.tpl_business.sys.ini\r\n\r\n\r\n4. Update template info (optional)\r\n\r\nThe template info is shown in the template dashboard and it is defined in the language file en-GB.tpl_business.ini. The info you can update includes the template name, template description, links as shown below:\r\n\r\nT4_TPL_DESC_1="T4 Blank"\r\nT4_TPL_DESC_2="Your solid starting point"\r\nT4_TPL_DESC_3="T4 Blank is a blank template for T4 Framework with the latest improvements, features and ease of usage to easily adapt it to your site."\r\n\r\nChange to your template name and info.\r\n\r\nT4_TPL_DESC_1="Business"\r\nT4_TPL_DESC_2="Template short description"\r\nT4_TPL_DESC_3="Your template info"\r\n\r\n5. Update template thumbnail image\r\n\r\nYou can replace the template thumbnail image by replacing the 2 images:\r\n\r\n
  \r\n\t
  template_preview.png\r\n\t
  template_thumbnail.png\r\n\r\n\r\n6. Install the template\r\n\r\nCompress the template folder to .zip file and install to your Joomla website as normal Joomla template.\r\n\r\n","id":"2145","title":"Compile SASS to CSS","url":"\/documentation\/t4-framework\/compile-sass-to-css","content":"Compile SASS to CSST4 Framework is built with SCSS and SCSS is compiled to CSS. For developer and agency who want to customize T4 templates using SCSS or build a new template based on T4, this guide can help you set up the development environment to compile SCSS to CSS.\r\n\r\n\r\n\t1. Recommended for Developers ONLY\r\n\tThis guide is recommended for Developers and Agency to build new projects or new templates. \r\n\t2. For normal users: use CSS & SASS customization tool.\r\n\tFor normal users who want to customize SASS and CSS, please follow CSS & SASS customization guide \u2192\r\n\r\n\r\nUse Prepros \r\n\r\nPrepros can compile almost all preprocessing languages like Sass, Less, Stylus, Cssnext, Jade\/Pug, Markdown, Slim, Coffeescript etc on Mac, Windows & Linux with Live Browser Reload. Following this guide to setup, auto compile SASS to CSS for your T4 project development.\r\n\r\nSetup T4 Project on your localhost\r\n\r\nDownload T4 framework and setup the project on your localhost. In case you want to rename the T4 template, you can follow this guide.\r\n\r\nInstall Prepros\r\n\r\nPrepros is the premium product but it has a trial version, you can use that for your project, it is available for Mac, Windows & Linux. in this tutorial, we will use Prepros for Mac version 6.3.0.\r\n\r\nDownload Prepros\r\n\r\n#1: Configure Prepros\r\n\r\nOnce Prepros is setup, open the software. You can use default settings.\r\n\r\n#1: Add new project\r\n\r\nAdd new project and select scss folder of your t4 project: templates\/t4_blank\/scss\r\n\r\n\r\n\r\n#2: Map SCSS and CSS file to compile\r\n\r\nSelect template.scss file and set output file, it should be templates\/t4_blank\/css\/template.css. You don't have to add for other files since template.scss already imports all other scss files of template. So when any SCSS file in the scss folder is updated, it will be compiled to .css files.\r\n\r\n\r\n\r\nNow, you can start working with SCSS files.\r\n\r\n\r\n\r\nThe SCSS will be instantly compiled to CSS, you can check the updates on the website.\r\n\r\n\r\n\r\nAdd new SCSS files \r\n\r\nWhen developing a website, you can also add new .scss file to add your own codes. To do this, you can follow this guide:\r\n\r\n#1: Add new .scss file in the templates\/t4_blank\/scss folder named _business.scss\r\n\r\n#2: Import the new file in the _all.scss file using format:\r\n\r\n\/\/ business styles\r\n@import \"business\";\r\n\r\nNow, when you add your scss code to the new file, it will be also auto compiled to CSS.\r\n\r\nUse Command Line\r\n\r\nDownload and install Node.js, which we use to manage our dependencies.\r\n\r\nDownload NodeJS\r\n\r\n#1: initiate a new Node application\r\n\r\n$ npm init\r\n\r\n#2: create package.json file for the project\r\n\r\n\r\n "name": "package name",\r\n "version": "1.0.0",\r\n "description": "node-sass example",\r\n "main": "index.js",\r\n "scripts": \r\n "build-css": "node-sass -w sass -o public\/css"\r\n ,\r\n "author": "joomlart",\r\n "license": "BSD",\r\n "dependencies": \r\n "node-sass": "^4.9.0"\r\n \r\n\r\n\r\n#3: install the node-sass module\r\n\r\n$ npm i node-sass\r\n\r\n#4: install live-server, which is a little development server with live reload capability\r\n\r\n$ npm install -g live-server\r\n\r\n#5: Add (edit) command to run in scripts object:\r\n\r\n\"build-css\": \"node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss\/admin.scss dist\/css\/admin.css\"\r\n\r\nwith command:\r\n\r\n\"build-css\"\r\n\r\nNote:\r\n
  \r\n
  \"scss\/admin.scss\" is the path to .scss file\r\n
  \"dist\/css\/admin.css\" is the path to folder to save file and admin.css is the file name.\r\n\r\n\r\nOnce done, run command: - npm run + command. For example:\r\n\r\nnpm run build-css\r\n","id":"2151"],"jadoc-sidebar-title":"T4 Framework","jadoc-articleid":"2109"}var disqus_shortname = 'joomlartblog';var disqus_config = function()this.language = 'en';;window.addEvent('load', function()(function () var s = document.createElement('script'); s.async = true; s.src = '//joomlartblog.disqus.com/count.js'; (document.getElementsByTagName('head')[0] ()););jQuery(window).on('load', function() new JCaption('img.caption'););//rightHeight.init(selector: '[data-right-height]', // The selector for content containers (must use a valid CSS selector)selectorContent: '[data-right-height-content]', // The selector for content (must use a valid CSS selector)callback: function ( container ) // Function that runs after content height is adjusted); window.dataLayer = window.dataLayer []; function gtag()dataLayer.push(arguments); gtag('js', new Date()); gtag('config', 'UA-243376-1');jQuery(document).ready(function($)// check status// var prbar_ckname = 'prbar-status';var prbar_ckname = 'prbar-status-';var prbar_status = $.cookie(prbar_ckname);if (prbar_status == 'hide') else // add class topbar-fixed$(window).on('load',function () setTimeout (function() $('html').addClass ('prbar-fixed');$('.promotion-bar').addClass ('show');$('.prbar-button').addClass('show');, 2000););// bind action for prbar-button$('.prbar-button').click (function() if (prbar_status == 'hide') prbar_status = 'show';$('.prbar-button').addClass('show');$('.promotion-bar').addClass ('show');$('html').addClass ('prbar-fixed'); else prbar_status = 'hide';$('.prbar-button').removeClass('show');$('.promotion-bar').removeClass ('show');$('html').removeClass ('prbar-fixed');$.cookie(prbar_ckname, prbar_status, expires: 7, path : '/'););); (function($) $('.btn-getResponse').on('click', function() var $form = $(this).closest('.getResponseForm'), email = $form.find('input[name="e"]').val(), list = $form.find('input[name="l"]').val(); if (!isEmail(email)) alert('Please enter a valid email!'); $('#getResponseEmail').focus(); return false; $form.addClass('loading').find('input').prop('disabled', true); // loading $form.find('i.fa').attr('class', 'fa fa-spinner fa-spin'); $.ajax( dataType: 'JSONP', url: ' -subscribe/?email=' + email + (list ? '&list=' + list : ''), data: , crossDomain: true, success: function(html) $form.removeClass('loading'); // show result if (html == 'ok') $form.find('.subscribe-result').html('Woohoo! You\'re subscribed!
  Thank You.'); else if (html == 'fail') $form.find('.subscribe-result').html('Woohoo! Please refresh the page and do the subscription again.
  Thank you.'); else if (html == 'Already subscribed.') $form.find('.subscribe-result').html('Woohoo! You\'re already subscribed!
  Thank you.'); else $form.find('.subscribe-result').html(html); // hide form and show message $form.find('.subscribe-form').fadeOut(); $form.find('.subscribe-result').hide().fadeIn(); ); return false; ); function isEmail(email) var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]2,4)+$/; return regex.test(email); )(jQuery); #thumbnail thumbnail /thumbnail _source.title _source.content