tabs below address bar and overlay menus

[BohemiaDrinker]

I use tabs bellow addressbar, and any and all overalay menus (search suggestions, history from adress field, extension menus) end up being under the tabs bar.

Tried messing with z-index, but had no success.

Can anyone help? Thanks!

[dude99]

@BohemiaDrinker
Try this. I didn't test it, but it should work.

section.OmniDropdown-Collection {z-index:99;}

Try add position: relative; if it doesn't work...

[BohemiaDrinker]

@dude99 Thanks, but it didn't work with or without "position: relative;".

[dude99]

@BohemiaDrinker Another way is try to reduce Tabbar's z-index to 0 or -1 with position other than static/unset, plus previous suggestion.

Also, did you change the position of Tabbar to fixed or absolute? AFAIK sometimes both of those position could cause it to float on top of all other elements.

You can further study the common.css about addressfield's drop down list by searching .OmniDropdown.

[BohemiaDrinker]

Damn.... I did use "absoluute" in the tab bar, but if I change it everything falls appart.

I'll see what I can do, at least I know where to look for now. Thank you very much for the help!

[dude99]

@BohemiaDrinker Try this hack with js & css, I have not tested it, so not sure if it will really work. It just some patchwork I made from various codes found from the mod forum:
custom.js

/* move addressbar into #header */
setTimeout(function wait() {
    var addr = document.querySelector('#main > .toolbar-addressbar');
    if (addr!= null) {
        var header = document.querySelector('#header');
	header.insertBefore(addr, header.childNodes[1]);
    }
    else {
        setTimeout(wait, 500);
    }
}, 500);

if the addressbar order is incorrect, try change [1] to [2], or
Use this CSS mod if it failed to insert addressbar below titlebar:

#titlebar {order: -1;}

[MaxKarlErnst]

@BohemiaDrinker Not sure what mod you use but this: https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8/46?page=3 should give you satisfactory results.

[dude99]

@MaxKarlErnst Wow, that's a very creative hack!
Basically it setup tabbar position to bottom, & then change it's order to -1.

[BohemiaDrinker]

@dude99

Thank you. Changing to this version may require that I re-write most of my code, but it's past due: it's bits and pieces from over the years after all.

I'll do this this week and come back with the results. Thank you very much for the help, dude!

[dude99]

@BohemiaDrinker I think you should use @MaxKarlErnst suggested version instead, it's a much easier & cleaner solution overall.

[BohemiaDrinker]

@dude99 said in tabs below address bar and overlay menus:

@MaxKarlErnst

I did, and it worked. Thank you very much guys!

[musicollector]

I just switched from Chrome to Vivaldi and am setting it up. However, I am wondering if someone can either give me a step-by-step procedure to place my tabs below the address bar. I read and understood bits and pieces. Is this a functionality tweak or a style tweak? I read: https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8/7
and https://forum.vivaldi.net/topic/10549/modding-vivaldi/2?page=1

But not sure where exactly to place the custom.js file. Where do I get this file? If I am to create it, what exactly do I put in it?

All this just to move the tabs to the bottom of the URL bar!!! I wish it was just a button I could toggle. I see that Vivaldi already has a button to move the tabs to the bottom, but I prefer it at the top but below the address bar. Much like Firefox, I need to modify files.
TIA..

[nomadic]

@musicollector Yeah, there has been lots of talk about how this should be an included option, but luckily with mods we are able to change so much about the browser.

Checking out the pinned topics here in the modding forum should get you all the info you need to start applying mods, but I will give you a quick condensed version here:

First Step
Find the mod you would like to apply. This could include css and/or js files. For this to mod, I found this from @luetage seems to still work.

Second Step
Because this mod only uses a css file, it is a little more straight forward. Vivaldi Devs added an option that should allow custom css to stick around even when the browser updates. To enable this feature, you need to go to vivaldi://experiments in the Vivaldi Browser. There you will find an option called "Allow for using CSS modifications." Check this option so it is selected.

Third Step

Now is probably a good time to create the actual css file. You can practically create this file anywhere on your computer, but you should avoid putting it in your Vivaldi directory, as this gets wiped out whenever you update Vivaldi.

• On Windows, the Documents folder might be a good place to keep the mod files. Create a new folder there, and call it anything you want, like "Vivaldi CSS Mods"

• Now, to easily make a file with the .css extension, you need to enable a feature on Windows. You can do this by going to the view tab on File Explorer and selecting the "File name Extensions" option.
  

• Now you can create a text file and change the extension from .txt to .css again calling the file whatever you want, like "tabs-below-url.css" but make sure to not include any spaces in the name, as this will stop the mod from working.

Good File Names	Bad File Names
example.css	example file.css
tabs-below-url.css	tabs below url.css

Fourth Step
Now you can paste the css styles inside the file using Notepad or another text editor and save it.

Fifth Step
The file is all done, so now go back to the Vivaldi Browser to finish up some changes in the settings.

• Go to settings and navigate to the "Appearance" tab. If you scroll down to near the bottom, there should be a new section available called "CUSTOM UI MODIFICATIONS" In this section is a select folder button which allows you to select that folder in Documents we created in the third step.
  

Sixth Step
There are some specific settings that this mod requires to work properly, as seen in @luetage's post.

• First you need to select the tabs bottom option. This just gives the tabs a selector that can more easily be used because it moves the tabs to the body element.
  

• Another setting to change that I recommend disabling is the "Show Popup Thumbnails" as they are sort of broken with this mod.
  

Last Step
The mod should be all done now, just restart the browser to see if it worked.

If you aren't happy with the empty titlebar at the top of the window, you could look at @sjudenim's addition to this mod that condenses it some, found here. This can just be added to the end of the css you just created, or put in a separate css file in the same folder.

