Adding Checkboxes Help

[Sammiie]

Site: Testing Site

I am using a skin, and it originally didn't come with the ability to select threads in the Thread List via checkboxes, so I added some... however, I don't believe I did that right because when selecting the checkboxes, the thread options in the menu dropdown don't acknowledge that a thread is selected (if that makes sense); additionally, I don't have any thread moderator options in the dropdown even though I'm the admin account, likely due to the site not registering that a checkbox is selected.

I think it may be because whatever I did with the checkboxes isn't correct. I'm probably missing some code somewhere. Attached below is what I had in the Thread List Layout Templates:

{foreach $[thread]}

<div class="thread_list">
<div class="thread_icon">
{if $[thread.is_locked]}<i class="fa fa-lock" aria-hidden="true"></i>
{elseif $[thread.is_announcement]}<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
{elseif $[thread.is_sticky]}<i class="fa fa-star" aria-hidden="true"></i>{else}
<i class="fa fa-star-o" aria-hidden="true"></i>{/if}
</div>

<div class="thread_title">$[thread]
<div class="thread_title_s"> Last post by $[thread.last_post.created_by] $[thread.last_post.created_on]</div></div>


<div class="thread_stats">$[thread.views] <span>{if $[thread.views]==1}VIEW{else}VIEWS{/if}</span></div>

<div class="thread_stats">$[thread.replies_count]
<span>{if $[thread.replies_count]==1}REPLY{else}REPLIES{/if}</span></div>
<span class="list-item-checkbox">$[thread.checkbox]</span>

</div>


{/foreach}

Any help would be appreciated!

[Lynx]

For starters, you don't have anywhere where the thread ID is:


<tr id="$[thread.content_id]" class="$[thread.content_class]">


- making it impossible for the forum to know which thread has had its checkbox selected. Also, the default classes for checkboxes on a default theme is:


<td class="checkbox clickable">$[thread.checkbox]</td>


What I'd suggest is to create a new, default theme (you can keep it disabled) so you can compare coding - as that might help you in seeing what you may need to do on a custom theme.

Both code snippets can be found on a default theme in Admin > Themes > Layout Templates > Board > Thread List (tab). The first code snippet is on Line 2 and the second code snippet is on Line 4.


EDIT: Adding this in so you can see the entire template for a default theme:

SPOILER: Click to show


{foreach $[thread]}
<tr id="$[thread.content_id]" class="$[thread.content_class]">
<td class="icon">$[thread.icon]</td>
<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.short_content]">
<table>
<tr>
<td>$[thread.icons]</td>
<td>
$[thread.labels]
<span class="link target">$[thread]</span>
{if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
</td>
</tr>
</table>
</td>
<td class="created-by clickable">$[thread.created_by]</td>
<td class="replies clickable">$[thread.replies]</td>
<td class="views">$[thread.views]</td>
<td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>
</tr>
{/foreach}
{if !$[thread]}
<tr class="last">
<td class="last center" colspan="7">No threads were found.</td>
</tr>
{/if}


[Sammiie]

Jul 13, 2020 4:57:36 GMT -8 Lynx said:

For starters, you don't have anywhere where the thread ID is:


<tr id="$[thread.content_id]" class="$[thread.content_class]">


- making it impossible for the forum to know which thread has had its checkbox selected. Also, the default classes for checkboxes on a default theme is:


<td class="checkbox clickable">$[thread.checkbox]</td>


What I'd suggest is to create a new, default theme (you can keep it disabled) so you can compare coding - as that might help you in seeing what you may need to do on a custom theme.

Both code snippets can be found on a default theme in Admin > Themes > Layout Templates > Board > Thread List (tab). The first code snippet is on Line 2 and the second code snippet is on Line 4.


EDIT: Adding this in so you can see the entire template for a default theme:

SPOILER: Click to show


{foreach $[thread]}
<tr id="$[thread.content_id]" class="$[thread.content_class]">
<td class="icon">$[thread.icon]</td>
<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.short_content]">
<table>
<tr>
<td>$[thread.icons]</td>
<td>
$[thread.labels]
<span class="link target">$[thread]</span>
{if $[thread.pagination]}<div class="ui-micro-pagination">Pages: $[thread.pagination]</div>{/if}
</td>
</tr>
</table>
</td>
<td class="created-by clickable">$[thread.created_by]</td>
<td class="replies clickable">$[thread.replies]</td>
<td class="views">$[thread.views]</td>
<td class="latest last">by $[thread.last_post.created_by]<br />$[thread.last_post.created_on]</td>
</tr>
{/foreach}
{if !$[thread]}
<tr class="last">
<td class="last center" colspan="7">No threads were found.</td>
</tr>
{/if}


Thank you very much for this.

Unfortunately, I still can't figure out how to make these darn checkboxes work. I understand that you said there needs to be a "thread.content.id" specified somewhere, but where and how.

