Increase tabs width.
-
Hi.
Is there a way to increase tab's width ?
I also have a question with no answer here. I'd really appreciate it if anyone knows anything about this.
Thanks. -
@Buglocker You might have more replies if you post in the Support and Trouble-shooting forum or the modifications forum, rather than the Feature Request forums.
There is no setting to change the tab width. You can reduce the width of the active tab. You can place tabs on the side, then the full title appears in the window title bar.
-
@Pesala
I know that there is no setting. I asking for css or js mod.
I 'm new at the forum as i started use Vivaldi before 6 days. Sure , i will put my question to the right place.
Thanks. -
@Buglocker Welcome to the Community. Here are a few links for your bookmarks that you may find useful:
- Help on Feature Requests
- Vivaldi Help
- Forum Markdown Help
- Using the Forum Search
- Local Forums in your language
- Bug Reports
- Modding Vivaldi
- Web Panels
- Vivaldi for Android
- Snapshot vs Stable
- Vivaldi's Business Model
I reported your threads. A moderator may move them for you.
-
@Buglocker Use this code to modify the active and not active tab (select the selectors you want):
/*TAB ACTIVE*/ #tabs-container .tab.active {font-family: Times New Roman !important; color: navy !important; font-size: 17px; font-weight: bold !important; text-transform: uppercase !important ; min-width: 302px !important; max-width: 302px !important; margin-left: 1px; margin-top: 1px !important; margin-bottom: -1px !important; background-color: #8a8a8a !important; border: 2px solid rgba(255,255,255,0.8) !important; padding-left:2px !important; filter: brightness(1.1) contrast(1.1) !important;} /*TAB NOT ACTIVE*/ .tab-position .tab:not(.active) {font-family: Lato; font-size: 14px; background-color: #414141; color: white; margin-left: 1px !important;}
-
@barbudo2005 Thanks.
With this code , cant open new tab as new tab icon disappears. Also cant close tab as close icon disappears. -
@Buglocker Use only this code:
#tabs-container .tab.active {min-width: 302px !important; max-width: 302px !important;}
-
@barbudo2005 That will still have the issues mentioned because of how Vivaldi dynamically creates the positions of the tabs.
-
@barbudo2005 Thats 50% better : Only "New tab" icon disappears.
-
Check out the
tab-size.js
VHook. -
@potmeklecbohdan I dont see a file related to increase tabs.
-
@Buglocker I gave you the exact name. Anyway, you gotta read the README (that’s why it is there lol).
-
@potmeklecbohdan You are right. Sorry but i do many test at once and i missed.
I found two interesting .js : Add Go Button and Change Width of a Tab.
I will response here when i test them. Thanks. -
@potmeklecbohdan I try it but i guess i 'm doing something wrong and they are not works (Tab & Go). What i did and not works :
- I copy the code of two files to notepad and i save them to desktop. Then i copied them to
*C:\Users\username\AppData\Local\Vivaldi\Application\3.7.2218.55\resources\vivaldi* path. - I put these two lines before the <script src="bundle.js"></script> line ,
of browser.html file :
<script src="Tab.Width.js"></script>
<script src="GoButton.js"></script>
And i reopen Vivaldi and ...... no any change.
Could anyone define what's wrong ?
Thanks.
- I copy the code of two files to notepad and i save them to desktop. Then i copied them to
-
@Buglocker said in Increase tabs width.:
<script src="Tab.Width.js"></script>
<script src="GoButton.js"></script>This is the issue. You are supposed to put this instead:
<script src="jdhooks.js"></script>
Then you can enable the
Tab Width
and theGo Button
mods in settings. -
@nomadic
As i did it manual and with other filenames , and dont have jdhooks.js file.
I have Tab.Width.js and GoButton.js files. I dont think this is the problem.
Additionally if i use the jdhooks.js i will take unwanted changes. Instead , i want just the preferred two.
Thanks. -
@Buglocker The
jdhooks.js
file is required for all the hook files to work. That is why it is shown in the manual instructions.If you don't want the other hooks to have any effect, even though you can disable them in settings, you could delete everything else in the
Hooks
folder.Just leave these 3 files:
tab-size.js
go-button.js
jdhooks-startup-settings.js
The last is what lets you enable/disable hooks from settings.
-
@nomadic At this moment i already have tab-size.js and go-button.js at C:\Users\myusername\AppData\Local\Vivaldi\Application\3.7.2218.55\resources\vivaldi.
Do you mean just i just need to put the jdhooks-startup-settings.js , at the same path ? -
@Buglocker This part of the Manual Instructions is what you should follow:
Or if you want to keep mods you've installed into browser.html, copy vivaldi\hooks folder and vivaldi\jdhooks.js into {instdir}\vivaldi, open {instdir}\vivaldi\browser.html in a text editor, add line
<script src="jdhooks.js"></script>
right before a line with bundle.js.
So in
C:\Users\myusername\AppData\Local\Vivaldi\Application\3.7.2218.55\resources\vivaldi
, you should have this structure:> ...\vivaldi
> hooks
tab-size.js
go-button.js
jdhooks-startup-settings.js
browser.html
(That you added the line to)
jdhooks.js
...
All the other default files already in that directory. -
@nomadic
What i got and still not works :
(lol it is so simple .....:smiling_face_with_open_mouth_closed_eyes:)