Info Center: additions and changes

[Tumbleweed]

1. when I'm logged in, not the guests. That is exactly what I want. The IP bit.
That's already there and working. Just tested.

2. Just members online.
That's also already there. You want that aligned left or centered?

So for the online in 24 hours, do you want the member listing gone.  Also, just notice something is wrong with that. It's only showing a test account I made and there should be the Tumble and the birthday account I made. So I need to look into this.


3. exactly that, no different than what is showing a test account except I do not want members listed.
Got it.

4. I know that already.
I did sign up a new account with today as the birthday and it's working.

5. to the members' list.
Got it.

6. Nah, not bolded. added in because I forgot once logged in is when it would show. I didn't want to pull the image and re-edit the whole thing and hoped you'd realize that. haha. my bad. As to the rest, I figured what you had started was fine where it so just have it all there where you auto placed it. simply for you and still has what I want.
No, didn't realize that.  So I'll leave that first cell as is I think you are saying.

7. verified, I no longer see it. Looks so much better.
Good.

and I thought I was a detail fanatic. hahaha. I tried to make it all as simple as possible for you to do by NOT asking for too much. The things you did on your own like rearranging and I know it is because it is how the default is set, looked fine so I didn't go and change the location on the picture. Based on what I see on your practice forum, the only thing I see that looks off at all is just under the boxes. Can you add a second line or perhaps css can fix it with double instead of the bold lining. (I might be able to do that part myself) Other than that the spacing seems small. will it expand on its own the more members that are online?

It's always hard to communicate stuff like this and I think you are doing fantastic. It's probably just me second guessing what you mean maybe?
I'm not 100% sure I'm understanding because as far as I'm concerned, there are 11 "boxes". I know in the middle section the red up and down lines aren't going all the way so I  need to know if you still want them.  And can you describe what you mean a bit more. Like say right below users online or right above such and such because I'm just not getting what you want done with this line stuff and what seems off to you.

As far as what you said in the part I have bolded, I do understand what you are saying there and I'll see if I can do a test to see how it reacts to a bunch of users, just to make sure it works as it should.

8. You're talking about the third row, I figured I'd leave that up to you. Whatever is easier for you to do. With or without lines, as long as the spacing is correct, it doesn't really matter.
Yes, third row, users online/users online in 24 hours. It would be easier to just get rid of those up and down  lines which I touched on above.

If it would make things easier so you're not trying to sort out how to cut pieces out of it... Use this setup instead.

I can always place the top 5 and add in a blank section somewhere else on the board later once I learn HTML better.
(and javascript since I noticed it is extremely handy at times)

You totally lost me with the green part. I'm confused about what set up you are talking about (the leaving the up/down lines out?) and I'm confused you find something wrong with the top 5? Sorry, I think maybe we got some wires crossed here. lol

Maybe this will help:


I'll be working on this later this evening and hopefully, I can have the template/css for you by the end of today or at the latest, early tomorrow. Thanks for being patient and I do appreciate you trying to make things easier for me.

[Tanya]

2. aligned left would be best, that way all the members fit across the entire section without needed to move to the next line and the next and... you get the idea lol

Now I'm getting lost lol I can see why some stuff takes longer when trying to communicate. I've watched it throughout the forum when people get help. It would be so much easier if we could verbalize communication.

3. yes, remove the 'listing' of members from 'Users Online in the Last 24 Hours'

6. yes

The double lined bit I mentioned is the red line above the dotted line. As to the red up and down lines not going all the way, its because it expects names to show up and those would cross the lines if they did go all the way, just remove those up and down lines. (its why I said it was up to you. I knew the cause but doubted it was fixable and all other info centers with the same general set up that I've seen didn't have the lines at all)

8. again, just rid those up and down lines.

Why are you lost? I added an attachment that should have explained it. it was just another idea if the one you are working on doesn't work out. A much simpler design that has all the things you already worked out. More or less just a rearrangement of the default plus my boxes at the top plus the legend. The last two items are not requirements. They were fillers(unnecessary) because my original idea left too much space. Understood now?


lol, it's because you showed 4 and not 5 for the top 5. That seems fixed so no worries.

The attachment showed me spacing so yeah, that did help me understand the breakdown but I kinda knew that already

---

---

Now do me a favor and take a deep breath and read what I write next, word for word. Okay?
I tend to write what I am thinking backwards. I struggle talking plainly.  I have a crazy habit of changing ideas when I see anyone who helps me struggle at all. I tend to find fixes for things when I see a major issue sneak up. Because of all that, you seemed to have made all this harder on yourself and none of it was meant to be hard at all. For that, I am sorry. You are the third person who has taken time to help me with something. The first person understood me too well and so we bumped heads a bit. I don't ask her for help. I read when she helps others because 7/10 when she does, it is something I was also curious about and she is a stickler for details so I don't miss anything while reading. For the most part, we get along just fine now. The second person I asked for help had no issues and I liked her work. Basic stuff because I knew nothing at all at that time. I don't like asking for help so when I do, the more involved I become, the easier I feel about asking. Sometimes it creates conflict and other times it creates confusion.  I could have tried this on my own till I got it right but I break more than I create and have a bad temper which doesn't solve anything at all. I'll stop offering other ideas now. hahaha You can breathe. 

