Forum Index Design

Well this is a bit of a long request, so I'll also demonstrate what I need achieved by pictures... Help would be greatly appreciated!

So this is how the (wrapper is it called?) looks like:


Okay, so I need to do two things with this:

Step 1:

I need to remove the Posts and Topics columns (in the whoole wrapper) and then shift the title of each category to the exact middle. I also want to remove the Last post text (but NOT the entire column, the last post description should still appear, see third picture.)

Step 2:


Next, I want to move the forum titles to the middle too. I need the icon of the member to appear in the last post description. The description of each forum should be in a box, with the text also centered.

So is that all possible? Hope I made it clear. By the way I'd prefer if this ONLY shows for categories and forums (not for topics)

Yeah but that only works for PHBB2...


My forum is phbb3

Search 'lastpost' in your index_box template and replace by this one

Code:

<dd class="lastpost">
  <!-- BEGIN avatar -->
  <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
  <!-- END avatar -->
  <span>
  <!-- BEGIN switch_topic_title -->
  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
  <!-- END switch_topic_title -->
  {catrow.forumrow.USER_LAST_POST}</span>
</dd>

It works, but it doesn't look good, because the whole thing is too cramped.

Which is why I need the other stuff finished first. It would be great if I could remove the last posts and last topics columns somehow, or at least make it look like this:
http://www.fmcodes.com/forum

Hello @PA,

Go to Administration Panel > Display > Templates > General > index_box

Replace your template with this :

Code:

<ul class="linklist">
 <!-- BEGIN switch_user_logged_in -->
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>&nbsp;&bull;&nbsp;</li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>&nbsp;&bull;&nbsp;</li>
 <!-- END switch_user_logged_in -->
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
 <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="forabg">
 <div class="inner"><span class="corners-top"><span></span></span>
 <ul class="topiclist">
 <li class="header">
 <dl class="icon">
 <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist forums">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <li class="row">
 <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
 <dd class="dterm">
 <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
 <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
 <br />
                                                          <span class="forumDesc">{catrow.forumrow.FORUM_DESC}</span>

 <!-- BEGIN switch_moderators_links -->
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </div>
 </dd>
                                          <dd class="topics">{catrow.forumrow.TOPICS} {L_TOPICS}<br/>
                                          {catrow.forumrow.POSTS} {L_POSTS}</dd>
 <dd class="lastpost">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

 <span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </span>
 </dd>
 </dl>
 </li>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </ul>

 <span class="corners-bottom"><span></span></span></div>
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist">
 <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>&nbsp;&bull;&nbsp;</li>
 <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>&nbsp;&bull;&nbsp;</li>
 <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
 <!-- BEGIN switch_delete_cookies -->
 <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

Save and publish


Then go to Display > Colors > CSS stylesheet and paste the rules below :

Code:

.forabg .header .dterm {
  text-align:center;
  width:100%;
}

.forabg .row .hierarchy {
  display:inline-block;
  text-align:center;
  margin:3px;
  width:95%;
}

.forabg .forumDesc {
  border:2px solid #39220F;
  display:inline-block;
  text-align:center;
  padding:3px;
  width:95%;
}

Lastly, go to Display > Structure and Hierarchy

Choose "Yes" for Show avatars in the column "Last posts" and save.

Wow Ange you did everything right down to the color of the box o.O Nice professionalism! Thank you so much.

I just have a few questions



There is still a separator line between the forum description and the number of posts. 
The number of topics/posts text is too large and its in bold. 
There is an overflow in the last posts column. Like, it stretches the forum box, unlike here 
http://www.fmcodes.com/forum

Add these rules to your stylesheet to see if it improves what you want.

Code:

.forabg .forumDesc, .forabg .topics {
  font-size:10px;
  font-weight:normal;
}
.forabg .lastpost { width:27% }
.forabg .topics { border:none }

It's to set the font-weight and size on the description and stats to 10px and normal, increase the lastpost width, and remove the border on the stats.

Thank you Ange, that is perfect!

Just asking, is there a way to get rid of the distortion effect of the avatars in the last post? Since they are scaled down to 40x40, some avatars that were originally.. say, 150x50 look very odd.

No problem

You can adjust the image dimensions with this rule :

Code:

.lastpost-avatar img {
  width:40px;
  height:auto;
}

That does work Ange, though it gives weird ovals.

This is the CSS:

Code:

.lastpost-avatar {
float: left;
padding: 5px;
}
.lastpost-avatar img {
width: 38px;
height: 38px;
 border-radius: 50px;
  border: 1px solid #ccc;
}

Hmm, I'm thinking more in lines of using 'overflow hidden' or some other way to crop them but still keep them perfect circles.

---------------------------
Also, the CSS makes the forums themselves look weird. See here:
Is there any way to make it ONLY apply for the index?
http://www.pottersarmy.net/f70-announcements

This is the last thing I swear :o

Do you want to remove the avatar under the topics ? If so, this will work :

Code:

.forumbg .lastpost-avatar { display:none }

Try changing your CSS to this :

Code:

.lastpost-avatar, .lastpost-avatar img {
  width: 38px;
  height: 38px;
}
.lastpost-avatar {
  float: left;
  border-radius: 50px;
  border: 1px solid #ccc;
  padding:0 !important;
}

Okay, that fixes the first issue

But... the distortion in the last post avatars is still there...
What I need to do by CSS is to keep them as perfect circles but..
lets say a user has avatar 100x150. What the CSS needs to do is to scale it down to 40x60 (no distortion) and then hide/crop the 20 overflow in height. What it is doing right now is just resizing the images to 40x40.

Change your CSS to this :

Code:

.lastpost-avatar, .lastpost-avatar img {
  width: 38px;
  height: 38px;
}
.lastpost-avatar img { height:auto }
.lastpost-avatar {
  float: left;
  overflow:hidden;
  border-radius: 50px;
  border: 1px solid #ccc;
  padding:0 !important;
}

It should set the image height to auto and prevent distortion.

It does... but if you look here


Notice the position is all messed up. The avatars go over the separator line, and the last post text is too close to the avatar

You did great, right?

Nope. That's the old code, see the one I posted above.
Ange's code fixes the distortion, but the positioning is off.
The old code has distortion, but the positioning is fine.

That's weird, I looks spaced right now. Try adding this on :

Code:

.lastpost-avatar { margin:0 3px }