JFB >> Skinning >> Profile Templates

This allows you to modify the mini profile. The mini profile is the information that is on the left of every post in the forum. This includes their avatar, post details, join date, and more. You can sort what shows, add images, add dynamic content, insert javascript, html, and CSS into it. The feature is under “Skins & Templates” as “Profile Template” in the Admin CP.

This is a moderately advanced feature of JFB. We recommend taking some time to experiment with the below tutorial if you do not have good knowledge of HTML and CSS.

• Once logged into the ACP, on the left panel go to “Skins & Templates”.
• Then go to “Profile Templates”.
• On the page that loads on the right, ensure that “Enable custom mini profile templates?” is set to Yes
• If you intend to use your own custom fields, be sure to set: “Enable use of Custom Profile Field variables in templates? Required to use <!– |field_#| –> variables.” to “Yes”.
• Then ensure that “Override all individual skin templates with OUR 'Default' template IF left blank?” is set to yes. (This means that only skins that you configure specifically/individually will be different, otherwise the default mini-profile will be used. If you would prefer your mini-profile to be the default on all skins, then set “Override all individual skin templates with YOUR 'Default' template IF left blank?” to “Yes” instead.)
• Hit “Save Settings”.
• Next, in the bottom table (titled: “Choose a skin”), you will see a dropdown menu. Use it to select the skin you want to edit the miniprofile for.
• Then click the 'Create/Edit Template' button.
• You'll come to a screen with a text box. This is where you input custom data. Below the box show “variables” that you can use. When you paste them into the textbox, after you view the topics in the forum, you will see that they get changed to post information. For example:

<!-- |author_name| -->

• As a test, insert that into the box and click the “Save Template” button.
• Now go check your topics. You'll see it displays the user name (and only the username) in the sidebar.

Now for a more full sidebar, follow the steps above, but place this code in the mini-profile:

BASIC BARE BONES SIDEBAR:

<!-- |avatar| -->
<!-- |title| -->
<!-- |member_rank_img| -->
<!-- |g_icon| -->
Group: <!-- |member_group| -->
Posts: <!-- |member_posts| -->
Member No.: <!-- |id| -->
Joined: <!-- |member_joined| -->

<!-- |warn_text| --> <!-- |warn_minus| --><!-- |warn_img| --><!-- |warn_add| -->

This will give you a very “bare bones” setup, displaying only basic member information. You can edit the order, or change it or add new information. Pretend I had the store enabled and I wanted to show how many credits someone had, and I wanted it to be in between Group: and posts.

The table in the ACP says that the store's point variable is <!– |points| –>. So we add it right in:

<!-- |avatar| -->
<!-- |title| -->
<!-- |member_rank_img| -->
<!-- |g_icon| -->
Group: <!-- |member_group| -->
Credits: <!-- |points| -->
Posts: <!-- |posts| -->
Member No.: <!-- |id| -->
Joined: <!-- |member_joined| -->
Age: <!-- |age| -->

Mood: <!-- |field_1| -->

<!-- |warn_text| --> <!-- |warn_minus| --><!-- |warn_img| --><!-- |warn_add| -->

And that's it! You will also notice in the above example I added a “Mood” field using the custom profile variable of field_1 from my ACP. You can do this with ANY custom profile field variable, they work here as well, in the same way. (Be sure to change the setting “Enable use of Custom Profile Field variables in templates?” to “Yes” as mentioned above in the Tutorial though first.) The example also adds in a variable called age which will display the current age of any user who has filled out their birthday information.

We could continue and add the rest of the data as we need. Or remove if we wanted.

Getting creative is another thing we could do. If you're using the default skin on our support forums, the sidebar has been fully CSS customized with boxed in profile data and images.

Full source to our CSS boxes:

<div class="postbit"><div align='center'><!-- |avatar| -->
<!-- |title| -->
</div></div>
<div class="postbit"><img src='http://support.b1.jcink.com/uploads/support//post-30-1199519165.png'> Group: <!-- |member_group| --></div>
<div class="postbit"><img src='http://support.b1.jcink.com/uploads/support//post-30-1199519139.png'> Posts: <!-- |member_posts| --></div>
<div class="postbit"><img src='http://support.b1.jcink.com/uploads/support//post-30-1199519109.png'> Credits: <!-- |points| --></div>
<div class="postbit"><img src='http://support.b1.jcink.com/uploads/support//post-30-1199519053.png'> Joined: <!-- |member_joined| --></div>
<div class="postbit">Age: <!-- |field_1| -->
Gender: <!-- |field_2| -->
Location: <!-- |location| --></div>

<!-- |warn_text| --> <!-- |warn_minus| --><!-- |warn_img| --><!-- |warn_add| -->

I placed <divs> around all of the post bits, and in my CSS I added this element:

.postbit { 
border-top: solid 1px #C0C0C0; 
border-left: solid 1px #C0C0C0; 
border-right: solid 1px #C0C0C0; 
border-bottom: solid 1px #C0C0C0;
color: black;
padding: 3px;  
background: #EFEFEF;
font-size: 10px; 
}

You can add this to your stylesheet and adjust the colors and size as you see fit, and then you have my boxes.

There are other things you can do as well, the possibilities are endless.

For example, something advanced you can do if you know how to code is write up your own dynamic image script. This is an example image hosted on another site that dynamically displays anything you put into it, such as a username:

http://api.ytmnd.com/examples/widget/name_image.php?name=Jcink&color=transparent

Try placing this in your custom template box somewhere:

<img src="http://api.ytmnd.com/examples/widget/name_image.php?name=<!-- |author_name| -->&color=transparent">

You will see that it's taking your members names and giving them all an image with stars and their name.