One more thing... We confused each other. You focused on getting it exactly and me trying to change it so you don't have to. I bet we could create one heck of a written story.
Now back to work! Muahhhh

[Tumbleweed]

Tone is something that one can never show via the internet. I wasn't frustrated and actually read what you wrote several times. I've been doing this a long time and one thing I rarely need is to take a deep breath due to frustrated. lol All is good on my end.

So I'm just giving you the coding now. I commented out the users online 24 hours names so they won't render but if you ever decide you want them back, just remove the comments. I tested the users online row 2 and added a whole slug of fake names and it expands as needed.



I removed the red up/down lines in row three. 
Here is the whole home template:


$[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 $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<div class="content1">
<table>
<tbody>
<tr>
<td>
<div>
{if $[last_updated_thread]}<br>Last Updated: $[last_updated_thread.recent_link] by $[last_updated_thread.last_post.created_by]<br> ($[last_updated_thread.last_post.created_on])<br>{/if}
<br>$[recent_threads_link] - $[recent_posts_link]{if $[rss_feed_link]} - $[rss_feed_link]{/if}{if $[mark_boards_read_link]} - $[mark_boards_read_link]{/if}
                           </div>
</td>
<td>
<div>Total Threads: $[total_threads] <br> Total Posts: $[total_posts]</div>
</td>

<td>
                           Categories: $[category.length]<br />
                           Boards: <span id="boardNum"></span>

                           <script type="text/javascript">
                           var boardNum = $(".board-link").length;
                           $("#boardNum").text(boardNum);
                           </script>

                           <br />
                           Sub-Boards:<span id="subBoardNum"></span>
                           <script type="text/javascript">
                           var subBoardNum = $(".sub-boards a").length
                           $("#subBoardNum").text(subBoardNum);
                           </script>
</td>

<td class="last1">
                           <div>Total Members: $[total_members]</div>
<div>Newest Member: $[newest_user]</div>
<div> $[birthdays_today_link]</div>
</td>
</tr>
                   <tr>
                       <td width="100%" colspan="4" style="border:0px;">
{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}
                         
                           <div class="style2"></div>
                           <div id="middle_first">
     
Users Online<br>
$[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}.<br>


                           </div>                        
                           <div id="middle_two">
                          Users Online in the Last 24 Hours<br>
$[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}.<br>
<br>
<!--{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}-->

                           
                           </div>
                           <div id="middle_three">
<div>Most Users Online: $[most_users_online] <div class="small">($[most_users_online_date])</div></div>
                           </div>
                           <div class="style1"></div>
                           <table id="bottom_row" style="positon:relative;bottom:0px;">
                               <tr>
                                   <td>
                                    {if $[legend]}
<div class="container legend">
<div class="content2">
                                          {foreach $[legend]}  
$[legend.icon] <span>$[legend.name]</span>
{/foreach}

                                           </div>
                                       </div>
{/if}
                                   </td>
                                   <td>
                                       <div class="top_posters">
                                       <b>Top 5 Posters</b><br>
                                       <ol>
                                           <li><span>Member 1</span></li>
                                           <li><span>Member 2</span></li>
                                           <li><span>Member 3</span></li>
                                           <li><span>Member 4</span></li>
                                           <li><span>Member 5</span></li>
                                       </ol>
                                       </div>
                                   </td>
                                   <td>
                                 
                                       Blank space
                                   </td>
                               </tr>
                           </table>
                       </td>
                   </tr>
</tbody>
</table>
</div>
</div>
{/if}


I labeled the css so you know what everything is so if you want to fiddle with things you can.
Add to the bottom of your style sheet:

/*Info Center Remodel
these are the dotted and double lines*/
.stats div.style2 {border-top: 3px dotted #000000;margin:4px 0px 4px 0px;}
.stats div.style1 {border-top: 3px double #8c8b8b;clear:left;margin:4px 0px 0px 0px;}
/*users online row -3rd row*/
.stats #middle_first{width:440px;float:left;padding-left:2px;}
.stats #middle_two{width:440px;float:left;padding-left:5px;padding-right:5px;}
.stats #middle_three{width:180px;float:left;padding-left:4px; }
/*bottom row*/
.stats #bottom_row{width:100%;padding:0px;margin:0px;}
.stats #bottom_row td{padding:4px 4px 0px 4px;vertical-align:middle;border:0px;}
.stats #bottom_row td:first-child{width:24%;
border-right:1px solid @container_inner_border_color!important;}
.stats #bottom_row  td:nth-child(2){width:37%;border-right: 1px solid @container_inner_border_color;}
.stats #bottom_row td:nth-child(3){width:37%;}
/*legend*/
.stats .container.legend div{position:relative;top:3px;left:-26px;padding-top:-3px;}
.stats .container.legend span{position:relative;top:-8px;padding-top:-3px;}
/*first row*/
.stats .content1{ background-color: @container_background_color_1;border: 1px solid @container_outer_border_color; border-radius: 0 0 5px 5px;
padding-left:6px;padding-right:6px;}
.stats .content1 td{ border-bottom: 1px solid @container_inner_border_color;}
.stats .content1 td:first-child {width: 44%;border-right: 1px solid @container_inner_border_color;
padding:0px;}
.stats .content1 div{padding-left:8px;}
.stats .content1 td:nth-child(2){text-align:center;width:15%;border-right: 1px solid @container_inner_border_color;}
.stats .content1 td:nth-child(3){text-align:center;width:15%;border-right: 1px solid @container_inner_border_color;}
.stats .content1 td:nth-child(4){width:30%;}
.stats .top_posters{text-align:left;line-height:16px;}
.stats .top_posters ol{list-style-position: inside!important;list-style: decimal;
padding-left: 6px;padding-bottom:8px;}
/*lists*/
.stats .top_posters ol li{padding: 1px 6px;}
.stats .top_posters ol li span{padding: 1px 6px;}



Now don't be surprise if once putting it on your site, there is something that isn't right. Typically it is because your default settings aren't the same as what I have on my test site and we can work whatever that might be if you don't figure it out on your own.

[Tanya]

Tone, no. A sense if this had kept going, maybe. The point was to either get you to laugh or just shake your head at my antics. *laughing at some of the names I see in that screenshot*

Okay, sounds good. I'll put this on my actual forum since my test forum has no members besides me lol

All on there now. Have a look. cornerwriter.freeforums.net/

I did make one edit which was moving the legend toward the right a tad more. Now just gotta fill in the top 5 and I should be good to go. 
You labeling everything in the css is extremely helpful. Quick question; How do I center the top 5?

Thank you Tumbleweed for doing this for me and making it very easy to work with too. xx

[Tumbleweed]

Aug 7, 2017 21:50:48 GMT -8 Tanya said:

Tone, no. A sense if this had kept going, maybe. The point was to either get you to laugh or just shake your head at my antics. *laughing at some of the names I see in that screenshot*

Okay, sounds good. I'll put this on my actual forum since my test forum has no members besides me lol

All on there now. Have a look. cornerwriter.freeforums.net/

I did make one edit which was moving the legend toward the right a tad more. Now just gotta fill in the top 5 and I should be good to go. 
You labeling everything in the css is extremely helpful. Quick question; How do I center the top 5?

Thank you Tumbleweed for doing this for me and making it very easy to work with too. xx

You're welcome. 

To center the top 5 find this and change left to center:

.stats .top_posters{text-align:left;line-height:16px;}

And for the record, I think that looks much nicer on your site than my site but maybe it is just the colors I have on mine.

[Tanya]

And for the record, I think that looks much nicer on your site than my site but maybe it is just the colors I have on mine.

Thank you. I've been making some minor and too simple adjustments trying to pull most things away from the left and centered more because it looked off to me and the top posters was the only thing I had no clue how to change lol  As to the colors. Not sure to be honest. I have some odd lined themes I could use to test that idea and I might just for fun.

Eww nope. look now, it's all out of whack.

I put it back to left. I can't figure out why the numbers don't stay aligned while centered. Manually putting in names might be part of it. I'm not sure.
Unless there is a way to add the names manually through css rather than filling them through the template.  

[Tumbleweed]

Aug 7, 2017 23:58:48 GMT -8 Tanya said:

And for the record, I think that looks much nicer on your site than my site but maybe it is just the colors I have on mine.

Thank you. I've been making some minor and too simple adjustments trying to pull most things away from the left and centered more because it looked off to me and the top posters was the only thing I had no clue how to change lol  As to the colors. Not sure to be honest. I have some odd lined themes I could use to test that idea and I might just for fun.

Eww nope. look now, it's all out of whack.

I put it back to left. I can't figure out why the numbers don't stay aligned while centered. Manually putting in names might be part of it. I'm not sure.
Unless there is a way to add the names manually through css rather than filling them through the template.  

I just tested the top posters and I see what you mean. I had all even names in there so didn't realize what it would do and I should have known that. Give me a bit to fix this.

O.K. What I did was put in the longest display name possible on my test site and adjusted from there. But keep in mind, if you have a lot of short names, it might look off. There is no perfect way to do this and make it look centered all the time just because display name lengths vary.

This is the whole top poster css and notice I moved the comment up because I didn't have it in the right place before. The bold is what I changed.

/*lists*/
.stats .top_posters{text-align:center;line-height:16px;}
/*you may have to change the width if names are longer*/
.stats .top_posters ol{list-style-position: inside!important;
list-style: decimal;padding-left: 10px;padding-bottom:8px;
width:61%;margin-right:auto;margin-left:auto;
text-align:left;}
.stats .top_posters ol li{padding: 1px 6px;}
.stats .top_posters ol li span{padding: 1px 6px;}

Notice I put a width of 61% width in there. Play with the padding in the blue part to move it left or right so it appears centered to you but if you move it more right, you'll need to increase the width a bit.

Let me know if that works for you.

 

[Tanya]

Funny that you mentioned things being out of place, I had already moved the two parts into the list.
(see I do pay attention)
Got it. The title is the only thing that looks off considering all the names are short. (might change the title to make it longer)

As to what is in blue... I changed it to 90 to line up with with the title. Have a look if you want.

If I make the title longer, I can lower that number drastically. Getting the numbers aligned was my main concern. The rest, once again, I wouldn't have thought of.

Thank you for correcting that and once again for doing this whole thing for me. All my own edits and additions are done. Might add something more to the last box later on but for now, I'm very happy with it all. You can consider this finished/completed.

[Tumbleweed]

Aug 8, 2017 10:18:09 GMT -8 Tanya said:

Funny that you mentioned things being out of place, I had already moved the two parts into the list.
(see I do pay attention)
Got it. The title is the only thing that looks off considering all the names are short. (might change the title to make it longer)

As to what is in blue... I changed it to 90 to line up with with the title. Have a look if you want.

If I make the title longer, I can lower that number drastically. Getting the numbers aligned was my main concern. The rest, once again, I wouldn't have thought of.

Thank you for correcting that and once again for doing this whole thing for me. All my own edits and additions are done. Might add something more to the last box later on but for now, I'm very happy with it all. You can consider this finished/completed.

List item #3 is getting thrown on two lines when viewing in Chrome. You need to make that width wider. Just making it 62% fixes it (in chrome at least) but it is something you'll have to watch if you get longer names in there. Right now you have just 5 to 10 characters in those names. I'm sure there is a way to get lists to shift center according to list character length but I don't know that way.  I might play around with a table and see if that works better. <<No luck, table wants to inherit parent element which is a equal width columns no matter if I added !important to new widths or did inline styling, so my idea flopped.

[Tanya]

I use Chrome, I haven't seen that but I did go ahead and change it. okay on and the rest of what you said.

[Tumbleweed]

I think I worked out how to do what we wanted in a list. Maybe try this in your Liked Posts section?

This is the html:




<div class="liked_posts">
<b>Top 5 Liked Posts</b><br>
<ol>
<li><span>Tumbleweed</span></li>
<li><span>Jeff</span></li>
<li><span>Sascatuan</span></li>
<li><span>Babybug </span></li>
<li><span>Member 5</span></li>
</ol>
</div>


The css:


.stats .liked_posts{width:100%;margin-right:auto;margin-left:auto;padding-top:6px;}
.stats .liked_posts ol{display:-moz-inline-stack;list-style-position: inside!important;
list-style: decimal;display:inline-block;zoom:1;*display:inline;padding-top:6px;
}
.stats .liked_posts ol li{text-align:left;line-height:18px;}
No messing with widths and padding to move things over. I have it in the right very bottom box on the test site. Anyway, I'll go ahead and label this as completed.

[Tanya]

Okay, I'll try it.  Does look better than the other one. None of it looks exact to your own tho.

how did you turn the legend and top 5 posters sideways? That looks kinda cool lol

[Tumbleweed]

Aug 8, 2017 21:57:35 GMT -8 Tanya said:

Okay, I'll try it.  Does look better than the other one. None of it looks exact to your own tho.

how did you turn the legend and top 5 posters sideways? That looks kinda cool lol

I'm actually doing a whole new info center remodel on another theme (same site) and started playing with the one you see, the one I did for you. On my new info center remodel, I wan't everything with titles sideways but haven't figured the exact configuration that would look best. I'm super tired and just want to be lazy right now before I hit the sack but tomorrow, I can take a look and see how much coding I changed and give it to you then or if you prefer, you could wait for my new remodel with all titles sideways.  Either way, doesn't matter to me.

[Tanya]

So this project inspired you as well, I see. Haha. I learned a few things from you during all this and now I want to experiment too. I'll wait till you're done with your project. Just let me know. Those sideways titles are too cool.