HELP!! Lengthening the Bookmarks on Bar (or editing anything else, really lol.)

MonkeyWrench33

I want to make the bookmarks on the bar longer so i can read more of the title text.

as per ChatGPT's suggestion i did this.....

ENABLED CSS IN: vivaldi://experiments

Locate the Custom CSS File
Go to Settings > Appearance > Custom UI Modifications.

Note the folder path shown there (e.g., on Windows, it might be something like C:\Users\YourName\AppData\Local\Vivaldi\User Data\Default).

In that folder, create a file named custom.css if it doesn’t already exist.

Add CSS to Increase Bookmark Length
Open custom.css in a text editor.

Add the following code to increase the maximum width of bookmark items on the bookmark bar:

/* Increase the max width of bookmark items */
.bookmark-bar .button-title {
    max-width: 300px !important; /* Adjust this value as needed */
}

/* Optional: Ensure the bookmark bar itself has enough space */
.bookmark-bar {
    overflow-x: auto; /* Allows scrolling if bookmarks exceed bar width */
}

But this did not work. i put the custom.css everywhere. that could be a possible path:

* C:\Users\xxxx\AppData\Local\Vivaldi\Application\7.3.3635.9\resources\vivaldi\style
* C:\Users\xxxx\AppData\Local\Vivaldi\Application\7.3.3635.9\resources\vivaldi
* C:\Users\xxxx\AppData\Local\Vivaldi\Application\7.3.3635.9\
* C:\Users\xxxx\AppData\Local\Vivaldi\Application\
* C:\Users\xxxx\AppData\Local\Vivaldi\User Data\Default\Style
* C:\Users\xxxx\AppData\Local\Vivaldi\User Data\Default

AND NOTHING,

I even tried to:

.bookmark-bar {
    background-color: red !important;
}

And of course this did not work.

Where the heck do i even have to put the custom.css to edit anythign? is there something im doing wrong?

luetage

@MonkeyWrench33 You don’t put the custom CSS inside the Vivaldi application or the profile, but outside of it. E.g. make a folder in your documents called css_mods and put your custom.css file there. Then link that folder in the settings.

Capushon

@luetage said in HELP!! Lengthening the Bookmarks on Bar (or editing anything else, really lol.):

E.g. make a folder

And if I need a relative path, without specifying a drive letter?

MonkeyWrench33

ohhhh whats the process of linking it look like?

MonkeyWrench33

@luetage i figured it out. linked the CSS folder. However im unable to find the right code to extending the length of the bookmarks buttons on the bar.

IWhats the right code? im using this:

/* Increase the max width of bookmark items */
.bookmark-bar .button-title {
    max-width: 600px !important; /* Adjust this value as needed */
}

/* Optional: Ensure the bookmark bar itself has enough space */
.bookmark-bar {
    overflow-x: auto; /* Allows scrolling if bookmarks exceed bar width */
}

im thinking maybe

.bookmark-bar .button-title

are not the correct values.

RadekPilich

.bookmark-bar button 
{max-width: 300px !important;}