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” as “Profile Template” 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.

Tutorial

  1. Once logged into the ACP, on the left panel go to “Skins & Templates”.
  2. Then go to “Profile Templates”.
  3. On the page that loads on the right, ensure that “Enable custom mini profile templates?” is set to Yes
  4. 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”.
  5. 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.)
  6. Hit “Save Settings” (if any of the settings needed to be changed, otherwise continue onto the next step).
  7. 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.
  8. Then click the 'Create/Edit Template' button.
  9. You'll come to a screen with a text box. This is where you input custom data. Now insert all the variables you want into the box (or just put in what you want to test this out).
    Below that box will be a list of “variables” 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| –> will show that post's author's name.
  10. Click the “Save Template” button.
  11. Now go check your topics to see what it displays.

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):

BASIC BARE BONES TEMPLATE:

<!-- |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></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 the JFH support forum mini-profile boxes.

There are other things you can do as well, the possibilities are virtually 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.

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:

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

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.

Compatibility with Quick-Edit

Unfortunately placing tables in custom mini-profiles when combined with the AJAX based Quick-Editor for posts creates a bug where the quick-editor will open the mini-profile for editing and treat it like a post. The only current fix to this problem is to not use tables in your mini-profiles.

If you're using tables and the quick edit, you should remove all your table tags and replace them with named div tags (EX- <div id=“postbit”>) then use CSS to place/position them. (This may take some tweaking to get the look consistent with your previous “table” version.)

 
jfb-skinning-profile-templates.txt · Last modified: 2013/08/25 23:43 by jcink