Info Center - New Style

[• Ambrose •]

Forum:

I'm actually working on a new skin for my AU HP RP but I have been playing with my test board. You can see that one; leestests.proboards.com/

You might notice that I have been tweaking a LOT with the Info Center. I still am, but wanted some help in making sure I get what I'm looking for. The info center, for right now, has me a little stumped. I tried to adjust the widths for "Threads", "Posts", and "Members" so that they were each 100px and even, but that didn't work.

I also wanted to move "Users Online" to the RIGHT of the section it's in. Between these two sections, I wanted to add in another row for "Last Post by Member" and "Newest Member". Below the User Onlines, I want to add an affiliate section. Here's a picture to show what I'm trying to get.

Oh, and a quick note I just thought up about "users online" section; maybe I want to split that into two columns with "Users Online" in one column, and then the users (just the names) in the other column. I probably won't have the "staff, members, guests" part showing.



I'm still working on the skin, but I noticed something. The links in the Links section of the side-tables? They aren't "Tahoma" at 10px like I had set it. How do I fix this issue? I also can't get the c-box aligned to the right of the banner. I can get it to the left even when I ask [align="right"] but there's an empty space between the side of the banner and the c-box and I'm not sure how to get rid of that. Still tweaking around, though.

Attachments:

[Tumbleweed]

Jul 14, 2015 18:16:48 GMT -8 • Ambrose • said:

Forum:

I'm actually working on a new skin for my AU HP RP but I have been playing with my test board. You can see that one; leestests.proboards.com/

You might notice that I have been tweaking a LOT with the Info Center. I still am, but wanted some help in making sure I get what I'm looking for. The info center, for right now, has me a little stumped. I tried to adjust the widths for "Threads", "Posts", and "Members" so that they were each 100px and even, but that didn't work.

I also wanted to move "Users Online" to the RIGHT of the section it's in. Between these two sections, I wanted to add in another row for "Last Post by Member" and "Newest Member". Below the User Onlines, I want to add an affiliate section. Here's a picture to show what I'm trying to get.

Oh, and a quick note I just thought up about "users online" section; maybe I want to split that into two columns with "Users Online" in one column, and then the users (just the names) in the other column. I probably won't have the "staff, members, guests" part showing.



I'm still working on the skin, but I noticed something. The links in the Links section of the side-tables? They aren't "Tahoma" at 10px like I had set it. How do I fix this issue? I also can't get the c-box aligned to the right of the banner. I can get it to the left even when I ask [align="right"] but there's an empty space between the side of the banner and the c-box and I'm not sure how to get rid of that. Still tweaking around, though.

Did you still need this?

I did a quick layout for your info center. (Ignore all the weird colors and transparencies going on.) I did it like the attachment you posted but not with the border colors you had but they could be added:

abetteramerica.freeforums.net/

I could do that about splitting up the users but I wasn't sure what was the deciding factor, the text in your post or the attachment example.

You should be able to just add this to your style sheet and adjust the top and left until you get it where you want: (I think that is the class associated with your cbox.)

.cfrm{position:relative; top:-100px; left:-100px;
 }

[• Ambrose •]

Tumbleweed, that is exactly what I want. I changed my mind about the c-box and made it a Toggle thing. But the info center as you put it is the way I wanted it. =)

[Tumbleweed]

Jul 24, 2015 19:43:13 GMT -8 • Ambrose • said:

Tumbleweed, that is exactly what I want. I changed my mind about the c-box and made it a Toggle thing. But the info center as you put it is the way I wanted it. =)

Great, here is the whole "Home" template: (I left my css in there so you can style according to your needs and then move to your style sheet if you want or just leave it there.)


$[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}

<style>
#new_info_center{
width:100%;background-color: #ccccbb;text-align:left;
}
.top_td{width:33%;padding:4px;
}
.inner_t_td{margin:8px; border:1px solid #aaaabb;padding:8px;
}
#mid_td1{width:66%;padding:4px;
}
#mid_td2{width:34%;padding:4px;
}
#bot_td{width:100%;padding:4px;
}
#content{background-color:yellow!important;padding:18px;
}
</style>



