Import and Export of Layouts and CSS files [NEEDS REF]

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 [NEEDS REF].  Editing the CSS files requires a good understanding of css.

jDownloads provides facilities to export and import  Layouts and CSS files.
  • Import and Export of Layouts enable sharing of layouts between users.  The exported files are an xml file, for example exported_layout_jd_3.9.0_Files_Layout_Single_Line_v3.2.xml.
  • Import and Export of CSS files is to facilitate making changes to the appearance of the items in the layout.  The exported files are a css file, for example jdownloads_custom.css.
Editing an exported layout file is not recommended as it is a complex structure and requires a strict form.

The simplest way of editing a CSS file is with a text editor such as Notepad++ on your local PC or similar.  To download Notepad++ see (opens in a new window).  The edited CSS file may then be imported.

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:
  • Import is uploading to your site,
  • Export is transferring from your site to your local device, that is downloading
To access the import and export go to the jDownloads Control Panel and click on the css imp exp 30 button.
This provides Import of layout and css files and Export of css files. Export of a layout is available in each layout section.

Note that layout files are exported and imported as '.xml' files because they have multiple sections.  The css files are exported and imported as type '.css' files.

This article has four parts:
  1. Export a Layout;
  2. Import a Layout;
  3. Export a CSS file;
  4. Import a CSS file.
css imp exp 01B

Export a Layout  css imp exp 20ELay

To export a layout you first need to select the type of layout on the Layout Control page, for example to export one of the Downloads layout  click on the css imp exp 32 button.

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 'Files Layout Single Line v3.2'.

Then click on the css imp exp 34 button on the tool bar at the top of the page.

css imp exp 33
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.

The name of the exported file takes a standard form such as "exported_layout_jd_3.9.0_Files_Layout_Single_Line_v3.2.xml".  Note that the name also includes the version of jDownloads.

Import a Layout css imp exp 20ILay

The Import layout button may be found on the Layout Control Panel and also in each 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.

Click on the Browse button to find the xml file, and then click on the Import Layout button.
css imp exp 35Lay

Export a CSS file css imp exp 20Ecss

After clicking on the Export CSS file button on the Layout Control panel, 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 css file to a location of your choice.  In this example the name of the exported file is jdownloads_custom.css
css imp exp 36

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 Import CSS file button. This is uploaded from your local device to the web site.
css imp exp 37
Use the Browse button to select the particular file to upload to your site, then click the  css imp exp 12 button.

Note that jDownloads makes several checks on the validity of the selected file.
css imp exp 38
The picture opposite shows a view of the web site files before the import occured.

Note that jDownloads also supports the  w3schools (opens in a new tab/window) w3.css file.  This is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks.
css imp exp 39
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_custom.css.backup.1"
If another upload of a "jdownloads_custom.css" file occurs then there will another backup file, this time called "jdownloads_custom.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 October 2019

Print Email

This site uses cookies. By continuing to browse the site, you are agreeing to our use of cookies.