Side by side boards and info centre help

[greymuzzles]

I’ve just managed to track down the code for ‘side by side boards’, which I’d like to try out, but it turns out I have zero idea where to begin adding in the CSS needed to make it look halfway decent. I’d appreciate any help anyone can give me on that front! 
Edit: managed to mockup what I'm looking for. I currently have this, but I'm after something more like this - preferably coded so that it'll use the colours from whatever theme a user has set. Specifically hoping to have the board background be a semi-transparent version of theme background colour, board title bar/post count/thread count backgrounds use the theme background colour, and text to use theme text colours. 



I also seem to have managed to partially break a chunk of coding that’s been working perfectly all day. Paragraph breaks have randomly appeared between my text lines, and I really don’t want this---I’m also not sure how this has happened, since I’ve not touched it for the last few hours. Don’t suppose anyone has any ideas about what might be going on here?

Have this
Want this
(Second example is from an older forum of mine—the one this one is meant to replace)

[Star's Legacy]

greymuzzles, if you could post your code I could take a look. Otherwise if the other site is yours, why not copy the code over to the new site again if you did that previously?

[greymuzzles]

Star's Legacy

I tried copying the code from my other site last night, but ended up with exactly the same problem for some reason. All very odd |:

This is the code I'm using for my info centre:

{if $[show_stats]}

   <div class="container stats">

       <div class="title-bar"><center><h2>Forum Statistics</h2></center></div>

       <div class="content">

           <table>

               <tbody>

                   <tr>

                       <td>

                           <table>

                               <tr>

                                   <td class="info">

                                       <table>

                                           <tbody>

                                               <tr><th><center>Threads and Posts</center></th></tr>

                                               <tr><td><center>Total Threads: $[total_threads] &nbsp;&nbsp;&nbsp;&nbsp; Total Posts: $[total_posts]</center></td></tr>

                                               {if $[last_updated_thread]}

                                               <tr><td><center>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by_user] ($[last_updated_thread.last_post.date])</center></td></tr>{/if}

                                               <tr><td><center>$[recent_threads_link] - $[recent_posts_link] - $[rss_feed_link]{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}</center></td></tr>

                                           </tbody>

                                       </table>

                                   </td>

                               </tr>

                           </table>

                       </td>

                       <td>

                           <table>

                               <tr>

                                   <td class="info">

                                       <table>

                                           <tbody>

                                               <tr><th><center>Members</center></th></tr>

                                               <tr><td><center>Total Members: $[total_members]</center></td></tr>

                                               <tr><td><center>Newest Member: $[newest_user]</center></td></tr>

                                               <tr><td><center>Most Users Online: $[most_users_online] <span class="small">($[most_users_online_date])</span></center></td></tr>

                                               <tr><td><center>$[birthdays_today_link]</center></td></tr>

                                           </tbody>

                                       </table>

                                   </td>

                               </tr>

                           </table>

                       </td>

                   </tr>

                   <tr>

                       <td>

                           <table>

                               <tr>

                                   <td class="info last">

                                       <table>

                                           <tbody>

                                               <tr><th><center>Users Online in the Last 24 Hours</center></th></tr>

                                               <tr><td><center>$[total_staff_online_24] Staff, <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}</a>, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}.</center></td></tr>

                                               <tr><td><center>{foreach $[online_user_24]}$[online_user_24]{if $[online_user_24.invisible]} <span class="small">(invisible)</span>{/if}$[online_user_24.comma]{/foreach}{if $[total_online_not_shown_24]}, and <a class="$[view_active_members_link_24.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>{/if}</center></td></tr>

                                           </tbody>

                                       </table>

                                   </td>

                               </tr>

                           </table>

                       </td>

                       <td>

                           <table>

                               <tr>

                                                                       <td class="info last">

                                       <table>

                                           <tbody>

                                               <tr><th><center>Users Online</center></th></tr>

                                               <tr><td><center>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}.</center></td></tr>

                                               <tr><td><center>{foreach $[online_user]}$[online_user]{if $[online_user.invisible]} <span class="small">(invisible)</span>{/if}$[online_user.comma]{/foreach}{if $[total_online_not_shown]}, and <a class="$[view_active_members_link.class]" href="$[view_active_members_link.href]">$[total_online_not_shown] more...</a>{/if}</center></td></tr>

                                           </tbody>

                                       </table>

                                   </td>

                               </tr>

                           </table>

                       </td>

                   </tr>

               </tbody>

           </table>

       </div>

   </div>

{/if}





