hearty-stream-elements-chat-widget/README.md

F2U ~ Heart Shaped Chat Widget ~ for StreamElements

Original code from: https://ko-fi.com/s/76ed4108a5

Check them out and support them for this great widget!

---

This repository has some changes made in original code, to make it easier to change colors of the widget to make it fit your stream asthetics!

---

Changes that were made

• Renamed files (for text editor's highlighting support):

  • css.txt -> css.css
  • js.txt -> js.js
  • html.txt -> html.html
  • data.txt -> data.json
  • fields.txt -> fields.json

• extracted all color settings to variables

  • in css.css as :root{...} stylesheet variables
  • in js.js as colorSettings javascript data object

---

---

Colors mapping

Message Icons

---

Streamer

js.js > colorSettings.streamerIconColor

Mod

js.js > colorSettings.modIconColor

VIP

js.js > colorSettings.vipIconColor

Sub

js.js > colorSettings.subIconColor

---

Streamer's Messages

---

css.css > --rouded-corners-and-heart-next-to-username-color

---

css.css > --top-right-heart-and-bottom-left-heart-color

---

css.css > --top-and-bottom-border-lines-color

---

js.js > colorSettings.streamerRightBorderColor

---

Non-Streamer's Messages

---

js.js > colorSettings.messageMentionedUsernameColor

---

js.js > colorSettings.nonStreamerHeartTopLeftColor

---

js.js > colorSettings.heartInChatBubbleOnTheRightColor

---

js.js > colorSettings.nonStreamerTopRightCornerColor

---

js.js > colorSettings.nonStreamerBottomRightCornerColor

---

js.js > colorSettings.nonStreamerBottomLeftCornerColor

---

js.js > colorSettings.nonStreamerHeartBottomLeftColor

---

css.css > --right-border-color

---

css.css > --bottom-border-color

---

css.css > --top-border-color

---

css.css > --top-right-border-piece-color

---

All Messages

---

js.js > colorSettings.cornerPieceUnderBadgeColor

---

js.js > colorSettings.messageMentionedUsernameColor

---

css.css > --background-gradient-top-color

---

css.css > --background-gradient-bottom-color

---

css.css > --message-text-color

---

css.css > --mod-icon-background-color

---

css.css > --username-bubble-background-color

---

css.css > --username-bubble-text-color

---

Events

---

js.js > colorSettings.eventBorderTopRightCornerColor

---

js.js > colorSettings.eventBorderTopLeftCornerColor

---

js.js > colorSettings.eventBorderBottomRightCornerColor

---

js.js > colorSettings.eventBorderBottomLeftCornerColor

---

js.js > colorSettings.eventTopLeftHeartColor

---

js.js > colorSettings.eventTopRightHeartColor

---

js.js > colorSettings.eventBottomHeartColor

---

js.js > colorSettings.eventLeftHeartColor

---

js.js > colorSettings.eventBackgroundLeftEnvelopeInsidesColor

---

js.js > colorSettings.eventBackgroundLeftEnvelopeOuterBorderColor

---

js.js > colorSettings.eventBackgroundLeftEnvelopeBottomLeftInsideLineColor

---

js.js > colorSettings.eventBackgroundLeftEnvelopeBottomRightInsideLineColor

---

js.js > colorSettings.eventBackgroundLeftEnvelopeInsideTopLinesColor

---

js.js > colorSettings.eventBackgroundRightEnvelopeInsidesColor

---

js.js > colorSettings.eventBackgroundRightEnvelopeOuterBorderColor

---

js.js > colorSettings.eventBackgroundRightEnvelopeBottomLeftInsideLineColor

---

js.js > colorSettings.eventBackgroundRightEnvelopeBottomRightInsideLineColor

---

js.js > colorSettings.eventBackgroundRightEnvelopeInsideTopLinesColor

---

js.js > colorSettings.eventBackgroundLeftHeartColor

---

js.js > colorSettings.eventBackgroundLeftWhiskersColor

---

js.js > colorSettings.eventBackgroundRightWhiskersColor

---

When subscribed:

js.js > colorSettings.eventBackgroundSubscribeHeartLeftColor

When re-subscribed:

js.js > colorSettings.eventBackgroundReSubscribeHeartLeftColor

When gifted more than one sub:

js.js > colorSettings.eventBackgroundGiftManyHeartLeftColor

When gifted one sub:

js.js > colorSettings.eventBackgroundGiftOneHeartLeftColor

When giving bits:

js.js > colorSettings.eventBackgroundCheerHeartLeftColor

When donating:

js.js > colorSettings.eventBackgroundDonationHeartLeftColor

---

When subscribed:

js.js > colorSettings.eventBackgroundSubscribeHeartRightColor

When re-subscribed:

js.js > colorSettings.eventBackgroundReSubscribeHeartRightColor

When gifted more than one sub:

js.js > colorSettings.eventBackgroundGiftManyHeartRightColor

When gifted one sub:

js.js > colorSettings.eventBackgroundGiftOneHeartRightColor

When giving bits:

js.js > colorSettings.eventBackgroundCheerHeartRightColor

When donating:

js.js > colorSettings.eventBackgroundDonationHeartRightColor

---

css.css > --event-background-gradient-top-color

---

css.css > --event-background-gradient-bottom-color

---

css.css > --event-right-border-color

---

css.css > --event-icon-background-color

---

css.css > --event-text-color

---

css.css > --event-top-center-border-color

---

css.css > --event-top-right-border-color

---

css.css > --event-bottom-left-border-color

---

css.css > --event-bottom-right-border-color

---

css.css > --event-left-top-border-color

---

css.css > --event-left-bottom-border-color

---