Gaps between bookmark bar items
-
Is there any way to decrease the spaces between items in the bookmarks bar? They are spaced out too far. With the spacing reduced, there would be room for more.
-
If you don't mind mods, you can do so with this code (play with the
2px
):.bookmark-bar button { padding: 0 2px !important; }
Otherwise you cannot.
-
@potmeklecbohdan said in Gaps between bookmark bar items:
If you don't mind mods, you can do so with this code (play with the
2px
):.bookmark-bar button { padding: 0 2px !important; }
Otherwise you cannot.
Where would I put the code? Is there some kind of user chrome stylesheet that I could add somewhere? What about the spacing between the icon and the label? That is also too large.
-
@Streptococcus See Modding Vivaldi.
About the icon-label spacing (again, play w/ the
2px
):.bookmark-bar button img + span, .bookmark-bar button svg + span, .bookmark-bar button img + input, .bookmark-bar button svg + input { margin-left: 2px !important; }
-
I do not know what the mods are, or where they go. Do you add a stylesheet somewhere into the profile, or maybe you are going to tell me to monkey with something within the Mac Vivaldi application package? What would be the filename of the stylesheet?
What I was able to look up about mods did not say anything about where they go.
-
@Streptococcus Read Modding Vivaldi as suggested by @potmeklecbohdan , «Adding Style → Vivaldi 2.6 and above».
You don't have to do anything with the application folder. Just create a CSS file where you paste the code, then put this file in a folder outside the application folder. Then enableAllow for using CSS modifications
as explained in the linked post.
It may seem tedious, but actually it's pretty simple. -
@hlehyaric said in Gaps between bookmark bar items:
@Streptococcus Read Modding Vivaldi as suggested by @potmeklecbohdan , «Adding Style → Vivaldi 2.6 and above».
You don't have to do anything with the application folder. Just create a CSS file where you paste the code, then put this file in a folder outside the application folder. Then enableAllow for using CSS modifications
as explained in the linked post.
It may seem tedious, but actually it's pretty simple.There must be some other condition required beyond what that page directs. Is there another part to the file extension name besides .css? Is there a special filename required? Does the directory where the stylesheet is placed matter? I tried putting the stylesheet into a directory and using it, but "Select Folder" under "Custom UI Modifications" would not let me choose it. It would not let me choose any stylesheet in that directory.
-
@Streptococcus You have to select the directory where the file is, not the file itself. The file must have a .css extension.
-
Finally, it works. Thanks, guys.
How would I decrease the spaces between the extension buttons on the toolbar? -
@Streptococcus That depends… are you on stable or snapshot?
-
I have the latest official version, not a snapshot. I just need some stylesheet code. I have no idea what the element name for extension button is.
-
@Streptococcus Again, play with the numbers
.toolbar-extensions .button-toolbar button { min-width: 24px !important; width: 24px !important; }
-
Thank you.
-