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.csssudo 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,
ChipyP.D.: I edited my first post, because I actually did backup common.css, but posted a wrong code above.
-
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 yourbrowser.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:
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 yourbrowser.html
It didn't work without step 4 at all.
-
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 thecommon.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 wrongUsing @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:
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. -
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 -
-