Side by Side Boards

[forevermariah]

hello
i'm sorry this has been posted couple of times
I tried Bennett's code support.proboards.com/post/5372126/thread
but i found myself re-writing it and failing, me being one that knows nearly nothing about writing acs

and Brian Ordonez support.proboards.com/post/6236614/thread
but i got this instead: i.imgur.com/sUuUCkn.png
in which boards names and icons are crushed, and there's no space in between board columns, last post looks crowdy so its better to be off or re-adjusted to have more space

i will simply demonstrate what i need using Paint

current: forever-mariah.boards.net/
demonstation: i.imgur.com/GkJj28P.png
since the category cant be side by side and wouldnt look good with a board-columns-space in between, i narrowed it down to fit the text to look neat (actually my friend did while helping but we been playing with the codes for hours and didnt come up with results)

Plugins used: 
. Different On/Off Icons for Different Boards
. Thread Icons
. Extended Thread Titles

thank you 

[Tumbleweed]

Jul 9, 2016 11:47:02 GMT -8 forevermariah said:

hello
i'm sorry this has been posted couple of times
I tried Bennett's code support.proboards.com/post/5372126/thread
but i found myself re-writing it and failing, me being one that knows nearly nothing about writing acs

and Brian Ordonez support.proboards.com/post/6236614/thread
but i got this instead: i.imgur.com/sUuUCkn.png
in which boards names and icons are crushed, and there's no space in between board columns, last post looks crowdy so its better to be off or re-adjusted to have more space

i will simply demonstrate what i need using Paint

current: forever-mariah.boards.net/
demonstation: i.imgur.com/GkJj28P.png
since the category cant be side by side and wouldnt look good with a board-columns-space in between, i narrowed it down to fit the text to look neat (actually my friend did while helping but we been playing with the codes for hours and didnt come up with results)

Plugins used: 
. Different On/Off Icons for Different Boards
. Thread Icons
. Extended Thread Titles

thank you 

