New Board Layout Request

[Former Member]

Hi Guys

Im looking to re-design the board page a little to make it more appealing.

If someone could help me to create the below then this will be perfect



The only thing missing from the above image which id like is a breakline between the board name and description for the whole cell width.

Thanks
Dave

[Tumbleweed]

May 22, 2015 14:04:48 GMT -8 Dave B said:

Hi Guys

Im looking to re-design the board page a little to make it more appealing.

If someone could help me to create the below then this will be perfect



The only thing missing from the above image which id like is a breakline between the board name and description for the whole cell width.

Thanks
Dave

Hey Dave,

I mentioned in a another thread I was dabbling with this. I opened more of my boards since the link I gave you before didn't have any boards open with thread in them so you could take a look.

One of the things that I personally don't think looks good is the thread text in the last column will not line up with the Tumble replied to in the 4th column and it will vary since you may add moderators and sub-boards and more description text to make that whole row taller.  But anyway, is this close to how you want it?

Test site: putteraroundiv.proboards.com/

Also I'm going to make a new thread with a really long title to see how it looks then. Going now to do that.

[Former Member]

May 24, 2015 4:43:27 GMT -8 Tumbleweed said:

May 22, 2015 14:04:48 GMT -8 Dave B said:

Hi Guys

Im looking to re-design the board page a little to make it more appealing.

If someone could help me to create the below then this will be perfect



The only thing missing from the above image which id like is a breakline between the board name and description for the whole cell width.

Thanks
Dave

Hey Dave,

I mentioned in a another thread I was dabbling with this. I opened more of my boards since the link I gave you before didn't have any boards open with thread in them so you could take a look.

One of the things that I personally don't think looks good is the thread text in the last column will not line up with the Tumble replied to in the 4th column and it will vary since you may add moderators and sub-boards and more description text to make that whole row taller.  But anyway, is this close to how you want it?

Test site: putteraroundiv.proboards.com/

Also I'm going to make a new thread with a really long title to see how it looks then. Going now to do that.

   HI Tumbleweed

   That actually looks quite good

   If we could add in some kind of headers like ...

   Forum
   Stats
   Last Update
   Topic

  Could we also apply the same layout to the thread listing ? 

  Thanks 
  Dave

[Tumbleweed]

Hey Dave B,

Can you tell me exactly how you want it because it is different here because we have the threads listed in the 2nd column so if I did it like the main page, that would put the "created by" in the 2nd column.

So basically, can you tell me exactly what you want in each column starting after the icon (col 1) and I realize the replies and views will be one column. I just moved the replies/views together but that is as far I went until I get further instructions from you. This template is a bit more tricky.

[Former Member]

May 24, 2015 11:37:25 GMT -8 Tumbleweed said:

Hey Dave B,

Can you tell me exactly how you want it because it is different here because we have the threads listed in the 2nd column so if I did it like the main page, that would put the "created by" in the 2nd column.

So basically, can you tell me exactly what you want in each column starting after the icon (col 1) and I realize the replies and views will be one column. I just moved the replies/views together but that is as far I went until I get further instructions from you. This template is a bit more tricky.

   Ok lets leave the thread listing as it is for now ... as we are limited to what we can do there.

   Unless you have any ideas on how to jazz it up a little?

   Thanks
   Dave

[Tumbleweed]

May 24, 2015 12:26:44 GMT -8 Dave B said:

May 24, 2015 11:37:25 GMT -8 Tumbleweed said:

Hey Dave B,

Can you tell me exactly how you want it because it is different here because we have the threads listed in the 2nd column so if I did it like the main page, that would put the "created by" in the 2nd column.

So basically, can you tell me exactly what you want in each column starting after the icon (col 1) and I realize the replies and views will be one column. I just moved the replies/views together but that is as far I went until I get further instructions from you. This template is a bit more tricky.

   Ok lets leave the thread listing as it is for now ... as we are limited to what we can do there.

   Unless you have any ideas on how to jazz it up a little?

   Thanks
   Dave

I just posted the whole template and instructions and then the page would not display when I went to post it and lost it all. Grrr. Not sure why that is happening to me lately. Oh well...

I can think of hundreds of things to do if one want to really go wild but in keeping with the main page, I can only think of making the views/replies like you did on the main page and make then neater than I have them right now and then following the new main page layout I'm about to give to you, move the date above the last post. And I've not looked at moving the date yet so not sure how that would work out.

