Mask for the address bar
-
I have changed my address bar like this
-
@tam710562 If I understand correctly, they want the
www
look likehttps://
, i.e. (from a quick look at the OP)[data-host-sub="www"]
in the CSS could be enough. -
With the code of @sjudenim the subdomain has different color than the domain like this:
But when a URL have "www." like the subdomain then I want that "www." looks like "https://", because there is no sense to highlight it, like in this case:
So what @potmeklecbohdan said is to exclude "www." from this selector: .UrlFragment-HostFragment-Subdomain
/* URL Sub-domain */ .UrlFragment-HostFragment-Subdomain { color: var(--colorHighlightBg) !important; font-weight: bold; }
Something like :
.UrlFragment-HostFragment-Subdomain:not([data-host-sub="www."])
-
@barbudo2005 Well, this selector won’t work with the Vivaldi way, there’s no
data-*
. I neither use this mod nor follow the changes, so I only had a quick look at the tree in the first post. -
@barbudo2005 I have 2 options for you to solve it:
Option 1
If you've installed the mod, usetheme-1
and add this css to the bottom of the mod css.theme-1.addressfield-mask .host { color: var(--colorFgIntense); font-weight: bold; } .theme-1.addressfield-mask .host .host-sub:not([data-host-sub="www"]) { color: var(--colorHighlightBg); }
Option 2
This is the code I'm writing for a new mod, it accidentally coincides with your wishes
Use this javascriptwindow.gnoh = Object.assign(window.gnoh || {}, { createElement: function (element, attribute, parent, inner) { if (typeof element === 'undefined') { return false; } var el = document.createElement(element); if (!!attribute && typeof attribute === 'object') { Object.assign(el, attribute); if (typeof attribute.text !== 'undefined') { el.textContent = attribute.text; } if (typeof attribute.html !== 'undefined') { el.innerHTML = attribute.html; } if (typeof attribute.style === 'object') { for (var css in attribute.style) { el.style[css] = attribute.style[css]; } } if (typeof attribute.events === 'object') { for (let key in attribute.events) { if (typeof attribute.events[key] === 'function') { el.addEventListener(key, attribute.events[key]); } } } for (var key in attribute) { if (key !== 'style' && key !== 'events' && key !== 'text' && key !== 'html') { if (typeof attribute[key] === 'object') { attribute[key] = JSON.stringify(attribute[key]); } el.setAttribute(key, attribute[key]); } } } if (!!inner) { if (!Array.isArray(inner)) { inner = [inner]; } for (var k = 0; k < inner.length; k++) { if (inner[k].nodeName) { el.append(inner[k]); } else { el.append(this.createElementFromHTML(inner[k])); } } } if (typeof parent === 'string') { parent = document.querySelector(parent); } if (!!parent) { parent.append(el); } return el; }, override: function (obj, functionName, callback, conditon) { obj[functionName] = (function (_super) { return function () { var result; if (typeof conditon === 'function' && conditon.apply(this, arguments) || conditon === undefined || conditon === true) { result = _super.apply(this, arguments); } callback.apply(this, arguments); return result; }; })(obj[functionName]); }, getReactEventHandlersKey: function (element) { if (!this.reactEventHandlersKey) { if (!element) { element = document.getElementById('browser'); } else if (typeof element === 'string') { element = document.querySelector(element); } if (!element) { return; } this.reactEventHandlersKey = Object.keys(element).find(function (key) { return key.startsWith('__reactEventHandlers'); }); } return this.reactEventHandlersKey; } }); (function () { 'use strict'; function getTextNodesIn(elem, opt_fnFilter) { var node, textNodes = [], walk = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null); while (node = walk.nextNode()) { if (!opt_fnFilter || opt_fnFilter(node)) { textNodes.push(node); } } return textNodes; } gnoh.override(HTMLDivElement.prototype, 'appendChild', function (element) { const key = gnoh.getReactEventHandlersKey(this); if (element[key] && element[key].className && element[key].className.indexOf('UrlFragment-Wrapper') > -1) { getTextNodesIn(element).forEach(function (item) { if (item.parentElement && !item.parentElement.dataset.content) { item.parentElement.dataset.content = item.parentElement.textContent; } item.replaceWith(gnoh.createElement('span', { text: item.textContent, 'data-content': item.textContent })); }); } }); })();
and this css
/* URL colour */ .UrlFragment-Wrapper, .UrlFragment--Lowlight:first-of-type { color: var(--colorFgFaded); } /* URL Base-domain */ .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD { color: var(--colorFgIntense) !important; font-weight: bold; } /* URL Sub-domain */ .UrlFragment-HostFragment-Subdomain:not([data-content="www."]) { color: var(--colorHighlightBg) !important; font-weight: bold; }
-
@tam710562 Fantastic!! ( I use the Option 2)
Thank you very much.
@sjudenim Thank you for your code in the first place.
-
With me, https:// is no longer shown in green for secure websites. How can I have it displayed green again?
-
@stardepp I think this css will help you
.UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type { color: #46c235; }
-
I installed it the way you showed it, but it doesn't work yet. https://forum.vivaldi.net is a very secure website, but it doesn't show green yet.
/*Highlight Active Tab*/ .tab-position .tab.active:not(.tab-group) {border-top: 2px solid var(--colorHighlightBg) !important; border-bottom: 2px solid var(--colorHighlightBg) !important;} /* URL Base-domain */ .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD { color: #FFE63B !important; font-weight: bold; .UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type { color: #46c235 !important;
-
@stardepp Why would you post a picture of code? No one can copy that.
-
@luetage Sorry, I changed it.
-
@stardepp You forgot the closing brackets in both of your last statements. You should really set the closing bracket on its own line to be aware of such mistakes. I can see that the only existing closing bracket is in the first statement, but that one doesn’t have an opening bracket. Nothing can work this way.
-
@luetage said in Mask for the address bar:
that one doesn’t have an opening bracket
It has—but it’s placed similarly.
-
@potmeklecbohdan lol, my mistake
@stardepp What kind of editor are you using? Normally you should be made aware of such mistakes. -
@luetage I changed it, it works, but now the yellow color is gone in the base domain.
-
@stardepp Works for me. Copy and paste this, it’s your code sans errors:
/* URL Base-domain */ .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD { color: #FFE63B !important; font-weight: bold; } .UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type { color: #46c235 !important; }
-
@luetage I changed it the same way, but unfortunately the basedomain remains white.
/*Highlight Active Tab*/ .tab-position .tab.active:not(.tab-group) } {border-top: 2px solid var(--colorHighlightBg) !important; border-bottom: 2px solid var(--colorHighlightBg) !important;} } /* URL Base-domain */ .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD { color: #FFE63B !important; font-weight: bold; } .UrlBar-AddressField > .secure + .UrlBar-UrlFieldWrapper, .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type { color: #46c235 !important; }
-
@stardepp Then you have some other code interfering. Delete the whole content of your custom file and only paste the code I posted, then try again.
And damn, you inserted a closing bracket instead of an opening bracket in your first statement, that may be the reason the rest of the code doesn’t do what you want. Please install a proper text editor.
-
I use the Windows Editor. I also have Visual Studio code installed, but so far this program was too complex for me.
-
@stardepp What’s the Windows editor, Notepad? I don’t have information about this editor and never tried it. VS Code will do what you want, but it’s a bit overkill for simple CSS indeed. The best thing you can do is to learn CSS syntax, e.g.: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax.