Prefix for topic titles

Forum version: ModernBB

I am trying to find a script where I can add prefixes for topic titles, something like: Tutorial, News.. Now, I tried many scripts I found here and none seemed to work for me.
When I say prefix, I don't only mean text [NEWS], I want that to be converted into something with different background color and text color. When user checkout topic titles, there will be prefix + topic title.

So, how can that be done?
Big plus would be if there is a tutorial to do that while creating topic (drop-down menu) without need to type [NEWS] manually.
Thanks.

hello

https://help.forumotion.com/t134270-buttons-to-add-prefixes-in-topic-titles?highlight=prefixes
https://help.forumotion.com/t143353-topic-prefix
https://help.forumotion.com/t133869-style-topic-title-keywords

Last link doesn't support ModernBB.
Second link again, not for ModernBB.
Tested first link, doesn't work. Nothing shows up.

Sadly this was never made to work with ModernBB forums as they was made a long time ago.
With basic CSS and javascript knowledge I'm sure you can make it work for your forum as well.

Based on this tutorial.

JQuery Code:

Code:

$(function() {
    var c = document.querySelectorAll('.post h2.topic-title a');
    for (i=0; i<c.length; i++) {   
      c[i].innerHTML = c[i].innerHTML.replace(/#TEXT/g,'<span id="TEXT">TEXT</span>');
    }
});

CSS unchanged

Result:

Yes, it does work inside the topic, but I was refering to topic list. I edited this in console, but that's the final result I am looking for:

Ok, I found a solution. I made my own script, something like this:

Code:

// [NEWS] .news
// [TUTORIAL] .tutorial
// [ARTICLE] .article
// []
$(document).ready(function() {
  var titleDiv = $("a.topictitle");
 
  titleDiv.each(function() {
    var title = $(this).html();
    console.log(title);
   
    if(title.includes("[NEWS]")) {
    $(this).html($(this).html().replace('[NEWS]', '<span class="news">NEWS</span>'))
    }     
 
  });
 
});

Applied in sub-forum. I was just lazy to write this, hopped there is already done.

hello, you can try this code
Placement: In all the pages

Code:

var prefixes = ["In progcess", "Solved", "Test", "fm codes"]; //your prefixes
var _pm = false; //true: allowed prefixes in pm
var chk = false;
function toMenu(a) {
  var htmlpre = '<select style="margin-right:5px" id="prefix" size="1"><option value="">(None)</option>';
  for (i in a)
  htmlpre += '<option value="' + a[i] + '">' + a[i] + '</option>';
  htmlpre += '</select>';
  return htmlpre;
}

function checkpre(ar, input) {
  for (i in ar) {
      var p = new RegExp("\\" + ar[i], "g");
      var title = input.substr(0, input.indexOf(']'));
      if (p.test(title)) return ar[i];
  }
  return "";
}
$(function () {
  if (_pm) chk = /\privmsg/.test(location.href);
  if (/\/post/.test(location.href) || chk) {
      $(toMenu(prefixes)).insertBefore("input[name='subject'][type='text']");
      var mw = $("#prefix").width() + 5;
      $("input[name='subject']").css("width", $("input[name='subject']").width() - mw);
      var t = $("[name='subject']").val();
      var cur = checkpre(prefixes, t);
      if (cur != "") {
        $("[value=" + cur + "]").attr("selected", "selected");
        $("input[name='subject']").val(t.replace('[' + cur + ']', '').trim())
      }
      $("input[name='post']").click(function () {
        var sub = $("input[name='subject']").val().trim();
        if (sub != "" && $("#prefix").val() != "") $("input[name='subject']").val("[" + $("#prefix").val() + "] " + sub)
      })
  }
});

$(function () {
  $("a[href^='/t'], a[href^='http://" + location.host + "/t']").html(function () {
      var a = $(this).text();
      if(/^\[([^\[\]]+)\]/.test(a)) return a.replace(/^\[[^\[\]]+\]/, function (a) {
        return '<span class="prefix ' + a + '">' + a.slice(1,-1) + "</span>"
      })
  });
});

CSS

Code:

.prefix{background:#008287;color:#FFF;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px} /*default style*/
.prefix.\[Solved\]{background:#16499a} /* style for prefix [Solved] */
.prefix.\[Test\]{background:#60a917} /*style for prefix [Test]*/
.prefix.\[fm.codes\]{background:#fa6800} /*style for prefix [fm codes] */
.prefix.\[In.progress\]{background:red} /*style for prefix [In progress] */

When your request is complete, please mark it as Solved.