Images In Board

[Tumbleweed]

Jun 30, 2017 13:14:17 GMT -8 @tumbler said:

Does this work?

It worked. So do number of posts and threads go where you have last recent posts? While I'm waiting for your reply I'll start working on this.

@tumbler , I have a rough setup going on my test site so you can take a look anytime. If you see I'm online there, I might be making things move around. lol (Edit:Actually, I'm done working on it for the night.)

abetteramerica.freeforums.net/

This actually looks much better than what we had going on before even if you had an image scattered in random boards. Hopefully, this is what you had in mind and again, still working on it. I'm aware the cell holding the threads/posts, last post and the cell holding description in the second board with a image not the same width so need to track down that problem. I'm tired and my brain stopped functioning. lol

[Former Member]

Hmm, didn't think about that. Is it possible to leave out the Threads: and Posts: completely?

[Tumbleweed]

Jul 1, 2017 6:41:12 GMT -8 @tumbler said:

Hmm, didn't think about that. Is it possible to leave out the Threads: and Posts: completely?

What I did was comment them out so they wouldn't be rendered by the browser (like they don't exist) so if you ever want them back, you can just remove the comments.  That html part would be this and you'd remove the red:

<!--<div class="threads"><div class="my_board_titles">Threads</div>{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</div>
<div class="posts"><div class="my_board_titles">Posts</div>{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</div>-->


The css would be this part and you remove the red:

/*.special_boards div.posts {float:left;width:22%;vertical-align:top;}
.special_boards div.threads {float:left;width:22%;vertical-align:top;}*/

 I did think having the last post aligned to the left might look better so here is a screen cap of how that looks:




You want to take one last look to see if there is any other tweaks you want before I give you the coding and instructions?
(Last post aligned right on test site)

abetteramerica.freeforums.net/

[Former Member]

Is it possible to change the image place to the left instead?

[Tumbleweed]

Jul 2, 2017 6:32:09 GMT -8 @tumbler said:

Is it possible to change the image place to the left instead?

You just like keeping me busy, don't you?   So the image after the on/off icon or do you mean really all the way to the left so it would be:

Image, icon, last post, description. ??

[Former Member]

Haha sorry, didn't mean to


I mean, not all the boards will have a different image (only the ones in 2 categories) so it would be something like, from left to right:

image (or new/old image) title description
recent post

[Former Member]

Oops, messed up
From left to right: (Ignore the .'s)

image | Title | desc.
.....Recent Posts

[Tumbleweed]

Jul 3, 2017 6:13:22 GMT -8 @tumbler said:

Oops, messed up
From left to right: (Ignore the .'s)

image | Title | desc.
.....Recent Posts

So now recent posts(last posts) are under the title and description instead of along side the description? And what happened to the on/off icons? You don't want them on the boards with images?

According to what I understand like this? (Just did on a graphics program rather than recoding everything.



Did I ask you what you want down with sub-boards and moderators? Currently they are just under everything but totally not included in the example I gave above.

I'm not sure how much more time I can spend trying various ways for you so you need to be sure as I need to be free to help other members. (That said, I'll sure help if I have spare time and no other members need assistance.)

[Former Member]

I understand, then I'll stick to the old one with the image on the right. The moderators I don't have any in boards, so you can leave that out completely. Subboards I guess will just be at the bottom.

[Tumbleweed]

Jul 4, 2017 7:01:15 GMT -8 @tumbler said:

I understand, then I'll stick to the old one with the image on the right. The moderators I don't have any in boards, so you can leave that out completely. Subboards I guess will just be at the bottom.

I did start on the latest layout but my heart and brain wasn't into it, I got frustrated, so stopped. Normally when doing a new layout I get the bones of the structure done first with most everything removed but I was hoping I could just swap the old layout around but that just ended up being a mess. So I'm sorry, not sure if I'll feel any differently tomorrow or not and want to try again so my goal is I'll try to get the coding cleaned up on the layout with the image on the left, do a few tests to make sure it looks good across all the most used browsers, clean up the coding and note what instructions I need to give you and I should have everything for you way later in the evening today (5th), I hope. Need some snoozing done and then work and then later on after work I'll get to it.

By the way, if you wanted, you could create a new thread with the latest/last layout you want, once you are 100% sure how you want it, and see if anyone else want to take up your request but mind you, not a lot of volunteers doing this sort of thing so you may not have luck right away and may have to keep bumping. 

[Tumbleweed]

Finally got to this. So here is the Board List template: (replace everything in your board list template with this)



<table class="list" role="grid">
<tbody>
{foreach $[board]}
{if $[board.id] == "1" || $[board.id] == "4" || $[board.id] == "2"}

<tr id="$[board.content_id]" class="$[board.content_class]">
<td  class="icon">$[board.icon]</td>
<td class="main clickable">
                       <div class="special_boards">
<div class="link">$[board]</div>{if $[board.num_viewing]}<span> class="viewing"> - $[board.num_viewing] Viewing</span>{/if}
                          <table>
                              <tr>
                                       <td>
<div class="latest last">                              
                                    <div class="my_board_titles">Last Post</div>
{if $[board.posts] > 0}
{if $[board.last_thread]}
$[board.last_thread.recent_link]
by $[board.last_thread.last_post.created_by]<br/>
<span class="date">$[board.last_thread.last_post.created_on]</span>
{/if}
{else}
No posts have been made on this board.
{/if}
                                        </div>
                                  </td>
<td>
<div class="spec_description">$[board.description]</div>
                                  </td>
                              </tr>
                            </table>
                               <p style="clear:both;"></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}
                       </div>
          </td>
<td class="image_board_td" colspan="3">
              <div class="image_board"></div>
</td>
</tr>
        {else}
               {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">
                           <div class="my_board_titles">Threads</div>{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}
                       </td>
                       <td class="posts">
                           <div class="my_board_titles">Posts</div>{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}
                       </td>
                       <td class="latest last">
                           <div class="my_board_titles">Last Post</div>
                           {if $[board.posts] > 0}
                               {if $[board.last_thread]}
                                   $[board.last_thread.recent_link]<br />
                                   by $[board.last_thread.last_post.created_by]<br />
                                   <span class="date">$[board.last_thread.last_post.created_on]</span>
                               {/if}
                           {else}
                               No posts have been made on this board.
                           {/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 here is the CSS that you need to paste at the bottom of your style sheet.


/*board restructure*/
.image_board_td{width:37%;
padding:0px!important;margin:0px!important;
}
/*sets the height width of your images*/
.image_board{width:440px;height:132px;
}
/*this is where you add your board images*/
#board-1 .image_board{background-image:url(http://storage.proboards.com/3393080/images/wvhWorPEkhHpQcivXHhU.png);background-repeat:repeat;}
#board-2 .image_board{background-image:url(http://storage.proboards.com/3393080/images/PphVNRXwZPbJbuBNCElN.png);background-repeat:repeat;}
#board-4 .image_board{background-image:url(http://storage.proboards.com/3393080/images/N0JPkH0IqvooIxlIiVKN.png);background-repeat:repeat;}

.special_boards { width: 100%;}
.special_boards .thrd_psts_lp,
.special_boards .desc,
.special_boards .board_name{vertical-align:top; padding: 4px;
}
.boards .main .link{width:100%;padding:0px 0px 0px 4px;
line-height:28px!important;
}
.special_boards div.latest.last {height:60px;width:256px;
float:left;padding:8px;
border-top: 1px solid @container_inner_border_color;
border-bottom: 1px solid @container_inner_border_color;
border-right: 1px solid @container_inner_border_color;}
.special_boards div.spec_description{height:60px;overflow:auto;
width:440px!important;float:right;padding:8px;
border-top: 1px solid @container_inner_border_color;    
border-bottom: 1px solid @container_inner_border_color;
}
.boards .main .description{padding:8px;}
/*regular and special boards*/
.boards .main .moderators,
.boards .main .sub-boards{padding:2px 0px 1px 5px;margin:0px!important;
}
.main.clickable{width:100%;padding:0px!important;vertical-align:top;
}



Now for the instructions and forewarning, there is a lot to do so hopefully I won't forget anything. But first, and I can't stress this enough. Before you make images to go in the boards you want, get everything else exactly how you want it with font size changes, if you want your description area wider or taller, want more padding here or there, etc. Also, I'd leave my images in there so once you are done tweaking everything else, you can fiddle with the width/height of your images to make it fit that space perfectly by playing with this part of the css:

/*sets the height width of your images*/
.image_board{width:440px;height:132px;
}

That way you'll know exactly what size you want to make your images.

To add a board that you want to have an image in, you have to do two things. Head to your Board List template you should see this part: (assuming you already installed the coding I gave you)

{if $[board.id] == "1" || $[board.id] == "4" || $[board.id] == "2"}

The 1, 4 and 2 need to be changed to the board id you want images in. You can get your board id by simply clicking on the board and looking at what shows in your browser address bar. For example, here is one board that I have an image in: putteraroundviii.proboards.com/board/4/putter-rules

To add more boards you need to keep the spaces exactly the same so to add a forth board it should look like this: (not the bolded or colored part, of course)

{if $[board.id] == "1" || $[board.id] == "4" || $[board.id] == "2" || $[board.id] =="7"}

Next to add a image, you need to head to your style sheet where you should have added the css already and find this bit:

/*this is where you add your board images*/
#board-1 .image_board{background-image:url(http://storage.proboards.com/3393080/images/wvhWorPEkhHpQcivXHhU.png);background-repeat:repeat;}
#board-2 .image_board{background-image:url(http://storage.proboards.com/3393080/images/PphVNRXwZPbJbuBNCElN.png);background-repeat:repeat;}
#board-4 .image_board{background-image:url(http://storage.proboards.com/3393080/images/N0JPkH0IqvooIxlIiVKN.png);background-repeat:repeat;}

Just copy one of the lines and paste it below and add your additional board so it might look like this:

/*this is where you add your board images*/
#board-1 .image_board{background-image:url(http://storage.proboards.com/3393080/images/wvhWorPEkhHpQcivXHhU.png);background-repeat:repeat;}
#board-2 .image_board{background-image:url(http://storage.proboards.com/3393080/images/PphVNRXwZPbJbuBNCElN.png);background-repeat:repeat;}
#board-4 .image_board{background-image:url(http://storage.proboards.com/3393080/images/N0JPkH0IqvooIxlIiVKN.png);background-repeat:repeat;}
#board-7 .image_board{background-image:url(http://storage.proboards.com/3393080/images/N0JPkH0IqvooIxlIiVKN.png);background-repeat:repeat;}

Also, I have images in there that are meant to repeat. I assume you won't so you'll need to change this bit in each of those lines to say no-repeat:
#board-7 .image_board{background-image:url(http://storage.proboards.com/3393080/images/N0JPkH0IqvooIxlIiVKN.png);background-repeat:no-repeat;}

I think everything else is labeled so you should be able to figure out what to change but if you have any issues, just post here and I'll help until you get things tweaked to your liking. Be warned, I have yet to do a template that something wasn't off once installed on someone else's site just because, from site to site, we all have our text sizes set to our preference and we have plugins and other things that might throw things off. 

[Former Member]

I LOVE it so far! Only problem is, the images aren't showing well, no matter the size. I think they're not centering when I adjust them? And, sorry to ask so much lol, but can I switch Last post and board description? Didnt seem to work when I tried

[Tumbleweed]

Jul 7, 2017 3:51:05 GMT -8 @tumbler said:

I LOVE it so far! Only problem is, the images aren't showing well, no matter the size. I think they're not centering when I adjust them? And, sorry to ask so much lol, but can I switch Last post and board description? Didnt seem to work when I tried

You should be able to just copy the divide parts that are inbetween the td tags. So switch the blue part here....

<td>
<div class="latest last">
<div class="my_board_titles">Last Post</div>
{if $[board.posts] > 0}
{if $[board.last_thread]}
$[board.last_thread.recent_link]
by $[board.last_thread.last_post.created_by]<br/>
<span class="date">$[board.last_thread.last_post.created_on]</span>
{/if}
{else}
No posts have been made on this board.
{/if}
</div>
</td>


with this blue part...

<td>
<div class="spec_description">$[board.description]</div>
</td>


And then you'll probably have to change the width of those to make it look nicer so in the css I gave you change the two blue parts:

.special_boards div.latest.last {height:60px;width:256px;
float:left;padding:8px;
border-top: 1px solid @container_inner_border_color;
border-bottom: 1px solid @container_inner_border_color;
border-right: 1px solid @container_inner_border_color;}
.special_boards div.spec_description{height:60px;overflow:auto;
width:440px!important;float:right;padding:8px;
border-top: 1px solid @container_inner_border_color;
border-bottom: 1px solid @container_inner_border_color;
}

I probably can't help with the image if I don't have a link where I can see it as a guest. That said, if it doesn't seem to be centering right then is the image too small or too big? You could try adding background position to your images like I did in blue here:
#board-1 .image_board{background-image:url(http://storage.proboards.com/3393080/images/wvhWorPEkhHpQcivXHhU.png);background-repeat:repeat;background-position:center center;}

[Former Member]

About the first thing - I looked and my version is slightly different than what you said, for example it's <td class=blahblah> instead of <td> and things... Still tried and it got messed up...

Second - Images are sorta showing, but right now all I see is a part of the image. Even tried changing the pixels around after yours but still didn't fix...

Also, the image links are like tumblingstests.boards.net/attachment/download/7 etc. If you need them I can give them to you. I think the image is too big, so lemme get back to you and see if a smaller image works.

EDIT Tried a smaller one and still doesn't show up. In case you need it my test forum is tumblingtests.boards.net


I just also wanna say thank you so much for your work, I really appreciate this

[Tumbleweed]

Jul 7, 2017 11:28:36 GMT -8 @tumbler said:

About the first thing - I looked and my version is slightly different than what you said, for example it's <td class=blahblah> instead of <td> and things... Still tried and it got messed up...

Second - Images are sorta showing, but right now all I see is a part of the image. Even tried changing the pixels around after yours but still didn't fix...

Also, the image links are like tumblingstests.boards.net/attachment/download/7 etc. If you need them I can give them to you. I think the image is too big, so lemme get back to you and see if a smaller image works.

EDIT Tried a smaller one and still doesn't show up. In case you need it my test forum is tumblingtests.boards.net


I just also wanna say thank you so much for your work, I really appreciate this

You have to be going down too far because I copied what I posted right from the original post with the code here. (Unless you accidentally deleted or added things.)

The last post bit should be starting at line 14 (this is provided you haven't added spaces and stuff) and ending at 25.
The description should be line 28.

The attachment doesn't work and you must have the wrong theme set on your test site or the boards not open to guests as I can't see any image or a template change in any of the boards at all.

And your very welcome.