Editing a Layout
This note deals with editting a layout. If you are unfamilar with layouts it is suggested you first check out article http://www.jdownloads.net/documentations/item/layouts-overview There are currently six layout classes as shown opposite. |
![]() |
Clicking on one of the classes, Files for example, shows that there are often several layout styles within a class. Within a class only one style at a time is the active one. It is straightforward to select another style as the active one by clicking in the checkbox of the new target layout that is to become the active one, and then clicking on the Activate button in the toolbar, which is illustrated below. |
![]() |
To edit the layout either click in the relevant checkbox and then click on the toolbar Edit button, or just click on the blue name. For example clicking on "Standard Categories Layout v3.2" will display the layout as shown opposite. Because it is a Default layout the Title, the Layout Type, the Default Layout and the ID fields are all greyed out, indicating those fields cannot be changed. Also the toolbar will change to the one below. It is strongly recommended that you never modify one of the default layouts. Rather make a copy by clicking on the 'Save as Copy' button. There are several reasons for making a copy. One is that if you make an error you can revert back very quickly. The other is that if you edit one of the Default Layouts then it is possble that during an update a new version overwrites it so that all your edits are lost! Using the 'Save as Copy button' will make a direct copy of the layout except it will have a new Title (name) such as 'Standard Categories Layout v3.2 (2)', which can of course be changed, the Layout Type will remain as before, the Default field will be No, and a new ID will have been assigned. It is probably better to change the Title to something like 'Standard Categories Layout - modified'. Then click on the Save button of course. Any description added into in the Internal Note field is shown when viewing the available layout styles in the Backend. To experiment with the new layout then activate it. An important advantage of using a copy, as mentioned above, is that if it does not work then it is easy to re-activate the corresponding Default layout. |
![]() |
There are typically four sections to the layout: Header area; Sub header area; Main layout area and Footer area |
|
All layouts when viewed from the Admin or back end have a similar structure. Each has two tabs: Edit Layout and Edit Header and Footer area. |
|
The Edit Layout tab has various fields, some of which are common and others are specific to the type of layout. The present example has the following fields.
It should be noted that by design these layouts use a div based structure. They are responsive and will automatically adjust to device size. The Main part of a layout is used multiple times, for instance if listing a set of Downloads then most of the main part would be used for each download being shown. However as noted below there is often a section which is only used once. These 'once only' parts are typically enclosed in place holders like {files_title_begin} to {files_title_end} |
![]() |
The Edit Header and Footer area Tab just has three expandable text boxes like the main edit layout. The Header, Sub header and Footer areas are used just once when creating the front end view. But the particular header, subheader or footer being shown might come from a different layout. See http://www.jdownloads.net/documentations/item/which-layout-is-used-where for more details. |
![]() |
The actual way in which the operative parts of the layout are shown is controlled by the Use WYSIWYG-editor for layouts? field in the Configuration - Backend tab. If the setting is No then it appears in the raw HTML format as illustrated above. This is just a simple expandable text box. However if the setting is Yes then the initial display is such as shown opposite. The actual view depends on which editor is your default. Here the JCE editor is being used. This view illustrates where the contents of each placeholder will appear in the layout as shown on the Front End. Generally I find it easier to use to use the simple text editor as it shows everything. |
![]() |
Most Editors also offer an 'HTML' or 'Code' view such as illustrated opposite. In general these views colour the HTML tags so it becomes easier to see where the matching parts of the HTML code are located. Each layout has a mixture of regular HTML statements enclosed in angle brackets <...> and placeholders in {...}. These place holders are replaced by the appropriate text or image when the code is executed in the front end. Not all place holders can be used in all layouts, the list of available place holders for a specific layout type are given in the Additional Information section for each layout. Note the placeholders are not 'plugins'. |
![]() |
Examples of editing a layout
In the following we will look in more detail at the HTML and placeholders that create the view seen by the user.
In all cases when about to edit a layout first make a copy and then edit the copy. jD will automatically give the copy a new name, which can be changed to suit.
The View created by the Standard Files Layout v3.2 is typically something like that illustrated opposite where for convenience parts have been edged in brown an given a section number. The code for the whole layout is that shown above. We will look at each individual section. First there are some general aspects. The layouts use CSS classes and class names are prefaced with jd_ to minimise the chance of any confilct with your template CSS. The classes are defined in file jdownloads_fe.css Lines which have jd_clear in the class= "...." part act like a 'graphical new line'. Be careful if you remove them. Also the Layouts make use of <div elements with a 'wrapper' type in the class. This basicly 'encloses' the inner items and provides the general colouring, font and the like so be careful if you move a line outside its containing wrapper. |
![]() |
Section 0. The initial code between {files_title_begin} and {files_title_end} is only used once. It produces the general title, which in English is Files. It is NOT shown in the picture above.
![]() |
|
Section 1. This has the Download title and version together with the rating are shown on the first line. An edit pencil automatically appears if the logged in user is able to edit the Download from the front end. Looking at the code then a New, Updated or Hot symbols could appear if appropriate. If you did not want to show say that a Download is hot then delete the placeholder {pic_is_hot}. If you did not want to show the Rating stars and votes then remove {rating} place holder or you could remove the entire line from <div to </div>. |
|
Section 2. This section just shows any Tags. If you do not have any Tags then nothing shows and no screen space is taken. | ![]() |
Section 3. This short section shows the description, the first image and any preview audio or video. If some or all of th |
|
Section 4. This layout uses minipics. This requires that the "Insert mini-symbol?" field in the layout is set to Yes. Clearly It also generates the Download button with the {url_download} place holder. |
|
If you use the layout "Standard Files Layout without Checkboxes v3.2" then part of the layout shows a the information about the Download as shown in the first picture opposite. The second picture shows the start of the code that generates the image on the screen. If we wished to remove say the 'Changed' line then remove the entire block <div class="jd_field_row ... to the corresponding </div> that contains the place holders {modified_date_title} and {modified_date_value} |
![]() ![]() |
Note that in many instances the <div contains a style="" clause. This can be used to set specific CSS styling without having to add it to the jd_custom.css file.
Colin Mercer, July 2014 revised April 2016