Board Remodel Help - 3 Boards Side by Side

[Tumbleweed]

I'm looking at your test site and it appears you have that purple on the sides fixed. Checked in Chrome and FF so not sure about other browsers. Let me know if it's still an issue and what browser you are using.

Oh and congrats on the nanny job. 

[Former Member]

It's still doing it for me. I use the latest version of Chrome. ;s

[Tumbleweed]

Sept 22, 2016 20:40:29 GMT -8 @seriously said:

It's still doing it for me. I use the latest version of Chrome. ;s

O.K. I am seeing that now. I was moving my mouse over the boards so fast I didn't see the edge changing. Since you have a hover color in the css you did, then you need to go remove the highlight color in the visual editor: Go to Lists (Boards, Threads, Posts...)>Rows>Highlight and I just set mine to transparent. See if that does the trick.

Also, what I did to make things work better is put the purple hover backgrounds in: 
.board-name:hover{border:1px solid #dddddd;background-color:#b443f7;
}....and removed it from the a link but maybe you won't need to, depending on how much you've revamped.

[Former Member]

I'll go ahead and try that and let you know if it works.

Yay, it did! Alright so, I know this is probably easy, but I tried messing with some of the styles and I'm probably not putting them in the right place.

How can I add transparent space to separate them?

Tumbleweed

[Tumbleweed]

Sept 23, 2016 15:44:16 GMT -8 @seriously said:

I'll go ahead and try that and let you know if it works.

Yay, it did! Alright so, I know this is probably easy, but I tried messing with some of the styles and I'm probably not putting them in the right place.

How can I add transparent space to separate them?

Tumbleweed

Hmmm, I still see the purple on the edges on your site. But to your question, there is a bit of finagling involved. First you'll have to put a divide around your board name in your board list template like I did in blue:


<div class="board-wrapper">
<div style="text-align:center;"><div class="board-name">$[board]</div></div>
</div>


Then I had to go add some more css which might be overriding other borders and color in the previous css which you can remove later if you wish. Anyway, this is what I added: putteraround.boards.net/  (<<<is that how you want it?)

.container.boards .content.cap-bottom {
background-color:transparent;border:0px;
}
.container.boards .list td{border:0px;
}
.board-wrapper{margin:6px; background-color:white;
}

[Former Member]

Tumbleweed

Yes! That looks great!

Going to apply this now and play around with it. + Do you still see the purple edges now? I asked a few other people to check and they told me it's working properly.

How did you get the staff board to stretch across the entire width?

[Tumbleweed]

Sept 28, 2016 1:33:17 GMT -8 @seriously said:

Tumbleweed

Yes! That looks great!

Going to apply this now and play around with it. + Do you still see the purple edges now? I asked a few other people to check and they told me it's working properly.

How did you get the staff board to stretch across the entire width?

Unfortunately, I'm still seeing the purple on the edges. I'm looking at this site: hbadtestforum.freeforums.net/ Is it possible I'm viewing the wrong theme as a guest? As far as the one board stretching, I don't think I did anything but I'll go back and review what I have compared to what I gave you as there must be something different.

[Former Member]

Tumbleweed

That was my fault, I forgot to update the link. I moved the theme to the forum I'm making it for so the owner could start setting things up based on the concept.

pixelartforum.proboards.com/

[Tumbleweed]

Sept 28, 2016 21:16:01 GMT -8 @seriously said:

Tumbleweed

That was my fault, I forgot to update the link. I moved the theme to the forum I'm making it for so the owner could start setting things up based on the concept.

pixelartforum.proboards.com/

O.K. That looks good on that site. As far as the one board alone stretching, look in your css and find this and make sure it says 100% like mine does:


.boards table.list.first.last { width: 100%; }

By the way, your design looks nice. Very neat and clean.

[Former Member]

It's set to 100%.

I'll post the CSS again just in case it's different.

/*three boards side by side*/
.boards table.list { float: left; width: 332px; table-layout: fixed; }
.boards table.list .board > td { height: 80px; border:none; }
.boards table.list .main { width: auto; }
.boards table.list.first.last { width: 100%; }
/*.boards table.list.odd.last { float: none; width: 100%; }*/
.ie7 .boards table.list { width: 332px; }
.boards .main { width: 100%; text-align: @board_align_main; }
.boards .threads { width: 100%; text-align: none; white-space: nowrap; }
.boards .posts { width: 100%; text-align: none; white-space: nowrap; }
.boards .latest { width: 100%%; text-align: left!important; margin-top:20px;}

.board-name a{
font-size:25px;
font-style:none;
font-weight:normal;
letter-spacing:.5px;
padding: 40px;
text-align: center;
text-decoration: none;
display: inline-block;
width:240px;
height:80px;
border:0;

}

.board-name a:hover{
color:#fff;
background-color:#b443f7;
border:0;
}

