odd problem

[Former Member]

Forum URL: straydogtheme.proboards.com

I have this code

                       {if $[thread.labels]}
                       <div style="background: white; width: intrinsic; width: -moz-max-content; width: -webkit-max-content; padding: 2px; text-align: center; border-bottom: solid 3px #2b2b2b; border-right: solid 3px #2b2b2b; border-left: solid 3px #2b2b2b;">$[thread.labels]</div>
                       {else}
                       <div style="padding: 0px; width: intrinsic; width: -moz-max-content; width: -webkit-max-content;">$[thread.labels]</div>
                       {/if}
However, as you can see --here-- that even threads without labels still have a small square under em.

ANy help ?

[bartlesby]

The problem is that $[thread.labels] returns HTML for each thread, regardless of whether it has a label or not, which is always going to be interpreted as a "true" result. Therefore, it will never get to the second bit of HTML. You would need to run a check for each thread using information provided by that response.

There may be a better way to go about it but one way using the Thread List template is to use script to check if a thread is labeled or not. For example, if I want threads that have labels to put a white box underneath the thread subject link and make the link red, I could do this:

{* Beginning of template here... *}

{foreach $[thread]}

<script>
$(function() {
if ('$[thread.labels]'.indexOf('no-labels') == -1) {          
   var thread = $('#$[thread.content_id]');
   var subject = $(thread).find(".thread-link");    
   $(subject).css({
       "color" : "red",
       "padding" : "5px",
       "border" : "2px solid black",
       "background" : "white"        
   });
}
});
</script>

{* ... rest of template follows. *}

What this does is wait for the page to load and then runs a check on each label result. If the HTML doesn't contain "no-labels" within it, we know that thread has a label. From there, we get the ID of the thread and find the element we want to alter-- in my case, the thread's subject which has a class of ".thread-link". And from there, we change whatever CSS elements we like.

Of course, at that point, you may just want to use one script to cover all threads instead of a script for each one that does the same thing redundantly. There also may be an easier way to go about it simply using the template so you may want to wait for more responses.

[Former Member]

Nov 18, 2018 17:57:07 GMT -8 bartlesby said:

The problem is that $[thread.labels] returns HTML for each thread, regardless of whether it has a label or not, which is always going to be interpreted as a "true" result. Therefore, it will never get to the second bit of HTML. You would need to run a check for each thread using information provided by that response.

There may be a better way to go about it but one way using the Thread List template is to use script to check if a thread is labeled or not. For example, if I want threads that have labels to put a white box underneath the thread subject link and make the link red, I could do this:

{* Beginning of template here... *}

{foreach $[thread]}

<script>
$(function() {
if ('$[thread.labels]'.indexOf('no-labels') == -1) {          
   var thread = $('#$[thread.content_id]');
   var subject = $(thread).find(".thread-link");    
   $(subject).css({
       "color" : "red",
       "padding" : "5px",
       "border" : "2px solid black",
       "background" : "white"        
   });
}
});
</script>

{* ... rest of template follows. *}

What this does is wait for the page to load and then runs a check on each label result. If the HTML doesn't contain "no-labels" within it, we know that thread has a label. From there, we get the ID of the thread and find the element we want to alter-- in my case, the thread's subject which has a class of ".thread-link". And from there, we change whatever CSS elements we like.

Of course, at that point, you may just want to use one script to cover all threads instead of a script for each one that does the same thing redundantly. There also may be an easier way to go about it simply using the template so you may want to wait for more responses.

Thank you so much! That works great, however instead of modifying the label, it modifies the thread's name. Gonna experiment a bit to see if I can fix...

[bartlesby]

Nov 19, 2018 7:05:30 GMT -8 @majority said:

Thank you so much! That works great, however instead of modifying the label, it modifies the thread's name. Gonna experiment a bit to see if I can fix...

Well, if you're just doing styling on the labels and don't need to do any computation, there is a much simpler way to do it.

Go into your CSS Style Sheet and add this somewhere:

.ui-label {
color: black;
border: 1px solid black;

/* and so forth to get whatever look you want */
}
Good luck!

[Former Member]

Nov 19, 2018 8:59:32 GMT -8 bartlesby said:

Nov 19, 2018 7:05:30 GMT -8 @majority said:

Thank you so much! That works great, however instead of modifying the label, it modifies the thread's name. Gonna experiment a bit to see if I can fix...

Well, if you're just doing styling on the labels and don't need to do any computation, there is a much simpler way to do it.

Go into your CSS Style Sheet and add this somewhere:

.ui-label {
color: black;
border: 1px solid black;

/* and so forth to get whatever look you want */
}
Good luck!

Thank you!!