Anyway, here is the new template for the board list: (Main page)

<table class="list" role="grid">
<thead>
<tr>
<th class="icon"></th>
<th class="main">Forum</th>
<th class="threads">Stats</th>
<th class="latest last">Last Update</th>
<th id="my_cust_title">Topic</th>
</tr>
</thead>
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable">
<span class="link">$[board]</span>{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
<p class="description">$[board.description]</p>
{if $[board.num_mods]}
<p class="moderators">
Moderator{if $[board.num_mods] != 1}s{/if}:
{foreach $[board.moderator_group]}$[board.moderator_group.comma_before] $[board.moderator_group]{/foreach}{if $[board.moderator]}{if $[board.moderator_group]}, {/if}{/if}
{foreach $[board.moderator]}$[board.moderator]$[board.moderator.comma] {/foreach}
</p>
{/if}
{if $[board.sub_board]}
<p class="sub-boards">
Sub-board{if $[board.sub_board] != 1}s{/if}:
{foreach $[board.sub_board]}<a href="$[board.sub_board.href]">$[board.sub_board.name]</a>$[board.sub_board.comma] {/foreach}
</p>
{/if}
</td>
<td class="threads">

<table>
<tr>
<td class="posts" style="padding-right:4px;">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>
<td class="posts">Threads</td>
</tr>
<tr>
<td class="posts" >{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>
<td class="posts">Posts</td>
</tr>
</table>

</td>
<td class="latest last">

<div class="date">$[board.last_thread.last_post.created_on]</div>
<div style="text-align:left!important;">
{if $[board.posts] > 0}
{if $[board.last_thread]} $[board.last_thread.last_post.created_by] replied to
{/if}
{else}
No posts have been made on this board.
{/if}
</div>

</td>
<td id="my_thread_col">
{if $[board.last_thread]}

$[board.last_thread.recent_link]<br />
{/if}

</td>
</tr>
{else}
<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="icon">$[board.icon]</td>
<td class="main clickable redirect last" colspan="4">
<span class="link">$[board]</span><br />
<p class="description">$[board.description]</p>
</td>
</tr>
{/if}
{/foreach}
{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
</tbody>
</table>

And there is some css that should go at the bottom of your style sheet: (Admin Home>Themes>Advanced Styles & CSS>Style Sheet>)

/*css for board revamp*/
.boards .main .description{
margin-top:8px;
}
#my_cust_title{

width:22%;

margin-bottom:-14px;

border-left:1px solid #67676f!important;
}
#my_thread_col {
border-left:1px solid #67676f!important;
vertical-align: middle;
padding: 10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}

The first class is to put a gap between the board name and description.

The 2nd bit (#my_cust_title) is for the new last column.

The 3rd bit (#my_thread_col) is for the new last column content.

If you want to tweak the widths of the columns you'll need to change the 22% in the above blue bit:

The rest of the column widths can be found on in Proboards default css so if you expand the page to full view and no wrap (little icons top-right) you can look for line 839 approx. and you'll see this:

 /* Board List */

Scroll down a tiny bit and find this:

.boards .main { width: 46%; text-align: @board_align_main; }
.boards .threads { width: 9%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 12%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 16%; text-align: @board_align_last_post; }

The one crossed out I'm not using  but with the 22% in my custom css and the above should not exceed 96%. I have it at 93% currently.

22%+46%+9%+16%=93%

And questions or problems post back.

Thought of one last thing. If you want the space between the actual number of threads and the text "threads" then you need to change the blue in this line in the template.

<td class="posts" style="padding-right:4px;">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td> 

[Former Member]

Slight issue Tumbleweed

Everything seems to have multiplied lol

And there is stray tags all over the show haha

excelmaster.proboards.com/

[Tumbleweed]

May 24, 2015 15:52:19 GMT -8 Dave B said:

Slight issue Tumbleweed

Everything seems to have multiplied lol

And there is stray tags all over the show haha

excelmaster.proboards.com/

Weird, putting it is code tags did something to it. Try it now without code tags.

Oh and Dave, I forgot to say you need to set Proboards default to how I have it here: (Found where I said in my previous post)

/* Board List */

some other code....

@board_align_main: left;
@board_align_threads: center;
@board_align_posts: center;
@board_align_last_post: left;
.boards .main { width: 46%; text-align: @board_align_main; }
.boards .threads { width: 9%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 12%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 16%; text-align: @board_align_last_post; }

[Former Member]

May 24, 2015 23:28:13 GMT -8 Tumbleweed said:

May 24, 2015 15:52:19 GMT -8 Dave B said:

Slight issue Tumbleweed

Everything seems to have multiplied lol

And there is stray tags all over the show haha

excelmaster.proboards.com/

Weird, putting it is code tags did something to it. Try it now without code tags.

Oh and Dave, I forgot to say you need to set Proboards default to how I have it here: (Found where I said in my previous post)

/* Board List */

some other code....

@board_align_main: left;
@board_align_threads: center;
@board_align_posts: center;
@board_align_last_post: left;
.boards .main { width: 46%; text-align: @board_align_main; }
.boards .threads { width: 9%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 12%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 16%; text-align: @board_align_last_post; }

    Hi Tumbleweed

    Ive re-pasted in the code from above and the css code quoted

    We still have some stray tags all over the forum and the boards have doubled lol 

    Thanks 
    Dave

[Tumbleweed]

May 25, 2015 0:11:49 GMT -8 Dave B said:

May 24, 2015 23:28:13 GMT -8 Tumbleweed said:

Weird, putting it is code tags did something to it. Try it now without code tags.

Oh and Dave, I forgot to say you need to set Proboards default to how I have it here: (Found where I said in my previous post)

/* Board List */

some other code....

@board_align_main: left;
@board_align_threads: center;
@board_align_posts: center;
@board_align_last_post: left;
.boards .main { width: 46%; text-align: @board_align_main; }
.boards .threads { width: 9%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 12%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 16%; text-align: @board_align_last_post; }

    Hi Tumbleweed

    Ive re-pasted in the code from above and the css code quoted

    We still have some stray tags all over the forum and the boards have doubled lol 

    Thanks 
    Dave

That's weird, I just copied everything directly to this site with no problems:

putteraround5.proboards.com/

You are putting it in your "Board List", correct? And doing so directly without pasting it in word or some other word processing program?

If you know you did everything correctly, it could be a plugin that is making this so it doesn't work. I noticed you have quite a few plugins.

[Former Member]

May 25, 2015 0:26:03 GMT -8 Tumbleweed said:

May 25, 2015 0:11:49 GMT -8 Dave B said:

    Hi Tumbleweed

    Ive re-pasted in the code from above and the css code quoted

    We still have some stray tags all over the forum and the boards have doubled lol 

    Thanks 
    Dave

That's weird, I just copied everything directly to this site with no problems:

putteraround5.proboards.com/

You are putting it in your "Board List", correct? And doing so directly without pasting it in word or some other word processing program?

   Yeah i was using the Board List and directly.

   I reset all my templates to default and pasted the above in from scratch which seemed to fix everything

   Thanks
   Dave

[Tumbleweed]

May 25, 2015 0:39:25 GMT -8 Dave B said:

May 25, 2015 0:26:03 GMT -8 Tumbleweed said:

That's weird, I just copied everything directly to this site with no problems:

putteraround5.proboards.com/

You are putting it in your "Board List", correct? And doing so directly without pasting it in word or some other word processing program?

   Yeah i was using the Board List and directly.

   I reset all my templates to default and pasted the above in from scratch which seemed to fix everything

   Thanks
   Dave

Oh good! I was editing my post at the same time you were replying but I was going to have you look at any plugins because I just didn't see anything wrong with what I gave you. Whew. 

[Former Member]

May 25, 2015 0:42:04 GMT -8 Tumbleweed said:

May 25, 2015 0:39:25 GMT -8 Dave B said:

   Yeah i was using the Board List and directly.

   I reset all my templates to default and pasted the above in from scratch which seemed to fix everything

   Thanks
   Dave

Oh good! I was editing my post at the same time you were replying but I was going to have you look at any plugins because I just didn't see anything wrong with what I gave you. Whew. 

   Thanks for this Tumbleweed

   Much appreciated

   Dave

[Tumbleweed]

May 25, 2015 0:45:16 GMT -8 Dave B said:

May 25, 2015 0:42:04 GMT -8 Tumbleweed said:

Oh good! I was editing my post at the same time you were replying but I was going to have you look at any plugins because I just didn't see anything wrong with what I gave you. Whew. 

   Thanks for this Tumbleweed

   Much appreciated

   Dave

You're welcome.