How To Sort By Thread Prefixes Using XThreads
Hello everyone, today I'll be showing you how to have a sort by thread prefixes system for threads using <a href=" " target="_blank" rel="noopener" class="mycode_url">XThreads</a>. I think I might have found this method from another tutorial but can't find it or remember. I also got this idea from TheTechGame.com because that's how they sort threads.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">Preview</span><br />
<img src=" " data-original-url="https://i.imgur.com/j8Jo4hk.png" loading="lazy" alt="[Image: j8Jo4hk.png]" class="mycode_img" /><br />
<br />
Start off by downloading the <a href=" " target="_blank" rel="noopener" class="mycode_url">XThreads</a> plugin and installing it and activating it. Now go to Templates & Styles -> Themes -> * Your Theme * -> global.css and add the following code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.thread-prefix-label {
display: inline-block;
font-family: 'Roboto Condensed', Arial,Verdana,Tahoma;
font-weight: 700;
font-size: 13px;
background-color: #147BDB;
color: #fff;
padding: 0px 5px 1px 5px;
border-radius: 3px;
text-transform: uppercase;
margin-bottom: 3px;
height: 23px;
}</code></pre><br />
Keep this tab open because you will need to go back to it later to add different colors to the prefixes.<br />
<br />
For now go to Configurations -> Thread Prefixes -> Add New Thread Prefix then enter the name and in the "Display Style" enter this code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none"><div class="thread-prefix-label thread-prefix-X">* Prefix Name *</div></code></pre><br />
You will need to change the "X" in the url with the prefix ID so just save it, hover over the prefix name and get the ID now go back and change "X" with the ID and save. You will need to repeat this process for each prefix.<br />
<br />
Once done go to Forums & Posts -> Forum Management -> * Your Forum * -> Edit Forum Settings then keep going down till you find "Forum Rules" and set the display method to "Display rules for this forum on the thread listing" and set the title to something like "Sort By Prefix" and now go to "Rules" and enter the following code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none"><div class="thread-prefix-list">
<a href="?filterxt_prefix=X" class="thread-prefix-label thread-prefix-X mr" style="color:#fff;">* Prefix Name *</a> <a href="?filterxt_prefix=X" class="thread-prefix-label thread-prefix-X mr" style="color:#fff;">* Prefix Name *</a>
</div></code></pre><br />
You will need to have the forum prefix made to get the ID. You can get the ID by hovering over the name in the admin cp and looking at the url. Now replace the "X" part of the url in the code above with the ID and keep repeating the same code but always replace "X" with the prefix ID with the prefix you have enabled for that forum and save. Remember the ID because that will be used for styling the prefix.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">Example:</span><br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none"><a href="?filterxt_prefix=1" class="thread-prefix-label thread-prefix-1 mr" style="color:#fff;">TEST</a> <a href="?filterxt_prefix=2" class="thread-prefix-label thread-prefix-2 mr" style="color:#fff;">TEST 2</a></code></pre><br />
You will need to enter the name of the prefix you want so make sure your name matches the prefix's ID you want.<br />
<br />
Now go back to "global.css" and add the following code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.thread-prefix-X {
color: #fff;
background-color: #005057;
}</code></pre><br />
You would need to copy and paste the code for each prefix and replacing "X" with the ID of the prefix and set the background color by changing the value of "background-color" and save.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">Example:</span><br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.thread-prefix-1 {
color: #fff;
background-color: #005057;
}
.thread-prefix-2 {
color: #fff;
background-color: #0000FF;
}</code></pre><br />
I hope this tutorial helps everyone and sorry for the bad formatting don't really have time right now to fix it. Anyways thanks for reading and have a great day!
Hello everyone, today I'll be showing you how to have a sort by thread prefixes system for threads using <a href=" " target="_blank" rel="noopener" class="mycode_url">XThreads</a>. I think I might have found this method from another tutorial but can't find it or remember. I also got this idea from TheTechGame.com because that's how they sort threads.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">Preview</span><br />
<img src=" " data-original-url="https://i.imgur.com/j8Jo4hk.png" loading="lazy" alt="[Image: j8Jo4hk.png]" class="mycode_img" /><br />
<br />
Start off by downloading the <a href=" " target="_blank" rel="noopener" class="mycode_url">XThreads</a> plugin and installing it and activating it. Now go to Templates & Styles -> Themes -> * Your Theme * -> global.css and add the following code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.thread-prefix-label {
display: inline-block;
font-family: 'Roboto Condensed', Arial,Verdana,Tahoma;
font-weight: 700;
font-size: 13px;
background-color: #147BDB;
color: #fff;
padding: 0px 5px 1px 5px;
border-radius: 3px;
text-transform: uppercase;
margin-bottom: 3px;
height: 23px;
}</code></pre><br />
Keep this tab open because you will need to go back to it later to add different colors to the prefixes.<br />
<br />
For now go to Configurations -> Thread Prefixes -> Add New Thread Prefix then enter the name and in the "Display Style" enter this code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none"><div class="thread-prefix-label thread-prefix-X">* Prefix Name *</div></code></pre><br />
You will need to change the "X" in the url with the prefix ID so just save it, hover over the prefix name and get the ID now go back and change "X" with the ID and save. You will need to repeat this process for each prefix.<br />
<br />
Once done go to Forums & Posts -> Forum Management -> * Your Forum * -> Edit Forum Settings then keep going down till you find "Forum Rules" and set the display method to "Display rules for this forum on the thread listing" and set the title to something like "Sort By Prefix" and now go to "Rules" and enter the following code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none"><div class="thread-prefix-list">
<a href="?filterxt_prefix=X" class="thread-prefix-label thread-prefix-X mr" style="color:#fff;">* Prefix Name *</a> <a href="?filterxt_prefix=X" class="thread-prefix-label thread-prefix-X mr" style="color:#fff;">* Prefix Name *</a>
</div></code></pre><br />
You will need to have the forum prefix made to get the ID. You can get the ID by hovering over the name in the admin cp and looking at the url. Now replace the "X" part of the url in the code above with the ID and keep repeating the same code but always replace "X" with the prefix ID with the prefix you have enabled for that forum and save. Remember the ID because that will be used for styling the prefix.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">Example:</span><br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none"><a href="?filterxt_prefix=1" class="thread-prefix-label thread-prefix-1 mr" style="color:#fff;">TEST</a> <a href="?filterxt_prefix=2" class="thread-prefix-label thread-prefix-2 mr" style="color:#fff;">TEST 2</a></code></pre><br />
You will need to enter the name of the prefix you want so make sure your name matches the prefix's ID you want.<br />
<br />
Now go back to "global.css" and add the following code:<br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.thread-prefix-X {
color: #fff;
background-color: #005057;
}</code></pre><br />
You would need to copy and paste the code for each prefix and replacing "X" with the ID of the prefix and set the background color by changing the value of "background-color" and save.<br />
<br />
<span style="font-weight: bold;" class="mycode_b">Example:</span><br />
<br />
<pre data-deferred="true" class="block-code line-numbers language-none"><code class="language-none">.thread-prefix-1 {
color: #fff;
background-color: #005057;
}
.thread-prefix-2 {
color: #fff;
background-color: #0000FF;
}</code></pre><br />
I hope this tutorial helps everyone and sorry for the bad formatting don't really have time right now to fix it. Anyways thanks for reading and have a great day!