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.

Fast BBCodes for Staff in posts

View previous topic View next topic Go down

Solved Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 11:29 am

Hello,

I've seen on some other forums (Gameforge ones) that they use some quick bbcodes for staff members in the posts and the have specific fonts/color/size etc.

For example, a Staff User named MrMind would use the quick bbcode in the sceditor
[mmd]text[/mmd]
Or a Staff User named Steve would use the quick bbcode in the sceditor
[ste]text[/ste]
and the text would automatically change font/color/size etc while these specific font/color/size etc where different for each one.

Ex. In editor will be shown: [mmd]text[/mmd] but this would give the result to the post: text
Code:
[color=#0033cc][font=Comic Sans MS][size=16]text[/size][/font][/color]

& In editor will be shown: [ste]text[/ste] but this would give the result to the post: text
Code:
[size=16][font=Georgia][color=#ff6600][b]text[/b][/color][/font][/size]


Question: Is there a way that we could have this effect on our forums?

Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Mati on October 17th 2014, 12:27 pm

Hello,

Yes this is possible I'll give you the code when I'm back cuz I got to go now.

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 12:39 pm

OK thank you Mati!






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Ramdaman on October 17th 2014, 2:08 pm

Isn't that like when they do <div class="Classname">Text</div> and in their CSS stylesheet they'll style it something like this.

Code:
div .Classname {
  background-color: #9ccf5a;
  border: 1.5px solid;
  border-radius: 4px;
  border-color: #000000;
  float: left;
  padding-top: 5px;
  padding-right: 8px;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-top: 4px;
  margin-left: 2px;
}

Feel free to use this. Change "Classname" and ".Classname" to any name you wish.

Ramdaman
Active Poster

Male Posts : 1614
Reputation : 97
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 2:46 pm

Similar, but the one i am talking about, instead of writing <div class="classname">text</div> you only write [mmd]text[/mmd]. 

I really want to know how to do that because i am fascinated by that.
I was aware of that stylish way but honestly i am not really into that because one mistake can confuse everything. But still if i don't find anything i will be using that! 
Me greatest thanks for your reply.



MrMind






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by _Twisted_Mods_ on October 17th 2014, 5:03 pm

http://help.forumotion.com/t9834p30-custom-bbcode?highlight=bbcode


other then that u might be able to use like a replace option with js

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 5:33 pm

Look, i don't know that much about javascripts.
If it is possible to do what i want with them then i would be please to learn how to do that. But the easiest way to think of it is:

By writing in the sceditor [bbc]text[/bbc] or something else, then the javascript will replace the [bbc] with the #bbc{style} that i wrote in the CSS via the div classes.

Ex. I added the div class Ramdaman provided.
<div class="bbc">text</div>
and i added in the CSS:
.bbc{style}
Then the javascript must know that even if i write <div class="bbc">text</div> or [bbc]text[/bbc] that it would be the same thing. Because it is easier to write [bbc]text[/bbc] then the javascript should see that because i wrote [bbc] then that command would be the <div class="bbc"> and replace it with the style given in the CSS.

Is there a way to do that? If yes please tell me how to do it. Or else if someone knows an easier way i would be glad to see it.

Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Mati on October 17th 2014, 5:40 pm

Go in to Javascript codes management -> Create a new javascript
Title : whatever you wish
Placement : In all the pages

Code:
jQuery(window).load(function() {
        /* mod text */
        jQuery('body').append('<div id="fa_modtable" class="select" style="visibility:hidden;width:auto;text-align:left;"><div class="modtext" id="Text1">MrMind</div><div class="modtext" id="Text2">ste</div>');
        jQuery('.sceditor-group:last-child').after('<div class="sceditor-group" id="fa_modtools"><a class="sceditor-button" title="Mod Text" onclick="selectWysiwyg(this, \'fa_modtable\');"><div style="background:url(http://i56.servimg.com/u/f56/18/45/41/65/modera10.png) no-repeat center;"></div></a></div>');

        /* mtable functions */
        jQuery('#Text1').click(function() { /* MrMind */
        jQuery('#text_editor_textarea').sceditor('instance').insertText('[color=#0033cc][font=Comic Sans MS][size=16]text','[/size][/font][/color]
');
        });
        jQuery('#Text2').click(function() { /* ste */
        jQuery('#text_editor_textarea').sceditor('instance').insertText('[size=16][font=Georgia][color=#ff6600][b]text','[/b][/color][/font][/size]');
        });

       /* hide list onclick */
        jQuery('.modOption').click(function() { jQuery('#fa_modtable').css('visibility','hidden'); });
        });

Then CSS:
Code:
.modtext {
    color: #000;
    cursor: pointer;
    font-size: 10px;
    padding: 3px;
}
.modtext:hover {
    background: none repeat scroll 0 0 #ddd;
}
.modtext:active {
    background: none repeat scroll 0 0 #ff8;
}

You can add as many members as you want.

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 5:47 pm

Ok so with this what happens? How does it work?






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Mati on October 17th 2014, 5:50 pm

In the sceditor button you see this icon click on and you get the text you want.

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 5:54 pm

Yeah i already have that. What i wanted is somehow if i write to the sceditor for example: [sls]text[/sls]
then the text will change based on the changed that i made for the [sls]. I dont know how to explain it else way. The only thing i can say if you didn't understand read the examples i gave. Lets hope it works!


note: i have the same image for the mod tools (info,solve,warning boxes)
p.s.: i tested the code you gave me and didn't work! :/






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by SLGray on October 17th 2014, 6:53 pm

I believe those forums are using a tutorial that adds customized BBCodes.  I believe it is on Avacweb.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 8:19 pm

I don't understand what you are saying SLGray. Those BBCodes on AvacWeb are really difficult for me to understand which one to use for.. study






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Mati on October 17th 2014, 9:21 pm

The code works fine on my forum.

Mati
Active Poster

Posts : 1884
Reputation : 283
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://footballforums.forumotion.net/

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Ange Tuteur on October 17th 2014, 10:50 pm


Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 17th 2014, 11:23 pm

Νo. Not at all.
Ok it is MrMind & Ange that are in the staff.
MrMind wants a fast bbcode with "mrm" and Ange wants one with "ang".
Now by setting these two variables as the bbcode (i don't know if this is the correct word), "mrm" will be set to have some specific characteristics (font/color etc.) as well as "ang". After setting that, if MrMind, writes in the editor the below text:
[mrm]text[/mrm]
then the text will reshape and take place as the characteristics of that variable was set. As well as if Ange posts:
[ang]text[/ang]


It is something like the <div class="mrm">text</div> and set the .mrm{style} in the CSS, but with less characters that i don't know if it is possible to do.






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Ange Tuteur on October 18th 2014, 12:11 am

Try this, it's a modified version of the tuto I translated. ^^

Create a new script
Title : Your choice
Placement : In all the pages
Paste the code below :
Code:
$(function() {
  if (!document.getElementById('text_editor_textarea')) return;
  
  
  userTag(1,'ang', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F66;font-style:italic;">', '</span>');
  
  
  function userTag(id, tagname, image, htmlStart, htmlEnd) {
    var breg = new RegExp('\\['+tagname+'\\](.+?)\\[\\/'+tagname+'\\]','gi');
    if (_userdata.user_id === id) {
      $("#text_editor_textarea").before("<img src='"+image+"'id='"+tagname+"-b'/>");
      $('#'+tagname+'-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('['+tagname+']','[/'+tagname+']')});
    }
    $('div.postbody div').each(function () {if ($(this).text().indexOf('['+tagname+']') != -1) $(this).html($(this).html().replace(breg, htmlStart + '$1' + htmlEnd))});
  }
});

To add a new button for a specific user write :
userTag(id, tagname, image, htmlStart, htmlEnd)

id : The id of the user, it can be seen from the profil. http://help.forumotion.com/u1 1 for user 1 !

tagname : The name of your tag. Plain text like mrm, ange, me

image : The image of the button. In the default example : https://i39.servimg.com/u/f39/18/21/41/30/bouton10.png

htmlStart : The starting tag of your HTML. example : <span style="color:red">

htmlEnd : The ending tags of your HTML. example : </span>

All together you will have the following !
Code:
userTag(1,'ang', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F66;font-style:italic;">', '</span>');

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by _Twisted_Mods_ on October 18th 2014, 3:45 am

i would change


Code:
<span style="color:#F66;font-style:italic;">

to


Code:
<span class="angeclass">

then style it in css so its faster to make changes if need be rather then searching threw tons of js

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Ange Tuteur on October 18th 2014, 6:16 am

It is an example, you do not have to do it exact. However, It is good to use a class if your style is extensive. e.g. backgrounds, animation, pseudo selectors.. ^^

Infact it is still simple to edit since it's done through arguments. That way you can write the function multiple times, and it will only execute for specific users. Additionally you can utilize comments to help remind yourself of what the function modifies.. Smile

Code:
userTag(1,'ang', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F66;font-style:italic;">', '</span>'); // ange
userTag(2,'u2', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#F22;font-weight:bold;">', '</span>'); // user 2
userTag(3,'u3', 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png', '<span style="color:#85D;">', '</span>'); // user 3

This is only a portion, it would of course go where I have the example in the full script !

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 18th 2014, 8:23 am

Ok this works but i have 2 questions.

1. This button is visible only to the user i set via the id?

2. Is it necessary to have the button? If i remove the button above the editor and i write by myself [mrm][/mrm] will it have the same result?

Thanks!






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by _Twisted_Mods_ on October 18th 2014, 9:08 am

js


Code:
$(function() {
$('div.postbody div').each(function () {
    if ($(this).text().indexOf('[adm]') != -1) $(this).html($(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div>$1 </div></div>'));
  });
});

css

Code:
.adm_mess {
font-size:large;
  font-weight: bolder;
color:black;
  padding:10px;
 text-shadow: 1px 0px 3px #00ff00 , 0px 1px 3px #00ff00, -1px 0px 3px #00ff00,
  0px -1px 3px #00ff00, 0px 0px 10px #00ff00;
  background-color:black;
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 18th 2014, 9:12 am

MrMind wrote:Ok this works but i have 2 questions.

1. This button is visible only to the user i set via the id?

2. Is it necessary to have the button? If i remove the button above the editor and i write by myself [mrm][/mrm] will it have the same result?

Thanks!

Yes i knew that twistedkilla but i want to answer these questions to go on with any other code.

Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by _Twisted_Mods_ on October 18th 2014, 9:20 am

the code i just gave u was without the button just using [adm] and [/adm]

as far as it showing up for only some users just switch the user and see if you can see if or not

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 18th 2014, 9:40 am

Ok i checked it and with the button it is easier. Ange can i have the blank image of that button please?

EDIT: Never mind. I will make my ones! TOPIC SOLVED!!

Thank you all for your help with this. I really appreciate your help!
Have a great day! :rose:

Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by _Twisted_Mods_ on October 18th 2014, 9:47 am

here dont think angi would mind


and if u want some buttons to match ur theme or somthing just make a request in gfx section and ill make u some

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by _Twisted_Mods_ on October 18th 2014, 10:01 am

i have question for you ange how would i link this to groups so i wouldnt have to type any bb code it would auto add it to any post iv ever made if im in that group

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Luffy on October 18th 2014, 10:43 am

I made mines! It is ok!






Luffy
Manager
Manager

Male Posts : 4246
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fast BBCodes for Staff in posts

Post by Ange Tuteur on October 18th 2014, 5:08 pm

thetwistedkilla wrote:i have question for you ange how would i link this to groups so i wouldnt have to type any bb code it would auto add it to any post iv ever made if im in that group
I believe you should open a new topic for your question.

MrMind wrote:Ok i checked it and with the button it is easier. Ange can i have the blank image of that button please?

EDIT: Never mind. I will make my ones! TOPIC SOLVED!!

Thank you all for your help with this. I really appreciate your help!
Have a great day! :rose:  

You're welcome ^^

Topic archived

Enjoy your weekend.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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