Thread prefixes/tags and forum CSS

[guy]

Currently using the Stylish extension under Firefox to override AO's default CSS definitions in order to make the forum (what I think is) visually easier to navigate:

View attachment 373511 View attachment 373512 View attachment 373513

Two questions:

1) Currently, the exact prefix formatting isn't terribly specific or consistent across different subforums, regarding the formatting code applied to them. Namely:

• In Direct Download and Torrents subforums (mainly Idol and JIC), [HQ] prefixes are enclosed in [noparse]<b><span></span></b>[/noparse] tags.
• Other options (filehost, PIC, CLIP, etc) are enclosed in just a [noparse]<b></b>[/noparse] tag.
• There are also some posters who type prefixes into thread titles, and sometimes a specific prefix option (or combination of options) is not available (eg: [PICS-n-CLIPS] prefix).

Would it be possible to review some of the consistency? As in the screenshots, I'm using client-side CSS overrides to reformat the prefixes; when the square brackets are individually enclosed in [noparse]<span></span>[/noparse] tags, it's quite trivial to make nicely formatted prefix "icons" as seen with the [HQ] tags.

[fullattach]373514[/fullattach]

a[title~="[HQ]"] { background-color: #1d3652 !important; font-size: 12px !important; color: #f1f4f7 !important; -moz-border-radius: 3px !important; padding: 0 3px !important; }
a span[style="color: rgb(136, 136, 136);"] { display: none !important; }

2) Following from the first point, there's another concern due to thread starters being unable to select multiple prefixes: Since uploaders are now expected to post additional filehosts as replies to the original thread -- and replies cannot modify thread titles (prefix included) -- threads cannot be updated to reflect what filehosts are available for a given file.

Of course it would be nice if replies could additionally modify the thread prefix only, but not having seen the server code I don't know if this is possible (or if the necessary modifications would introduce security holes).

Another idea would be to use thread tags, since they can be updated by users. But again, not having seen forum code I don't know how feasible this is.




Ideally, it would be nice to clean up the code formatting to make it more consistent (CSS-friendly): for example, using class selectors such as .hotfile, or .hq, rather than [noparse]a[title~="[HQ]"][/noparse] as in the example above.

Fortunately, with properly formatted CSS, it would be remarkably easy to turn prefixes into small icons to make the forum more navigable (and at nearly negligible performance cost).

 

[Rollyco]

Would it be possible to review some of the consistency?

Prefix text is styled using the "span.threadprefix" CSS selector now.

"icons"

I like how the graphical icons look in your screenshots but I want to keep the prefixes as inline text. If you can spruce up display of prefixes and keep them as selectable text, I'm all ears.

uploaders are now expected to post additional filehosts as replies to the original thread

We're not ready to implement that rule yet; at this point, it's just a suggestion.

Of course it would be nice if replies could additionally modify the thread prefix only

vBulletin allows only one prefix per thread, and changing that would be difficult. There are no relevant addons or code snippets available in the community.

However, there is an existing free vBulletin addon that can probably be repurposed to add auto-tagging of threads based on the initial post content, reply content, and edit content. User-defined tags are practically useless, it would probably be best if I zeroed them all out and gave auto-tagging sole permission to edit tags. With some additional template customization we could display threads like this:

[LPFD-208] 小林さり Sari Kobayashi - Sari's Challenge さりチャレ↑
HF MU RS
mm6eri (Today)

 

[guy]

I like how the graphical icons look in your screenshots but I want to keep the prefixes as inline text. If you can spruce up display of prefixes and keep them as selectable text, I'm all ears.

They are actually still selectable text. I'm just using CSS to style them to look like icons.

As an update, I've made a GreaseMonkey script that will search thread titles for tags (anything in ALL UPPERCASE and enclosed in square brackets), and then automatically replace the brackets with [noparse]<span>[/noparse] tags. The script allows you to specify what class(es) you want to inject into each tag.

[noparse]// Variables:
// tags        Array of classes to add to tags
//             Format: "TAG":"CLASS"
//             Will rewrite [TAG] to <span class="CLASS">TAG</span>
//             Automatically ignores hyphens (-)
// threads     array containing <a> elements
// tagpattern  regexp matching text enclosed in brackets
// title       string of current <a> element
// match       array of current matching tag (by regexp)
// tag         string of class to rewrite onto current tag
//
// Limitations:
// - Does not search parenthases ()
// - Complex tags (eg: [MKV + DVDISO], [MKV/AVI]) use default
// - Only targets ALL-UPPERCASE text found enclosed inside square brackets
//     ie: Does not affect unenclosed DVD codes, lowercase tags, etc


var tags = {
  "*":"tag default",
  "HQ":"tag hq",
  "IV":"hidden",
  "U15":"hidden",
  "AVI":"tag default",
  "DVD":"tag default",
  "DVDISO":"tag default",
  "ISO":"tag default",
  "MKV":"tag default",
  "MP4":"tag default",
  "MPG":"tag default",
  "60FPS":"tag default",
  "HF":"tag yellow",
  "MU":"tag orange",
  "RS":"tag darkblue",
  "MF":"tag lightblue"
};

var threads = document.getElementById("threadslist").getElementsByTagName("a"); // For performance, limit search only to #threadslist table
var tagpattern = /\[[^\]a-z,&]+\]/g;

for (i = 0; i < threads.length; i++) {
  var title = threads[i].innerHTML;
  title = title.replace("]","] "); // Temporary fix for tags not separated by space
  var match = null;
  while (match = tagpattern.exec(threads[i].innerHTML)) {
    var tag = (tags[match[0].replace(/(\[|\]|\-)/g, "")] == null) ? tags["*"] : tags[match[0].replace(/(\[|\]|\-)/g, "")];
    title = title.replace(match[0], '<span class="' + tag + '">' + match[0].replace(/(\[|\])/g, "") + "</span>");
  }
  threads[i].innerHTML = title;
}
[/noparse]

You can then use Stylish to target the injected [noparse]<span>[/noparse] elements, and style them according to their applied classes. Here is the accompanying portion of CSS that styles the tags:

[noparse]
.tag { font-size: 12px; font-weight: bold; color: #fff; padding: 0 3px; -moz-border-radius: 2px; }
.default { background-color: #b6c7db; color: #1d3652 !important; }
.hq { background-color: #1d3652; }
.yellow { background-color: #fc9700; }
.orange { background-color: #e7480e; }
.lightblue { background-color: #58a4d5; }
.darkblue { background-color: #002e5c; }
.hidden { display: none !important; }[/noparse]

The above GreaseMonkey and Stylish scripts combined together will render the page as such:
View attachment 374022

Text remains fully selectable/searchable, although the square brackets are technically removed at render, ie: for an in-browser page search (CTRL+F), you can search for MKV but not [noparse][MKV][/noparse]; but you can still search [noparse][MKV][/noparse] from the AO search page.

Important Note:
Since I am only using this personally through GreaseMonkey, I have not done any cross-browser testing to confirm if the JS code will run properly on other browsers. The code does include a while loop, and although it is designed to exit by default (and loop only when a tag is found), I cannot guarantee that other browsers won't inadvertently get stuck in a loop and crash.

Edit--
Looking at the code, you can imagine that there are some relatively simple ways to inject advanced formatting into text. For instance enclosing DVD codes in square brackets [noparse][AAAA-001][/noparse], but file attributes (format, size, fps) in curly brackets {MKV 900MB 60fps} or {MKV + ISO}. Applying advanced formatting would be trivial.