Board Remodel Request

[Troo]

Hello!
Have something I'd like to use for all my websites and such when it comes to making roleplays, which I tend to do a lot. 

This is what I'd like, if it's possible? ; oi63.tinypic.com/11twfpe.jpg

[Troo]

Bump?

[Troo]

Bump?? Anybody?

[Troo]

bump

[Troo]

bumpppppp

[Troo]

bump

[Troo]

bump

[Tumbleweed]

Jun 4, 2016 11:09:29 GMT -8 Troo said:

Hello!
Have something I'd like to use for all my websites and such when it comes to making roleplays, which I tend to do a lot. 

This is what I'd like, if it's possible? ; oi63.tinypic.com/11twfpe.jpg

I'll try to work on this today for you.   Question: Do you want who is the moderator to show up anywhere on there?


Edit: I have a rough layout here: putteraroundix.proboards.com/

I question how you have squares for the icon and threads stuff. With the icon box, that seems super large and with the threads, you need a wider box for longer thread names so you may want to rethink that?

I also need to know what you want to happen once you click on a board because currently, what I did (partially and at least for now) affects sub-boards once you click on a board.

Anyway, I'm not doing anymore (except fix a few things I know I need to fix) until I get some feed back on anything you want different and answer my queries.

[Troo]

Jun 10, 2016 8:42:17 GMT -8 Tumbleweed said:

Jun 4, 2016 11:09:29 GMT -8 Troo said:

Hello!
Have something I'd like to use for all my websites and such when it comes to making roleplays, which I tend to do a lot. 

This is what I'd like, if it's possible? ; oi63.tinypic.com/11twfpe.jpg

I'll try to work on this today for you.   Question: Do you want who is the moderator to show up anywhere on there?


Edit: I have a rough layout here: putteraroundix.proboards.com/

I question how you have squares for the icon and threads stuff. With the icon box, that seems super large and with the threads, you need a wider box for longer thread names so you may want to rethink that?

I also need to know what you want to happen once you click on a board because currently, what I did (partially and at least for now) affects sub-boards once you click on a board.

Anyway, I'm not doing anymore (except fix a few things I know I need to fix) until I get some feed back on anything you want different and answer my queries.

This was done using gimp and just giving an example as how i'd like for it to look, I don't mean for it to be THAT big. xD 

On your test site, I like how it looks so far, but the new/no new post images would need to be less wide? as well as the and if you could somehow make the new/no new post images be centered in the middle of the spot if you could? 

Will you be putting this as well? link

Not sure what to suggest for sizes? I will be using Sidebar Redux and hope it won't affect the boards?

[Tumbleweed]

Jun 10, 2016 12:54:22 GMT -8 Troo said:

Jun 10, 2016 8:42:17 GMT -8 Tumbleweed said:

I'll try to work on this today for you.   Question: Do you want who is the moderator to show up anywhere on there?


Edit: I have a rough layout here: putteraroundix.proboards.com/

I question how you have squares for the icon and threads stuff. With the icon box, that seems super large and with the threads, you need a wider box for longer thread names so you may want to rethink that?

I also need to know what you want to happen once you click on a board because currently, what I did (partially and at least for now) affects sub-boards once you click on a board.

Anyway, I'm not doing anymore (except fix a few things I know I need to fix) until I get some feed back on anything you want different and answer my queries.

This was done using gimp and just giving an example as how i'd like for it to look, I don't mean for it to be THAT big. xD 

O.K. Just checking. Makes sense but I wasn't sure.

On your test site, I like how it looks so far, but the new/no new post images would need to be less wide? as well as the and if you could somehow make the new/no new post images be centered in the middle of the spot if you could? 

Yes, I'll try to get that centered vertically/horizontally and make it less wide.

Will you be putting this as well? link

Not sure what you mean. I have that on the site. 

ing Sidebar Redux and hope it won't affect the boards?

I'll go ahead and add the Redux sidebar just to make sure all looks o.k.

While I'm working on the above and some other minor issues I want to clarify a couple more things before I hand over the template. Are you wanting it to pick up the theme colors because currently, I just manually entered in colors to somewhat match the sample you gave. If you do want the css so it picks up your theme colors, I'll kind of need to know which colors in what area you want for what.  Or you can do it yourself if you are comfortable with it.

Also, You didn't clarify if you want moderators to show anywhere and are you wanting the sub-boards to look the same?

[Troo]

Jun 10, 2016 21:42:32 GMT -8 Tumbleweed said:

Jun 10, 2016 12:54:22 GMT -8 Troo said:

This was done using gimp and just giving an example as how i'd like for it to look, I don't mean for it to be THAT big. xD 

O.K. Just checking. Makes sense but I wasn't sure.

On your test site, I like how it looks so far, but the new/no new post images would need to be less wide? as well as the and if you could somehow make the new/no new post images be centered in the middle of the spot if you could? 

Yes, I'll try to get that centered vertically/horizontally and make it less wide.

Will you be putting this as well? link

Not sure what you mean. I have that on the site. 

ing Sidebar Redux and hope it won't affect the boards?

I'll go ahead and add the Redux sidebar just to make sure all looks o.k.

While I'm working on the above and some other minor issues I want to clarify a couple more things before I hand over the template. Are you wanting it to pick up the theme colors because currently, I just manually entered in colors to somewhat match the sample you gave. If you do want the css so it picks up your theme colors, I'll kind of need to know which colors in what area you want for what.  Or you can do it yourself if you are comfortable with it.

