Question / Help Browser Source CSS Not Working

Gehab

Gehab

New Member
So I'm having a problem here where no matter what CSS I use for my browser source, it does not seem to be applied.
Currently trying to set up a customized YouTube stream chat. Like I said, I've tried multiple different CSS's so I know 100% the actual code is not the problem.

Restarting & reinstalling OBS Studio has not helped.

I'm on Windows 10.
 
O

Osiris

Active Member
CSS works fine in the browser source for Youtube chat, so there must be something wrong with the CSS you are using.
 
Gehab

Gehab

New Member
Osiris said:
CSS works fine in the browser source for Youtube chat, so there must be something wrong with the CSS you are using.
Click to expand...
It's not the CSS. Like I said, I've tried using multiple ones from differnet streamers I know (the CSS works for them) and websites I've tried.

Unless I somehow put them in the wrong way, IDK what it is.
 
Gehab

Gehab

New Member
Osiris said:
Please provide the css you are using.
Click to expand...
/* CREDITS ===================================================================== ============================================================================= */ /** * @file Youtube Popout Chat BrowserSource stylesheet for use with OBS. The latest version can always be found at the following url: https://bitbucket.org/Frosthaven/youtube-chat-obs-styles/ … * @author Frosthaven @thefrosthaven * @todo Complete donation message styling */ /* USER CONFIG ================================================================= ============================================================================= */ /* Load Google Font (Optional) ----------------------------- Use any import command for fonts at https://fonts.google.com */ @import url('https://fonts.googleapis.com/css?family=Sigmar+One …'); /* Set Page Font ------------------------------------------- font-family can be any font installed on your computer or one that you imported from above */ #items #message, #items #author-name, #items .mention.yt-live-chat-text-message-renderer { font-family: "Sigmar One"; font-size:25px; } /* Colors -------------------------------------------------- color settings can be in one of the following formats: - hex - color: #ffffff; - rgb - color: rgb(255,255,255); - rgba - color: rgba(255,255,255,1); If you want an interactive rgba color picker, try this url: http://www.css3maker.com/css-3-rgba.html */ /* User Name Color */ #items #author-name { color: #999999; } /* Owner Name Color */ #items #author-name[type='owner'].yt-live-chat-text-message-renderer, #items .yt-live-chat-author-badge-renderer-0[type='owner'] { color:#ffd600; } /* Moderator Name Color */ #items #author-name[type='moderator'].yt-live-chat-text-message-renderer, #items .yt-live-chat-author-badge-renderer-0[type='moderator'] { color:#5e84f1; } /* Message Text Color */ #items #message.yt-live-chat-text-message-renderer { color:#F5F5F5; } /* Chat Message Background (even rows) */ #items yt-live-chat-text-message-renderer:nth-child(even) { background-color: rgba(0,0,0,0); } /* Chat Message Background (odd rows) */ #items yt-live-chat-text-message-renderer:nth-child(odd) { background-color: rgba(0,0,0,0); } /* ADVANCED ==================================================================== ============================================================================= */ /* Transparency And Borderless */ body { margin: 0px auto; overflow: hidden; } body, yt-live-chat-renderer, #content-pages, #chat-messages { background:rgba(0,0,0,0) !important; } /* Hide Scrollbar */ * ::-webkit-scrollbar { width: 0 !important; opacity: 0 !important; } * { overflow: hidden !important; } /* Stay Scrolled To Bottom At All Times */ #items { position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; overflow:hidden !important; } /* Hide Chat Elements */ #items .yt-live-chat-author-badge-renderer-0, yt-live-chat-pinned-message-renderer, yt-live-chat-ticker-renderer, yt-live-chat-ticker-paid-message-item-renderer, #action-panel, yt-live-chat-header-renderer, #show-more, yt-live-chat-text-message-renderer #menu { display:none !important; } /* Minimize Chat Padding */ .yt-live-chat-text-message-renderer-0 { padding:-20px -20px; } /* Remove Link Decorations */ #items http://a.yt -live-chat-text-message-renderer { text-decoration: none; } /* Space Between Message Blocks */ #items yt-live-chat-text-message-renderer { margin-bottom:-2px; } /* Pretty Chat Panels */ #items yt-live-chat-text-message-renderer { border-radius: 4px; } /* Not Working Yet / Incompatible with CLR Browser */ #items .mention { color:#ff0000; background:none; padding:0; }
 
O

Osiris

Active Member
That CSS works fine here.

img_1520543979_NDUUBqXE9bv.png
 
C

Catmaster

New Member
Same problem here.

The CSS I have been using for 5 months on stream is not being applied anymore.

Nothing changed, it just doesn't work anymore from one day to the next.

Pretty frustrating

How it is supposed to Look:
ZQNssdZ.jpg


How it looks since today:
5sQ87vZ.jpg


The CSS I am using:



/**
* General Settings
*/
body {
background-color: rgba(40, 40, 40, 0.32);
color: #FFFFFF;
margin: 0 12px;
overflow: hidden;
font-family: 'Fontin';
src: url('file:///C:/Fontin-SmallCaps.ttf') format('truetype');
font-weight: normal;
font-style: normal;
text-shadow:
-1px -1px 2px #000000,
-1px 1px 2px #000000,
1px -1px 2px #000000,
1px 1px 2px #000000;
}

.chat-container, .ember-chat-container {
background: rgba(0,0,0,0);
}

/**
* Badge Removal
*
* To remove additional badge types - moderator, bits, etc - just make a copy of the one of the following badge selectors and replace the word inbetween the quotes with the hover text
*/
img.badge[alt="Broadcaster"] {
display: none;
}

img.badge[alt="Moderator"] {
display: none;
}

img.badge[alt="Subscriber"] {
display: none;
}

img.badge[alt="Twitch Prime"] {
display: none;
}

img.badge[alt="Turbo"] {
display: none;
}

img.badge[alt="Verified"] {
display: none;
}

/**
* Remove the header section
*/

.ember-chat .chat-room {
top: 0;
}

.ember-chat .chat-header {
display: none;
}

.ember-chat .chat-messages .chat-line.admin {
display: none;
}

/**
* Remove the footer section
*/

.ember-chat .chat-room {
bottom: -112px;
}
/**
* Font Size & Color
*/
.ember-chat .chat-messages .chat-line {
font-size: 18px;
line-height: 20px;
}
.chat-container, .ember-chat-container {
color: #FFFFFF;
}
 
You must log in or register to reply here.
Top