The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum Index Design

View previous topic View next topic Go down

In progress Forum Index Design

Post by PA on 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:


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)

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

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


SarkZKalie
Forumember

Male Posts : 419
Reputation : 73
Language : English

http://rotavn.nstars.org/

Back to top Go down

In progress Re: Forum Index Design

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

Yeah but that only works for PHBB2...


My forum is phbb3

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by SarkZKalie on 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
Forumember

Male Posts : 419
Reputation : 73
Language : English

http://rotavn.nstars.org/

Back to top Go down

In progress Re: Forum Index Design

Post by PA on 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

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA on 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



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

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA on 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.

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA on 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

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

Post by PA on 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.

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Forum Index Design

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

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

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

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

You did great, right? Twisted Evil

SarkZKalie
Forumember

Male Posts : 419
Reputation : 73
Language : English

http://rotavn.nstars.org/

Back to top Go down

In progress Re: Forum Index Design

Post by PA on 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.

PA
Forumember

Posts : 219
Reputation : 2
Language : english

Back to top Go down

In progress Re: Forum Index Design

Post by Ange Tuteur on 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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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