.container.boards .content.cap-bottom {
background-color:transparent;border:0px;
}
.container.boards .list td{border:0px;
}
.board-wrapper{margin:6px; background-color:white;
}

+ Thanks! It's been a long work in progress, lol.

Tumbleweed

[Tumbleweed]

@seriously,
I think it seems to be dragging out because both of us are not able to come here ever day. 

That last board will not go 100% because I forgot you have a pixel width for your boards in there. You sure 33% doesn't work for you? What goes wrong when you put the percent in there? Otherwise, it is going to get complicated I think.

[Former Member]

Tumbleweed

It wouldn't stretch the full width of the boards. There would be about ~10px or so of extra space to the right side, causing it to be off-center even though the alignment is set to center regardless.

I can try it again since I did make some adjustments since I changed it and see if it wants to work for me.

Edit: So I changed it to 33.3% and they aligned a little better than just 33%, but the staff board still doesn't want to stretch across the full width.

[Tumbleweed]

Oct 1, 2016 21:07:06 GMT -8 @seriously said:

Tumbleweed

It wouldn't stretch the full width of the boards. There would be about ~10px or so of extra space to the right side, causing it to be off-center even though the alignment is set to center regardless.

I can try it again since I did make some adjustments since I changed it and see if it wants to work for me.

Edit: So I changed it to 33.3% and they aligned a little better than just 33%, but the staff board still doesn't want to stretch across the full width.

O.k. I get what you are saying. I'm going to test out your css you posted in case I missed something else that is different and try to figure out why your last board won't stretch as well as getting things to line up evenly on the sides. I'm going to work on it now but I may not figure it out before I go to bed, which will be soon. So tomorrow, hopefully I'll have a solution. Fingers crossed.

Update: I set my forum width to 1000px like you have yours and I put your css on my site and my boards look nothing like yours. I have a gap between mine so something other than the css is making our sites different and I'm going to have to do some digging to figure it out. I can't fix what you need fixed without me at least being able to replicate your site (as far as the boards) exactly.

Edit: Can you think of what all you changed to get your site to look as it does and I just mean the boards layout? I know you removed the category title bar but I can't figure out why using the exact css you posted that I still have wide gaps between my boards and my one board in a row still spans the width. So there must be template changes you made or css that you added that is preventing that one board in a row to not expand the width and also some changes that made your site remove the space between the boards. I'm still going to be working on this trying to figure out the difference but any insight you can give me will be helpful.

[Former Member]

Tumbleweed

Would it help if I gave you access to the forum's admin panel? I can also send you all my css related to boards that I can find just in case I missed any myself, and resend templates via PM.

[Tumbleweed]

I replied in the pm you sent me with your various templates and I added to my site and no change so it's not those. I did request your home template in the pm. Maybe something there is preventing that last board in a row to not span the width?


Edit: This has been resolved via pm. Here is the final coding in case another member wants to mess with this.
The css to be added at the bottom of your style sheet:

/*three boards side by side*/
.boards table.list { float: left; width: 33.33%; table-layout: fixed; }
.boards table.list .board > td { height: 80px; border:none; }
.boards table.list .main { width: auto; }
.boards table.list.first.last { width: 100%; }
.boards table.list.odd.last { float: none; width: 100%; }
.ie7 .boards table.list { width: 33.33%; }
.boards .main { width: 100%; text-align: @board_align_main; }
.boards .threads { width: 100%; text-align: none; white-space: nowrap; }
.boards .posts { width: 100%; text-align: none; white-space: nowrap; }
.boards .latest { width: 100%%; text-align: left!important; margin-top:20px;}

.board-name a{
font-size:25px;
font-style:none;
font-weight:normal;
letter-spacing:.5px;
padding: 40px;
text-align: center;
text-decoration: none;
display: inline-block;
width:240px;
height:80px;
border:0;
}
.board-name:hover{
color:#fff;
background-color:#b443f7;
border:0;
}
.container.boards .content.cap-bottom {
background-color:transparent!important;border:0px;
}
.container.boards .list td{border:0px;
}
.board-wrapper{margin:0px; background-color:white;
}
.boards table.list>tbody>tr>td {
   padding: 1px;
}
And this replaces what is in your board list template:

{foreach $[board]}
<table class="list{if $[board.odd]} odd{/if}{if $[board.even]} even{/if}{if $[board.index] == 3} first{/if}{if $[board.index] == $[board.lastIndex]} last{/if}" role="grid">

<tbody>
{if !$[board.is_redirect]}
<tr>
                    <td width="33%" id="$[board.content_id]" class="$[board.content_class] boardtd" valign="top">
                   
                   <div class="board-wrapper">
<div style="text-align:center;"><div class="board-name">$[board]</div></div>
</div>

</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}

{if !$[board]}
<tr class="last"><td class="last center" colspan="5">No boards were found.</td></tr>
{/if}
</tbody>
</table>
{/foreach}