{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Forum Information & Statistics</h2></div>
<table id="new_info_center">
    <tr>
        <td class="top_td"><div class="inner_t_td">Total Threads: $[total_threads] </div></td>
        <td class="top_td" style="width:34%;"><div class="inner_t_td">Total Posts: $[total_posts]</div></td>
        <td class="top_td"><div class="inner_t_td">Total Members: $[total_members]</div></td>
    </tr>
    <tr>
        <td id="mid_td1" colspan="2">
                   <div class="inner_t_td">{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></td>
<td id="mid_td2">
                   <div class="inner_t_td">Newest Member: $[newest_user]</div></td>
    </tr>
    <tr>
        <td id="bot_td" colspan="3">
                   <div class="inner_t_td">
           
          <table>
<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>
           
        </div>
        </td>
    </tr>
    <tr>
        <td id="bot_td" colspan="3">
                   <div class="inner_t_td">
          <img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png">
            <img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png">
            <img src="http://i657./uu300/EliteList/Mini%20banners/affi1.png">
         
           
            </div>
               <td>
  </tr>
</table>
</div>
{/if}


Let me know if you have any problems because it seems to never fail something doesn't act the same from site to site.

[Kitty Katt]

Hello, Tumbleweed.

Please pardon my intrusion, but I think I see a slight error. In your <style> tags, you have 2 #mid_td1 and I am thinking that the one with the width: 34% should be#mid_td21? Again, my apologies for jumping in here. It was something that I noticed that confused me, as it would seem that the second instance (with the 34% width) would essentially replace the one with the 66% width with it written as is.

Kitty
==^,.,^==

[Tumbleweed]

Jul 25, 2015 2:33:00 GMT -8 Kitty Katt said:

Hello, Tumbleweed.

Please pardon my intrusion, but I think I see a slight error. In your <style> tags, you have 2 #mid_td1 and I am thinking that the one with the width: 34% should be#mid_td21? Again, my apologies for jumping in here. It was something that I noticed that confused me, as it would seem that the second instance (with the 34% width) would essentially replace the one with the 66% width with it written as is.

Kitty
==^,.,^==

Thank goodness for observant members. Thanks so much Kitty Katt. I fixed it. I know what happened, I copied the previous line, inserted my 2 and failed to delete the 1 resulting in 21. Luckily it didn't mess anything up and thanks to me going in there and fixing it, I found another error having a colspan in that same line when it shouldn't be there.  Luckily the first colspan save the width over-ride in my css.

Thanks again!!

[• Ambrose •]

Thank you. It looks really good so far. I fixed the CSS to a point but noticed a few issues.

First, I lost the empty spaces between the categories I had. I wanted to keep the look the exact same while just putting in the new info center. Easy fix, sorry.

Second, I apparently posted the Proboards tidbit (the part where Proboards advertises its services) twice at the bottom of the forums.

And lastly, I got some random "-->" at the bottom of the forum and I can't figure out where it came from.

One more, I added in the border so it looks like the categories, but to the right you'd see where it looks broken. Can this be fixed? I'm not used to doing the info center this way so I don't want to mess it up! lol

[Tumbleweed]

Jul 26, 2015 8:19:10 GMT -8 • Ambrose • said:

Thank you. It looks really good so far. I fixed the CSS to a point but noticed a few issues.

First, I lost the empty spaces between the categories I had. I wanted to keep the look the exact same while just putting in the new info center. Easy fix, sorry.

Second, I apparently posted the Proboards tidbit (the part where Proboards advertises its services) twice at the bottom of the forums.

And lastly, I got some random "-->" at the bottom of the forum and I can't figure out where it came from.

One more, I added in the border so it looks like the categories, but to the right you'd see where it looks broken. Can this be fixed? I'm not used to doing the info center this way so I don't want to mess it up! lol

I don't see two Proboards service ads on your test site nor do I see the "-->". Did you get that fixed? Usually the "-->" is used when you manually comment something out.

I also see no border that appears broken but you may have to reduce the width by 1px. possible a bit more than 1, if something is getting cut off.

[• Ambrose •]

Hmm, it might just be my browser. Thank you again! =)

[Former Member]

I hope that I am not in error by adding my input.

I remain interested in the Information Center & Its Legend getting a completely new make over.

I would like to add my thumbs up to this style.

[Tumbleweed]

Jul 29, 2015 7:34:32 GMT -8 @womenonly said:

I hope that I am not in error by adding my input.

I remain interested in the Information Center & Its Legend getting a completely new make over.

I would like to add my thumbs up to this style.

Would you mind starting your own thread so if Viscount has any more questions it doesn't get confusing. Also if you have a new layout in mind, it would be great if you could do a really rough drawing on paint or some graphics program or do a detailed explanation in your new thread.

And thanks for the compliment but the design idea goes to Viscount.

[• Ambrose •]

Tumbleweed, you helped me with the programming since I knew nothing about it lol

Yesterday, I was looking at my forums and I realized I might have needed to keep in the Users Online Past 24 Hours part... But instead of putting it back in the info center I thought about putting it in the toggle box between the c-box and the rating icon. Is that possible? I tried copying the code from my test board info center but it was all jumbled.

[Tumbleweed]

Aug 4, 2015 11:49:32 GMT -8 • Ambrose • said:

Tumbleweed, you helped me with the programming since I knew nothing about it lol

Yesterday, I was looking at my forums and I realized I might have needed to keep in the Users Online Past 24 Hours part... But instead of putting it back in the info center I thought about putting it in the toggle box between the c-box and the rating icon. Is that possible? I tried copying the code from my test board info center but it was all jumbled.

Sorry, since I can't see your site, not sure what toggle box but you should be able to copy this part and then the users part would go where the blue is:

{if $[show_stats]}
<div class="container stats">

The users online last 24 hour here

</div>

{/if}

And then to get that actual users code, copy starting from the first table below this to the end of the closing table tag:

<tr class="last">

[• Ambrose •]

Tumbleweed

I obviously did it wrong and I'm already confused with it... xD Here's the forums; areion.boards.net