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. 🙂

    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


  • Moderator

    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?



  • /edit


  • Vivaldi Translator

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



  • This was a huge help! Thank you very much.



  • thank you for this


  • Vivaldi Translator

    Hi to all!
    Pleas help me remove this block

    0_1518120077131_4f4d64cb-af75-4e13-87d2-de0438153c0c-image.png



  • @kurai Just right-click and inspect. Then write down the selector of this element and do a display: none !important on it. Anyway, nobody can help you, if you don't provide a link to this chat.


  • Moderator

    @kurai I don't use Facebook, but that looks like it's info for the entity you're chatting with. What happens if you prefer the (I) ℹ️ button at the top right of the panel. To me, that would seem like the logical control to toggle this info.


  • Vivaldi Translator

    @lonm Thank you! 🙂 It was so obvious, but I could not understand this


  • Moderator

    @kurai said in Better messenger.com for Vivaldi web panel (CSS modification):

    @lonm Thank you! 🙂 It was so obvious [...]

    Glad to help. It isn't your fault. It's the job of facebook's design team to explain things to the user. Assuming the end user already knows certain iconography languages is a bad decision on their part.



  • Stylish recently had a privacy issue so bad, the privacy-orientated lot at Mozilla elected to remove it permanently from their add-ons page. Instead of recommending that, maybe recommend Stylus instead? It also shouldn't be hard to migrate from Stylish to Stylus if you've been using the later versions of the software for a good, long while.

    Also, host this code on userstyles.org please. Stylus users can also handshake with this website for style installation, as despite being tainted on the vine after Jason sold it, that resource is still as reliable and dependable as ever.



  • What does this add-on do exactly? Isn't it possible to add those lines to the my.css file? See this link about how to configure a custom css in Vivaldi.
    The same trick can be used with WA web ?



  • @antoine-luboz This is a userscript, not a custom modification. It changes a website so it works well in a panel, it doesn't change Vivaldi's user interface. Furthermore the instructions in your link are outdated –– read here.



  • @rammsteinam said in Better messenger.com for Vivaldi web panel (CSS modification):

    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. 🙂

    I'm having some issues with embedded videos in messenger. They show too big and won't resize. If I narrow the side tab, the video gets clipped on its left side.

    Tried the following in the browser:

        ._3058 ._15gf ._3duc {
            max-width: 500px !important;
        }
    

    It works if I use the above code in browser, but it won't do anything if placed in stylus css.
    Any suggestions?



  • I can not get this to work when used in Stylus. I do not want to use Stylish. It is not an option. However, I perform the same exact steps as I did when I tried it in Stylish but, in Stylus, and it will not work. It did work in Stylish but, I will not use that extension anymore.
    If anyone reads this, mind dropping a helpful line if you do know how to make it work, or even know of a more updated, similar style?

    EDIT: I figured it out. For Styles, in the manage styles windows, you have to enable the check box for "add Usercss" next to "Write New Style" and then you add the code in the bottom section where it says "add code here"
    It was so easy I can't believe I didn't realize it all day right in front of me lol. Hope this can help someone else. However, everybody else may be smarter than I lol. xD I am not sure if this is actually necessary. Perhaps Stylus leaves out something done that is automated in Stylish when you follow the same steps outlined in the instructions. Either way it worked.


Log in to reply
 

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