The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How Do I Edit The Template For The Advanced Profile

View previous topic View next topic Go down

How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 7th 2017, 12:09 am

Technical Details


Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Google Chrome
Screenshot of problem : http://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".
avatar
Ailyn
Forumember

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by SLGray on April 7th 2017, 12:44 am

There is no templates for the advanced profile.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 38225
Reputation : 2574
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 7th 2017, 1:04 am

@SLGray wrote:There is no templates for the advanced profile.
Then how does everyone customize their profile page section?
avatar
Ailyn
Forumember

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Dr Jay on April 7th 2017, 9:19 am

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. Smile I can offer some useful tips, if needed.
avatar
Dr Jay
Forumember

Male Posts : 92
Reputation : 7
Language : English
Location : USA(UTC-5)

http://www.geekpolice.net

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by DSorcerer on April 7th 2017, 3:27 pm

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:
avatar
DSorcerer
Forumember

Male Posts : 37
Reputation : 6
Language : Polish
Location : Poland. help

http://winx-rp.forumotion.pl

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by APE on April 7th 2017, 6:37 pm

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




avatar
APE
Manager
Manager

Male Posts : 9645
Reputation : 872
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by DSorcerer on April 7th 2017, 6:42 pm

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

Male Posts : 37
Reputation : 6
Language : Polish
Location : Poland. help

http://winx-rp.forumotion.pl

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 8th 2017, 12:33 am

@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.
avatar
Ailyn
Forumember

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by APE on April 8th 2017, 2:15 am

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



avatar
APE
Manager
Manager

Male Posts : 9645
Reputation : 872
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 8th 2017, 2:21 am

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.
avatar
Ailyn
Forumember

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by DSorcerer on April 8th 2017, 11:42 am

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.
avatar
DSorcerer
Forumember

Male Posts : 37
Reputation : 6
Language : Polish
Location : Poland. help

http://winx-rp.forumotion.pl

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 8th 2017, 11:57 am

It looks good. I can tweak that Smile

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?
avatar
Ailyn
Forumember

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by DSorcerer on April 8th 2017, 12:03 pm

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(""));
  });
});
avatar
DSorcerer
Forumember

Male Posts : 37
Reputation : 6
Language : Polish
Location : Poland. help

http://winx-rp.forumotion.pl

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 8th 2017, 12:18 pm

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.
avatar
Ailyn
Forumember

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by DSorcerer on April 8th 2017, 12:24 pm

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

Male Posts : 37
Reputation : 6
Language : Polish
Location : Poland. help

http://winx-rp.forumotion.pl

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Ailyn on April 8th 2017, 12:29 pm

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

Female Posts : 25
Reputation : 3
Language : English
Location : Oregon

http://amandatest.forumotion.com

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by DSorcerer on April 8th 2017, 12:35 pm

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.
avatar
DSorcerer
Forumember

Male Posts : 37
Reputation : 6
Language : Polish
Location : Poland. help

http://winx-rp.forumotion.pl

Back to top Go down

Re: How Do I Edit The Template For The Advanced Profile

Post by Dr Jay on April 9th 2017, 11:18 am

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. Smile
avatar
Dr Jay
Forumember

Male Posts : 92
Reputation : 7
Language : English
Location : USA(UTC-5)

http://www.geekpolice.net

Back to top Go down

View previous topic View next topic Back to top


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