Documentation for design Pandora

Our design “Pandora” uses the box system in a clever way so that you can use boxes of type “Hero” in the header. You can finde according boxes in the preview forum. They are configured as follows.

Hero box for guests

For guests there is a motivating text and buttons to register/login.

Go to Content Boxes Add Box in your administration control panel and select the box type “Template”. Name the box to your liking and select the entry “Hero” for Position. Additionally, disable the checkbox Show box title by clicking on it.

Box setting “General Information”

Switch now to tab “Contents” and add the following code in the field Content:

<h3>Join now and secure yourself a place in our community</h3>
<p>This community is more than just standard. Above all, it is a support to live out your passion. A varied offer is waiting for you. Along with it: the beautiful design “Pandora” of <a href="https://kittmedia.com/en/">KittMedia</a>.</p>

<div class="heroBoxesButtons">
	<div class="singleButton"><a href="{link controller='Register'}{/link}" class="button"><span class="icon icon16 fa-user-plus"></span> {lang}wcf.user.button.register{/lang}</a></div>
	<div class="singleButton"><a href="{link controller='Login'}{/link}" class="button"><span class="icon icon16 fa-sign-in"></span> {lang}wcf.user.button.login{/lang}</a></div>
</div>Code language: HTML, XML (xml)

Ignore the fields Box Image and Title.

Switch now to tab “Restricted Access” and set the value of Content Can be Accessed by Everyone to “No”. You can now see a new area where you can set restricted access. Enter “Guests” in the appeared field and select the particular entry from the drop down menu by clicking on it. Now save the box by clicking on the button Submit.

Box setting “Restricted Access”

Hero box for registered users

Proceed as with the Hero box for guests with two exceptions. First, enter the following content in the “Content” tab:

<h3>Welcome back, {$__wcf->user->username}!</h3>
<p>You’re part of the community:</p>
<div class="heroBoxesContentList">
	{if MODULE_LIKE && $__wcf->user->likesReceived}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->likesReceived}</dd>
			<dt>{lang}wcf.like.likesReceived{/lang}</dt>
		</dl>
	{/if}
	
	{if $__wcf->user->activityPoints}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->activityPoints}</dd>
			<dt><span>{lang}wcf.user.activityPoint{/lang}</span></dt>
		</dl>
	{/if}
	
	{if MODULE_TROPHY && $__wcf->session->getPermission('user.profile.trophy.canSeeTrophies') && $__wcf->user->trophyPoints}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->trophyPoints}</dd>
			<dt><span>{lang}wcf.user.trophy.trophyPoints{/lang}</span></dt>
		</dl>
	{/if}
	
	{if $__wcf->user->wbbPosts}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->wbbPosts}</dd>
			<dt>{lang}wbb.post.posts{/lang}</dt>
		</dl>
	{/if}
	
	{if $__wcf->user->blogEntries}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->blogEntries}</dd>
			<dt>{lang}blog.entry.entries{/lang}</dt>
		</dl>
	{/if}
	
	{if $__wcf->user->galleryImages}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->galleryImages}</dd>
			<dt>{lang}gallery.image.images{/lang}</dt>
		</dl>
	{/if}

	{if ('GALLERY_VIDEO_UPLOAD'|defined && GALLERY_VIDEO_UPLOAD || 'GALLERY_VIDEO_LINKS'|defined && GALLERY_VIDEO_LINKS) && 'GALLERY_MESSAGE_SIDEBAR_ENABLE_USER_VIDEOS'|defined && GALLERY_MESSAGE_SIDEBAR_ENABLE_USER_VIDEOS && $__wcf->user->galleryVideos}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->galleryVideos}</dd>
			<dt>{lang}gallery.video.videos{/lang}</dt>
		</dl>
	{/if}
	
	{if $__wcf->user->filebaseFiles}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->filebaseFiles}</dd>
			<dt>{lang}filebase.file.files{/lang}</dt>
		</dl>
	{/if}
		
	{if $__wcf->user->calendarEvents && $__wcf->session->getPermission('user.calendar.canReadEvent')}
		<dl class="heroBoxesContentListContent">
			<dd>{#$__wcf->user->calendarEvents}</dd>
			<dt>{lang}calendar.event.events{/lang}</dt>
		</dl>
	{/if}
</div>
<p>Keep it up! Along with it: the beautiful design “Pandora” of <a href="https://kittmedia.com/en/">KittMedia</a>.</p>Code language: HTML, XML (xml)

And specify “Registered Users” in the Restricted Access and select them accordingly.