Profile field for custom post profiles

This plugin will allow you to create a field which will give your members a choice between different post profile styles. You can add as many fields as you like, and customize them to your desire. To give you an example of what this plugin does, see the image below.



Profile Field

The first thing we need to do is setup a new profile field for this plugin. Go to Administration Panel > Users and Groups > Profiles , then add a new field by clicking the plus.

Make sure to set the field up with the following settings. Those not mentioned are completely your choice.

Type : A list
Name : Customize Profile
Description : Customize your posting profile (optional)
Display : Messages
Display type : Text
Who can modify the profile field value ? Members
Display this field for users that are at least : Guests
Separator : Back to the line

Since the plugin will come with default styles, you can added the following options to your list. This is optional, so you don't have to add them if you don't want to.

1. Default
   
2. Lines
   
3. Flowers
   
4. Butterflies
   
5. Pink
   
6. Purple
   
7. Red
   
8. Flair
   
9. Confetti
   
10. Green dots
    
11. Water drop
    
12. Paper rubbing
    

When you're finished setting the field up, go ahead and click save.


Installation

To install the plugin go to Administration Panel > Modules > JavaScript codes management and create a new script

Title : Your choice
Placement : In the topics
Paste the code below and submit :

Code:

$(function() {
  var field = 'Customize Profile';
 
  customProfile({
    value : 'Lines',
    color : '#444',
    border : '#DB5',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/lines10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Flowers',
    color : '#444',
    border : '#BCE',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/flower10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Butterflies',
    color : '#444',
    border : '#BCE',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/butter10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Pink',
    color : '#433',
    border : '#CBB',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/pink10.gif) repeat top left #FEE'
  });
 
  customProfile({
    value : 'Purple',
    color : '#445',
    border : '#AAB',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/purple10.gif) repeat top left #DDE'
  });
 
  customProfile({
    value : 'Red',
    color : '#644',
    border : '#B99',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/red10.gif) repeat top left #ECC'
  });
 
  customProfile({
    value : 'Flair',
    color : '#443',
    border : '#CCB',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/flair10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Confetti',
    color : '#443',
    border : '#CCB',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/confet10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Green dots',
    color : '#343',
    border : '#BCB',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/greend10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Water drop',
    color : '#044',
    border : '#5AA',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/waterd10.gif) repeat top left #FFF'
  });
 
  customProfile({
    value : 'Paper rubbing',
    color : '#234',
    border : '#ABC',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/paper10.gif) repeat top left #FFF'
  });
 
  customProfile({ value : '.*?', remove : true }); // remove field from profiles
  function customProfile(o) {
    var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');
    for (var i=0,p=$('.postprofile, .user, .postdetails.poster-profile'); i<p.length; i++) {
      if (p[i].innerHTML.match(reg)) {
        if (o.remove) p[i].innerHTML = p[i].innerHTML.replace(reg,'');
        else {
          p[i].style.color = o.color;
          p[i].style.borderColor = o.border;
          p[i].style.background = o.background;
        }
      }
    }
  };
  var info = 'Plugin developed by Ange Tuteur for customizing post profiles. For help with this plugin, please see the following link : http://fmdesign.forumotion.com/t279-profile-field-for-custom-post-profiles';
});

If you've never customized your profiles with CSS go to Administration Panel > Display > Colors > CSS stylesheet, paste the following codes and submit.

Code:

/* custom profile default */ .postprofile, .user, .postdetails.poster-profile { border:1px solid transparent; border-radius:6px; display:block; padding:3px; margin:3px; }
/* ipb fix */ #ipbwrapper .postprofile { margin:0; margin-left:-18em; padding:0; border:none; border-right:1px solid transparent; border-radius:0; }

This modification will ensure that your profiles look somewhat like the example at the beginning of this tutorial. I say somewhat, because the display will vary version to version.


Modifications

At the very top of the script, you should see var field = 'Customize Profile'; this is the name of the profile field we're using to apply the custom profile styles. If you named the field something else, replace Customize Profile with whatever you named the field.

In the script above, you should notice a bunch of these :

Code:

  customProfile({
    value : 'Lines',
    color : '#444',
    border : '#DB5',
    background : 'url(http://i38.servimg.com/u/f38/18/45/41/65/lines10.gif) repeat top left #FFF'
  });

This function is used to define the style of our custom profile field option. I will explain the properties within this function :

value : The value is the name of your profile field option. If the name of your new option is Rainbow write Rainbow as the value.

color : Color defines the color of the profile font. If we want the font to be pink write pink.

border : Border defines the color of the border around the profile. Let's say we want yellow, go ahead and write yellow as the value.

background : Background defines the background colors and image of the profile. url() is used for placing an image. Like the example above, your image URL will be between the parentheses. If we don't want an image, we can remove that along with repeat top left and just define a color such as orange. For more information on how background works, see this page : http://www.w3schools.com/cssref/css3_pr_background.asp or just leave a question below.

With taking what I just explained above, our new custom field should look like the following.

Code:

  customProfile({
    value : 'Rainbow',
    color : 'pink',
    border : 'yellow',
    background : 'orange'
  });

The last thing you need to do is edit your customization field we added before. Then all you have to do is add Rainbow as a new option and save !!

O-okay, that's not very rainbow..y, but you should get the gist of how it works. mmm .. orange juice... that's what we should have named it !!

You're free to edit or remove the custom profiles that you don't want, and create your own if you desire ! If you need any help with picking colors, you can use this : http://www.colorpicker.com/ As for images, you'll have to find those around the internet, or create your own.

If you have any questions or comments, feel free to leave them below. Enjoy, and be creative !!

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

Nice! Looks like it could come in handy.

Thanks, I've been using it here for quite awhile and figured I would share it, since I didn't notice any bugs.

Isn't the mood thing you, Twisted mods and Samantha have been working on use something similar?

Nah, I think that's different. It uses some AJAX to update the field with a new mood along with some other things like color and a dropdown on the profile. This is like a regular dropdown field, that you can manually change via the profile page. It uses a small snippet of code to check what field is selected, then apply its style to the post. Sorry if I got too technical, it happens a lot.

Not at all... I just wish to know what genius decided to name a type of code after a bathroom/kitchen cleaning solution?

AJAX stands for Asynchronous Javascript and XML. In simple terms, it's used to get content from another webpage, or send data to another, ooor get and load that data into the current page without reloading it. Is it bad that I think of JavaScript AJAX when I see the actual cleaner ?

Possibly I have no idea, I never used ajax javascript (i believe it is 1 of the more advances ones) but see the word and imagine cleaner! So it is the opposite for me.

Has this been removed? I do not see this field in my profile.

Does this work on punBB?

I do not know what has happened, but this is not working any more on my two forums.

http://fmthemes.forumotion.com/forum

http://ztwds.forumotion.com/

Hm.. In the script, try replacing this line :

Code:

    var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>:\\s</span>(\\s|)'+o.value+'<br>','i');

with this :

Code:

    var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');

Ange Tuteur wrote:Hm.. In the script, try replacing this line :

Code:

    var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>:\\s</span>(\\s|)'+o.value+'<br>','i');

with this :

Code:

    var reg = new RegExp('<span class="label"><span style="color:#[a-f0-9]{6};">'+field+'</span>\\s:\\s</span>(\\s|)'+o.value+'<br>','i');

Thanks.  It worked perfectly.