Circle Boards

[Former Member]

Mar 21, 2016 7:02:53 GMT -8 Tumbleweed said:

Mar 21, 2016 4:07:25 GMT -8 @draterion said:

700-800px.

O.K. Then that would probably be best with 2 in a row. I should have this for you by the end of today.

YAY!!! Thanks, Tumbleweed! Your the best.

[Tumbleweed]

All righty @draterion, here ya go. I'm sure there will be things you want tweaked so if you can't figure out how to do something, let me know. I would suggest setting this up on a new theme that you members won't see until you get everything the way you like. This replaces everything in your board list template and I'm just including the css right with it so you can easily change things. Maybe once you get everything perfect, then you can move the css to the style sheet. I had my forum set at 800px exactly.


<style>
.boards table.list { float: left; width: 50%; table-layout:fixed; background-color:none;  }
.boards table.list .board > td { height: 320px;}
.boards table.list .main { width: auto; }
.boards table.list.first.last { width: 100%; }
.ie7 .boards table.list { width: 50%; }
.boards .main { width: 100%; text-align: @board_align_main; }
.boards .threads { width: 100%; text-align: @board_align_threads; white-space: nowrap; }
.boards .posts { width: 100%; text-align: @board_align_posts; white-space: nowrap; }
.boards .latest { width: 100%; text-align: left!important; margin-top:20px;}
.link {font-size:14px!important;position:relative;top:-8px;left:8px;
}
.special{border:0px!important;
}
.sub-boards{position:relative;top:28px;width:220px;margin:auto;text-align:center;
}
.oval_board{
background-color:#ddddee;
width:350px;
height:250px;
margin:0px;
padding-top:0px;
border:2px solid blue;
   border-radius:50%;
   margin:auto;
   text-align:center;
border:2px solid blue;
}
board with no post message*/
#no_post_here{
position:relative;
top:120px;
height:20px;
}    
.oval_board_inner {
   margin-left:-3px;
   width:300px;
   height:50px;
   color:#fff !important;
   display:table-cell;
   vertical-align:middle;
   text-align:center;
   padding:0px;
}
.icon{position:relative;top: 4px;width:100%;text-align:center;padding:0px!important;
}
.oval_board_name{position:relative;top:5px;text-align:center;font-size:14px;color:black;
}
.description {position:relative;top:8px;left:0px;
   width:300px;
height:70px;
   color:black;
   text-align:center;
   padding:2px 16px 2px 16px;
   font-style:normal;
}
.board-last-post{position:relative;bottom:-24px;
}      
.psts_thrds{
position:relative;top:10px;width:200px;bottom:8px;  
}
</style>





{foreach $[board]}
<table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 2} 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="special" colspan="2" >
<div class="oval_board">
<a href="$[board.href]">
                               <div class="oval_board_inner">
                                   <div class="icon">$[board.icon]</div>
                            <div class="oval_board_name">$[board.display_name]</div>
<div class="description">$[board.description]</div>
                               </div>
</a>
<center>
<div class="psts_thrds">
<div style="float:left;">$[board.posts] posts</div>
<div style="text-align:right;">$[board.threads] threads</div>
</div>
</center>  
{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>
</tr>

{else}

<tr id="$[board.content_id]" class="$[board.content_class]">
<td class="special" colspan="2">
<div class="oval_board">
<a href="$[board.href]">
                               <div class="oval_board_inner">
<div class="icon">$[board.icon]</div>                                    
<div class="oval_board_name">$[board.display_name]</div>
<div class="description">$[board.description]</div>
                               </div>
</a>
<center>
<div class="psts_thrds">
<div style="text-align:left;">$[board.posts] posts</div>
<div style="text-align:right;">$[board.threads] threads</div>
</div>
</center>              
</div>
</td>
</tr>
{/if}
</tbody>
</table>
{/foreach}
{if !$[board]}
<table class="list" role="grid"><tbody><tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr></tbody></table>
{/if}
           




And sorry, posting it here some of my tabbing in the code is not aligned prefect but hopefully once you paste it in the board list template, it'll fix itself and if it doesn't, no big deal.

[Former Member]

Tumbleweed , it turned out very well, so thank you!!!!! You are awesome!

EDIT: One question, how would you change the font face?

[Former Member]

Mar 18, 2016 14:12:10 GMT -8 ♥ ℒʊ√ ♥ said:

Tumbleweed , you did oval boards for Womenonly, if that helps.

When I deleted Women Only, all of its bookmarks went with that user name.
I made my request-the post into a saved document and I included its link.
My oval code does not allow for descriptions containing a lot of text.
Link to out of date oval code

[Former Member]

Mar 22, 2016 8:47:35 GMT -8 private said:

Mar 18, 2016 14:12:10 GMT -8 ♥ ℒʊ√ ♥ said:

Tumbleweed , you did oval boards for Womenonly, if that helps.

When I deleted Women Only, all of its bookmarks went with that user name.
I made my request-the post into a saved document and I included its link.
My oval code does not allow for descriptions containing a lot of text.
Link to out of date oval code

Oh thank you!!!!!

[Tumbleweed]

Mar 22, 2016 2:13:08 GMT -8 @draterion said:

Tumbleweed , it turned out very well, so thank you!!!!! You are awesome!

EDIT: One question, how would you change the font face?

You can add it to the sections you want to add it to.  If you add it to this line in the code I gave you it'll  change the threads, posts and just the title sub-boards but not the sub-board names that you have:

.boards table.list { float: left; width: 50%; table-layout:fixed; background-color:none; }

So here I went to google font and found the "cookie" font. I put this in my global header:

<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>

And then to the board list css line I added the font:


.boards table.list { float: left; width: 50%; table-layout:fixed; background-color:none; font-family: 'Cookie', cursive; }

To change the descriptions just add it to that css like below and you may want to add a font size too, depending on what font you use.

.description {position:relative;top:8px;left:0px; font-family: 'Cookie', cursive; font-size:15px;
width:300px;
height:70px;
color:black;
text-align:center;
padding:2px 16px 2px 16px;
font-style:normal;
}

And then for sub-boards you'll need to add this whole line to target them as they are links so just add this to the bottom of the css I gave you but make sure it is above teh </style> tag.

.sub-boards a{font-family: 'Cookie', cursive;font-size:14px;
}

[Former Member]

Thanks Tumbleweed. Would this change the font for the title as well??? If not, how would you do that??? Sorry I'm so dumb.

[Former Member]

Nevermind, I figured it out. Thank you