The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Forum Index Design

3 posters

Go down

In progress Forum Index Design

Post by PA December 19th 2014, 1:42 pm

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:
Forum Index Design Pa_wra10

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

Step 1:
Forum Index Design 1st_st10
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:
Forum Index Design 2nd_st10

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)
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by SarkZKalie December 19th 2014, 2:12 pm



Forum Index Design Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 19th 2014, 2:13 pm

Yeah but that only works for PHBB2...


My forum is phbb3
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by SarkZKalie December 19th 2014, 2:26 pm

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>
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 22nd 2014, 9:03 pm

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
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur December 23rd 2014, 4:21 am

Hello @PA,

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

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 Add


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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 23rd 2014, 5:35 pm

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 Sad

Forum Index Design Huh10

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
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur December 24th 2014, 1:18 am

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 27th 2014, 4:36 am

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.
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur December 27th 2014, 5:04 am

No problem Wink

You can adjust the image dimensions with this rule :
Code:
.lastpost-avatar img {
  width:40px;
  height:auto;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 27th 2014, 5:47 am

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
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur December 27th 2014, 9:20 am

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;
}
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 27th 2014, 12:15 pm

Okay, that fixes the first issue Very Happy

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.
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur December 27th 2014, 12:20 pm

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.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 27th 2014, 10:01 pm

It does... but if you look here
Forum Index Design Hah10

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
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by SarkZKalie December 28th 2014, 8:04 am

You did great, right? Twisted Evil
Forum Index Design Potter10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

Back to top Go down

In progress Re: Forum Index Design

Post by PA December 28th 2014, 9:57 am

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.
avatar
PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur December 28th 2014, 5:48 pm

That's weird, I looks spaced right now. Try adding this on :
Code:
.lastpost-avatar { margin:0 3px }
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum