jfb-skinning-profile-templates [Jcink.com Wiki]

Custom Mini 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”HTML Templates → Create or edit and existing template set for a skin → then click on edit under “Mini Profile” in the Admin CP.

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

Sample Customized Miniprofile

Now for a basic mini-profile template, follow the steps above, but place this code in the mini-profile box (listed as step 9):


<!-- |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. Suppose you had the store enabled and wanted to show how many credits someone had and 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 a “Mood” field has been added using the custom profile variable of field_1 from the 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.

Getting creative is another thing you 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 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 the JFH support forum mini-profile boxes.

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

Using Javascript

Javascript can be placed inside this section also. However one important thing to know about using javascript here is that any code cannot be broken up by use of the enter key. So for example in this code to only show custom fields if they're not blank or N/A:

if("<!-- |field_1| -->" != "N/A") { 
document.write('<a href="<!-- |field_1| -->">Character sheet</a>'); 

This code (shown above) will fail. This is because using the enter key causes the compiler to place in <br> which breaks the code up and stops it from working. So for Javascript to work there all codes must be all on 1 line. (This doesn't mean they can't spill over onto multiple lines, it just means they cannot have the enter key used on them. Formatting-wise, Javascript interpreters will read parse it whether it's on one line or 5. It's primarily broken up simply to make it easier to read for people.)

So a working version of this code would be:

<script>if("<!-- |field_1| -->" != "N/A") { document.write('<a href="<!-- |field_1| -->">Character sheet</a>');}</script>

So if your Javascript codes placed in here aren't working properly, try removing spaces in them where ever you can to see if an accidental enter key press is causing problems.

jfb-skinning-profile-templates.txt · Last modified: 2017/04/22 10:50 by jcink