Layout with divs...

[flosen]

Hi there!

For better layout on mobile devices, i want to get rid of the tables in layouts but now im facing a problem.

In categories list i want to create a list with a div all over the list. I hope you get it, if I post the code.

1. What I entered in categories layout:

Code Select Expand


<div class="list-group">
{cat_info_begin}
<div class="list-group-item">
    <h4 class="list-group-item-heading">{cat_title}<span>{sum_subcats}{sum_files_cat}</span></h4>
    <p class="list-group-item-text">{cat_description}</p>
</div>
{cat_info_end}
</div>


2. What it become on my page (with 2 categories):

Code Select Expand


<div class="list-group">
    <div class="list-group-item">
        <h4 class="list-group-item-heading"></h4>
        <p class="list-group-item-text"></p>
        <p></p>
        <p></p>
    </div>
</div>

<div class="list-group">
    <div class="list-group-item">
        <h4 class="list-group-item-heading"></h4>
        <p class="list-group-item-text"></p>
        <p></p>
        <p></p>
    </div>
</div>


3. What it should become (to style the first and last item with "list-group-item:last-child / :first-child)

Code Select Expand


<div class="list-group">
    <div class="list-group-item">
        <h4 class="list-group-item-heading"></h4>
        <p class="list-group-item-text"></p>
        <p></p>
        <p></p>
    </div>
    <div class="list-group-item">
        <h4 class="list-group-item-heading"></h4>
        <p class="list-group-item-text"></p>
        <p></p>
        <p></p>
    </div>

</div>


So that the <div class="list-group"> starts in before first cat and ends after last. I thought that would be done, if I place the {cat_info_begin}/{cat_info_end} inside that div, but it wouldnt work...

Is it possible to do so? Or what am I doing wrong?

Thanks, Flo!

[ColinM]

Hi Flo
I will look into this for you.  It would help to have a copy of the relevant css, which I presume you have put in jdownloads_custom.css
Also I would need to look at front end of site.  If you do not want that public then send details by PM - at this time only need to view front end as once seen and with copy of css and your changed layouts I should be able to simulate.  One one to get all the layouts is to use phpMyAdmin to dump table <prefix>_jdownloads_templates into a file and then zip it up with your css info.

Are you aware that jD uses different parts of different Active Layouts at different stages?  This is described in article
http://www.jdownloads.net/documentations/item/which-layout-is-used-where

Colin
PS I will let Arno sort out about the breadcrumbs

[flosen]

Hi there and thanks for your help.

Unfortunately I'm testing on local machine, on my live site there are still old joomla and jdownloads versions. So I want to test local before updating.
Until now I didn't change any .css files, first I wanted to create the right structure. The only issue is, that the <div class="list-group"> should contain the hole list.

Code Select Expand


<div class="list-group">
   <div class="list-group-item">
       <h4 class="list-group-item-heading">Cat 1</h4>
       <p class="list-group-item-text"> Discription1</p>
   </div>
   <div class="list-group-item">
       <h4 class="list-group-item-heading">Cat 2</h4>
       <p class="list-group-item-text">Discription2</p>
   </div>
</div>


I changed the categories Layout (germen: Kategorien) like shown in the first post. With my header it looks like that:

Code Select Expand


{cat_title_begin}<div style="background-color:#EFEFEF; padding:6px;">{subcats_title_text}</div>{cat_title_end}

<div class="list-group">
{cat_info_begin}
  <div class="list-group-item">
      <h4 class="list-group-item-heading">{cat_title}<span>{sum_subcats}{sum_files_cat}</span></h4>
      <p class="list-group-item-text">{cat_description}</p>
  </div>
{cat_info_end}
</div>


I hope you can check it without live site, because imo the .css isn't relevant. I would only create the structure, from that point I think I can modify like I want...
Is it understandable what my consern is??

Thanks Flo


Edit: Is it possible to get the link to the category as a placeholder? I want to add a <a href="{placeholder}"> so that the hole container is a link and not only the cat-title...

[flosen]

Okay, I solved the problem with the <div> tag including the whole list:
I just added the opening div-tag at the end subheading area layout and the closing div-tag at the beginning of footer area layout.

Now it would be great, if I can get a placeholder for the url. In which files the placeholders are defined?

Flo

[ColinM]

Hi
EDIT:  Posted this same time as you replied above
Not really bothered about the css itself, but I would like to see all of the layout.  Layouts have four parts:
Header, Sub Header, Main and Footer  So the layout starts with a Header and ends with a Footer.  

So if you want an all enclosing <div>  Then it should start in the header with <div class="list-group"> and end in the Footer with the closing </div>

I have quickly done that and the code result is below.  Note that jD has an overall enclosing div namely <div class="jd-item-page"> and the extra <div class="list-group"> is within that enclosing div as

Code Select Expand

<div class="jd-item-page"><div class="list-group">
<table class="jd_top_navi" style="border-bottom: 1px solid #cccccc;" width="100%">
<tbody><tr border="0px" valign="top">
<td colspan="2" style="padding:5px;font-size: 9px;">Standard Categories Layout v2.5 (2) -<b>Header</b></td>
</tr>
<tr border="0px" valign="top">
<td style="padding:5px;"><a href="/j32/list-all-cats"><img src="http://www.botley.com/j32/components/com_jdownloads/assets/images/home_fe.png" alt="Overview" border="0" height="32" width="32"></a> <a href="/j32/list-all-cats">Overview</a></td>
<td style="padding:5px;"><a href="/j32/list-all-cats/search"><img src="http://www.botley.com/j32/components/com_jdownloads/assets/images/search.png" alt="Search" border="0" height="32" width="32"></a> <a href="/j32/list-all-cats/search">Search</a></td>
<td style="padding:5px;"><a href="/j32/upload-data"><img src="http://www.botley.com/j32/components/com_jdownloads/assets/images/upload.png" alt="Add" border="0" height="32" width="32"></a> <a href="/j32/upload-data">Add</a></td>
<td style="padding:5px;" align="right" valign="bottom"><form name="go_cat" id="go_cat" action="" method="post"><select id="cat_list" name="cat_list" class="inputbox" onchange="gocat('/j32/list-all-cats', '/j32/list-all-cats/uncategorised', '/j32/list-all-cats/all', '/j32/list-all-cats/all?type=top',  '/j32/list-all-cats/all?type=new'  ,'null,/j32/list-category-public-downloads/category/2-public-downloads,/j32/list-all-cats/category/3-topcat-v19-sub1-blahblah,/j32/list-all-cats/category/4-topcat-v19-sub1-sub2,/j32/list-all-cats/category/5-topcat-v19-sub1-sub2-sub3,null,null,null,null,null,/j32/list-all-cats/category/11-topcat-v19-sub1a,null,null,null,/j32/list-all-cats/category/15-topcat-v19-sub1b')">
<option value="0" selected="selected">Overview</option>
<option value="3">- topcat-v19-sub1</option>
<option value="4">- - topcat-v19-sub1-sub2</option>
<option value="5">- - - topcat-v19-sub1-sub2-sub3</option>
<option value="15">- topcat-v19-sub1b</option>
</select>
</form></td>
</tr>
</tbody></table><table class="jd_cat_subheader" width="100%">
<tbody><tr border="0px" valign="top">
<td colspan="2" style="padding:5px;font-size: 9px;">Standard Categories Layout v2.5 (2) -<b>Sub-Header</b></td>
</tr>
<tr>
<td valign="top" width="45%">
<b>Overview</b>
</td>

</tr>
<tr>
<td align="left" valign="top" width="45%">Number of Categories: 1</td>

</tr>
</tbody></table>

<table style="border-bottom: 1px solid #cccccc;" width="100%">
<tbody><tr border="0px" valign="top">
<td colspan="3" style="padding:5px;font-size: 9px;">Standard Categories Layout v2.5 (2) -<b>Main</b></td>
</tr>
 <tr border="0px" valign="top">
   <td style="padding:5px;" width="65%"><a href="/j32/list-category-public-downloads/category/2-public-downloads"><img src="http://www.botley.com/j32/images/jdownloads/catimages/folder.png" alt="folder.png" align="top" border="0" height="48" width="48"></a> <b><a href="/j32/list-category-public-downloads/category/2-public-downloads">Public Downloads</a></b></td>
   <td style="padding:5px; text-align:right" width="20%">Subcategories: 5</td>
   <td style="padding:5px; text-align:right" width="15%">Files: 8</td>
 </tr>
 
</tbody></table>
<table class="jd_footer" style="width:100%;">
<tbody><tr border="0px" valign="top">
<td style="padding:5px;font-size: 9px;">Standard Categories Layout v2.5 (2) -<b>Footer</b></td>
</tr>  
   
</tbody></table>
</div>  <!-- end of  class="list-group" div -->
<div style="text-align:left" class="back_button"><a href="javascript:history.go(-1)">Back</a></div><div style="text-align:center" class="jd_footer"><a href="http://www.jDownloads.com" target="_blank" title="www.jDownloads.com">Powered&nbsp;by&nbsp;jDownloads</a></div>
</div><!-- end of  class="jd-item-page" div -->

Hope that helps

Colin

[ColinM]

Hi

Now it would be great, if I can get a placeholder for the url. In which files the placeholders are defined?

If you mean the download link when title actions downloads then try  {file_title}   also try {url_download}  It does depend on various Config option.

Colin

[flosen]

I ment the url from the cat titles, but i found it in the php files and modified it for my needs. So I wouldn't explain that exactly now...
I will build a for my template suitable responsive layout, so I'm very happy. I can continue to use the best download component  .

Thanks for your help!
Flo