How Do I Edit The Template For The Advanced Profile

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Screenshot of problem : https://i.imgur.com/6gD5NJn.png
Who the problem concerns : All members
When the problem appeared : The entire time
Forum link : http://amandatest.forumotion.com

Description of problem

I'm looking for the template that has to do with the profile area shown in my screenshot. I looked through the templates but only found something related to the basic one. I'd like to edit the way it looks in general but also specifically get rid of the obnoxious spacing between "Gender, Posts, Birthday etc".

There is no templates for the advanced profile.

SLGray wrote:There is no templates for the advanced profile.

Then how does everyone customize their profile page section?

The template for advanced profile is a hidden template and inaccessible to normal admins. Accessing the hidden templates is impossible due to the standard php code being developed by Forumactif developers.

Nonetheless, profiles can be modified by CSS and JavaScript, as they still have selectors available to target and edit.

I have rich experience implementing changes to profiles especially in phpBB3, as you have that version, such things should be useful.

Please look at an example here. This is my profile on my forum, which you can see has been heavily modified just using JS and CSS.

There is a basic advanced profile layout with appropriate left and right sections, easy to transpose. I can offer some useful tips, if needed.

No need to edit the HTML template. For the spaces, use this please:
ACP -> Modules -> HTML&JavaScript -> Javascript codes management -> Create a new JavaScript.
Title: what do you want
Placement: in all the pages
Then paste below this:

Code:

$(document).ready(function(){
  $('dl[id*="field_id"] > dt:contains(" :")').each(function(){
    $(this).html($(this).html().split(" :").join(":"));
});
  });
$(document).ready(function(){
  $('dl[id*="field_id"] > dt').each(function(){
    $(this).html($(this).html().split(" *:").join("*:"));
});
  });
$(document).ready(function(){
  $('span.label:contains(" :")').each(function(){
    $(this).html($(this).html().split(" :").join(":"));
});
  });

It worked on my forum. It also changes this part:

even on this site, using a console. It should look like that:

DSorcerer wrote:No need to edit the HTML template. For the spaces, use this please:
ACP -> Modules -> HTML&JavaScript -> Javascript codes management -> Create a new JavaScript.
Title: what do you want
Placement: in all the pages
Then paste below this:

Code:

$(document).ready(function(){
  $('dl[id*="field_id"] > dt:contains(" :")').each(function(){
    $(this).html($(this).html().split(" :").join(":"));
});
  });
$(document).ready(function(){
  $('dl[id*="field_id"] > dt').each(function(){
    $(this).html($(this).html().split(" *:").join("*:"));
});
  });
$(document).ready(function(){
  $('span.label:contains(" :")').each(function(){
    $(this).html($(this).html().split(" :").join(":"));
});
  });

It worked on my forum. It also changes this part:

even on this site, using a console. It should look like that:

:DSorcerer

The member is not asking about the post profile they are asking about the members profile placed in the Navbar or by clicking on the name of the member.

It does both things. I'm sure she wants to remove spaces there, too.

DSorcerer wrote:It does both things. I'm sure she wants to remove spaces there, too.

That does help, but I was more concerned with this:

Its annoying and unprofessional looking to say the least. I've got other things on the profile I'd like to modify as well, but I guess I should focus on one thing at a time.

Hello the CSS files you need is

Code:

div.field_uneditable{
padding-left: -10px;
}

Now change the -10px to the right width you want away from the text

I tried that one but it doesn't get the text any closer. I can move it further away to the right, but it will not go any closer to the left.

Girl, you can't add negative padding. Only margins, line-height, position, text-indent and a few more things can be negative. But I've got an idea. Please delete previous rules and add this:

Code:

div[class*="field"] {
    text-indent: -70px;
    font-size: 11pt;
}

#profile-tab-field-profil dl dt {
    font-size: 11pt;
}

I added font-size with bigger value to make its look better. It should work, worked in my console & my forum.

It looks good. I can tweak that

I'm trying to figure out other ways to tweak the appearance of the advanced profile, I just really want to know where the variables are so I can change things like removing the word "Rank" (not the actual rank, just that word) from under the profile picture. Is there some resource that can tell me more so I can play around on my own?

Variables of advanced profile are hidden, but you can do this way:

Code:

$(document).ready(function(){
    $('span.corners-top + div.h3 + div[style="text-align:center;"]:contains("Rank: ")').each(function(){
    $(this).html($(this).html().split("Rank: ").join(""));
    });
});

So if I looked in the template for the basic profile, would I be able to find the html codes you've used in that js? I'm not wanting someone to hold my hand the entire time, I just want help understanding what I'm looking at. I'm sorry to be so difficult, but I really want to learn from what I'm doing here so I don't have to bother anyone else in the future.

Sadly, no, you won't. They're in another place which is hidden, so you can customize it only by JS or CSS.

Right. So, then how do you know what you're customizing if you can't see what's there? I'm confused

I use Ctrl+Shift+I combination. There is a console, just move to tab "elements". You can locate your element by just showing the browser where it is. Use this button:  or Ctrl+Shift+C combination. All the elements will select following your mouse. Click on some when you'll be ready and look at the values.
Many things haven't IDs, so you can locate them by +, ~ or > in CSS selectors. See: CLICK.

What I was saying in my last post here was that the entire profile is customizable; however, you must be creative.

For starters, if you would like to make full use of the "basic" profile template, then deactivate advanced profile (example here). Otherwise, if you use advanced profile, you need to be advanced.

How? Well, for starters, some creativity may emerge on turning profile fields into image lists instead, especially if the profile field seems simple (for example browsers could be an image list with 5-6 different mainstream browsers).

Each profile field has a special ID for example:

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();

That is just basic JS customized for a specific forum. Do not use such code as it was just an example.

Many of the advanced variables, especially in the advanced profile, can only be controlled by JavaScript. Sometimes, you have to force the JS to make the forum cooperate with you so you can use such variables.

Nonetheless, what the variables are, I can only display a few for you here, but it may or may not help you in the end.

I do not know enough JS, but I am mastered well in CSS/HTML.

List of variables:

Code:

{USER_AVATAR}
{USER_NAME}
{UID}
{POSTS}
{FRIENDS}
{AVATAR_IMG}
{POSTER_RANK}
{USER_ONLINE}
{FRIENDSFOES}
{ADMINISTRATE_USER}
{BAN_USER}
{USERNAME}
{LAST_VISIT_TIME}
{PRIVATE_MSG}
{USER_ID}

Profile JS variables available for use (case sensitive of course):

Code:

U.username
U.user_id
U.avatar
L.rank_title
L.Posts
U.user_posts
L.PMs
U.user_nb_privmsg
L.Reputation
U.point_reputation
L.See_my_profile
L.Edit_profile
L.All_PMs
L.All_Topics
L.All_Messages
L.js_topics_followed

Manipulating certain variables in JavaScript is very tedious, I will show one example...
JS:

Code:

$(document).ready(function() {
var x=$('LAST_VISIT_TIME').html();
$('.templatelvt').html(x);
});

Place in template where variable needed:

Code:

<span class="templatelvt"></span>

That's about as advanced as it gets.