How to center folder icon in categories views

[rumen]

Hi,
I'm using this Layout with 2 columns:

Code Select Expand

{cat_info_begin}
<div class="jd_cats_2col_wrapper" style="text-align:center">
    <div class="jd_2col_inner_wrapper" style="text-align:center">
        <div class="jd_inline" style="text-align:center">
            <div class= "jd_cats_2col" style="font-weight: bold; ">{cat_title1}</div>
            <div class= "jd_cats_2col" style="">{sum_files_cat1}&#160;</div>
        </div>
                <div class= "jd_cats_2col jd_cats_2col_left"  style="text-align:center">{cat_pic1}</div>
        <div class= "jd_cats_2col"  style="width:100%; text-align:center">{cat_description1}&#160;</div>
    </div>
    <div class="jd_2col_inner_wrapper_right" style="float:right; text-align:center">
        <div class="jd_inline" style=text-align:center"">
            <div class= "jd_cats_2col"  style="font-weight: bold;text-align:center">{cat_title2}</div>
            <div class= "jd_cats_2col"  style="text-align:center">{sum_files_cat2}&#160;</div>
        </div>
        <div class= "jd_cats_2col jd_cats_2col_left"  style="text-align:center">{cat_pic2}</div>
        <div class= "jd_cats_2col" style="width:100%;text-align:center">{cat_description2}&#160;</div>
    </div>
</div>
<div class="jd_clear"></div>
{cat_info_end}

So, how to center the folder image? Now is on the left side

Thanks



[gelöscht durch Administrator]

[ColinM]

Hi
To do this will require a major rewrite of the layout and css.  In part this is because the image and the text fields are in different <div> blocks.  Probably need to change to rewriting the associated css using 'flex' styling which is a longer term objective anyway.
Colin

[rumen]

Hi,

Thank you for the answer. Today I got from the old jDownload version for Joomla 1.6 this below and works:

Code Select Expand

{cat_title_begin}<div style="padding:6px;">{subcats_title_text}</div>{cat_title_end}
{cat_info_begin}
  <table width="100% style="border-bottom: 1px solid #cccccc;">
    <tr valign="top" border="0px">

<td width="15%"></td>
<td width="25%" style="padding:5px; text-align:center">{cat_pic1}<b><br />{cat_title1}</b><br />{sum_subcats1}<br />{sum_files_cat1}</br>{cat_description1}</td>
      <td width="20%"></td>
      <td width="25%" style="padding:5px; text-align:center">{cat_pic2}<b><br />{cat_title2}</b><br />{sum_subcats2}<br />{sum_files_cat2}</br>{cat_description2}</td>
<td width="15%"></td>
    </tr>
  </table>
{cat_info_end}
<table border="0" cellspacing="2" cellpadding="5" width="100%";">
{checkbox_top}
</table>
{files}
{form_hidden}
<div style="text-align:right">{form_button}</div>

This code above, if we have responsible design, will resize automatically the pictures in the description.
If we want the pictures in desctiption to be static, we can use this:

Code Select Expand

{cat_title_begin}<div style="padding:6px;">{subcats_title_text}</div>{cat_title_end}
{cat_info_begin}
  <table width="100% style="border-bottom: 1px solid #cccccc;">
    <tr valign="top" border="0px">
<td width="50%" style="padding:5px; text-align:center">{cat_pic1}<b><br />{cat_title1}</b><br />{sum_subcats1}<br />{sum_files_cat1}</br>{cat_description1}</td>
      <td width="50%" style="padding:5px; text-align:center">{cat_pic2}<b><br />{cat_title2}</b><br />{sum_subcats2}<br />{sum_files_cat2}</br>{cat_description2}</td>
    </tr>
  </table>
{cat_info_end}
<table border="0" cellspacing="2" cellpadding="5" width="100%";">
{checkbox_top}
</table>
{files}
{form_hidden}
<div style="text-align:right">{form_button}</div>

[ColinM]

Hi
Yes Centering it is ok in <table> based layouts but for best responsive design we switched to <div> based design.  The equivalent css to achieve what you want is based on flex but as yet we have not got round to that!
Colin