I've added all the things that were missing (I think) and narrowed it down to two lines that make the difference:

<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.short_content]">
(I'm aware the one isn't closed)

the skin code uses divs, not tables to shape the thread list (which is totally customized), but when changing the above lines to use divs instead of TD's, they break.

I'm a lot confused here... It's not helping that the checkboxes are at the end of the thread listing, rather than the beginning of the default layout, which adds to the confusion of not knowing where to put the above snippet to where it doesn't break the whole table (or itself).

I am admittedly very rusty, on top of not really understanding this type of code enough to automatically know what to do here. I already took a long 2-month break from this project because this is frustrating >_< I really just want this fixed.

PLS HELP.

Thanks <3


Current Thread List Template Code:
{foreach $[thread]}

<div class="$[thread.content_class] thread_list" id="$[thread.content_id]">
<div class="thread_icon">
{if $[thread.is_locked]}<i class="fa fa-lock" aria-hidden="true"></i>
{elseif $[thread.is_announcement]}<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
{elseif $[thread.is_sticky]}<i class="fa fa-star" aria-hidden="true"></i>{else}
<i class="fa fa-star-o" aria-hidden="true"></i>{/if}
</div>

<div class="thread_title">$[thread]
<div class="thread_title_s"> Last post by $[thread.last_post.created_by] $[thread.last_post.created_on]</div></div>


<div class="thread_stats">$[thread.views] <span>{if $[thread.views]==1}VIEW{else}VIEWS{/if}</span></div>

<div class="thread_stats">$[thread.replies_count]
<span>{if $[thread.replies_count]==1}REPLY{else}REPLIES{/if}</span></div>
<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.short_content]"></td>

</div>


{/foreach}

{if !$[thread]}
<tr class="last">
<td class="last center" colspan="7">No threads were found.</td>
</tr>
{/if}

[Lynx]

Hi, Sammiie.

My stepmother is currently in the process of moving, and I'm the only family member helping her - so I won't be able to get back to you on this soon, as the next 2 weeks are going to be very hectic for me.

If someone else can help you with this, they can jump right in - if they want to. Sorry.

[Sammiie]

Lynx I'd be grateful if someone else could step in and assist, but if not, I have no issue with waiting until you can respond. Good luck with the move!

[Kami]

this may be a silly question, but have you checked the css for this theme to see if it has the required checkbox css? compare it to a default theme and see if the class properties show up.

[Lynx]

Sammiie,

I took a quick look at this - sadly, I still don't have time right now (leaving to help Ma again today) - but I did notice this in the code above (highlighted below):

{foreach $[thread]}

<div class="$[thread.content_class] thread_list" id="$[thread.content_id]">
<div class="thread_icon">
{if $[thread.is_locked]}<i class="fa fa-lock" aria-hidden="true"></i>
{elseif $[thread.is_announcement]}<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
{elseif $[thread.is_sticky]}<i class="fa fa-star" aria-hidden="true"></i>{else}
<i class="fa fa-star-o" aria-hidden="true"></i>{/if}
</div>

<div class="thread_title">$[thread]
<div class="thread_title_s"> Last post by $[thread.last_post.created_by] $[thread.last_post.created_on]</div></div>


<div class="thread_stats">$[thread.views] <span>{if $[thread.views]==1}VIEW{else}VIEWS{/if}</span></div>

<div class="thread_stats">$[thread.replies_count]
<span>{if $[thread.replies_count]==1}REPLY{else}REPLIES{/if}</span></div>
<td class="checkbox clickable">$[thread.checkbox]</td>
<td class="main clickable" title="$[thread.short_content]"></td>

</div>


{/foreach}

{if !$[thread]}
<tr class="last">
<td class="last center" colspan="7">No threads were found.</td>
</tr>
{/if}

You stated earlier that the skin was using divs, not tables. The highlighted part is for tables. You may need to convert them to spans or something. Just something I noticed.

[Sammiie]

Aug 16, 2020 4:55:21 GMT -8 Kami said:

this may be a silly question, but have you checked the css for this theme to see if it has the required checkbox css? compare it to a default theme and see if the class properties show up.

I checked the theme against a default one and it has all the required checkbox css that the default layout does, and nothing extra.


Lynx I tried fiddling with that, but it seems whenever I change it to something different than the table tr / td classes, it breaks the functionality of the checkboxes and they no longer work. I'm so stumped >_<

[Sammiie]

THERE'S GOOD NEWS: I fixed it. I'm not sure how, and I'm not sure it's the "proper" way... but it works?

I mirrored it off of another skin that used a similar checkbox situation, and wa-la! So far so good.

IDK yet if I broke anything else, but hopefully I won't need to come back to this thread -fingers crossed-

Thank you both Kami Lynx for trying to lend a hand and for your patience, of course!