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.

• Title (or Name).
• An internal note resizeable text field.
• The number of columns in the layout - note there are some multi column examples.
• Use for Subcategories, which is specific to this type.
• Language.
• Layout Type.
• Default Layout, set to No if a copied layout.
• ID which is unique.
• Use Before Layout which is an expandable text box.   This can be a simple text message and may contain appropriate html.
• Layout, this is the 'operative' part of the layout and together with the Header and Footer parts it controls what is shown and how it is shown on the Front End.  It contains the html code that governs the screen view and makes use of placeholders in {} brackets.
• Use After Layout, which is just like the Use Before Layout text box.

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'.

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 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 3. This short section shows the description, the first image and any preview audio or video.  If some or all of these do not exist in a download then nothing is shown and no screen space is used.   One could add the capability to show more images. See for example  layout  "Standard Details Layout v3.2 - Full Info" which will show upto 3 images.    The place holder {featured_class} is interesting as it allows for different styling if the Download is set as  featured.  In this example if it is featured then class="jd_featured_detail jd_description_wrapper" is   generated, otherwise it generates class="jd_description_wrapper".

 Section 4. This layout uses minipics.  This requires that the "Insert mini-symbol?" field in the layout is set to Yes.  Clearly if you do not want a particular information item then omit the entire relevant line. And of course you could add other information items such as the {created_by_value} by adding a  suitable  line.

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}