1
tatane
div by $ and bootstrap
  • 2013/7/18 7:47

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


Hello
I have a code that is developed in tabular form.
<{if count($categoriesgt 0}>
<
div class="even" style="font-weight: bold;"><{$smarty.const._MD_XTUBE_MAINLISTING}></div>

<
table width="100%" cellspacing="1" cellpadding="3" summary='' style="text-align: center;">
    <
tr>
        <
td colspan="2">&nbsp;</td>
    <
tr>
    <
tr>
        <!-- 
Start category loop -->
        <{foreach 
item=category from=$categories}>
        <
td width="5%" style="text-align: center;">
            <
a href="<{$xoops_url}>/modules/<{$module_dir}>/viewcat.php?cid=<{$category.id}>"><img src="<{$category.image}>" title="<{$category.alttext}>" alt="<{$category.alttext}>" align="middle"/></a>
        </
td>
        <
td width="35%" style="text-align: left; vertical-align: middle;">
            <
a href="<{$xoops_url}>/modules/<{$module_dir}>/viewcat.php?cid=<{$category.id}>"><b><{$category.title}></b></a>&nbsp;(<{$category.totalvideos}>)<br/>
            <{if 
$category.subcategories}>
            <
div style="margin-bottom: 3px; margin-left: 16px; font-size: smaller; vertical-align: top;">
                <{
$category.subcategories}>
            </
div>
            <{/if}>
        </
td>
        <{if 
$category.count is div by $cat_columns}>
    </
tr>
    <
tr><{/if}> <{/foreach}>
        <!-- 
End category loop -->
    </
tr>
    <
tr>
        <
td colspan="2">&nbsp;</td>
    <
tr>
</
table>
<
div class="odd" style="text-align: left; font-size: smaller;"><{$lang_thereare}></div>
<
div class="xoopstube_legend">
    <
img src="<{$xoops_url}>/modules/<{$module_dir}>/images/icon/linkload1_small.png" title="<{$smarty.const._MD_XTUBE_LEGENDTEXTNEW}>" alt="" align="middle"/>&nbsp;<{$smarty.const._MD_XTUBE_LEGENDTEXTNEW}>
    <
img src="<{$xoops_url}>/modules/<{$module_dir}>/images/icon/linkload2_small.png" title="<{$smarty.const._MD_XTUBE_LEGENDTEXTNEWTHREE}>" alt="" align="middle"/>&nbsp;<{$smarty.const._MD_XTUBE_LEGENDTEXTNEWTHREE}>
    <
img src="<{$xoops_url}>/modules/<{$module_dir}>/images/icon/linkload3_small.png" title="<{$smarty.const._MD_XTUBE_LEGENDTEXTTHISWEEK}>" alt="" align="middle"/>&nbsp;<{$smarty.const._MD_XTUBE_LEGENDTEXTTHISWEEK}>
    <
img src="<{$xoops_url}>/modules/<{$module_dir}>/images/icon/linkload4_small.png" title="<{$smarty.const._MD_XTUBE_LEGENDTEXTNEWLAST}>" alt="" align="middle"/>&nbsp;<{$smarty.const._MD_XTUBE_LEGENDTEXTNEWLAST}>
</
div>
<{/if}>


In this code there are <{if $ category.count is div by $ cat_columns}> <{/ if}> which displays columns

If I use Table, I have that:
Resized Image

I would use thumbnails of bootstrap but I can not manage the columns

Do you understand? sorry for my bad english

2
timgno
Re: div by $ and bootstrap
  • 2013/7/18 12:48

  • timgno

  • Module Developer

  • Posts: 1504

  • Since: 2007/6/21


Try changing the tables with those bootstrap and then if necessary, add a td line empty, you'll see that they approach the lists

3
tatane
Re: div by $ and bootstrap
  • 2013/7/18 12:55

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


Ok but we no longer create this kind of display table, we need to use div.

How?

4
timgno
Re: div by $ and bootstrap
  • 2013/7/18 12:59

  • timgno

  • Module Developer

  • Posts: 1504

  • Since: 2007/6/21


Instead of using this, with table tr:
<{if $category.count is div by $cat_columns}> 
    </
tr><tr>
<{/if}>


I use this:
<{if $category.count is div by $cat_columns}> 
    <
br class="clear"/>
<{/if}>

5
tatane
Re: div by $ and bootstrap
  • 2013/7/18 13:16

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


this my code
<div class="thumbnails">
    <{foreach 
item=category from=$categories}>
    <
div class="thumbnail">
        <
img src="<{$category.image}>" title="<{$category.alttext}>" alt="<{$category.alttext}>">
        <
div class="caption">
        <
h3><{$category.title}></h3>
        <
p><class="btn btn-primary" href="#">Action</a> <class="btn" href="#">Action</a></p>
        </
div>
    </
div>
    <{/foreach}>
</
div>


I tried
<div class="thumbnails">
    <{foreach 
item=category from=$categories}>
    <
div class="thumbnail">
        <
img src="<{$category.image}>" title="<{$category.alttext}>" alt="<{$category.alttext}>">
        <
div class="caption">
        <
h3><{$category.title}></h3>
        <
p><class="btn btn-primary" href="#">Action</a> <class="btn" href="#">Action</a></p>
        </
div>
    </
div><{if $category.count is div by 2}> 
    <
br class="clear"/>
<{/if}>
    <{/foreach}>
</
div>

But is not work

6
timgno
Re: div by $ and bootstrap
  • 2013/7/18 14:25

  • timgno

  • Module Developer

  • Posts: 1504

  • Since: 2007/6/21


If you want to do a good job, you have to study better bootstrap with regard to selectors container, row and span, you'll see that you can.

7
tatane
Re: div by $ and bootstrap
  • 2013/7/18 14:31

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


I know it takes only span with modules that are not modern I do what I can.

8
timgno
Re: div by $ and bootstrap
  • 2013/7/18 20:26

  • timgno

  • Module Developer

  • Posts: 1504

  • Since: 2007/6/21


Quote:
tatane wrote:
But is not work


For the categories you need to create a script css, which aligns the row to the left with float: left, then make sure that the file xoops.css is allowed the selector clear, to wrap and remove all floats

See this example

9
tatane
Re: div by $ and bootstrap
  • 2013/7/20 14:09

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


I added this code :

<{assign var="thumbnail_span" value=span$thumbnail_span}>
<{
math assign="thumbnail_span" equation="12/nbr" nbr=2}>

<
div class="row-fluid">
<
ul class="thumbnails">
    <{foreach 
item=category from=$categories}>
    <
li class="span<{$thumbnail_span }> thumbnail">
        <
div class="center">
            <
img src="<{$category.image_path}>" title="" alt=""/>
        </
div>
        <
div class="center">
            <{if 
$selected_category == $category.categoryid}>
                <
strong><{$category.name}></strong
                <{else}>
                <
strong><{$category.categorylink}></strong
            <{/if}>
        </
div>
    </
li>
    <{if 
$category.categoryid is div by 2}>

    </
ul></div><div class="row-fluid"><ul class="thumbnails">
    <{/if}>
    <{/foreach}>
</
ul>
</
div>


But it does not work (see images below)

Resized Image


Resized Image

10
timgno
Re: div by $ and bootstrap
  • 2013/7/20 18:45

  • timgno

  • Module Developer

  • Posts: 1504

  • Since: 2007/6/21


Check well, you have a < / ul > final in the foreach loop too.

That job you can do it with </ li > < li > and < br / >

In more mistakes with the span.

The most that you can add as span is span12, so you have to make a division that gives results in all 12.

You put 3 <li span6> and then 18, could not keep everything on the same line

Login

Who's Online

163 user(s) are online (118 user(s) are browsing Support Forums)


Members: 0


Guests: 163


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits