Info Center Remodel

[Star's Legacy]

Tumbleweed ,

[/div]
Recent Threads

Recent Posts

- So the Birthdays would be center and above the Recent Threads/Posts. Then the Recent Threads would be on the left side relatively and the Recent Posts would be on the right.[/ul][/ul]

[Tumbleweed]

Feb 10, 2016 10:43:28 GMT -8 Star's Legacy said:

Tumbleweed ,

[/div]
Recent Threads

Recent Posts

- So the Birthdays would be center and above the Recent Threads/Posts. Then the Recent Threads would be on the left side relatively and the Recent Posts would be on the right.[/ul][/ul][/quote]
The last updated thread is there, I just didn't realize the board that I had showing doesn't have any threads in it.   You can see it now and I've added the recent threads and posts, just need to get them positioned better and still need to position the users online/online 24hrs so it the text is more to the top. I should have the code for you before I go to bed so if you come online and see anything else that you want, I won't be working on it anymore for a couple house. 

[Tumbleweed]

Alrighty, here is the code. This is your whole "Home" template so replace what you have with this:




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

$[news]
{foreach $[category]}
$[category.anchor]
<div class="container boards">
<div class="title-bar bbcode"><h2><div class="title_wrapper">$[category.display_name]</div></h2></div>
<div class="content cap-bottom">
$[category.board_list]
</div>
</div>
{/foreach}
{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}


{if $[show_stats]}
<div class="container stats">
<!--<div class="title-bar"><h2>Forum Information &amp; Statistics</h2></div>-->
<div class="content" style="border:0px;">

<!--start of customizing-->
<table id="wrap_table">
       <tr>
           <td>
               <table width="100%">
                   <tbody>
                       <tr>
<td id="first_box">
                             
                              <img src="http://storage.proboards.com/3392378/i/sG8dw7PJKRH8DFi_P6yu.png">
                                <div id="the_welc_wrapper">
                                    <p style="clear:left;"></p>
                                    <div id="the_welc">Welcome</div>
                                    <div class="the_baby_boxes">
                                  {if !$[current_user.is_member]} Guest.  
{else}
<span> $[current_user.name].</span>
{/if}
</div>
                                <p style="clear:left;"></p>
<div id="end_welc"> to</div>
                                <div id="site_name">Shattered Alley</div>
                                      <p style="clear:both;"></p>

                            <div id="lst_updtd_thrd">{if $[last_updated_thread]}Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by] ($[last_updated_thread.last_post.created_on]){/if}</div>

                               
                                </div>  
                             

                      </td>
                        <td id="second_box">
                              <div id="sec_box_pos">  
<div class="baby_wrap"><span class="the_baby_boxes2">Total Members:</span><span class="mems_psts_thrds"> $[total_members]</span></div>
<div class="baby_wrap"><span class="the_baby_boxes2">Total Posts:</span><span class="mems_psts_thrds">  $[total_posts]</span> </div>                                    <div class="baby_wrap"><span class="the_baby_boxes2">Total Threads:</span><span class="mems_psts_thrds">  $[total_threads]</span></div>
                                           
                                <div id="thrds_pst_bday">
                                  <div style="float:left;">$[recent_threads_link] </div>
                                  <div style="float:right"> $[recent_posts_link]</div>
                                  <p style="clear:both;"></p>
                                <center><div id="bday">$[birthdays_today_link]</div></center>
                                  </div>
                                        </div>

                        </td>
                    </tr>
</tbody>
</table>
           

<table width="100%">
<tr>
<td id="third_box">
<table>
<tr>
<!--<td class="icon">$[image.online]</td>-->
<td class="info last" >
<table id="usr_ol">
<tbody>
      <tr><th>Users Online</th></tr>

<tr><td>$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td>
{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}
</td></tr>
</tbody>
</table>
</td>
          </tr>

</table>


</td>
<td id="forth_box">
<table>
<tr>
<!--<td class="icon">$[image.online_24]</td>-->
<td class="info last">
<table id="usr_ol_24">
<tbody>
<tr><th>Users Online in the Last 24 Hours</th></tr>
<tr><td>$[total_staff_online_24] Staff, <a class="$[view_todays_active_members_link.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}.</td></tr>
<tr><td>
{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_todays_active_members_link.class]" href="$[view_todays_active_members_link.href]">$[total_online_not_shown_24] more...</a>{/if}

</td></tr>
</tbody>
</table>
</td>
</tr>
</table>                                
</td>
</tr>
</table>
<!--end of customizing-->
 
</td>
                    </tr>
            </table>
  </div>
</div>
{/if}




And here is the css that goes with it. You can add this to the bottom of your style sheet or if you prefer you can put it at the top of your home template if you want to adjust the css a bit but with style tags around it like in bold below:  
<style>
css here
</style>





.container.stats #wrap_table {border:4px solid black!important;
}
#first_box{
width:70%;
padding:8px;
border:4px solid black!important;
}
#second_box{
width:30%;
padding:8px;
text-align:top;
border:4px solid black!important;
}
#third_box{
width:50%;
padding: 8px;
border: 4px solid black!important;
}
#forth_box{
width:50%;
padding: 8px;
border:4px solid black!important;
}
#first_box img{float:left;margin:2px 10px 2px 2px;
}
#the_welc_wrapper{float:left;margin-left:20px;
}
#the_welc{font-size:62px;
float:left;padding-right:20px;
font-family: 'Great Vibes', cursive;
}
.the_baby_boxes{
float:left;
background-color:gray;
font-size:20px;
color:white;
padding:8px;
border:4px solid black;margin-top:8px;
margin-left:10px;
}
.the_baby_boxes2{
width:190px;
background-color:gray;
font-size:16px;
color:white;
padding:8px;
border:4px solid black;
margin:2px;
}
#end_welc{
float:left;
margin-top:20px;
margin-left:48px;
font-size:28px;
}
#site_name{float:left;
font-size:32px;
margin-top:20px;
padding-left:10px;
}
.mems_psts_thrds{font-size:30;padding-left:8px;
}
.baby_wrap{height:50px;
}
#sec_box_pos{position:relative; top:-14px;
}
#thrds_pst_bday{height:32px;position:relative;top:36px;
}
#usr_ol{margin-top:-8px;
}
#usr_ol_24{margin-top:-25px;
}
#lst_updtd_thrd{float:right;margin-top:76px;
}




Let me know if you need help with anything or if something ends up wonky on your site.

[Star's Legacy]

Tumbleweed,

[/a] before fully implementing it on my forum. The content is all there and looks great, just the whole table is scrunched following with the rest of the boards and categories above. Is is possible to have it layout like the affiliates box below where it is not affected by the side bar?[/ul]

[Tumbleweed]

Feb 11, 2016 11:13:55 GMT -8 Star's Legacy said:

Tumbleweed ,

[/a] before fully implementing it on my forum. The content is all there and looks great, just the whole table is scrunched following with the rest of the boards and categories above. Is is possible to have it layout like the affiliates box below where it is not affected by the side bar?[/ul][/quote]

I think you forgot to put the actual link in there. Can you fix the link so I can see what you mean. Thanks.

[Star's Legacy]

Tumbleweed,

[/a]?[/ul]

[Tumbleweed]

Feb 11, 2016 18:45:34 GMT -8 Star's Legacy said:

Tumbleweed ,

[/a]?[/ul][/quote]
That link works and now I see what you mean. You forum is very narrow and what I tested it on, wasn't so I need to revamp a few things. Hang on.. Edit, I'm having to downsize all the font sizes and rearrange the order of things in that one little welcome area so it will be a bit and I have to get offline right now so later tonight hopefully I can give you the new revamped version.


I'm a bit worried since your site is so narrow how a long user name might fit. Mine (Tumbleweed) is pretty long and it works fine (now since I narrowed my site and did some tweaking) but we need to account for someone with a really long one so I'll test just that out to see how long of a name will fit there. You can see my progress on that test site I linked to before. Gotta get offline now.

[Star's Legacy]

Tumbleweed,

[Tumbleweed]

Feb 11, 2016 19:33:25 GMT -8 Star's Legacy said:

Tumbleweed ,

Your side table is in the way. If it were moved below the side table then you'd have this big ole gap after the legend. I could possibly try to figure out some javascript to move the whole info center but I'm not 100% sure I can figure it out. Is that the route you want to go, try to get it so it is expanded so it stretches under the side table too?

Either way, I pretty much have the skinny width fixed on my test site. I just don't like how the recent threads/posts/bdays links are kind of jammed there. Let me know which way you want to go and if the under the side table, I'll try (no promises) to figure out some javascript to move that info center.


Actually, I am posting the code to move the info center. I'm not sure where you have your affiliates table but I used this code to move it. I have the same redux sidetable as you on that same test site posted in my other posts. (It screwed things up since now it is wider again, lol, but the code you currently have should be fine then)

I put this in my Global Header: 


<script type="text/javascript">
$(document).ready(function() {
$('#move-stats').append($('.container.stats'));
});
</script>


And then this would go right above your affiliates,  where ever you have them. Not sure if your affiliate table is in your global footer or in your wrapper template.

<div id="move-stats"></div>

That seems to work for me, however, if you have your affiliates in your global footer than this would move the info center on all themes. We may have to give the info center a new id specific so it is only for that theme. Let me know if something doesn't work out. Heading to bed now.

[Star's Legacy]

Tumbleweed,

[Tumbleweed]

Feb 12, 2016 18:47:08 GMT -8 Star's Legacy said:

Tumbleweed ,

---Looking at your site, I'm not sure what you mean by the spacing. Can you elaborate?  But I did notice the users online in the last 24 hour is up too high. You can change that by adjusting this bit of the css: make the negative 25 a smaller number.


#usr_ol_24{margin-top:-25px;
}

---If you change your mind about having it moved on all themes,you should be able to just move that div I gave you and put it into the wrapper template so the JavaScript only affects that theme.
---Actually, no, that name next to the welcome table isn't clickable, if that's what you mean. I'll see if I can work out a way to do that.

[Star's Legacy]

Tumbleweed, on my side the 'welcome username to shattered alley' is below the cat picture rather than next to it. Oh how strange, I just checked on my phone and the only thing off is what you mentioned with the users online last 24 hours. I'll double check my laptop when I get home tonight.

As far as the clickable username, if it doesn't work out that's just fine as long as it displays the newest member please. ^^

[Star's Legacy]

Tumbleweed ,

[Tumbleweed]

Feb 13, 2016 19:53:38 GMT -8 Star's Legacy said:

Tumbleweed ,

That's weird, because I don't see that at all in IE, FF or Chrome on my test site or your test site.  We can try some things to see if I can guess what is causing that on your lap top but I have a question. You mentioned newest member.  I looked back and there was nothing said about newest member. I just assumed you wanted that to say welcome to however is viewing (a guest or a logged in member).  Isn't it going to look odd if you just have Welcome and then the newest member is there when the person viewing might be a guest or member? I could see if it said, Welcome our newest member or something like that. But I can move the newest member in there instead.  

[Star's Legacy]

Tumbleweed

- About the weirdness and difference in views, I'm up for trying anything that might help solve or at least pin point a problem.

- No I did not state anything about it, I just figured that's what an info center does. In my mind it was that we are welcoming the newest member to the site. I do see it from your point of view as well and I think both are good options to choose from. I just am not sure what I would like best as I never thought about it how you stated it.