Better messenger.com for Vivaldi web panel (CSS modification)


  • Vivaldi Translator

    Messenger.com is too wide for average web panel in Vivaldi, but IMO for Facebook messaging it's better than m.facebook.com. So I made some improvements and want to share it with Vivaldi users. :slight_smile:

    At first you can view current state and the result you'll get. See the screenshots below.

    Let's begin:

    • Add https://www.messenger.com/ URL to your web panel.
    • Right click on it and choose "Show Desktop Version".
    • Add Stylish extension to Vivaldi.
    • Go to Extensions page (in Windows Ctrl+Shift+E) and click Options under Stylish.
    • Press "Write new style" button on the left.
    • Paste following code in the text field:
    @media screen and (max-width: 450px) {
    ._z4_ {
        overflow: hidden;
    }
    ._4u-c {
        transition: height 0.3s ease;
    }
    ._4sp8 {
        min-width: 350px !important;
    }
    ._1z8r {
        padding: 4px 0 !important;
        float: right !important;
        clear: right !important;
    }
    ._1z8q {
        display: block !important;
        font-size: 30px !important;
        float: left;
        padding: 7px 5px;
    }
    ._4owc ._53ij {
        width: 40px !important;
        height: 290px !important;
    }
    ._2u_d {
        transform: translate(5%, -50%) !important;
        max-width: 40px;
    }
    ._nd_ ._2u_d {
        transform: translate(-105%, -50%) !important;
        max-width: 40px;
    }
    ._59s7 {
        width: 360px !important;
    }
    ._3-8x {
        margin-top: 0px !important;
    }
    ._39bj {
        display: inline-block !important;
    }
    ._2swd._kmc {
        margin-bottom: -9px;
    }
    ._5irm {
        display: block;
        flex-direction: row;
        margin: 0 8px 0 12px;
        position: relative;
    }
    ._kmc {
        overflow-x: hidden;
        overflow-y: auto;
        margin-right: -8px;
        padding: 9px 9px 9px 0 !important;
    }
    ._4_j5 {
        max-width: 250px;
        position: fixed;
        background-color: white;
        z-index: 300;
        opacity: 0.91;
    }
    ._40fu {
        transform: rotate(270deg) translate(2%, -131%) !important;
    }  
    ._nd_ ._2u_d {
        transform: translate(-100%, -110%) !important;
    }
    ._2u_d {
        flex-direction: row-reverse;
        transform: translate(-100%, 0) !important;
    }
    ._5zvq {
        transform: rotate(90deg);
    }
    ._2rvp {
        transform: rotate(90deg);
    }  
    ._2u_d :nth-child(2) {
        margin: 0 0px !important;
    }
    ._2t5t {
        transform: rotate(90deg);
    }
    ._55q {
        max-width: 82%;
    }
    }
    
    /* Delete the code below if you don't want small user icons.*/
    
    @media screen and (max-width: 450px) {
    ._4u-c {
        overflow:hidden;
    }
    ._1enh {
        flex-basis: 55px;
        min-width: 50px;
        max-width: 77px;
    }    
    div .uiScrollableAreaContent>div[role="navigation"]{
        transform: scale(0.75) translateX(-24%) translateY(-16.7%) !important;
        width: 77px;
    }    
    ._2oc8 {
        transform: scale(0.7);
    }
    }
    
    • Under the text field press "Specify",
    • In the drop down menu choose "URLs on the domain" and enter "messenger.com" in the next text field.
    • At the top left enter a name (e.g. "Messenger") and press Save.
    • Reload the web panel (to activate reload button right click on the Messenger icon in the web panel > Toolbar > Display All Controls).

    Done!
    I hope you'll enjoy this.


    You had this:

    0_1490866201696_111.jpg


    Now you have this:

    0_1498052156727_upload-4e9e9184-93b8-4afe-b613-bd57ceb6cafe


  • Vivaldi Translator

    UPDATE
    The code has been updated. Please update it in your Stylish extension.
    To do that open Stylish options, press Edit button on the Messenger's style and replace the old code with the new one.

    Changelog:

    • Now the whole style will take effect only if the window width is not larger than 450px (Thus it will work generally in the side panel).
    • The size of user icons has been reduced to save space (this can be easily disabled by removing the code after the appropriate comment).
    • Added smooth height change for the message text field.
    • The icon for deleting the messages has been moved under the reaction icon.
    • Fixed reactions bar direction.
    • Conversation Info now appears as overlay and does not affect the width of the messages area. It also have a little transparency.

    Recomended width for this panel is 400±50px.


  • Vivaldi Translator

    Here is a screenshot from the new look with thinner contacts bar.
    Also fixed a small issue.

    0_1498052156727_upload-4e9e9184-93b8-4afe-b613-bd57ceb6cafe



  • Stuff like this is more evidence that a built-in userstyle [possibly even userscript] support would be welcomed in vivaldi.


  • Vivaldi Translator

    @LonM said in Better messenger.com for Vivaldi web panel (CSS improvements):

    Stuff like this is more evidence that a built-in userstyle [possibly even userscript] support would be welcomed in vivaldi.

    I agree. I have extensions for both user-style and user-script. But since there are such extensions, for now I prefer to have some other new features in Vivaldi, such as content blocker like in Opera 12. I still can't find an extension with identical functionality.



  • Userscript support is already built in, you just make your userscript and drag it into extensions. Do you want tampermonkey built into Vivaldi?



  • Nice, wondering if it's possible to rescale whole page - 50-60% probably - with css;
    this works, but obviously the panel is not covered in height (the width is "fixed" resizing panel) :D

    body {
       transform: scale(.7);
       transform-origin: 0 0; 
       /*zoom: 40%;*/ /*even this work XD*/
    }
    

  • Vivaldi Translator

    Small Update
    Fixed the issue with alignment of buttons under the message field.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.