Import and Export of Layouts and CSS files

The appearance of the Categories and Downloads in the front end is controlled by a combination of the jDownloads Layouts and the CSS.  The Layouts maybe edited online within jDownloads as described in the Layouts section of the documentation Editing a Layout.  Editing the CSS files however is more challenging due to the size of the file.

jDownloads provides facilities to export and import  Layouts and CSS files. (CSS import -export is available from jD 3.2.46 October 2016)

The simplest way of editing a CSS file is with a text editor such as Notepad++ on your local PC or similar. That means being able to export the relevant CSS file and then import the modified version.   These transfers can be done by using an FTP program such as FileZilla, by using a Joomla! file manager component, or by using the facilites available on your hosting site control panel.

Note that there are three CSS Files

  1. jdownloads_fe. css which is the main styling of the front end - this file is liable to be reset on every jDownloads update
  2. jdownloads_buttons.css which styles the buttons- this file is also liable to be reset on every jDownloads update
  3. jdownloads_custom.css which is specific to your site and is not changed by jDownloads

Just  for clarity:

These transfer methods require a detailed knowledge of the file structure of Joomla! and the jDownloads Component.  Exporting to your local device is fairly harmless but importing back up to the server can be disastrous if the wrong file is uploaded or it is put in the wrong directory.

To make these transfer more robust and less error prone, Import and Export features have ben added to the Layout control panel. 

However the export facility for each Layout type is in each layout section.

This note has four sections:

  1. Export a Layout;
  2. Import a Layout;
  3. Export a CSS file;
  4. Import a CSS file.

 Note that layout files are exported and importted as '.xml' files because they have multiple section.

CSS files are regular '.css' files.

css imp exp 01B

Export a Layout  css imp exp 20ELay


From the Layout control panel select which type of layout you wish to export.  This will then list all the layouts of that type.

Next the 'tick' the select box of the actual layout.  In this example it is a layout called 'Compact Files Layoutwithout Checkboxes v3.2'

Then click on the Export button on the tool bar at the top of the page. This will open up a standard download sequence in your browser so that you can save the exported layout to a location of your choice.

The exported file is an xml type file as there are multiple parts to a Layout. All of these are recorded in the xml file.

The name of the exported file takes a standard form such as shown below exported_layout_jd_3.2.46_Compact_Files_Layout_without_Checkboxes_v3.2.xml

 css imp exp 10LayA

Import a Layout  css imp exp 20ILay


The Import layout button may be found on the Layout Control Panel and on the individual layout section.  The imported xml file contains the type of layout so jDownloads knows into which section the uploaded layout file is to be located.

Checks are made upon the structure and contents of the uploaded xml file to ensure it is a valid layout file.

Clck on the Browse button to find the xml file, and then click on the Import Layout button.

 css imp exp 11Lay

Export a CSS file  css imp exp 20Ecss


 After clicking on the Export CSS file button the Layout Export page will be shown.

After some explanation about the three CSS types there will be a Select button and an export button.  Usually it will be either the jdownloads_fe.css or the jdownloads_custom.css files that is selected.

Next click on the Export CSS button next to the Selection button. This will open up a standard download sequence in your browser so that you can save the exported layout to a location of your choice.

 css imp exp 09

Import a CSS file  css imp exp 20Icss


The 'Import a CSS file' button is only available on the Layout Control Panel. Clicking on the 'Import CSS file' button will take you to the import css page.

After some explanation about the three CSS types there will be a Browse button and an and an Import CSS file button. This is uploading from your local device to the web site.

 css imp exp 02
Use the Browse button to select the particular file to upload to your site, then click the 'Import CSS file' button. css imp exp 12 Note that jDownloads makes several checks on the validity of the selected file.  css imp exp 04
The picture opposite shows a view of the site files before the import occured.  css imp exp 13

If the upload is successful then the new file will be in the directory and the previous file will have been renamed.

In this example the renamed file is "jdownloads.fe.css.backup.1"

If another upload of a "jdownloads.fe.css" occurs then there will another backup file, this time called "jdownloads.fe.css.backup.2".

This succesive naming continues. To delete a backup file or rename back to  "jdownloads.fe.css" it is necessary to use either a Joomla! file manager, an FTP programme or the website control panel file manager.

 css imp exp 06
If the upload is not successful then an error message is returned and the directory remains unchanged  css imp exp 08A

ColinM Aug 2016