Hello!
Making your Forumotion forum look like IPB is not easy, and will take some time, but I can give you some tips.
The "Welcome Username" and "Notifications" buttons on the top of our forum is actually the Forumotion bar, customized with CSS.
About the theme layout, we've copied some source code from a IPB forum (the HTML classes and such (div tags etc)) to the right forum template (Admin Panel > Display > Templates), and the CSS for the classes. Then we've put in Forumotion's variables in the IPB code (the variables do different things, like showing post titles, post content, nav bar, reply buttons, you know). An example of a variable is {TOTAL_POSTS}, which will display the total post count of the forum.
Most of the IPB features already exist on forumotion, they may just be changed a little bit to look like IPB.
I can actually share the post and member count code to you. :)
HTML:
- Code:
<div id='board_stats'>
<ul class='ipsType_small ipsList_inline'>
<li class='clear'>
<span class='value'><div class="hide">{TOTAL_POSTS}</div></span>
Total Posts
</li>
<li class='clear'>
<span class='value'><div class="hide">{TOTAL_USERS}</div></span>
Total Members
</li>
<li class='clear'>
<span class="value"><div class="hide">{NEWEST_USER}</div></span>
Newest Member
</li>
<li class='clear' data-tooltip="23 Apr 2013">
<span class='value'><div class="hide">{RECORD_USERS}</div></span>
Most Online
</li>
</ul>
</div>
Put this in the index_body-template.
CSS:
- Code:
#board_stats
ul{text-align:center; }#board_stats
li{margin-right:20px!important;display:inline-block;margin:0
3px;font-size:11px;}#board_stats
.value{display:inline-block;background:url('http://i72.servimg.com/u/f72/17/19/90/23/trans110.png') repeat;background:rgba(0,0,0,0.1);color:#222;text-shadow:rgba(255,255,255,0.6) 0px 1px 0px;padding:3px
7px;font-weight:bold;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin-right:3px;-webkit-box-shadow:inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;-moz-box-shadow:inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px;box-shadow:inset rgba(0,0,0,0.3) 0px 1px 2px, rgba(255,255,255,1) 0px 1px 0px}.statistics{margin:20px
0 0 0;padding:8px;line-height:1.3;overflow:hidden}.hide {font-size:0px;margin-bottom:-3px;}
I hope you get the idea of how you can do it. We won't share more codes from our forum template, since we have worked very hard on porting it to Forumotion, but I hope you can manage to do it by yourself. If you have more questions about this, just ask! :)
Sincerely,
Mathias
Home
