Hiding the home icon in the toolbar not working



  • Hi there,
    I would like to hide the home icon in the toolbar, but it's not working.

    These are the steps I did:
    1. did a backup of common.css

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

    2. created a custom.css file

    sudoedit /opt/vivaldi/resources/vivaldi/style/custom.css
    

    3. pasted in the css code

    .button-toolbar.home { display: none; }
    

    4. associated the custom.css file

    sudo sed -i '1s/^/@import "custom.css";/' /opt/vivaldi/resources/vivaldi/style/common.css
    

    5. opened browser.html & added inside the head element the following line:

    <link rel="stylesheet" href="style/custom.css" />
    

    But the home icon is still there in the toolbar.

    What may I have done wrong?

    I'm using Kubuntu 16.04 and Vivaldi 1.15.1137.3 snapshot (64-Bit).

    Thank you in advance,
    Chipy



  • At step 3 add "!important"
    ie

    .button-toolbar.home { display: none !important; }
    


  • @cantankrus said in Hiding the home icon in the toolbar not working:

    At step 3 add "!important"
    ie

    .button-toolbar.home { display: none !important; }
    

    @CantankRus , thanks for your reply.
    I added !important, but it still doesn't work.

    EDIT:
    I even restared the computer without any success.



  • @chipy
    You're using vivaldi-snapshot so the paths are different and looking at the commands you posted they are wrong as well.

    1. You didn't backup common.css. A backup is a copy. You replaced your common.css file with common.css.bak.
    Not that it matters because you did it to the vivaldi-stable directory not the snapshot directory.
    Should be a copy command to a bak file.

    sudo cp /opt/vivaldi-snapshot/resources/vivaldi/style/common.css  /opt/vivaldi-snapshot/resources/vivaldi/style/common.css.bak
    

    2. Again wrong directory used.
    Should be...

    sudoedit /opt/vivaldi-snapshot/resources/vivaldi/style/custom.css
    

    3. Add the code to custom.css

    .button-toolbar.home { display: none !important; }
    

    4. Wrong directory used.
    Should be...

    sudo sed -i '1s/^/@import "custom.css";/' /opt/vivaldi-snapshot/resources/vivaldi/style/common.css
    

    5. This step is not needed if you are only adding a custom.css file.



  • @CantankRus :
    Thank you very much por your patience and your advices.
    Following your steps, finally the home icon is gone now.

    You were totally right: I chose the wrong directory. :/

    Thanks again,
    Chipy

    P.D.: I edited my first post, because I actually did backup common.css, but posted a wrong code above.



  • @chipy

    Step 4 is redundant and not needed with Step 5. Step 4 requires a longer path which is not an issue with Step 5 so long as your css file is in the same directory (or sub-directory) as your browser.html



  • @chipy Nowadays we don't edit common.css anymore, read here: https://forum.vivaldi.net/topic/10549/modding-vivaldi/



  • @sjudenim said in Hiding the home icon in the toolbar not working:

    @chipy

    Step 4 is redundant and not needed with Step 5. Step 4 requires a longer path which is not an issue with Step 5 so long as your css file is in the same directory (or sub-directory) as your browser.html

    It didn't work without step 4 at all. :/



  • @chipy

    My files are in a mod folder where the browser.html is located, and this is all that is needed

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="mods/ui-tweaks.css" />
        <link rel="stylesheet" href="mods/combine-header-toolbar.css" />
        <link rel="stylesheet" href="mods/speeddial-tweaks.css" />
        <link rel="stylesheet" href="mods/tabbar-left-overlay.css" />
        <link rel="stylesheet" href="mods/panel-toggle-button.css" />
        <link rel="stylesheet" href="mods/extension-toggle.css" />
        <link rel="stylesheet" href="mods/status-bar-toggle.css" />
      </head>
      <body style="
        background-color: #0f0f0f;
        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="mods/panel-toggle-button.js"></script>
        <script src="mods/extension-toggle.js"></script>
        <script src="mods/status-bar-toggle.js"></script>
        <script src="mods/panel-overlay.js"></script>
        <script src="mods/notes-word-count.js"></script>
      </body>
    </html>
    

    adding @import to the common.css does the exact same thing, load your custom files. If you are having problems loading it with the html alone, then your path(s) are wrong

    Using @import is generally frowned upon https://www.giftofspeed.com/avoid-using-css-import/



  • @sjudenim said in Hiding the home icon in the toolbar not working:

    @chipy

    My files are in a mod folder where the browser.html is located, and this is all that is needed.

    Hey sjudenim,

    thanks once again. Followed your advice and changed the codes as suggested by you:

    → No edits to common.css anymore.
    → Created also a folder mods. Will it stay there also after an update?
    → Added to browser.html: <link rel="stylesheet" href="mods/custom.css" />
    As far as I understand, this step has to be reproduced every time there will be an update, correct?

    Now everything's working like a charm.

    Thanks again!
    Chipy ;-)



  • @chipy
    You'll find a script by @Gwen-Dragon HERE to patch the relative files after vivaldi is updated.
    Further down the page you'll find the same script in English.

    Just edit the line mod_dir=$HOME/VivaldiPatch line
    near the top of the script to reflect the location of your custom files.

    eg I put my custom.css file in my Sync directory...
    mod_dir=$HOME/MEGAsync/configs/vivaldi/VivaldiPatch

    The script copies your custom.css and/or custom.js files to the correct location
    and patches the appropriate browser.html file.
    Only the files belonging to vivaldi are overwritten when vivaldi is updated.
    So in reality once you have created /opt/vivaldi-snapshot/resources/vivaldi/style/custom.css
    you only need to patch the browser.html file after updates.

    It just makes good sense to keep you custom files in a location you backup and writable by you,
    and then copy them over to the vivaldi directory.


  • Moderator



  • @chipy

    Originally I put my files in the styles folder, but since that's a default Vivaldi folder, my files would get wiped. The mods folder however is foreign and doesn't appear to get affected by updates. The only thing that needs to be re-done is making the additions to the browser.html . But make a backup up just in case


Log in to reply
 

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