s0ct0j0c
21-04-2011, 07:34 PM
[XenFans] Let's get started .. (for 0 posters) [Template Modification]
With this little template modification we want to demonstrate how to customize the end-user experience on your site. We're using it on http://xenfans.com/ for new guests and newly registered members who are about to register or have just confirmed their account, (and have 0 posts); Inviting them to introduce themselves via a new thread, to upload an avatar or to complete their profile settings. You could use it on your site for the same reasons, or perhaps to point them to the forum help page, or contact sales, etc.
To demonstrate what a minute of customizing can do, here's the xenfans.com version :
Guests:
http://xenforomods.info/attachments/screen-shot-2011-01-29-at-3-07-23-pm-png.6307/?embedded=1
Confirmed / registered members:
http://xenforomods.info/attachments/screen-shot-2011-01-29-at-3-07-13-pm-png.6305/?embedded=1 (http://xenforo.com/community/attachments/screen-shot-2011-01-29-at-3-07-23-pm-png.10132/)
What does the xenfans.com version do?
- user is NOT logged in, or unregistered, gets a block with sign-up or login buttons, which drop down the login bar in the top. This is also a great place to explain what the board is about.
- user is registered, but didn't confirm email: default xenforo 'activate account' msg
- user is registered, but has 0 posts: gets invited to introduce him/herself msg
- user is registered, but regardless of post count, gets invited to set a gender, and/or upload avatar ~ depending if they have one or not.
It requires 1 template modification (and some css), and respects your customized design, replacing the 'your account is waiting confirmation' once confirmed with 'thank you for signing up, lets get started..' (or whatever you want to use as text). And guests will be introduced to the board.
For demo purpose, it does not use phrases. It's quite easy to add a phrase yourself if your community has more than one language. And if you just have one international language, manually change the text.
Anyway, let's get started.
We're going to address the registered user, who is not waiting account confirmation, and has exactly zero posts, with an important message. And a link to an end-goal, in this case a "new thread" creation page where they can introduce themselves.
Obviously what you need to do is change that end-goal with the link + text of your own choice.
Step one, go to the admin.php > appearance > templates > PAGE_CONTAINER > and find this code:
<!-- top breadcrumb, top ctrl -->
and above it on a new line add this code:
<xen:if is="!{$isAwaitingEmailConfirmation} AND {$visitor.user_id} AND {$visitor.message_count} == 0">
<p class="importantMessage" style="line-height: 1.6em;">
Thank you for signing up {$visitor.username}, and welcome to {$xenOptions.boardTitle}.
<br /><span class="xenfans_welcome"><a href="{xen:link forums/offtopic/create-thread}" class="concealed">Let's get started by Introducing yourself ...</a></label></span>
</p>
</xen:if>
<xen:if is="!{$isAwaitingEmailConfirmation} AND {$visitor.user_id}">
<xen:if is="{$visitor.avatar_date} == 0 AND !{$visitor.gravatar} OR !{$visitor.gender}">
<p class="importantMessage" style="line-height: 1.6em;">
We invite you to personalize and complete your profile :) <br />
<xen:if is="{$visitor.avatar_date} == 0 AND !{$visitor.gravatar}">
<span class="xenfans_welcome"><a href="{xen:link account/avatar}" class="OverlayTrigger" class="concealed">Upload avatar ..</a></label></span>
</xen:if>
<xen:if is="!{$visitor.gender}">
<span class="xenfans_welcome"><a href="{xen:link account/personal-details}" class="concealed">Select Gender ..</a></label>
</xen:if>
</p>
</xen:if>
</xen:if>
<xen:if is="!{$visitor.user_id}">
<p class="importantMessage" style="line-height: 1.6em;">
<b>Welcome to {$xenOptions.boardTitle}!</b><br />
You're currently viewing our site as a guest user. <span class="xenfans_welcome"><label for="LoginControl"><a href="{xen:link login}" class="concealed">Sign up</a></label></span> or <span class="xenfans_welcome"><label for="LoginControl"><a href="{xen:link login}" class="concealed">Login</a></label></span><br />
Having an account grants you additional privileges, such as creating-, and participating in discussions.
</p>
</xen:if>
and save the template.
Step two, still in the same template, find the newly added code:
<a href="{xen:link forums/offtopic/create-thread}">Let's get started by Introducing yourself ...</a>and replace the LINK and the TEXT to your own site's introduction forum or whatever you want to do with it. Optionally you can replace everything within <p> .. </p> with whatever you want, youtube embed to show site-training video, images, custom menu, donation button or a flower.
Of course, go through all the text and links, so it matches your board. Then Save the template.
Step three: to extra.css, add:
.xenfans_welcome {
padding: 3px 6px;
border: 1px solid @primaryLight;
border-radius: 3px;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
text-align: center;
font: 11px verdana,sans-serif;
text-decoration: none;
color: @primaryMedium;
text-shadow: 1px 1px 0px #fff;
outline: 0;
}Save the template again, and go test! It should not show to users with a post. Nor should it show to users who are newly registered but haven't confirmed their account yet via email. It should show to users with 0 posts, and a confirmed account.
With this little template modification we want to demonstrate how to customize the end-user experience on your site. We're using it on http://xenfans.com/ for new guests and newly registered members who are about to register or have just confirmed their account, (and have 0 posts); Inviting them to introduce themselves via a new thread, to upload an avatar or to complete their profile settings. You could use it on your site for the same reasons, or perhaps to point them to the forum help page, or contact sales, etc.
To demonstrate what a minute of customizing can do, here's the xenfans.com version :
Guests:
http://xenforomods.info/attachments/screen-shot-2011-01-29-at-3-07-23-pm-png.6307/?embedded=1
Confirmed / registered members:
http://xenforomods.info/attachments/screen-shot-2011-01-29-at-3-07-13-pm-png.6305/?embedded=1 (http://xenforo.com/community/attachments/screen-shot-2011-01-29-at-3-07-23-pm-png.10132/)
What does the xenfans.com version do?
- user is NOT logged in, or unregistered, gets a block with sign-up or login buttons, which drop down the login bar in the top. This is also a great place to explain what the board is about.
- user is registered, but didn't confirm email: default xenforo 'activate account' msg
- user is registered, but has 0 posts: gets invited to introduce him/herself msg
- user is registered, but regardless of post count, gets invited to set a gender, and/or upload avatar ~ depending if they have one or not.
It requires 1 template modification (and some css), and respects your customized design, replacing the 'your account is waiting confirmation' once confirmed with 'thank you for signing up, lets get started..' (or whatever you want to use as text). And guests will be introduced to the board.
For demo purpose, it does not use phrases. It's quite easy to add a phrase yourself if your community has more than one language. And if you just have one international language, manually change the text.
Anyway, let's get started.
We're going to address the registered user, who is not waiting account confirmation, and has exactly zero posts, with an important message. And a link to an end-goal, in this case a "new thread" creation page where they can introduce themselves.
Obviously what you need to do is change that end-goal with the link + text of your own choice.
Step one, go to the admin.php > appearance > templates > PAGE_CONTAINER > and find this code:
<!-- top breadcrumb, top ctrl -->
and above it on a new line add this code:
<xen:if is="!{$isAwaitingEmailConfirmation} AND {$visitor.user_id} AND {$visitor.message_count} == 0">
<p class="importantMessage" style="line-height: 1.6em;">
Thank you for signing up {$visitor.username}, and welcome to {$xenOptions.boardTitle}.
<br /><span class="xenfans_welcome"><a href="{xen:link forums/offtopic/create-thread}" class="concealed">Let's get started by Introducing yourself ...</a></label></span>
</p>
</xen:if>
<xen:if is="!{$isAwaitingEmailConfirmation} AND {$visitor.user_id}">
<xen:if is="{$visitor.avatar_date} == 0 AND !{$visitor.gravatar} OR !{$visitor.gender}">
<p class="importantMessage" style="line-height: 1.6em;">
We invite you to personalize and complete your profile :) <br />
<xen:if is="{$visitor.avatar_date} == 0 AND !{$visitor.gravatar}">
<span class="xenfans_welcome"><a href="{xen:link account/avatar}" class="OverlayTrigger" class="concealed">Upload avatar ..</a></label></span>
</xen:if>
<xen:if is="!{$visitor.gender}">
<span class="xenfans_welcome"><a href="{xen:link account/personal-details}" class="concealed">Select Gender ..</a></label>
</xen:if>
</p>
</xen:if>
</xen:if>
<xen:if is="!{$visitor.user_id}">
<p class="importantMessage" style="line-height: 1.6em;">
<b>Welcome to {$xenOptions.boardTitle}!</b><br />
You're currently viewing our site as a guest user. <span class="xenfans_welcome"><label for="LoginControl"><a href="{xen:link login}" class="concealed">Sign up</a></label></span> or <span class="xenfans_welcome"><label for="LoginControl"><a href="{xen:link login}" class="concealed">Login</a></label></span><br />
Having an account grants you additional privileges, such as creating-, and participating in discussions.
</p>
</xen:if>
and save the template.
Step two, still in the same template, find the newly added code:
<a href="{xen:link forums/offtopic/create-thread}">Let's get started by Introducing yourself ...</a>and replace the LINK and the TEXT to your own site's introduction forum or whatever you want to do with it. Optionally you can replace everything within <p> .. </p> with whatever you want, youtube embed to show site-training video, images, custom menu, donation button or a flower.
Of course, go through all the text and links, so it matches your board. Then Save the template.
Step three: to extra.css, add:
.xenfans_welcome {
padding: 3px 6px;
border: 1px solid @primaryLight;
border-radius: 3px;
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
text-align: center;
font: 11px verdana,sans-serif;
text-decoration: none;
color: @primaryMedium;
text-shadow: 1px 1px 0px #fff;
outline: 0;
}Save the template again, and go test! It should not show to users with a post. Nor should it show to users who are newly registered but haven't confirmed their account yet via email. It should show to users with 0 posts, and a confirmed account.