search

sdelements / lets-chat

Self-hosted chat app for small teams
http://sdelements.github.io/lets-chat
MIT License
9.77k stars 1.58k forks source link

Custom room-unique styles/backgrounds #654

Open justinb01981 opened 8 years ago

justinb01981 commented 8 years ago

https://github.com/justinb01981/lets-chat-custom-css-style

I've done some work to add an attribute to each room that contains some custom cssText (stylesheet) data that gets injected when the room renders. Its editable from the room-edit dialog, under "Custom Style".

An example to load a background image that spans the chat window, and lower the opacity of the messages in front of it...:

.lcb-room-chat { background-image:url("http://www.domain17.net/NeonLightSm.JPG"); background-size:90%; background-repeat:no-repeat; } /* lower opacity of messages so we can see background */ .lcb-messages { opacity:0.8; color:red;

}

My branch is here, and I think the changes necessary are fairly straightforward, but if there is some more work I could do to make it more acceptable for upstream inclusion, I'd like to try and do that.

https://github.com/justinb01981/lets-chat-custom-css-style

screenshot from 2015-12-18 10 26 06

justinb01981 commented 8 years ago

Bump?

hhaidar commented 8 years ago

We can't merge this in @justinb01981, it's a possible XSS vector :(

justinb01981 commented 8 years ago

Gotcha. If I modified the code to disallow writing CSS directly and instead only manipulate the background-image URL/color based on some selections, would that work?

hhaidar commented 8 years ago

@justinb01981 What you have is a really neat feature, but we're a little hesitant to merge it in :(

How about something lighter like an accent/theme color per room?