I started fiddling with this ( Test site ) and barely got started (lots to be fixed/changed/added back ...like headings) but in case I have time to fiddle some more in the next few days (if no one else jumps in) the dates (2010, 2011) I see on your examples, are they the board names (I'm pretty sure they are but wanted to double check)? Will descriptions be in any of the boards?

Ignore the misc. other stuff I have going on there. 

[forevermariah]

Jul 9, 2016 20:53:04 GMT -8 Tumbleweed said:

I started fiddling with this ( Test site ) and barely got started (lots to be fixed/changed/added back ...like headings) but in case I have time to fiddle some more in the next few days (if no one else jumps in) the dates (2010, 2011) I see on your examples, are they the board names (I'm pretty sure they are but wanted to double check)? Will descriptions be in any of the boards?

Ignore the misc. other stuff I have going on there. 

there will be no description in any boards other than the discussion ones on top
my friend insisted to help and kept playing with the code.
for a quick fix, he used brian's code then he umm.. somehow put a cell in between the boards and changed it's color to same as background (which works for now but any theme change will require a new cell color, which would've been better if could be made transparent or something but its just temporarily so)
and also he added this line to fit the icons so they dont go over on boards' names
we also removed boards last posts columns cuz looks crowded with everything else in that setting

the code now looks like this

{foreach $[board]}
   <table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 0} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">
       <tbody>
           {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">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>
                   <td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>
                 
             
           {if $[board.odd] == 1}{if $[board.lastIndex] != $[board.index]}<td width="4%" style="background-color: #1B211D; border: solid 1px #1b211D;"> </td>{/if}{/if}
{if $[board.even] == 1}</tr>{/if}
{else}
               <tr id="$[board.content_id]" class="$[board.content_class]">
                   <td class="icon">$[board.icon]</td>
                   <td class="main clickable redirect last" colspan="3">
                       <span class="link">$[board]</span><br />
                       <p class="description">$[board.description]</p>
                   </td>
               </tr>
           {/if}
           {if !$[board]}
               <tr class="last"><td class="last center" colspan="4">No boards were found.</td></tr>
           {/if}
       </tbody>
   </table>
{/foreach}

and

.boards table.list { float: left; width: 50%; table-layout: fixed; }
.boards table.list .board > td { height: 100px; }
.boards table.list .main { width: auto;  }
.boards table.list.first.last { width: 100%; }
.boards table.list .icon { width: 100px; }

and professional fix would be appreciated like how separately adjust category (table?) width to fit it's titles' texts and a transparent cell (or none) that wont get in the way in case of changing theme
thanks for ur reply

[forevermariah]

update: i just noticed, thought it was working, it seems it does on chrome but not firefox..

chrome: i.imgur.com/9QbSDx2.jpg
firefox fail: i.imgur.com/bqOPJjn.png - i.imgur.com/3xgmXYL.jpg

not sure about other devices/browsers
would like a lil help/explanation
thank you

[Tumbleweed]

forevermariah ,

It looks fine for me in FF, Chrome and IE.  I'm not sure when I can look through that coding for you to find any of the other things you mentioned that needs fixing. Before you posted saying you went back to Brian's code, I was in the process of trying to fix mine for mobile devices but I guess I can stop messing with it since you are going another route. But just in case here is where I left off. abetteramerica.freeforums.net/

Hopefully, someone else will come along to help you but I will check back when I have some free time to mess with your coding.

By the way, a great free place to test your site for mobile devices (my test site is messed up for mobile) and other screen resolutions is here. And sorry, I can't help at the mo.

[daylilydude]

Tumbleweed,

I have this thread bookmarked as this is something I would love to see for my forum. I have seen your test site and love the way it looks... I'm hoping you will have time to finish this??

[Tumbleweed]

Aug 8, 2016 0:34:30 GMT -8 daylilydude said:

Tumbleweed ,

I have this thread bookmarked as this is something I would love to see for my forum. I have seen your test site and love the way it looks... I'm hoping you will have time to finish this??

Actually, I haven't set foot on that test site since my last post. It definitely needs a lot of work to get it looking nice on smaller tablets and mobile devices as it looks terrible right now. But since you are interested and like how it looks (thanks ), I'll see what I can do with it when I have some spare time that amounts to more than a few minutes. 

Edit: Just wanted to add, if there is something you want different than what Forevermariah wanted you may want to start a new thread and refer to this thread in your post and actually, that would be better regardless, in case the OP comes back and wants me to finish up what she was requesting.

[daylilydude]

Ok, thank you Tumbleweed
Here is the link... Another side by side...

[SafeInSanity]

Where does this code go?

{foreach $[board]}
   <table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 0} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">
       <tbody>
           {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">{if $[board.threads] == -1}N/A{else}$[board.threads]{/if}</td>
                   <td class="posts">{if $[board.posts] == -1}N/A{else}$[board.posts]{/if}</td>
                 
             
           {if $[board.odd] == 1}{if $[board.lastIndex] != $[board.index]}<td width="4%" style="background-color: #1B211D; border: solid 1px #1b211D;"> </td>{/if}{/if}
{if $[board.even] == 1}</tr>{/if}
{else}
               <tr id="$[board.content_id]" class="$[board.content_class]">
                   <td class="icon">$[board.icon]</td>
                   <td class="main clickable redirect last" colspan="3">
                       <span class="link">$[board]</span><br />
                       <p class="description">$[board.description]</p>
                   </td>
               </tr>
           {/if}
           {if !$[board]}
               <tr class="last"><td class="last center" colspan="4">No boards were found.</td></tr>
           {/if}
       </tbody>
   </table>
{/foreach}


and

.boards table.list { float: left; width: 50%; table-layout: fixed; }
.boards table.list .board > td { height: 100px; }
.boards table.list .main { width: auto;  }
.boards table.list.first.last { width: 100%; }
.boards table.list .icon { width: 100px; }