[Star's Legacy]

greymuzzles, Nothing is leaping out at me as far as being off which is odd. I took the code and placed it on a test site and it behaved properly without the excessive spacing. What other code do you have in your home template? Is the rest of your forum text lines spaced properly?

[Tumbleweed]

greymuzzles , We may need a link to your site where you are working on this and of course that theme would need to be default, if at all possible so we can figure out why you have the large spaces between lines. Could be some line spacing that got changed or margins? It's anyone's guess.

Do you have the skeleton of the side by side code on a test site we can look at and do you want us to talk you through the changes you'll need to make or are you looking for a completed version of what you want? I currently have some side by sides on a test site (did for someone else) that I can easily set back to default side by sides and then talk you through the changes or just set it up for you.


Edit: I needed something to do tonight so I decided to get the basic layout done. When I'm working on something I put borders around elements so I know what's going on and they will be removed but this is what I have so far:
 

Obviously, I still there is still some things to be done, like in your sample you have a background around both boards and my width is off and of course css tweaking of things.

[greymuzzles]

Star's Legacy
That’s the only custom coding I have in the home template right now, and for some reason I still had the same problem when I tried resetting the template to its home settings yesterday. Everything else on the forum is spaced normally, though.

Edit: Just been skimming through my plugins again, and I've released that my categories are divided even though I apparently forgot to install the plugin for that. I didn't think anything of it (or notice right away), since I wanted the categories to be separated anyway, but would that also technically be a coding error right now, since it's not being done by the plugin? I'm not sure if separated categories might have become a default for proboards since I last made a forum...




Tumbleweed
I think that at this point it would probably be easier (and have better results) if someone wrote up the side by side code for me, since I’m still learning how to code. Know enough to make tweaks and do the basics, and I’ve picked up some newer tricks over the last few days, but this set of coding is feeling more and more beyond me the more I look at it |:

What you have there is looking very good so far! Very much what I was picturing, bearing in mind the code’s still a work-in-progress~



Aand here’s a link to the site itself: thecursedera.proboards.com/

[Tumbleweed]

Apr 5, 2017 1:11:44 GMT -8 greymuzzles said:

Star's Legacy
That’s the only custom coding I have in the home template right now, and for some reason I still had the same problem when I tried resetting the template to its home settings yesterday. Everything else on the forum is spaced normally, though.

Edit: Just been skimming through my plugins again, and I've released that my categories are divided even though I apparently forgot to install the plugin for that. I didn't think anything of it (or notice right away), since I wanted the categories to be separated anyway, but would that also technically be a coding error right now, since it's not being done by the plugin? I'm not sure if separated categories might have become a default for proboards since I last made a forum...




Tumbleweed
I think that at this point it would probably be easier (and have better results) if someone wrote up the side by side code for me, since I’m still learning how to code. Know enough to make tweaks and do the basics, and I’ve picked up some newer tricks over the last few days, but this set of coding is feeling more and more beyond me the more I look at it |:

What you have there is looking very good so far! Very much what I was picturing, bearing in mind the code’s still a work-in-progress~



Aand here’s a link to the site itself: thecursedera.proboards.com/

As far as the spacing in your info center I found this in the css somewhere is causing that:

table, th, td {
padding: 8px;
}

So to not mess up anything else, add this to the bottom of your style sheet and it will just target the .info class and the table, th, and td elements in it.

.info table, th, td {
padding: 0px;
}

You might want to change the 0px to maybe 1px.


I'll try to finish that side by side by tomorrow sometime. It's getting a bit too late to mess with it tonight. When I get all the things worked out I'll give you a link to have a look in case there is something you want changed and then give you the code.

I just thought of a couple questions to ask you. You said you wanted it to pick up theme colors but in your example the title of the board has a background and as default, it doesn't so what theme color do you want that? I can see by your example that whatever the board name background ends up being, will also be the background behind the theads/posts count.

Also in your example there are two shades of blue that I have questions about. One is the background color that goes behind the two boards and then the shade that is behind each board. I'm just not sure if you want the normal board color as the background color behind the two boards and if so, what theme color would the color be behind each board or if it's the other way around, then my question would be visa versa. 

I don't expect you to have the css for it but rather for you to just point to the area on your site that would be the theme colors you want for the above things and I can find the css for it, I hope. (I hope that makes sense.) 

[greymuzzles]

Tumbleweed
Doesn’t look like that piece of coding has had any affect :/



As to your questions (listing my answers, since it’s easier and hopefully clearer that way):

Board title: forum background

Post/thread count: forum background

Boards: forum background set to be semi-transparent, if that’s possible?

Colour behind boards: container background / normal container settings 

[Tumbleweed]

Apr 6, 2017 1:05:55 GMT -8 greymuzzles said:

Tumbleweed
Doesn’t look like that piece of coding has had any affect :/



As to your questions (listing my answers, since it’s easier and hopefully clearer that way):

Board title: forum background

Post/thread count: forum background

Boards: forum background set to be semi-transparent, if that’s possible?

Colour behind boards: container background / normal container settings 

Thanks, that info helps a lot. Try adding !important to the end of that css:


.info table, th, td {
padding: 0px!important;
}

I'll be working on finishing up the code later tonight. Just popped in for a second.

[greymuzzles]

Tumbleweed
That's fixed the info centre problem but also changed the spacing for everything else on the forum, too...

[Tumbleweed]

Apr 6, 2017 15:57:24 GMT -8 greymuzzles said:

Tumbleweed
That's fixed the info centre problem but also changed the spacing for everything else on the forum, too...

Well, dang, it didn't on my test site. Alright, there is nothing else named div.container.stats except the Forum Information & Statistics so do:

div.container.stats table, th, td {
padding: 0px!important;
}

or even:

div.container.stats .info table, th, td {
padding: 0px!important;
}

And I just now am sitting down to work on finishing up that template for side by sides for you after being interrupted several times with phone calls. grrr...lol

Anyway, I got to thinking about how you want the color behind the boards semi-transparent but if you have a solid color as your background behind that, all that will do is just change the color a bit and you won't even notice it is semi-transparent. It would only be noticeable if you had some sort of a texture or print behind that. 

Plus with using transparency, you need to use rgb rather then hex colors (as far as I know) so I don't know how to use the theme colors (like @body_background_color;) automatically like you wanted. What I could do is make the forum background color for the boards just be a shade lighter? (I do have it set up that way on my test site.) On a side note, Just using opacity:0.7;  makes everything including the text and all other things inside transparent and that looks nasty. 

Also, were you wanting the two boards in a row to have separation from say, another row of boards in the same category? Not sure by your example if that is what you wanted and if so, that may be hard to do without rewriting the whole template.

Last thing. I am assuming the other color behind everything with the yellow/orangie line is something you'd add to your wrapper?

  Anyway, I have the theme switched on my test site so you can see what I have  so any changes, speak up now as it is easier to change now then later. Also, any feedback on the things I brought up. (Test Site) 

[greymuzzles]

Tumbleweed
Both of those codes are doing exactly the same thing as the last one, I’m afraid. Fixing the info table, but also removing the spacing from everything else. Something tells me this forum just wants to be awkward XD

The semi-transparent element was mostly just to get a different shade for the board background, whilst still being able to draw it from the theme colours. If you’re able to get the same effect by tweaking the shades then that’s wonderful, too

I’m not quite sure what you mean by that second question of yours, but the way the boards are laid out on your test site now is pretty much exactly what I’m looking for! The only tweaks I’d like would be a little tooltip-on-hover for the two post counters, just so people can find out which is which, and maybe slightly rounded corners for the boards? I wasn’t able to mock that in my art program – and, of course, if it’s not something particularly doable at this point then it’s no problem.

Aand the orange border is just a border code. The colour behind it is put there by the theme-maker tool.

[Tumbleweed]

greymuzzles,

I made those changed, got the template and css all posted here for you and then decided to do a quick check to insure it is working cross browser and notice my sub-boards are messed up and I'm so tired tonight, it might have to wait until tomorrow to figure out what is wrong with them. And that brings me to, hopefully, the last question. What do you want the sub-boards to look like? 

[greymuzzles]

Tumbleweed
I'd like sub-boards to be set up the same way as the main boards, please! 

[Tumbleweed]

Apr 8, 2017 5:12:43 GMT -8 greymuzzles said:

Tumbleweed
I'd like sub-boards to be set up the same way as the main boards, please! 

O.K. I'll give it some thinking on how to do that. I did fix my previous problem with my sub-boards. It was just something dumb I did. In this case, I should have just started from scratch instead of using what I already did for someone else. Lesson learned. lol Sorry for this taking longer than I hoped and I'm sure you hoped.  

Edit: Got the sub-boards fixed but when you fix one thing, you break something else.  Stay tuned, but need to eat some dinner and will get back on it later tonight.

Edit: Every thing is fixed. Just need to do a cross browser check again and tidy up the code and will post it here before I go to bed.
(The Folly board has sub-boards- Test site)