Profile Customization [Project]

[Ange TuteurAdministrator]

Hello everyone,

I have been working on some customization for the profiles here. So far this will allow you to change the background color, some font color, and add a banner to the top of your profile.

You can access these options from Profile.

This is still in beta, so if you encounter any bugs, or have any suggestions; don't hesitate.

Thanks and have fun.

[Rhino.Freak]

I don't like to post useless comments like "wow awesome" to begin with, but you dont leave a choice. I was looking for this for soo long I tell you..

Keep it up, its amazing so far

[Ange TuteurAdministrator]

Thanks,

So far it will work on the index of a members profil. I could probably get it on all pages, but right now I'll keep it as is since I'm using a AJAX profile.

[Ange TuteurAdministrator]

Hello,

Few updates made to the profile customization. Changes made with the AJAX editing field on the profile should be seen without page refresh. The user style is now in a stylesheet.

Two options have been added :
background color 1
background color 2

these will allow you to further change the colors on your profile. For a their descriptions navigate to your profile settings.

If you encounter any bug, or have feedback do not hesitate.

Many thanks

[Rhino.Freak]

great ! my profile looks awesome already!

[Ange TuteurAdministrator]

Very nice

When I get some time, I will try to further work on this.

[Ange TuteurAdministrator]

Hi,

For now I am finished experimenting with this. For example you can see/use the code below. It is done by using a profile fields value for the style. This was mainly developed for phpbb3, since that is this forums version.

Code:

$(function() {
    var customProfile = function() {
       var banner = $('#field_id6 .field_uneditable').text();
       if (banner.length > 10) { $('#profile-advanced-banner').html('<img id="banner-image" src="'+banner+'" />') }
       else { $('#banner-image').remove() }

       var fontColor = $('#field_id5 .field_uneditable').text();
       var linkColor = $('#field_id10 .field_uneditable').text();
       var bgColor1 = $('#field_id7 .field_uneditable').text();
       var bgColor2 = $('#field_id11 .field_uneditable').text();
       var bgColor3 = $('#field_id12 .field_uneditable').text();
       var bgImage = $('#field_id8 .field_uneditable').text();
       var bgRepeat = $('#field_id9 .field_uneditable').text();
        
       var profileStyle =
          '<style id="profileStylesheet">'+
              '#main, #page-footer, .module, .panel, #tabs li span { color:'+fontColor+'; }'+
              '#main a, #page-footer a { color:'+linkColor+'; }'+
              'body, #wrap { background-color:'+bgColor1+'; }'+
              '.module, .panel.row3, #tabs a, #tabs .activetab { background-color:'+bgColor2+' !important; border:none !important; box-shadow:none; }'+
              '.panel .panel { background:'+bgColor3+' !important; }'+
              '#wrap { background-image:url('+bgImage+'); }'+
              '#wrap { background-repeat:'+bgRepeat+'; }'+
           '</style>';
        $('head').append(profileStyle);
    };
    
    if (document.getElementById('profile-advanced-details')) {
        
       $('#field_id6').before('<div class="h3">Profile Design Settings</div>');
       $('#field_id5').before('<div class="h3">Font Settings</div>');
       $('#field_id7').before('<div class="h3">Background Settings</div>');
    
       $('#profile-advanced-layout').prev().before('<div id="profile-advanced-banner" align="center"></div>');
        
       customProfile();
        
       $(document).on('click','.ajax-profil_valid',function() { setTimeout(function() { $('#profileStylesheet').remove(); customProfile() },300) });
    }
});

[SSYTMember]

How to use and execute code for working ?

[Ange TuteurAdministrator]

Each profile field has a unique ID, you use that ID to grab its textual contents. As seen by this mess :

Code:

      var fontColor = $('#field_id5 .field_uneditable').text();
       var linkColor = $('#field_id10 .field_uneditable').text();
       var bgColor1 = $('#field_id7 .field_uneditable').text();
       var bgColor2 = $('#field_id11 .field_uneditable').text();
       var bgColor3 = $('#field_id12 .field_uneditable').text();
       var bgImage = $('#field_id8 .field_uneditable').text();
       var bgRepeat = $('#field_id9 .field_uneditable').text();

There is multiple profile fields where the text is returned. Those variables are used in the stylesheet; the text content serves as the property value.

[Rhino.Freak]

incredible .. thanks a ton, for sharing ..

[SSYTMember]

Very nice code, thanks.

[Ange TuteurAdministrator]

You're welcome and thanks. ^^

[Rhino.Freak]

wait so we have to create profile fields ourselves ? coz I added the code in my test forum but nothing happened (its phpbb3 )

[Ange TuteurAdministrator]

Yep you do, unfortunately.

See this statement :

Code:

var linkColor = $('#field_id10 .field_uneditable').text();