Also, You didn't clarify if you want moderators to show anywhere and are you wanting the sub-boards to look the same?

I see that ye have it like that in the one spot, but I mean how it has the boxes around? Table? If that's the word.

And I'd like it to match my site, I can put in the colors and such! (:

Also it'd be okay for it to just be the main page boards, sub boards can just be like threads.

[Tumbleweed]

Jun 11, 2016 6:30:09 GMT -8 Troo said:

I see that ye have it like that in the one spot, but I mean how it has the boxes around? Table? If that's the word.

And I'd like it to match my site, I can put in the colors and such! (:

Also it'd be okay for it to just be the main page boards, sub boards can just be like threads.

Oh, I finally got what you were saying (I think) by relooking at your mock-up. Like this? putteraroundix.proboards.com

I'm going to go ahead and post the css and template because I think it is close enough we can work out any tweaks later if we need to.

The CSS:

/*board remodel css*/
.boards div.content.cap-bottom{border:0px;padding:0px;
}
/*remove div.container.boards if you want all title bars this color*/
div.container.boards.container>.title-bar{
background-color: #444444!important;
background-image:none;
font-size:20px;
}
/*this puts the background behind all the boxes*/
.boards table.list td{
background-color: #444444!important;
border:#444444;
padding-right:8px;
}
/*this is the box for the icon border*/
.the_icon_border{
display: table;
background-color: #545454!important;
border:4px solid #666666;
}
.the_icon_border p{
display: table-cell;
vertical-align: middle;text-align:center;
height:100px!important;
padding:8px;
}
/*this is the border around threads-posts-latest-date*/
.the_border {
height:100px!important;
background-color: #545454!important;
border:4px solid #666666;
padding:8px;
margin:8px;
}
/*this is the border around descriptions*/
.the_des_border{
display: table;
width:98%;
background-color: #545454!important;
border:4px solid #666666;
height:60px;
text-align:left;
}
.the_des_border p{padding:8px!important;
display: table-cell;
vertical-align:middle;
}
/*this is the border around sub-boards*/
.sub_border{float:left;width:100px;margin:4px;
height:18px;
padding:4px;
margin-top:8px;
background-color: #545454!important;
border:2px solid #666666;
}
/*You can change the font size here for threads-posts-latest
or you can change the font in the class the_border
for the date size to be changed you need special css*/
.inner_bkg{text-align:left;
background-color:#666666;margin-bottom:6px;padding:2px;
}
/*this sets the width of threads-posts-latest and needs to be here for fluidity*/
.posts_threads{width:340px!important;height:100px!important;text-align:left;
}
/*for the board name*/
.boards .main .link a{font-size:22px;margin-bottom:6px;
}


The template to replace the board list template:


<table class="list" role="grid">
<tbody>
{foreach $[board]}
{if !$[board.is_redirect]}
<tr id="$[board.content_id]" class="$[board.content_class]">
                    <td><div class="the_icon_border"><p>$[board.icon]</p></div></td>
<td class="posts_threads">
<div class="the_border">
<div class="inner_bkg">
{if $[board.threads] == -1}N/A{else}$[board.threads]{/if} Threads and
{if $[board.posts] == -1}N/A{else}$[board.posts]{/if} Posts                  
</div>
                   
<div class="latest last">
{if $[board.posts] > 0}
{if $[board.last_thread]}
<div class="inner_bkg">In: $[board.last_thread.recent_link]</div>
<div class="inner_bkg">By: $[board.last_thread.last_post.created_by]</div>
<div class="inner_bkg">
<span class="date">$[board.last_thread.last_post.created_on]</span>
</div>
{/if}
{/if}
</div>
</div>
</td>
                     
<td class="main clickable">
<span class="link">$[board]</span>
                     
{if $[board.num_viewing]}<span class="viewing"> - $[board.num_viewing] Viewing</span>{/if}<br />
<div class="the_des_border">
<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}-->

                        </div>
                       
{if $[board.sub_board]}
{if $[board.sub_board] != 1}{/if}
{foreach $[board.sub_board]}<div class="sub_border"><a href="$[board.sub_board.href]">$[board.sub_board.name]</a></div> {/foreach}

{/if}  

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



By the way, I just left the sub-boards with the modifications because it is really easier, which I should of said to begin with but if you really want them to not look like the main boards, we can work that out as well. Let me know if you are stumped on anything. Not my cleanest template change but I did try to clean it up a bit and commented the css so you'd know what changes what.

[Troo]

i.gyazo.com/50301e3f4a012bd7690c6de6f84c4fdc.png

Came across an issue when I put it in to test.

Also can you make the new/no new post image spot a bit wider? Unless I'm able to do it myself. c:

Tumbleweed

[Tumbleweed]

Jun 11, 2016 13:14:19 GMT -8 Troo said:

i.gyazo.com/50301e3f4a012bd7690c6de6f84c4fdc.png

Came across an issue when I put it in to test.

Also can you make the new/no new post image spot a bit wider? Unless I'm able to do it myself. c:

Tumbleweed

For both of those you can just add a width to each of those classes. All the borders around each line in the threads/post area is using this class so try adding a width of 100% and if that doesn't work, try a pixel width:


.inner_bkg{text-align:left;
background-color:#666666;margin-bottom:6px;padding:2px;width:100%;
}

For the icon, add a width to this:

.the_icon_border{
display: table;
background-color: #545454!important;
border:4px solid #666666;width:80px;
}

Weird it did that for you.

[Troo]

Thank you! I fixed it and it works perfectly! (: Tumbleweed