JSN Solid PRO (Gen 1) Template for Joomla! 5
The template on which this web site is based on was made years ago by the JoomlaShine company, which at some point it Officially Closes Its Door. Because of this, the development of their otherwise high quality Joomla! templates remained frozen in time at Joomla! 3 version level.
There was a lot of fuss from customers who suddenly saw themselves abandoned, many complained in various ways, but strangely no one seems to have taken any part of their original products to continue development – at least in the meaning to ensure compatibility with newer Joomla! (and PHP) versions.
Because I found myself faced with a combination of factors – such as trying to stay in line with the most recent Joomla! core development, combined with the fact that it proved quite difficult to find another actively supported Joomla! template that could be easily adapted to look just like my existing web site – I decided to take the hard way: I converted the old template code (generation 1) for Joomla! 3 and its required template framework (also generation 1) to become compatible with Joomla! 5.
Notes:
In principle, the JSN Solid PRO template provided here may be compatible also with Joomla! 4, but if it’s going to be a hassle anyway, then let it be all the way :) Maybe one day I will find time to do the same with JSN Epic PRO and possibly also with JSN Ventura PRO templates, but most likely not anytime soon.
Installing the JSN Solid PRO template provided here makes sense rather for web sites that are still using it with Joomla! 3 and must inevitably be updated to Joomla! 5, while keeping the same look and feel *.
* However, some minor tweaks within the template’s css files may be then required – therefore, not only for backup, but also for reference and comparison, it is strongly advised to have the old site reproduced separately in either way.
Depending on the personal preferences of the web site owner or maintainer, the procedure to switch an entire web site from Joomla! 3 to Joomla! 5 when using incompatible cross version templates can be either quite simple, or even quite complicated and involving several steps. In the following I will describe my method I used for this purpose, which may not be the easiest or the one generally recommended. But I did it that way and that’s it !
- The template files (generic installation scenario)
- What does work and what does not
- (addendum) Installing the template after upgrading an existing Joomla! 3 web site to Joomla! 5 through intermediate (separate) clean J3 install
Important:
Version switching of an entire Joomla! web site – regardless of the method used – expressly requires previous experience related to Joomla! install and general web server configuration; I have no intention to provide support for general issues regarding Joomla! install or web server configuration, other than in relation to the steps described below; feel free to reconsider the methods described or to modify the template files provided in order to suit your particular needs.
I have done this just for hobby and retain no responsibility for whatever happens to your web site if you apply the methods described below; the patched template is provided “as is”; the responsibility for the success or failure of all these operations belongs exclusively to the person that applies them !
(i) The template files (generic installation scenario)
Before anything else – and with the exception of the 'custom.css' file – backup any template .css file(s) that may have been previously customized in the old version of the template and need to be restored after the new version of the template is installed. Currently there is no template file modification check as it was in the original JSN framework for J3 version and the installation process does not preserve any directory or file customizations.
The JSN Solid PRO template consist of two .zip package files, one being the framework and the other the template itself. Depending on the installation method chosen, you need to download both files, or only the template file, or no file at all !
Method 1 (recommended): download both files on your PC
In a sense, this is a safe method from the user’s perspective, because once the files have been downloaded, there is no more dependency on this originating site – like, for example, in case my web server happens to go offline for whatever reason.
Then:
- using a ftp client or the native file manager of the web site, upload the framework file to the “tmp” folder on the web server
- on the J5 admin page, go to Install Extensions, the Upload Package File tab, then drag and drop there the template file
- wait for the success-like message to show up (it may take a while to complete)
or
Method 2: download only the template file on your PC
This is just another method, but nothing special, it is only here because it exists as a method. This method uses a slightly different template .zip file with a slightly different filename than the one from the previous method, so care must be taken to avoid confusion and cross-use. The framework will be installed automatically from my web server by a call method within the template code.
Then:
- on the J5 admin page, go to Install Extensions, the Upload Package File tab, then drag and drop there the template file
- wait for the success-like message to show up (it may take a while to complete)
or
Method 3 (most convenient): use only an install URL
No need to download anything, just enter the address into the proper field. The template will be installed automatically from my web server by the Joomla! system and in turn the framework will be installed automatically from my web server by a call method within the template code.
Steps:
- on the J5 admin page, go to Install Extensions, the Install from URL tab, then copy and paste there this address:
https://www.secarica.ro/dev/joomla/jsn/jsn_solid_pro_5.1.4_install.zip - Note: this address (and, thus, the target file) is in fact the same as the link address from method 2 above, so it is safe to copy that link instead.
- click the Check & Install button
- wait for the success-like message to show up (it may take a while to complete)
Notes:
Current version for both the template and framework is 5.1.4 (click here for versions history).
The version numbering convention has nothing to do with the original JSN Solid PRO for J3 version numbering, I set the "5.x" just to make clear the Joomla! version to which it is addressed.
Upon successful install, the JSN Solid PRO template will no longer become automatically the default site template, its default status has to be set manually; I changed this on purpose, as I consider the old, original behaviour to be simply abusive.
The template is published under the GPLv2 or later license, respectively the same as the one explicitly stated by the license text file attached to the original template package and further mentioned in the header of almost all of the original template files, with the notable exception of a few template .css files whose header say “JoomlaShine.com Proprietary License”; at the same time, according to support representatives as stated on JoomlaShine support forums (while it was still online),
... reselling of all or part of our products is strictly prohibited.
a statement which, as far as I imagine, applies to the non-GPL parts, in this case meaning those few .css files.
(ii) What does work and what does not
Things going as expected:
- (frontend) everything regarding basic web site appearance
- (frontend) desktop sticky menu
- (frontend) mobile sticky menu
- (backend) pages editing and menus configurations via administrator interface
- (backend) most of the template parameters configurations via administrator interface
Things known to be different:
- (frontend) the favicon file can now be of either .ico or .png or .svg type (but still limited to only one at a time)
- all favicon files must now reside in /media/system/images/ folder
- choosing the .svg file format type for favicon is now highly recommended over anything else
- (backend, template params config UI) Columns Width in Layout template style configuration must be calculated and set manually, instead of direct drag & drop
- (backend, template params config UI) Font Family list in Styling template style configuration is displayed with default admin template font style, instead of mimic the style for each font family in the selection list
- (backend, template params config UI) Colors in Selector ordering in Menu & Site Tools can be re-ordered only by editing the corresponding lines in the “templateDetails.xml” file, instead of direct drag & drop
- (backend, template params config UI) Social Icons ordering in SEO & System can be re-ordered only by editing the corresponding lines in the “JSNParamsSocialIntegration.xml” file, instead of direct drag & drop
Things known to be not working (yet):
- (frontend) SqueezeBox – waiting for code conversion from MooTools to JQuery (unplanned & unlikely to happen anytime soon)
Unknown status, due to the fact that I simply not using them (but I suspect these definitely require some extra work to make them Joomla! 5 compatible):
- Mega Menu
- VirtueMart integration
- K2 integration (this one probably pointless, as the K2 team seems to be totally against Joomla! 4/5)
(iii) (addendum) Installing the template after upgrading an existing Joomla! 3 web site to Joomla! 5 through intermediate (separate) clean J3 install
Premises:
- assuming an old, existing Joomla! 3 web site that uses the original JSN Solid PRO (Generation 1) for J3 as the main site template
- assuming also mySQL or MariaDB as the database for that web site – although the principle can probably be applied to other types of databases as well
- a separate virtual (online) or physical (local PC) web server should be available for temporary installation of a clean Joomla! 3 web site, so to keep the existing J3 web site intact until the update to J5 is proven to work properly
Again, this is an update method that I used myself. It is just a method out of many other possible and I don't particularly recommend it over others. Also, the following description does not take into account the possible existence of other extensions from the existing web site, whether compatible or not.
Procedure:
- go to the phpMyAdmin page that holds the database of the old, existing Joomla! 3 version of the web site
- Note: if the database names and credentials of the web site are not known or not at hand, then go to the root of that web server, look at the configuration.php file either by opening it via ftp or by using the native file manager there and take note (write down) the database name ($db field), the user name ($user field), the user password ($password field) and the database tables prefix ($dbprefix field) for later reference.
- in the left pane, click the database name in question and then in the right pane click the Export tab
- select Custom, then enable 'Add DROP TABLE / VIEW / PROCEDURE / FUNCTION EVENT / TRIGGER' statement
- click the 'Export' button and save the .sql file for later availability
- Tip: the size of the exported database can be reduced drastically if you clear the search index before exporting (and if so, don’t forget to recreate the index later, when the Joomla! 5 web site will be up and runnnig).
*
- go to the phpMyAdmin page that will hold the database of the intermediate web site
- create a new empty database with a new user for it with all the available privileges, using the same database name, user name and password as the ones from the existing web site
- using the file manager of that same intermediate web server, install a clean Joomla! 3 package not older than version 3.10.12, using all the database names and credentials from the newly created database and the same database tables prefix as the old one
- in the left pane of phpMyAdmin, click the database name and in the right pane click the Import tab
- browse for the .sql file saved moments ago and then click the 'Import' button
- wait for the success-like message to show up (it may take a while to complete)
- in the left pane of phpMyAdmin, under that same database name, click the xxxxx_extensions table and then in the right pane find the 'plg_system_jsntplframework' extension entry somewhere on one of the last pages of the table
- click Edit > protected field > change from 1 to 0 > click the 'Go' button
*
- in the administrator side of the intermediate web site, go to Extensions > Template > Styles and then set Protostar or Beez3 as default site template style
- Note: in this particular J3 to J5 update method, either the Protostar or Beez3 template must physically exist, so make sure at least one of them is in place and set as default.
- on that same page, select the 'JSN Solid PRO - Default' template style name (or maybe other suffix if it was ever changed) and then click the 'Delete' button; in case it appears as undeletable, leave it as is and skip to next step
- Note: if the web site is multilingual, first set to 'No' the default status of each per-language associated 'JSN Solid PRO - lang' template style name and then delete those as well.
- go to Extensions > Manage > Manage > enter 'jsn' in the Search field (and hit Return) > a list consisting of at least 'JSN Solid PRO' and 'System - JSN Template Framework' names should appear (easy check: the Author column should list all of these under the 'JoomlaShine.com' name)
- select all these JSN items and then click the 'Uninstall' button
- most likely it will protest with a Warning, but this is to be expected, as those JSN items were not physically present
- go to the frontpage of the intermediate web site and check that the old, familiar J3 text is readable (but nothing more than that)
- Note: there might be a situation where the frontpage will be just empty or display an error instead of the page itself: in case the web site makes use of a Joomla! language package that has not been physically installed yet; if that might be the case, you can either install the required language now and update it later on to J5, or better do nothing now and install the required language directly when Joomla! 5 is finally set up.
*
- while still on the administrator side, go to Global Configuration > Joomla! Update > change the Update Channel from 'Default' to 'Joomla Next' > click the 'Save & Close' button
- the Joomla Update screen should now appear, with a few colorful messages; take action or just take note of them – your choice, but please note that all references to compatible or incompatible extensions in this intermediate install are “virtual” only, meaning there are only references to them, stored as such in the database; probably the best thing is to take note (write down) all extension names listed under “Update Information Unavailable” and “Update Required” notifications and then delete them all before going to the next step; later on, when Joomla! 5 is up and running, you may install back their J5 compatible versions (where available)
- click the 'Live Update' tab and then click the 'Install the Update' button
- wait for the success-like message to show up – shortly it should say something like “Your site has been updated. Your Joomla version is now 4.x.x.”
- click the 'Back' button, then click the 'Check for Updates' button > a preupdate check for Joomla! 5.x.x page should appear
- check the 'Acknowledge the warnings about etc.' checkbox (if it shows up) and confirm it in the JavaScript pop‑up, then cick the 'Update' button > another confirmation request should appear
- Note: the 'Acknowledge the warnings about etc.' checkbox will be triggered also by the presence of the deprecated 'pkg_search' J3 native extension, in which case it can be safely uninstalled, as it was replaced by Smart Search in Joomla! 4 and onwards.
- check the 'I'm aware that a backup before any update etc.', then click the 'Start update' button
- wait for the success-like message to show up – shortly it should say something like “Your site has been updated. Your Joomla version is now 5.x.x.”
- after closing the subsequent “Welcome to Joomla 5.x!” pop‑up window, check the frontpage of the web site, where the old, familiar J3 text should be readable in the Cassiopeia template (but nothing more than that, yet)
- if the web site is multilingual, reinstall now the required additional languages
- install the JSN Solid PRO (Gen 1) template for Joomla! 5 by following one of the methods described above in the generic installation scenario chapter
- go to System > Site Template Styles > make the 'JSN Solid PRO - Default' template style the default one
- if the web site is multilingual, you may add now the required per-language associated JSN Solid PRO template styles
- if the overall site functionality depends on additional Joomla! extensions, install them now
- if the overall site content depends on additional user files (as is usually the case), copy them now to the required directories of the web site file system
- check the entire web site for the correctness of the installation and overall result
*
- go to the phpMyAdmin page that holds the database of the intermediate web server, which now holds the Joomla! 5 version of the web site
- in the left pane, click the database name in question and then in the right pane click the Export tab
- select Custom, then enable 'Add DROP TABLE / VIEW / PROCEDURE / FUNCTION EVENT / TRIGGER' statement
- click the 'Export' button and save the .sql file for later availability, using now a filename that reflects the J5 updated status of this new saved database file
If everything looks and works as expected *, you may now wish to proceed with upgrading the existing Joomla! 3 online version of the web site to Joomla! 5, either by completely deleting the old one (after doing a complete backup of it !), then installing in place a clean, brand new Joomla! 5 web site and importing there the new previously saved database etc. or – in case you are confident – by upgrading “live” the old web site directly through the embedded J3»then»J4»then»J5 update mechanism, using a quite similar procedure as the one described above.
* Manually transferring some .css files from the old web site to the new one is almost certainly necessary for the “looks as expected” part !
*
Speaking for myself, I updated my web site using the “live” update method, after some practice on both a subdomain created for testing purposes and a XAMPP web server installed on my PC.