Before field_uneditable is the profile ID. You can see this through the browser tools on the profil :

[Rhino.Freak]

profile type text zone or what?

[Ange TuteurAdministrator]

If the field is text it should work 100%

[Ch@lo Valdez]

where is the css?

[Ange TuteurAdministrator]

The CSS was determined by the member's input on their profile page. Everything was done through javascript, and needs to be edited with the appropriate field IDs.

e.g. #field_id5 .field_uneditable

Code:

$(function() {
    var customProfile = function() {
       var banner = $('#field_id6 .field_uneditable').text();
       if (banner.length > 10) { $('#profile-advanced-banner').html('<img id="banner-image" src="'+banner+'" />') }
       else { $('#banner-image').remove() }

       var fontColor = $('#field_id5 .field_uneditable').text();
       var linkColor = $('#field_id10 .field_uneditable').text();
       var bgColor1 = $('#field_id7 .field_uneditable').text();
       var bgColor2 = $('#field_id11 .field_uneditable').text();
       var bgColor3 = $('#field_id12 .field_uneditable').text();
       var bgImage = $('#field_id8 .field_uneditable').text();
       var bgRepeat = $('#field_id9 .field_uneditable').text();
        
       var profileStyle =
          '<style id="profileStylesheet">'+
              '#main, #page-footer, .module, .panel, #tabs li span { color:'+fontColor+'; }'+
              '#main a, #page-footer a { color:'+linkColor+'; }'+
              'body, #wrap { background-color:'+bgColor1+'; }'+
              '.module, .panel.row3, #tabs a, #tabs .activetab { background-color:'+bgColor2+' !important; border:none !important; box-shadow:none; }'+
              '.panel .panel { background:'+bgColor3+' !important; }'+
              '#wrap { background-image:url('+bgImage+'); }'+
              '#wrap { background-repeat:'+bgRepeat+'; }'+
           '</style>';
        $('head').append(profileStyle);
    };
    
    if (document.getElementById('profile-advanced-details')) {
        
       $('#field_id6').before('<div class="h3">Profile Design Settings</div>');
       $('#field_id5').before('<div class="h3">Font Settings</div>');
       $('#field_id7').before('<div class="h3">Background Settings</div>');
    
       $('#profile-advanced-layout').prev().before('<div id="profile-advanced-banner" align="center"></div>');
        
       customProfile();
        
       $(document).on('click','.ajax-profil_valid',function() { setTimeout(function() { $('#profileStylesheet').remove(); customProfile() },300) });
    }
});

[Ch@lo Valdez]

The CSS was determined by the member's input on their profile page. Everything was done through javascript, and needs to be edited with the appropriate field IDs.

e.g. #field_id5 .field_uneditable

Code:

$(function() {
    var customProfile = function() {
       var banner = $('#field_id6 .field_uneditable').text();
       if (banner.length > 10) { $('#profile-advanced-banner').html('<img id="banner-image" src="'+banner+'" />') }
       else { $('#banner-image').remove() }

       var fontColor = $('#field_id5 .field_uneditable').text();
       var linkColor = $('#field_id10 .field_uneditable').text();
       var bgColor1 = $('#field_id7 .field_uneditable').text();
       var bgColor2 = $('#field_id11 .field_uneditable').text();
       var bgColor3 = $('#field_id12 .field_uneditable').text();
       var bgImage = $('#field_id8 .field_uneditable').text();
       var bgRepeat = $('#field_id9 .field_uneditable').text();
        
       var profileStyle =
          '<style id="profileStylesheet">'+
              '#main, #page-footer, .module, .panel, #tabs li span { color:'+fontColor+'; }'+
              '#main a, #page-footer a { color:'+linkColor+'; }'+
              'body, #wrap { background-color:'+bgColor1+'; }'+
              '.module, .panel.row3, #tabs a, #tabs .activetab { background-color:'+bgColor2+' !important; border:none !important; box-shadow:none; }'+
              '.panel .panel { background:'+bgColor3+' !important; }'+
              '#wrap { background-image:url('+bgImage+'); }'+
              '#wrap { background-repeat:'+bgRepeat+'; }'+
           '</style>';
        $('head').append(profileStyle);
    };
    
    if (document.getElementById('profile-advanced-details')) {
        
       $('#field_id6').before('<div class="h3">Profile Design Settings</div>');
       $('#field_id5').before('<div class="h3">Font Settings</div>');
       $('#field_id7').before('<div class="h3">Background Settings</div>');
    
       $('#profile-advanced-layout').prev().before('<div id="profile-advanced-banner" align="center"></div>');
        
       customProfile();
        
       $(document).on('click','.ajax-profil_valid',function() { setTimeout(function() { $('#profileStylesheet').remove(); customProfile() },300) });
    }
});

ok thanks

[Sponsored content]