Condensed Facebook Chat Overlay

Discussion in 'General Guides and Tips' started by Zethro, Jan 27, 2019.

  1. Zethro

    Zethro Elite Gamer

    Topics:
    176
    For those needing a more condensed facebook chat overlay than the one I posted earlier for your stream. This CSS will show only 1 comment (the newest comment) you choose/move/size how much of that comment you want shown or remove their profile pic.

    You can change the view and wrap settings inside this line:

    ._32cm {
    width: 530px; <this will tell when to wrap your lines.
    overflow: hidden;
    position: relative;
    height: 3.5em; <this will tell how much of the area to view before cutting off.
    }

    You can change/move/size profile pic inside this line:

    ._8r {
    position: relative;
    width: 60px;
    height: 60px;
    }

    You can simple remove the profile pic just add this line to the very bottom:

    ._8r {
    display: none;
    }

    OBS:
    Source - Add Browser - URL: https://www.facebook.com/gaming/streamer/chat/
    (side note, if you have issues, put your page number on the end like this:: https://www.facebook.com/gaming/streamer/chat/?page=################ (# = your page number))

    Width: 600 < important needs to be bigger than your wrap
    Height: 185 < if you add more to your view height then increase this.

    Custom CSS:

    Code:
    body {
    background-color: rgba(255, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
    }
    a {
    color: #FFFFFF;
    }
    
    ._6n4l {
    font-size: 20px;
    font-weight: 800;
    font-family: sans-serif;
    }
    
    ._42ef {
    position: relative;
    }
    
    
    ._32cm {
    width: 530px;
    overflow: hidden;
    position: relative;
    height: 3.5em;
    }
    
    ._4gy4 ._2fr0 {
    color: #FFFFFF;
    font-size: 21px;
    }
    
    
    ._6a44 {
    visibility: hidden
    }
    ._6a44 > span > a {
    visibility: hidden !important
    }
    ._6a44 > span > a:nth-child(1) {
    visibility: initial !important
    }
    
    
    ._uql {
    visibility: hidden
    }
    ._uql > span > a {
    visibility: hidden !important
    }
    ._uql > span > a:nth-child(1) {
    visibility: initial !important
    }
    ._uq1 {
    overflow-y: hidden;
    }
    
    ._25zr,
    ._3-8j {
    display: none;
    }
    ._4-u2 ._4-u3 {
    border: 0;
    }
    ._4-u2 {
    border: 0
    }
    ._4-u8 {
    background: none
    }
    ._2l6k {
    display: none
    }
    ._2l6i {
    padding-top: 8px
    }
    
    ._4y56 {
    color: #FFFFFF;
    }
    ._8r {
    position: relative;
    width: 60px;
    height: 60px;
    }
    
    ._6a43 {
    position: relative;
    
    }
     

Similar General Guides and Tips Topics

Loading...

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice