How to add custom.css code on Linux.

  • If you are using Linux this will show you how to add custom css code you may come across in the forums.
    eg code to hide the navigation bar in the startpage

     .startpage-navigation {
            display: none !important;

    Firstly check the executable path of Vivaldi in vivaldi://about
    Here in Ubuntu it shows Vivaldi is installed to /opt/vivaldi
    If your path differs, adjust the following commands accordingly.

    1. Backup common.css
    sudo cp /opt/vivaldi/resources/vivaldi/style/common.css /opt/vivaldi/resources/vivaldi/style/common.css.bak
    1. Create a custom.css file
    sudoedit /opt/vivaldi/resources/vivaldi/style/custom.css

    Paste in your css code.
    To save in nano, Hit ctrl+x then y (for yes) and lastly hit Enter.

    1. Associate the custom.css file
      This will add @import "custom.css"; to the start of the common.css file.
    sudo sed -i '1s/^/@import "custom.css";/' /opt/vivaldi/resources/vivaldi/style/common.css

    You may want to backup your custom.css file.

    cp /opt/vivaldi/resources/vivaldi/style/custom.css /path/to/backup/location/

    Repeat command 3 if Vivaldi updates overwrite the common.css file.

    To revert to default you can restore your original common.css file from your backup.

    sudo mv /opt/vivaldi/resources/vivaldi/style/common.css.bak /opt/vivaldi/resources/vivaldi/style/common.css

Log in to reply

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