XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme templates and Smarty help 
  4.  / div by $ and bootstrap
Register
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($categories) gt 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>
        
        <{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}>
        
    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><a class="btn btn-primary" href="#">Actiona> <a class="btn" href="#">Actiona>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><a class="btn btn-primary" href="#">Actiona> <a class="btn" href="#">Actiona>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 > 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
  • and then 18, could not keep everything on the same line
    • (1) 2 »

    Login

    Register now!  |  Lost Password?

    Search

    Advanced Search

    Recent Posts

    Who's Online

    340 user(s) are online (130 user(s) are browsing Support Forums)

    Members: 0

    Guests: 340

    more...

    Donat-O-Meter

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

    Latest GitHub Commits