User css styles

  • Is there already a way to use our own user styles as it was in opera 12, to display browsing content with our custom css. Especially with option background image? Thanks.

  • Short answer is 'yes'.

    Vivaldi uses CSS for its themes. There are already community skins, although it's been awhile since I've been on the forums and there may be even more than the ones I'm aware of. You can edit Vivaldi's look manually by going to your Vivaldi directory and editing the common.css file.

    Here are a couple of skins I used to point out to people who asked about Vivaldi themes in the past:

    A White Skin - by widget

    "How to Make Vivaldi go Dark" - by thewer (There's now an option in Vivaldi's settings menu to use a dark theme, so this isn't really relevant anymore.)

    Slim down vertical screen space by combining the address bar and the menu bar - by An_dz

    And there are also some helpful tips about UI modifications in this post by gdveggie.


    I'd keep an eye on the All Platforms sub-forum since that seems to be where a lot of this information is posted.

  • Hello Thx,

    but I meant the user styles of the web sites(not the UI of Vivaldi). How web pages are displayed.

    As opera 12 had; Preferences>Content>Style Options>My style sheet


  • Ohhh. Afaik, the best that Vivaldi can do right now is in the "Page Actions" menu, and the menu that sets how to display images. These menus are both activated from the status bar, as in the screenshot below.


  • Thx,
    I have already done that. The property background-image does not work.
    The goal is that I have a background image on all webpages that I visit:
    for instance;
    background-image: url('007.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: auto !important;
    background-position: center !important;

  • You can create a css file with that code and save in vivaldi/resources/vivaldi/user_file
    Now it will appear in that menu with the name of the file. (I just discovered it :woohoo: )

  • Hi,

    yes it works that way but the background image is not displayed.
    Any tips on how to make "filter" background-image work on vivialdi(for browsing content)?

    Thx in advance.

  • It's seems that local images can't be used. Try:

    body {
    	background-image: url('') !important;
    	background-repeat: no-repeat !important;
    	background-attachment: fixed !important;
    	background-size: auto !important;
    	background-position: center !important;

  • Is there any workaround to bypass this?
    That is to use your local image as a background.


  • Could you try using "url('file://(full_path)/007.jpg')"?

  • Hi,

    nope, local files do not work. From the info I have gathered from the web:
    Chrome and its derivatives have closed down usage of the local files.

    Seems this is it. This can not be done in Vivaldi, developers prove me wrong - (using local server is not an option).


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