CSS import, Export and Edit

Introduction

The jDownloads Frontend uses 5 different CSS files as noted below.
1. jdownloads_fe.css: contains all the default classes for the frontend output;
2. jdownloads_fe_rtl.css: contains all the default classes for adapting to RTL languages frontend output (only loaded when current language is an RTL language)
3. jdownloads_buttons.css: contains only those classes used for the 'css buttons';
4. jdownloads_custom.css: allows customising front end views, may be used to override any css in the above three files but not the modules css file;
5. jdownloads_modules.css: contains all the default classes for jDownloads modules in the frontend output.
Note that the CSS files, except.jdownloads_custom.css, are overwritten on each update to jDownloads

Accessing CSS Export, Import & Edit Functions

On the jDownloads Control panel if you click on the layouts button layouts button1 this will bring up the specific Layouts type selection panel as shown on the far right.

It will also show  will show the css export button and css import button buttons near the top of the view.

The view also shows the Layout type Selection Panel as shown on the far right

Clicking on the CSS files button button will give access to CSS Edit.
Control Panelcp buttonsLayout Type Selection PanelLayout subpanel

Exporting CSS file

After clicking on the css export button a page which describes each of the five CSS files used by jDownloads is presented.

At the foot of the page there is a pull down allowing selection of the relevant css file. 

Next to it is an 'Export CSS File' button. Clicking on this button initiates a download sequence

export01

Importing CSS file

Like the Export, clicking on the css export button  shows a page which describes each of the five CSS files used by jDownloads is presented.

At the foot of the page there is a brouse button,  brouse1 button, allowing selection of the relevant css file on your device. 

After selecting the appropriate CSS file The button will look like brouse2 button

Next to it is an 'Import CSS File' button. Clicking on this button initiates the uploading sequence.  jDownloads checks that the file name is one of the five possible names and a few simple CSS checks.  If it is not a correct name or othwise fails the upload is aborted with a message: CSS Import ErrorIt is recommended that before you upload a modified CSS file you check it is valed by using a CSS checker such as WW3 CCS Validation (opens in new window/tab). 

Note at the time of writing this checks to level 'CSS Level 3 + SVG'.   In at least one place jD uses some 'CSS4' items.  There are also warnings about unknown vendor extensions such as -webkit-box-sizing and the like. These are retained for older browsers but will gradually be purged.

Edit CSS files

Clicking on the CSS files button button will give access to the online CSS Edit abilities.

As with the other sections the view gives a description of each frontend CSS file.  After the descriptions you will find a set of tabs as illustrated below.
edit selection01
If, for example, you select the tab jdownloads_fe.css you would see a listing such as shown opposite.

This screen is 'live' in that you can make changes directly!! It has a scroll bar on the righthand side.

At the top of the view there are css edit close button
and css edit save close button buttons.

The cancel button exits without any changes being saved but the Save & Closse button saves all the changes.  The resultant CSS becomes the active CSS next time you load a page.

css edt example

We strongly recommend that you do not use this method unless you are well versed in CSS.

Use the Export and Import as you can then get any changes checked before you commit - and you can also make a copy as a backup. 

Usually the best place for any site specific changes would be to edit the jdownloads_custom.css file.

ColinM November 2021

Tags: index

Print Email