Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| widgets [2016/08/26 06:33] – repentgamingtv | widgets [2020/11/29 22:07] (current) – Updated chat link from v10 to v11 (Same as chat Deepbot opens up) dante557 | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ~~NOTOC~~ | ||
| ====== How to Setup Notifications/ | ====== How to Setup Notifications/ | ||
| Line 5: | Line 6: | ||
| __**Notifications are VIP Only**__ | __**Notifications are VIP Only**__ | ||
| - | To get VIP, you will need to make a payment of $5/month **[[http:// | + | To get VIP, you will need to make a payment of $5/month **[[http:// |
| * **[[widgets# | * **[[widgets# | ||
| * **[[widgets# | * **[[widgets# | ||
| * **[[widgets# | * **[[widgets# | ||
| + | * **[[widgets# | ||
| * **[[widgets# | * **[[widgets# | ||
| Line 53: | Line 55: | ||
| | **Drag Race** | [[http:// | | **Drag Race** | [[http:// | ||
| | **Follow** | [[http:// | | **Follow** | [[http:// | ||
| - | | **GameWisp** | [[http:// | + | | **Host** | [[http:// |
| - | | **Host** | [[http:// | + | |
| | **Leader Board/Event List** | [[http:// | | **Leader Board/Event List** | [[http:// | ||
| - | | **OBS/ | + | | **OBS/ |
| | **Roulette** | [[http:// | | **Roulette** | [[http:// | ||
| | **Subscriber** | [[http:// | | **Subscriber** | [[http:// | ||
| | **Subscriber Goal Tracker** | [[http:// | | **Subscriber Goal Tracker** | [[http:// | ||
| | **Widgets** | [[http:// | | **Widgets** | [[http:// | ||
| + | |||
| **Note**: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means: | **Note**: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means: | ||
| Line 105: | Line 107: | ||
| | **Drag Race** | [[http:// | | **Drag Race** | [[http:// | ||
| | **Follow** | [[http:// | | **Follow** | [[http:// | ||
| - | | **GameWisp** | [[http:// | + | | **Host** | [[http:// |
| - | | **Host** | [[http:// | + | |
| | **Leader Board/Event List** | [[http:// | | **Leader Board/Event List** | [[http:// | ||
| - | | **OBS/ | + | | **OBS/ |
| | **Roulette** | [[http:// | | **Roulette** | [[http:// | ||
| | **Subscriber** | [[http:// | | **Subscriber** | [[http:// | ||
| Line 154: | Line 155: | ||
| | **Drag Race** | [[http:// | | **Drag Race** | [[http:// | ||
| | **Follow** | [[http:// | | **Follow** | [[http:// | ||
| - | | **GameWisp** | [[http:// | + | | **Host** | [[http:// |
| - | | **Host** | [[http:// | + | |
| | **Leader Board/Event List** | [[http:// | | **Leader Board/Event List** | [[http:// | ||
| - | | **OBS/ | + | | **OBS/ |
| | **Roulette** | [[http:// | | **Roulette** | [[http:// | ||
| | **Subscriber** | [[http:// | | **Subscriber** | [[http:// | ||
| Line 178: | Line 178: | ||
| * If you plan on using Custom CSS, make sure to tick the Custom CSS box near the bottom. Then Hit Edit CSS Button to input css. | * If you plan on using Custom CSS, make sure to tick the Custom CSS box near the bottom. Then Hit Edit CSS Button to input css. | ||
| * **Note:** If you do use Custom CSS, make sure to replace single quotes( ' ) with double quotes ( " ) in the CSS. | * **Note:** If you do use Custom CSS, make sure to replace single quotes( ' ) with double quotes ( " ) in the CSS. | ||
| + | |||
| + | ---- | ||
| + | |||
| + | ===== CLR Browser URLs ===== | ||
| + | |||
| + | ---- | ||
| + | |||
| + | ^ Notification/ | ||
| + | | **Cheer** | [[http:// | ||
| + | | **Cheer Goal Tracker** | [[http:// | ||
| + | | **Donation** | [[http:// | ||
| + | | **Donation Goal Tracker** | [[http:// | ||
| + | | **Drag Race** | [[http:// | ||
| + | | **Follow** | [[http:// | ||
| + | | **Host** | [[http:// | ||
| + | | **Leader Board/Event List** | [[http:// | ||
| + | | **OBS/ | ||
| + | | **Roulette** | [[http:// | ||
| + | | **Subscriber** | [[http:// | ||
| + | | **Subscriber Goal Tracker** | [[http:// | ||
| + | | **Widgets** | [[http:// | ||
| ---- | ---- | ||
| Line 190: | Line 211: | ||
| ^ Notification/ | ^ Notification/ | ||
| - | | **Cheer** | [[http:// | + | | **Cheer** | [[widgets#Cheer Notification|Here]] || |
| - | | **Cheer Goal Tracker** | [[http:// | + | |
| | **Donation** | [[widgets# | | **Donation** | [[widgets# | ||
| | **Donation Goal Tracker** | [[widgets# | | **Donation Goal Tracker** | [[widgets# | ||
| | **Drag Race** | [[widgets# | | **Drag Race** | [[widgets# | ||
| | **Follow** | [[widgets# | | **Follow** | [[widgets# | ||
| - | | **GameWisp** | [[widgets# | ||
| | **Host** | [[widgets# | | **Host** | [[widgets# | ||
| | **Leader Board/Event List** | [[widgets# | | **Leader Board/Event List** | [[widgets# | ||
| | **OBS/ | | **OBS/ | ||
| - | | **Roulette** | [[http:// | + | | **Streamer Threads** | [[widgets#Streamer Threads Notification|Here]] || |
| | **Subscriber** | [[widgets# | | **Subscriber** | [[widgets# | ||
| | **Subscriber Goal Tracker** | [[widgets# | | **Subscriber Goal Tracker** | [[widgets# | ||
| | **Widgets** | [[widgets# | | **Widgets** | [[widgets# | ||
| - | |||
| - | |||
| - | |||
| - | * [[widgets# | ||
| Line 214: | Line 229: | ||
| * [[http:// | * [[http:// | ||
| + | ---- | ||
| + | |||
| + | ==== Cheer Notification ==== | ||
| + | |||
| + | ---- | ||
| + | <code css> | ||
| + | body { | ||
| + | background-color: | ||
| + | color: black; | ||
| + | } | ||
| + | # | ||
| + | position: absolute; | ||
| + | display: none; | ||
| + | top: 0px; | ||
| + | left: 0px; | ||
| + | width: 800px; | ||
| + | height: 200px; | ||
| + | } | ||
| + | .cheerleftimg { | ||
| + | position: absolute; | ||
| + | top: 0px; | ||
| + | left: 0px; | ||
| + | width: 120px; | ||
| + | height: 120px; | ||
| + | background: url(http:// | ||
| + | background-repeat: | ||
| + | background-position-y: | ||
| + | border: none; | ||
| + | } | ||
| + | .cheerleftamount { | ||
| + | position: absolute; | ||
| + | top: 120px; | ||
| + | left: 0px; | ||
| + | width: 120px; | ||
| + | height: 30px; | ||
| + | text-align: center; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | font-size: 24px; | ||
| + | } | ||
| + | .cheerrightamount { | ||
| + | position: absolute; | ||
| + | top: 120px; | ||
| + | left: 680px; | ||
| + | width: 120px; | ||
| + | height: 30px; | ||
| + | text-align: center; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | font-size: 24px; | ||
| + | } | ||
| + | .cheerrightimg { | ||
| + | position: absolute; | ||
| + | top: 0px; | ||
| + | left: 680px; | ||
| + | width: 120px; | ||
| + | height: 120px; | ||
| + | background: url(http:// | ||
| + | background-repeat: | ||
| + | background-position-y: | ||
| + | } | ||
| + | #header { | ||
| + | position: absolute; | ||
| + | top: 20px; | ||
| + | left: 120px; | ||
| + | width: 560px; | ||
| + | height: 60px; | ||
| + | text-align: center; | ||
| + | font-family: | ||
| + | font-weight: | ||
| + | font-size: 28px; | ||
| + | opacity: 0; | ||
| + | } | ||
| + | .cheername {} .cheerheaderamount {} .cheermsg { | ||
| + | position: absolute; | ||
| + | top: 60px; | ||
| + | left: 120px; | ||
| + | width: 560px; | ||
| + | height: 60px; | ||
| + | font-family: | ||
| + | font-size: 20px; | ||
| + | font-weight: | ||
| + | text-align: center; | ||
| + | } | ||
| + | .cheermsg { | ||
| + | opacity: 0; | ||
| + | } | ||
| + | .cheername: | ||
| + | content: ' cheered'; | ||
| + | } | ||
| + | .cheerheaderamount: | ||
| + | content: ' bits!'; | ||
| + | } | ||
| + | .emote { | ||
| + | margin: -5px 0px; | ||
| + | max-height: 26px; | ||
| + | background-position: | ||
| + | vertical-align: | ||
| + | display: inline-block; | ||
| + | background-repeat: | ||
| + | } | ||
| + | .triggerHeader { | ||
| + | animation: mode0 3s 1; | ||
| + | } | ||
| + | .triggerMsg { | ||
| + | animation: slideUp 5s 1; | ||
| + | } | ||
| + | @-webkit-keyframes mode0 { | ||
| + | 0% { | ||
| + | transform: scale(0); | ||
| + | opacity: 0.0; | ||
| + | } | ||
| + | 60% { | ||
| + | transform: scale(1.1); | ||
| + | } | ||
| + | 80% { | ||
| + | transform: scale(0.9); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | 100% { | ||
| + | transform: scale(1); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | @-webkit-keyframes slideUp { | ||
| + | 0% { | ||
| + | -webkit-transform: | ||
| + | opacity: 0; | ||
| + | } | ||
| + | 40% { | ||
| + | -webkit-transform: | ||
| + | opacity: 0; | ||
| + | } | ||
| + | 70% { | ||
| + | -webkit-transform: | ||
| + | } | ||
| + | 80% { | ||
| + | -webkit-transform: | ||
| + | } | ||
| + | 90% { | ||
| + | -webkit-transform: | ||
| + | } | ||
| + | 95% { | ||
| + | -webkit-transform: | ||
| + | } | ||
| + | 100% { | ||
| + | -webkit-transform: | ||
| + | opacity: 1; | ||
| + | } | ||
| + | } | ||
| + | </ | ||
| ---- | ---- | ||
| Line 672: | Line 838: | ||
| visibility: hidden; | visibility: hidden; | ||
| padding-top: | padding-top: | ||
| - | } | ||
| - | </ | ||
| - | |||
| - | ---- | ||
| - | |||
| - | === GameWisp Notification === | ||
| - | |||
| - | ---- | ||
| - | |||
| - | <code css> | ||
| - | body { | ||
| - | background-color: | ||
| - | color: black; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | display: none; | ||
| - | position: absolute; | ||
| - | top: 0px; | ||
| - | left: 0px; | ||
| - | width: 670px; | ||
| - | height: 200px; | ||
| - | background-repeat: | ||
| - | background-position-y: | ||
| - | background-image: | ||
| - | } | ||
| - | |||
| - | # | ||
| - | margin-left: | ||
| - | padding-top: | ||
| - | width: 455px; | ||
| - | text-align: center; | ||
| - | line-height: | ||
| - | font-size: 32px; | ||
| - | font-family: | ||
| - | text-shadow: | ||
| - | text-transform: | ||
| - | color: ##FF0000; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | position: absolute; | ||
| - | top: 53px; | ||
| - | margin-left: | ||
| - | width: 380px; | ||
| - | text-align: left; | ||
| - | line-height: | ||
| - | font-size: 34px; | ||
| - | font-family: | ||
| - | text-shadow: | ||
| - | color: ##FF0000; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | position: absolute; | ||
| - | top: 65px; | ||
| - | margin-left: | ||
| - | width: 455px; | ||
| - | text-align: center; | ||
| - | line-height: | ||
| - | font-size: 30px; | ||
| - | font-family: | ||
| - | text-shadow: | ||
| - | color: ##FF0000; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | position: absolute; | ||
| - | top: 65px; | ||
| - | margin-left: | ||
| - | width: 455px; | ||
| - | text-align: center; | ||
| - | line-height: | ||
| - | font-size: 30px; | ||
| - | font-family: | ||
| - | text-shadow: | ||
| - | color: ##FF0000; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | content: " Months!"; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | content: "New Sub!"; | ||
| - | } | ||
| - | |||
| - | # | ||
| - | font-family: | ||
| - | font-size: 28px; | ||
| - | line-height: | ||
| - | text-transform: | ||
| - | font-weight: | ||
| - | color: red; | ||
| - | border: 7px solid rgba(255, 0, 0, 0.5); | ||
| - | float: left; | ||
| - | padding: 10px 7px; | ||
| - | border-radius: | ||
| - | opacity: 0.8; | ||
| - | -webkit-transform: | ||
| - | -o-transform: | ||
| - | -moz-transform: | ||
| - | -ms-transform: | ||
| - | position: absolute; | ||
| - | top: 20%; | ||
| - | left: 80%; | ||
| } | } | ||
| </ | </ | ||