Author Topic: Change look of Command widgets? (CSS)  (Read 1304 times)

0 Members and 1 Guest are viewing this topic.

Bwana

  • Youngling
  • *
  • Posts: 9
  • Karma: +1/-0
    • View Profile
  • Twitch Name: bwana
Change look of Command widgets? (CSS)
« on: April 16, 2015, 08:27:59 PM »
Is there a way we can override the CSS of the new command widgets?  I'd love to be able to change the fonts, colors, etc.  I checked the wiki and didn't see anything regarding it.

Thanks

IanChandler1990

  • Padawan
  • **
  • Posts: 84
  • Karma: +0/-0
    • View Profile
    • Twitch
  • Twitch Name: Ianchandler1990
Re: Change look of Command widgets? (CSS)
« Reply #1 on: April 17, 2015, 12:17:41 AM »
Is there a way we can override the CSS of the new command widgets?  I'd love to be able to change the fonts, colors, etc.  I checked the wiki and didn't see anything regarding it.

Thanks

Hi Bwana,

All the css can be found here window size for CLR(in obs) will be width 400 height 120

Code: [Select]
#infoContainer {
                width: 0px;
                height: 0px;
                background: #2e5794;
                position: absolute;
                top: 0px;
                left: 0px;
                overflow: hidden;
                color: white;
                font-family: 'Dolce Vita';
                -webkit-box-shadow: 0px 0px 20px #0f3369;
               
            }
            #infoHeader {
                width: 400px;
                height: 26px;
                background: #0f3369;
                position: relative;
                overflow: hidden;
                text-align: center;
                font-size: 24px;
            }
            #infoContent {
                width: 400px;
                height: 94px;
                background: #2e5794;
                position: relative;
                overflow: hidden;
                color: white;
            }
            #infoContentText {
                text-align: center;
                display: table-cell;
                height: 80px;
                width: 300px;
                vertical-align: middle;
            }
            #twitchLogo {
                width: 90px;
                height: 90px;
                float: left;
                background-image: url("images/twitchLogo.png");
                background-repeat: no-repeat;
                background-size: contain;
            }

Regards,

Ian Chandler