blog documentation FAQ followers forum marketplace services youtube

solved JR Chat Icon

The Jamroom Network » Forum » Using Jamroom » Page » JR Chat Icon
Dazed
Dazed
@dazed
8 years ago
1,022 posts
Is there a way to make the chat icon change color upon new unread texts?

Thanks
updated by @dazed: 04/04/17 06:33:19PM
brian
@brian
8 years ago
10,148 posts
Dazed:
Is there a way to make the chat icon change color upon new unread texts?

Thanks

It already does - if there are new posts in chat when chat is minimized, it will be highlighted. Looking at your site however, your chat is messed up - something is broken and causing the chat to be added twice.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
brian
@brian
8 years ago
10,148 posts
I've got the chat working properly now on your site. What I did is add a little check into the chat listener to ensure it can only added the chat template code to a page ONCE. That way, even if your templates are not correct (i.e. double closing body tag) then it still works right.

Let me know if that looks better.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
8 years ago
1,022 posts
Much better thanks. Brian any idea why when I switch to default audio pro with dark skin the chat s dark yet on my clone I still see chat in white when using dark?
brian
@brian
8 years ago
10,148 posts
Dazed:
Much better thanks. Brian any idea why when I switch to default audio pro with dark skin the chat s dark yet on my clone I still see chat in white when using dark?

CSS differences? What does your developer tools show you?


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
8 years ago
1,022 posts
brian:
Dazed:
Much better thanks. Brian any idea why when I switch to default audio pro with dark skin the chat s dark yet on my clone I still see chat in white when using dark?

CSS differences? What does your developer tools show you?

Pretty pictures? I have no idea I have never looked at it hehe. No idea what it does or how to use it.
brian
@brian
8 years ago
10,148 posts
The Firefox dev tools make it really easy to see what CSS is being applied to what sections:

1) Tools -> Web Developer -> Toggle Tools
2) Click the "Inspector" tab in the developer tools
3) Click the icon on the VERY FAR left of the tabs - it's a small square with a cursor pointer (see the red box in my screenshot)
4) Click on the website what it is you want to inspect - i.e. a button, chat pane, etc. You'll see as you move your mouse around it "highlights" the sections of the code source.
5) after clicking on something you'll see the CSS RULES get loaded on the right. You can then see what is overriding stuff, make changes, play with stuff, etc.

Spend 5 minutes in it and you'll see how it can quickly help identify issues on your site.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
8 years ago
1,022 posts
Ahhh I thought you meant dev tools in JR. I use firebug daily which is the same thing. I spend a lot of time writing xpath on a daily basis. The css rules I have not seen but will look.
Dazed
Dazed
@dazed
8 years ago
1,022 posts
looking at this I have no idea why it is invoking the light chat. I cloned the skin again and it worked fine. But in my cloned skin it remains light.
brian
@brian
8 years ago
10,148 posts
Dazed:
looking at this I have no idea why it is invoking the light chat. I cloned the skin again and it worked fine. But in my cloned skin it remains light.

So in the developer tools look at the CSS rules - you'll see why it's remaining light.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
8 years ago
1,022 posts
I must be missing it!
Dazed
Dazed
@dazed
8 years ago
1,022 posts
screenshot
brian
@brian
8 years ago
10,148 posts
You have a weird "body_1" tag - you'll want to remove that.

What part of the chat is incorrect? Is it supposed to be black background or something? Are you sure you put the right chat.css file in?


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Dazed
Dazed
@dazed
8 years ago
1,022 posts
uh figured it out lol. Looks like the css was updated and I had the old version.
Dazed
Dazed
@dazed
8 years ago
1,022 posts
There was a whole add in for chat:


* @title Chat Room Message */
/* @help This is the chat room new message section */
#jrchat-new-message {
    background-color:#000000;
    position: absolute;    right: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    padding: 10px 8px;
    box-sizing: border-box;
    border:1px solid #222222;
}
douglas
@douglas
8 years ago
2,791 posts
Dazed:
There was a whole add in for chat:


* @title Chat Room Message */
/* @help This is the chat room new message section */
#jrchat-new-message {
    background-color:#000000;
    position: absolute;    right: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    padding: 10px 8px;
    box-sizing: border-box;
    border:1px solid #222222;
}


AudioPro has two areas for chat CSS, there is a chat.css file for the light theme and the dark theme has the chat CSS in the skin_dark.css file.

Hope this helps!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Dazed
Dazed
@dazed
8 years ago
1,022 posts
Thanks Douglas. I was comparing my file and the default and saw that I did not have the jrchat CSS so that must have been a recent addition.
douglas
@douglas
8 years ago
2,791 posts
Dazed:
Thanks Douglas. I was comparing my file and the default and saw that I did not have the jrchat CSS so that must have been a recent addition.

Yep, latest release should have it.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos