Margin Issue [solved ]

[Justin]

Hello:

I hope that you can help me:When I go to the page with the list of files to download, the image and some of the words are overflowed and missing on the left-hand side. You can see that here:

http://npte.jtkrc.com/2015-01-22-02-01-26/fnssp-materials

Also, can you please advise as to how to make the font size of the file name smaller?

Thank you very much!

[ColinM]

Hi
Could you please advise what versions of jDownloads and Joomla! you are using.  Also could you tell me the names of the Active Layouts in the Categories, the Category, the Files and Summary Layouts. 

I think you might be using Files Layout "Alternate Files Layout v2.5" and this looks incompatible with your template.  Could you please switch to Files Layout "Standard Files Layout without Checkboxes v2.5" as the Active one.  This will hopefully sort out the width incompatibility.  Incidentally which template are you using? 

Colin

[ColinM]

Hi
I have identified the source of the margin problem as a clash of css class names.  Also found where you can change the layout code in Files layout "Alternate Files Layout v2.5"
First thing is to enter that layout and do a Save as Copy.  This will have a name like "Alternate Files Layout v2.5 (2)"  Do NOT change the standard one as otherwise you may have to edit it each time jDownloads is updated.  Please read the articles
http://www.jdownloads.net/documentations/item/editing-a-layout
http://www.jdownloads.net/documentations/item/simple-example-of-layout-editing


Existing Layout code in "Alternate Files Layout v2.5" starts as below

Code Select Expand

{files_title_begin}<div style="background-color:#EFEFEF; padding:6px; border-width:1px;border-bottom-style:solid; border-color: #cccccc;">
{files_title_text}</div>{files_title_end}

<div class="row">
   <div class="width100 first-cell">
       <div class="teaser-item">
       <div class="pos-media media-left">
           {file_pic}
       </div>
       <div class="pos-media media-right">
               {rating}
       </div>
       <h2 class="pos-title"> {file_title} {pic_is_new} {pic_is_hot} {pic_is_updated}</h2>
       <ul class="pos-specification">
           <li class="element element-itemmodified first">
               <strong>{created_date_title}: </strong> {created_date_value}
           </li>
           <li class="element element-text">
               <strong>{release_title}: </strong>{release}

In following I have made the change item in bold just for illustration
Modification 1
Change the line <div class="row"> to <div class="jd_row">

Modification 2
change the line <h2 class="pos-title"> {file_title} {pic_is_new} {pic_is_hot} {pic_is_updated}</h2> to either
a) change the h2 to h4  in both places - actually I think someone has changed the default one to h3
  <h4 class="pos-title"> {file_title} {pic_is_new} {pic_is_hot} {pic_is_updated}</h4>

b) change the line from h2 to p as
<p class="pos-title" style="font-size: 12px; position: relative; top: 0%; transform: translateY(50%);"> {file_title} {pic_is_new} {pic_is_hot} {pic_is_updated}</p>

In version b you have direct control of the font size and its vertical alignment position.  
Note have not tested this with the effect of the placeholders {pic_is_new} {pic_is_hot} {pic_is_updated}

Please let me know how this goes.

Colin


[gelöscht durch Administrator]

[Srinivas]

yes,
You can do this :
change the line from h2 to p as
<p class="pos-title" <p class="pos-title" style="font-size: 12px; position: relative; top: 0%; transform: translateY(50%);"> {file_title} {pic_is_new} {pic_is_hot} {pic_is_updated}</p>

Or Also Change h2 to h5 or h6 to make font size smaller

[Justin]

Thank you very much for you help, Colin and Srinivas. I will work on it and report back to you. This is awesome!

Justin

[Justin]

Super! The modification works like a charm. Thank you again. For your information, Colin, I am using a free template called 'favourite' from FavTheme.

Best regards,

Justin