Help with a punchtab problem.

[Josh Hall]

I am trying to use the achievements punchtab option.

When I add the code in the custom code section it works fine but even when the user hasn't clicked the badges button ( bottom left ) the chat is still unclickable. When the badges button is clicked the chat is covered. I can't see how the code can be altered. I have tried adding the code to a div and changing the z-index but with no success.

This is the punchtab code - 

<script type="text/javascript" charset="utf-8">
var _btq = _btq || [];
var _punchtab_settings_badges = {
position: {x: "left", y: "bottom"},
key: "82d0f2*****360744e42a4***********"
};

(function() {
var pt = document.createElement('script'); pt.type = 'text/javascript'; pt.async = true;
pt.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'static.punchtab.com/js/pb.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pt, s);
})();
</script>

This is the screenshot of the problem -

Any help would be great. Thanks

[Chris Herzig]

I had the same issue. You can either move the tab to the top or get rid of badges. I deleted it off of my site because it was killing the load time.

[Josh Hall]

I can't move it to the top because I've stuck my users menu there but thanks for letting me know about the load time.

[George H. Compton IV]

so far I've only Figured out one option To fix this. Raise the chat bar up 20 pixels.

here's the code I wrote

Placed this in NC custom code box.

<style>
.xg_bottomBar{
    background: url(http://static.ning.com/socialnetworkmain/widgets/chat/gfx/chat.png?...) repeat-x 0 0;
    border: 1px solid #B7B7B7;
    position: absolute;
    bottom: 0px!important;
    width: 100%;
    z-index: 999;
}
.xg_chat.chatFooter #mainChatContainer{
    width: 300px;bottom: 20px!important;}
.xg_chat.chatFooter #userListContainer{
    margin-right: 20px;bottom: 20px!important;
}
</style>

just yell at me if you don't like my idea lol

I will try to come up with a better fix. No guarantees.. lol

[Josh Hall]

I like it, how you make it with them sexy round edges?

[George H. Compton IV]

here's the code that I used for the chat bar and the main chat. :)

<style>

.xg_chat .xg_titleBar{background-color:#036!important;color:#E9F8FE;}
.xg_chatWindow{background:none repeat scroll 0 0 #fff!important;border:1px solid #B7B7B7;color:#036!important;}
.xg_chatWindow img{border:solid 1px #CCC;-moz-box-shadow:1px 1px 3px #999;-webkit-box-shadow:1px 1px 3px #999;box-shadow:1px 1px 3px #999;}
.xg_chat.chatModule .xg_userList.chatTabs > li.active,.xg_chat .xg_titleBar,.xg_chat.chatModule .xg_info.xg_activeConversations,div#xg.xg_widget_chat div.xg_chat div#userListContainer.xg_chatWindow div.xg_theme-ningbar-bc p.chatTitle{background-color:#333;border:3px outset;}
.xg_chat.chatModule .xg_userList.chatTabs li.active:hover{background-color:#666;}
.xg_chat.chatModule .xg_chatWindow .xg_messageListHeading,.xg_messageListFooter{color:#fff;background-color:#333!important;}
.xg_chatWindow li.message:hover,.xg_chatWindow ul.xg_userList li.userEntry:hover{background-color:#E9F8FE;}
.xg_chat.chatModule .xg_chatWindow ul.xg_messageList{border:10px solid #333!important;}
.xg_chat.chatModule .xg_chatWindow .xg_messageListHeading{top:13px!important;}
.xg_chat.chatFooter .xg_bottomBar{border-radius:10px;}

</style>

[Josh Hall]

also added this code to make the chat windows raised too.

.xg_chatWindow{
bottom: 20px!important;}

[George H. Compton IV]

sorry I missed that lol

[Josh Hall]

Nah it's great help George. I raised it to 30px because that's how large punchtab is. I tried to alter the z-index but with no luck.

[George H. Compton IV]

I knew the punchtab was around 30 pixels high but I figured you could still get to it even set at 20px.. just trying to save a whole 10 pixels worth of room. lol

I'm glad we worked around your problem with punchtab.  You have a great day Josh :-)

[Josh Hall]

found a lil problem :/

If you open a private chat then minimize it, it goes to the bottom, can't find the css rule to stop this.

[George H. Compton IV]

Here you go all Fixed :)

just change the 20 to 30 if you like that height better
<style>


.xg_bottomBar{
    background: url(http://static.ning.com/socialnetworkmain/widgets/chat/gfx/chat.png?...) repeat-x 0 0;
    border: 1px solid #B7B7B7;
    position: absolute;
    bottom: 0px!important;
    width: 100%;
    z-index: 999;
}
.xg_chat.chatFooter{font-size: 11px;line-height: 21px;bottom: 20;}
.xg_chat.chatFooter #mainChatContainer{
    width: 300px;bottom: 20px!important;}
.xg_chat.chatFooter #userListContainer{
    margin-right: 20px;bottom: 20px!important;}
.xg_chatWindow{
        bottom: 20px!important;}


</style>

[Josh Hall]

Still does the same as the screenshot I showed you before? Dunno if it's something I'm doing but I did just C/P :/