Recent Tutorials
Who is online?
In total there are 5 users online :: 1 Registered, 0 Hidden and 4 Guests :: 1 Bot

Niko!

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Profile field for custom post profiles

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 24 Jan 2015, 22:30

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. Razz

  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. Wink


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. Wink

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 !! lol!

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. Smile

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


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


Last edited by Ange Tuteur on Wed 18 May 2016, 11:03; edited 2 times in total
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1328
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Sat 24 Jan 2015, 23:01

Nice! Looks like it could come in handy.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 24 Jan 2015, 23:07

Thanks, I've been using it here for quite awhile and figured I would share it, since I didn't notice any bugs. Smile
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1328
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Sat 24 Jan 2015, 23:09

Isn't the mood thing you, Twisted mods and Samantha have been working on use something similar?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 24 Jan 2015, 23:19

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. lol!
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1328
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Sat 24 Jan 2015, 23:24

Not at all... I just wish to know what genius decided to name a type of code after a bathroom/kitchen cleaning solution? Laughing
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sat 24 Jan 2015, 23:36

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 ?
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1328
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Sat 24 Jan 2015, 23:42

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.
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 03 Dec 2015, 03:31

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

Does this work on punBB?
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 18 May 2016, 00:19

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/
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 18 May 2016, 11:04

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');
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2172
Points : 4069
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Wed 18 May 2016, 14:39

@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.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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