The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Changing prefix appearance.

View previous topic View next topic Go down

Solved Changing prefix appearance.

Post by Breeh on March 8th 2015, 6:40 am

Technical Details

Forum version : phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Screenshot of problem : http://i.imgur.com/EPVhncx.png
Who the problem concerns : All members
Forum link : http://united-lolies.forum.st/

Description of problem

Hello I require help on prefixes. I need a way to make it look fancier, better, different.

Turn this into something like this , or atleast different from what it looks like now.

Edit: This is the javascript code I'm using.

Code:
var prefixes = ["Manga", "Anime"];
var _pm = false;

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)
      })
   }
});



Thank you


Last edited by Breeh on March 8th 2015, 7:38 am; edited 1 time in total

Breeh
New Member

Posts : 21
Reputation : 1
Language : Serbian, Spanish, English, Turkish

http://united-lolies.forum.st/

Back to top Go down

Solved Re: Changing prefix appearance.

Post by Ange Tuteur on March 8th 2015, 7:32 am

Hello @Breeh,

Try this for formatting the prefixes :

Go to modules > JavaScript codes management > Create a new script

Placement : In all the pages
Code:
$(function(){
  var prefix = [
    'Anime',
    'Manga'
  ],
  a = document.getElementsByTagName('A'), i = 0, j = a.length, l = prefix.length;
  for (; i<j; i++) for (var k = 0; k<l; k++) RegExp('^\\['+prefix[k]+'\\]').test(a[i].innerHTML) && (a[i].innerHTML = a[i].innerHTML.replace(RegExp('^\\['+prefix[k]+'\\]'), '<span class="topic-prefix prefix-'+prefix[k].toLowerCase()+'">'+prefix[k]+'</span>'));
});

At the top of the script you'll see an Array named prefix. This is where you'll define the names of your prefixes. Make sure they're spelt exactly as they'll appear in your titles, without the brackets.

When using them in your title, make sure they appear inside brackets at the beginning of your title. e.g. [Anime], [Manga]

You can then use CSS to style your prefixes.
Display > Colors > CSS stylesheet
Code:
/* base prefix */
.topic-prefix {
  color:#FFF;
  font-weight:bold;
  background:#333;
  box-shadow:0 6px 3px rgba(255,255,255, 0.25) inset, 0 -6px 3px rgba(0,0,0, 0.1) inset;
  padding:1px 6px;
  border-radius:3px;
}

/* unique prefixes */
.topic-prefix.prefix-anime {
  background:#16B;
}

.topic-prefix.prefix-manga {
  background:#16B;
}

There's a base prefix, but to style a specific prefix you can write the selector as .topic-prefix.prefix-prefixname. prefixname is the name of your prefix. It will always be lowercase.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Changing prefix appearance.

Post by Breeh on March 8th 2015, 7:36 am

It works, thank you Ange for the code and the explanation!  :rose:

Breeh
New Member

Posts : 21
Reputation : 1
Language : Serbian, Spanish, English, Turkish

http://united-lolies.forum.st/

Back to top Go down

Solved Re: Changing prefix appearance.

Post by Ange Tuteur on March 8th 2015, 7:40 am

You're welcome ^^

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum