BUG: Custom css not working but is validated (1.12.955.48)



  • Hi, after the update v1.12.955.48, I re-installed my personal configuration, namely a css file style/custom.css, I saw that my changes were not applied, so I checked by launch the browser with the following command:

    --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end.

    And my rules were well applied.

    Why VIvaldi does not apply changes when I run it without parameters ?

    My css content :

    .tab-header .favicon {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    button.vivaldi {
        opacity: 0 !important;
        transition: opacity .2s !important;
    }
    
    button.vivaldi:hover {
        opacity: 1 !important;
    }
    
    

    (UTF-8, Unix Line Ending, Indent space:4)



  • Did you change the browser.html?



  • @gwen-dragon said in BUG: Custom css not working but is validated (1.12.955.38):

    Did you change the browser.html?

    Yeah, like this:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="style/custom.css" />
    </head>
    <body>
        <div id="app" />
        <script src="localeSettings-bundle.js"></script>
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="jdhooks.js"></script>
        <script src="bundle.js"></script>
    </body>
    </html>
    


  • Try without jdhooks.js. Delete that line from browser.html. Also you are posting on the wrong forum board.

    Another thing: Are you editing the original file in the application each time you update, or are you deleting this file and copying the browser.html file you saved from a previous version? I'm asking because there have been updates to browser.html lately, at least on snapshot version, not sure about stable. In any case you should always edit the actual file instead of replacing it.

    My current file from latest snapshot:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="style/custom.css" /></head>
      <body style="
        background-color: #d4d4d4;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;">
        <div id="app" />
        <script src="localeSettings-bundle.js"></script>
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
        <script src="custom.js"></script></body>
    </html>
    


  • @luetage said in BUG: Custom css not working but is validated (1.12.955.38):

    Try without jdhooks.js. Delete that line from browser.html. Also you are posting on the wrong forum board.

    Another thing: Are you editing the original file in the application each time you update, or are you deleting this file and copying the browser.html file you saved from a previous version? I'm asking because there have been updates to browser.html lately, at least on snapshot version, not sure about stable. In any case you should always edit the actual file instead of replacing it.

    My current file from latest snapshot:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="style/custom.css" /></head>
      <body style="
        background-color: #d4d4d4;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;">
        <div id="app" />
        <script src="localeSettings-bundle.js"></script>
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
        <script src="custom.js"></script></body>
    </html>
    

    Same without <script src="jdhooks.js"></script>. Yeah but i don't know if it's a bug from Vivaldi or maybe a problem from me.

    How to restore the browser.html from the current (and stable) version ?



  • @glaived Download the correct version from Vivaldi website, then just open the app contents and copy browser.html out of there.



  • @luetage said in BUG: Custom css not working but is validated (1.12.955.48):

    @glaived Download the correct version from Vivaldi website, then just open the app contents and copy browser.html out of there.

    I deleted the browser.html file and I re-run a Vivaldi installation with the latest version (Vivaldi.1.12.955.48), to reset my browser.html file. I modified again the html file to add to it the file css, as well as re created the file css

    browser.html original from the 1.12.955.48 version.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
      </head>
      <body>
        <div id="app" />
        <script src="localeSettings-bundle.js"></script>
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
      </body>
    </html>
    
    

    It did not change the problem.



  • Hard to tell. For me custom modification works with or without the command line switch. You can try with a completely new downloaded and reset browser as a last resort, but this is indeed strange.



  • This code work with the debug mode but not with the normal mode.

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<title>Vivaldi</title>
    	<link rel="stylesheet" href="style/common.css" />
    	<style type="text/css">
    	.tab-header .favicon {
    		background-color: transparent !important;
    		box-shadow: none !important;
    	}
    
    	button.vivaldi {
    		opacity: 0 !important;
    		transition: opacity .2s !important;
    	}
    
    	button.vivaldi:hover {
    		opacity: 1 !important;
    	}
    	</style>
    </head>
    <body>
    	<div id="app" />
    	<script src="localeSettings-bundle.js"></script>
    	<script src="background-common-bundle.js"></script>
    	<script src="vendor-bundle.js"></script>
    	<script src="settings-bundle.js"></script>
    	<script src="urlbar-bundle.js"></script>
    	<script src="components-bundle.js"></script>
    	<script src="bundle.js"></script>
    </body>
    </html>
    
    


  • @luetage said in BUG: Custom css not working but is validated (1.12.955.48):

    Hard to tell. For me custom modification works with or without the command line switch. You can try with a completely new downloaded and reset browser as a last resort, but this is indeed strange.

    I try this, but it same with a clear profile…

    I'm gona die. :'(



  • Nah, your death isn't imminent. Wait for someone with the stable version and a custom.css file to post here and share their experience. You could also try the snapshot, but that's maybe overkill.


Log in to reply
 

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