You should also give @luetage and @sjudenim a thumbs up on their posts for making these mods.

---

Hope this helped clear up the process. The pinned topics have some good info, but they could probably use an update to make it a little clearer for beginners to Vivaldi modding.

---

This guide was fairly Windows centric, but you should be able to apply similar steps on both Mac and Linux. You just probably don't need to enable file extensions, which I think Windows really should have enabled by default anyway...

[musicollector]

Thanks for your very detailed response. I appreciate it. Let me try that.

[musicollector]

Thanks for your brilliant steps. Unlike many other instructions, every step in the chain was as expected. However, the tabs are at the bottom of the browser, which I had been able to do even without any change by clicking on Tab Bar Position and choosing Bottom. In fact, just to test it, I removed the .CSS file from the folder and launched Vivaldi to see no change - the tabs are still at the very bottom of the window, as set above. What I need is to have the tabs at the bottom of the URL window but still at the top. as indicated at the end of this post. What am I missing? Thanks.

This is the code I have used in the .CSS file

#tabs-container.bottom {
order: -1;
border-top: none;
padding-top: var(--padding);
padding-bottom: 0px !important;
}

/* bookmarks bar above tabs /
/
.bookmark-bar {
order: -2;
}
*/

.toolbar.toolbar-addressbar {
order: -3;
}

/* corner rounding */
.tabs-bottom .tab-position .tab {
border-top-left-radius: var(--radiusHalf);
border-top-right-radius: var(--radiusHalf);
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
}

/* tab group indicators*/
.tabs-bottom .tab-strip .tab-group-indicator {
bottom: 28px !important;
};

[nomadic]

@musicollector Strange, I just double checked by running a clean version of Vivaldi in a virtual machine, and I was able to get the correct result by using that css.

If the tabs are showing at the bottom of the browser window, it means your css file is not being applied. Here are some things to check:

Did you put a space in the name of the css file?

• I forgot to tell you that the filename shouldn't have any spaces in it. I just double checked it and any spaces makes the mod not work.

  Good File Names	Bad File Names
  ample.css	example file.css
  bs-below-url.css	tabs below url.css

Did you make sure to restart the browser after adding the css file?

• Just restarting the browser after following the steps might be all you need to do.

Did you correctly create the file with the .css file descriptor?

• If the step where you set file name extensions to be visible didn't work, you might have accidentally created something like "example.css.txt". This would still be a text file and not a css file. Double check that step by toggling that file explorer setting to make sure the file is the correct type.
• You also might not have selected the .txt when you were deleting the old name when creating the file. This would also result in the same problem of "example.css.txt"

Sorry it didn't work on the first try, send screenshots of your css file open in Notepad and your setting in the File Explorer for "File Name Extensions" if you are still having issues. Hope the issue is just having a space in the name. I will update the other post to include that detail.

modedit markdown indented header for table as list entry

[musicollector]

Did you put a space in the name of the css file?
Yea, being the idot I can be, I forgot that, css files cannot have a space! Much like Unix is case-sensitive.
Making a living in I.T., I should have known better Thanks for setting me straight!
If the step where you set file name extensions to be visible didn't work, you might have accidentally created something like "example.css.txt"
No, that part I knew as I have been creating files since the time of DOS.
Of course, when I fixed the self-inflicted errors, it works now, as expected. One final question, at the risk of appearing nit-picky. The tabs are now located at the top but is there any way I can set it below the bookmarks bar? I have attached a screen shot.!

[nomadic]

@musicollector Great, glad it is working. No worries about the mistake. I even forgot that spaces weren't allowed. Just got used to making all code files (even though css isn't really code) without spaces because it has come back to bite me in the past.

As for the bookmark bar, it looks like @luetage already accounted for that, but might not use the bookmark bar themselves, so they commented it out.

If you change this part:

/* bookmarks bar above tabs /
/
.bookmark-bar {
order: -2;
}
*/

To this:

/* bookmarks bar above tabs */
.bookmark-bar {
  order: -2;
}

Then the bookmarks bar should be in the correct place.

Finally, if I were to use this mod, the lines separating the tabs, address bar, and bookmark bar would annoy me. So based off of @tam710562's post here, I added some additional css to the end of the file to make them seamless.

Additional CSS

/* Remove line between address bar and bookmark bar */
.address-top .toolbar-mainbar:after {
  content: unset;
}

/* Remove line between bookmark bar and tabs */
.bookmark-bar {
  border-bottom-width: 0px !important;
}

.bookmark-bar {
    background-color: var(--colorAccentBg);
}
.color-behind-tabs-off .bookmark-bar button {
    background-color: var(--colorAccentBg);
}

.color-behind-tabs-on .bookmark-bar {
    background-color: var(--colorBg)
}
.color-behind-tabs-on .bookmark-bar button {
    background-color: var(--colorBg);
}

Hope this gets you all set up. Have a good one.

[musicollector]

@nomadic
Is there any way I can move the Bookmark Bar above the tabs, as per the above screen shot? If not, I am okay, but I guess I will never know if I don't ask. Thanks.

[nomadic]

@musicollector Yeah, that is what the first part of my reply was saying. In the original css, there is a section that is commented out, so it doesn't have any effect on the browser styling. If you remove the comment marks (but make sure to keep the actual comment "bookmars bar above tabs" commented out), then it will work.

@nomadic said in tabs below address bar and overlay menus:

As for the bookmark bar, it looks like @luetage already accounted for that, but might not use the bookmark bar themselves, so they commented it out.

If you change this part:

/* bookmarks bar above tabs /
/
.bookmark-bar {
order: -2;
}
*/

To this:

/* bookmarks bar above tabs */
.bookmark-bar {
  order: -2;
}

Then the bookmarks bar should be in the correct place.