Recent Tutorials
Who is online?
In total there are 7 users online :: 2 Registered, 0 Hidden and 5 Guests

djblah, SLGray

[ View the whole list ]


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

Profile Customization [Project]

View previous topic View next topic Go down

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

PostAnge Tuteur on Mon 10 Mar 2014, 22:18

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


Last edited by Ange Tuteur on Sun 16 Mar 2014, 07:40; edited 1 time in total
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Mon 10 Mar 2014, 23:45

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

PostAnge Tuteur on Tue 11 Mar 2014, 00:04

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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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 12 Mar 2014, 06:30

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 Smile
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Fri 14 Mar 2014, 01:41

great ! my profile looks awesome already!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 14 Mar 2014, 02:48

Very nice Very Happy

When I get some time, I will try to further work on this.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 16 Mar 2014, 07:25

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) });
    }
});
avatar
SSYT
Member
Title :
SSYT Codes
Gender : Male
Age : 23
Posts : 19
Points : 1452
Reputation : 13
Language : Romanian, English
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://www.forumcodes.com

PostSSYT on Sun 16 Mar 2014, 12:01

How to use and execute code for working ?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 16 Mar 2014, 14:50

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.
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Mon 17 Mar 2014, 02:23

incredible .. thanks a ton, for sharing .. Smile
avatar
SSYT
Member
Title :
SSYT Codes
Gender : Male
Age : 23
Posts : 19
Points : 1452
Reputation : 13
Language : Romanian, English
Browser : Browser : Opera Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://www.forumcodes.com

PostSSYT on Mon 17 Mar 2014, 04:57

Very nice code, thanks.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 17 Mar 2014, 14:46

You're welcome and thanks. ^^
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Sat 05 Apr 2014, 04:14

wait so we have to create profile fields ourselves ? coz I added the code in my test forum but nothing happened (its phpbb3 )
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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 05 Apr 2014, 14:19

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 :
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1818
Reputation : 86
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Sun 06 Apr 2014, 09:13

profile type text zone or what?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 06 Apr 2014, 16:07

If the field is text it should work 100% Wink
avatar
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 65
Points : 1258
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Sat 25 Oct 2014, 22:40

where is the css?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4675
Points : 9689
Reputation : 2331
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 26 Oct 2014, 18:05

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) });
    }
});
avatar
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 65
Points : 1258
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Sun 26 Oct 2014, 20:09

@Ange Tuteur wrote: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 I love you

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