Better for Vivaldi web panel (CSS modification)

  • Vivaldi Translator is too wide for average web panel in Vivaldi, but IMO for Facebook messaging it's better than 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 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 {
    ._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 "" 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).

    I hope you'll enjoy this.

    You had this:


    Now you have this:


  • Vivaldi Translator

    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.


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


  • 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 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


  • @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.

  • @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

  • @kurai said in Better 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 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 for Vivaldi web panel (CSS modification): is too wide for average web panel in Vivaldi, but IMO for Facebook messaging it's better than 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?


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