How can I add System Tags / Keywords in topics?

Hi all,
How can I add System Tags / Keywords in topics like this style http://prntscr.com/2z5dbv ? My forum version is phpbb2.

Best Regards,
Dark-Avenger

I don't know how to do that, but there is a suggestion about it: https://help.forumotion.com/t63906-search-tags-for-posts

@Dark-Avenger
Hello,
I made this code to your forum now, but we can improve it according to your need ok?

Administration Panel > Modules > HTML/JavaScript > JavaScript Management > Create a new script
Title : Tags Search
Placement : In topics

And add this code:

Code:


/***
 * Application: Tags Search
 * Made and Optimizations by JScript - 2014/03/03
 * View more in: http://punbb.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    var sCSS =
        '<style>' +
        '.ipsTag {' +
            'background: url("http://i55.servimg.com/u/f55/18/17/62/92/tag_bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);' +
            'border-radius: 0 3px 3px 0;' +
            'color: #FFFFFF !important;' +
            'display: inline-block;' +
            'font-size: 11px;' +
            'height: 20px;' +
            'line-height: 20px;' +
            'margin: 5px 5px 0 0;' +
            'padding: 0 7px 0 15px;' +
            'text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);' +
        '}' +
        '</style>';
        jQuery(sCSS).insertBefore('body');
        
    var tags = jQuery('h1.cattitle:first').text().split(' ');

    /* Sets tag search... */
    $('td.nav').parent().parent().parent().before('<span id="tags_search" style="display: block; margin-bottom: 20px; margin-top: 20px;"></span>');
    jQuery.each(tags, function(index, data) {
        if(data.length > 4) {
            $('#tags_search').append(
                '<a id="tag_search_' + index + '" class="ipsTag" title="Find more content with the tag ' + data + '" href="/search?search_keywords=' + data + '">' +
                '    <span>' + data + '</span>' +
                '</a>'
            );
        }
    });
    
});


Result:

---

There is an error in your forum see:

Spoiler:

---

So long,

JS

How can I add the text "Tags" before the tags?

Try this:

Code:


/***
 * Application: Tags Search
 * Made and Optimizations by JScript - 2014/03/03
 * View more in: http://punbb.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    var sCSS =
        '<style>' +
        '.ipsTag {' +
            'background: url("http://i55.servimg.com/u/f55/18/17/62/92/tag_bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);' +
            'border-radius: 0 3px 3px 0;' +
            'color: #FFFFFF !important;' +
            'display: inline-block;' +
            'font-size: 11px;' +
            'height: 20px;' +
            'line-height: 20px;' +
            'margin: 5px 5px 0 0;' +
            'padding: 0 7px 0 15px;' +
            'text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);' +
        '}' +
        '</style>';
        jQuery(sCSS).insertBefore('body');
       
    var tags = jQuery('h1.cattitle:first').text().split(' ');

    /* Sets tag search... */
    $('td.nav').parent().parent().parent().before('<span style="display: block; margin-bottom: 20px; margin-top: 20px;" id="tags_search"><span>Tags search: </span></span>');
    jQuery.each(tags, function(index, data) {
        if(data.length > 4) {
            $('#tags_search').append(
                '<a id="tag_search_' + index + '" class="ipsTag" title="Find more content with the tag ' + data + '" href="/search?search_keywords=' + data + '">' +
                '    <span>' + data + '</span>' +
                '</a>'
            );
        }
    });
   
});


Result:


So long,

JS

Hi JS,
How can I add a background image with border in text "Tags Search" and change the font color? Can we separate the javascript and CSS in two different codes because the javascript with css is very "heavy"

Best Regards,
Dark-Avenger

Dark-Avenger wrote:How can I add a background image with border in text "Tags Search" and change the font color?

You do not think which would be better if you want to specify everything you wish in a single post?

Dark-Avenger wrote:Can we separate the javascript and CSS in two different codes because the javascript with css is very "heavy"

Just remove this piece of code:

Code:


    var sCSS =
        '<style>' +
        '.ipsTag {' +
            'background: url("http://i55.servimg.com/u/f55/18/17/62/92/tag_bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);' +
            'border-radius: 0 3px 3px 0;' +
            'color: #FFFFFF !important;' +
            'display: inline-block;' +
            'font-size: 11px;' +
            'height: 20px;' +
            'line-height: 20px;' +
            'margin: 5px 5px 0 0;' +
            'padding: 0 7px 0 15px;' +
            'text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);' +
        '}' +
        '</style>';
        jQuery(sCSS).insertBefore('body');


And add this into your CSS:

Code:


.ipsTag {
    background: url("http://i55.servimg.com/u/f55/18/17/62/92/tag_bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 0 3px 3px 0;
    color: #FFFFFF !important;
    display: inline-block;
    font-size: 11px;
    height: 20px;
    line-height: 20px;
    margin: 5px 5px 0 0;
    padding: 0 7px 0 15px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}


So long,

JS

Thank you very much its working perfect JS.

Best Regards,
Dark-Avenger