Anatomy of a Layout -May 2025

The view shown by jDownloads on the front end uses various areas of the active layouts.  These play the same role as a Template in setting the general view of your site.  Like a template, the layouts are written in HTML code and make use of CSS structures.  It is assumed here that you have either read the article 'An Introduction to Layouts' (opens in a new window/tab) or are reasonably familar with layouts.

There are 7 types of layout (Categories, Subcategories, Category, Downloads, Download Details, Summary and Search). 
For each type  only one layout may be selected as active.  Each Layout has, in principle, two sections. One section has the header, subheader and footer sub-sections and the other section has the before, main and after sub-sections. So the view on the screen uses the appropriate section from the available active layouts.

One of the key aspects of layouts are the 'placerholders'.  These are like small "plugins" or "macros" that generate the relevant code.  They appear in layout code enclosed in braces: { and }.  For instance the placeholder {category_listbox} generates the code that will show a pulldown list of all the categories and sucategories.

Also please note that not every placeholder is available in every type of layout.  When you open a layout in the back end then each section has an button that lists the available placeholders for the section.

To access the layouts in the Joomla control page click on  then click on . Finally click on .   This takes you to the main Layouts page which has a set of tabs of the layout types and the CSS files as shown immediatley below.
If you click on a layout type such as for example then it shows a list of all of the Layouts of that type as illustrated below.
Presently there are nine different Download type layouts.
 
Note that the layouts in this instance have 'Files' in the name rather than 'Downloads' - this is a hangover from the earliest versions of jDownloads.  It was considered by the development team that it would have been too much of an onerous task for users to have to reselect layouts with new names - so we still have 'files' in the names.

If you click on the name of a layout then the details of that layout will be shown.  This is discussed in more detail below.

Each Download layout has two main sections, the tab and the tab.

The Main Area is itself has three sections: 'Use Before Layout', 'Main Layout' and 'Use After Layout'. In this example there is no code in the 'Use Before Layout' or the 'Use After Layout'.

In each instance the main area has most of the code.  There is also has a side bar. Note the image below is quite long as it shows all of the sidebar and most of the layout main code!

It has three areas: 'Use Before Layout', the 'Main Layout' itself and the 'Use After Layout'.  As noted above, in this example the 'Use Before Layout' and the 'User After Layout' are both empty.
Also notice the button which shows the available 'place-holders'. Notes on this are given further below.

In the code sections there are so called placeholders such as {file_pic}. These placeholders call internal routines that carry out the relevant action, which in this case show an image of the file type such as .

The panel on the right hand side as illustrated earlier provides information and options for the layout.

It shows if it is a default layout, that is whether or not the layout is part of the jDownloads installation.  Also whether this layout is the current Active layout of this type.

There is also a facility to load in two additional popular CSS framework files to allow additional classes and the like for 'own' styling.
Please note if you do plan to modify an existing layout always make a copy first  by using the button and then modify that new one.

If the Title of the original one was say "Standard Files Layout without Checkboxes 3.9" then the copy will be "Standard Files Layout without Checkboxes 3.9 (2)".  You may of course change the Title.

There is also a description box where you can add details about the layout.  This description will appear on the main layout panel in the backend.

Click on the button to see the list all of the placeholders, which are always enclosed in {   } characters, that are available for the current  section of the layout type that is currently being shown.

The Downloads type layouts have by far the largest number of placeholders.  The example below shows the placeholders available in the main area.   In general one would not use placeholders in the before and after areas.

The image below shows the placeholders available for the the header, subheader and footer areas.

Because it is a view of a single category the outer framework, that is the header and footer areas, come from the active Category layout. The subheader comes from the active Downloads style. Similarly each of the three Downloads come from repeated use of the main area of the active Downloads style.

In the following examples the HTML code has been 'coloured' for clarity.

In the code fragments you will also see lines likeThis partcular code clears the space below them, they may be thought of as creating a new line.

Similarly the Sort order bar will only show if  -  tab -'View sort option in the header' is set to Yes and also that 'Select the fields for the sort bar' is not empty.

Also adding or removing entries to the view is straightforward by adding or removing code 'blocks' such as

In most of the HTML code the <div lines include a statement style="".  This enables changing simple matters such as say font-size by directly including the relevant CSS inside the "". See W3 use of HTML inline style (opens in a new window/tab) for more information.

ColinM February 2020 modified July 2023, May 2025