Centering Short Addressfield URL CSS mod

[dude99]

The centered URL effect looks kinda cool, but I'm not sure how practical it really is... Maybe we'll find out after a few days of test drive.

---

ReadMe

1. This CSS mod only centered short URL display when the Addressfield's width is wide enough to contain the entire URL.

2. The URL will stay centered as long as you didn't edit any text within the Addressfield, else it will revert back to left text-alignment as soon as you start typing.

3. If you preferred the URL & text to always stay centered, then simply replace .UrlField:not(.UrlField--HasEditText) with .UrlField (line 2).

4. I also included other optional accessibility effects such as omitting https:// from secure site, (green) secure & (pink) warning domain highlighter to help you recognize 'em easier in plain view.

---

CSS Code

Latest fixed for v6.9 by @nomadic is over here: https://forum.vivaldi.net/post/778138

/* centered addressfield URL */
.UrlField:not(.UrlField--HasEditText) .UrlBar-UrlField {text-align: center;}
.UrlFragment-Wrapper {width: fit-content; left: 0; right: 0; margin: auto;}

/* hide https:// display */
.UrlBar-AddressField > .SiteInfoButton:is(.secure, .certified) + .UrlBar-UrlFieldWrapper .UrlFragment-Wrapper > .UrlFragment--Lowlight:first-of-type {opacity:0;}

/* secure domain green highlighter  */
.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {-webkit-text-stroke-width: 0.6px;}
.UrlBar-AddressField > .SiteInfoButton:is(.secure, .certified) + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: var(--colorSuccessBg);}

/* warning domain pink highlighter */
.UrlBar-AddressField > .SiteInfoButton.warning + .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: deeppink;}

Will this end up being another useless mod? LOL

[enc0re]

Definitelly useless mod. The last thing I want is jumping text around. Same for omitting http/s from URL. Stupid thing invented by Google...

[Subtropinka]

I want to shorten the addressfield itself because it's too long on my 34" monitor))))
Started a new topic about it, and one kind man advised me to learn css-modding... I'm trying to do it, but it's very hard for me(((

[dude99]

@enc0re Thanks for your honest feedback. LOL

I don't think Chrome is the first to come up with the idea of hiding the https:// from URL. I remember this was the idea of Tim Berners-Lee, the inventor of World Wide Web. He once said he regretted of including the http:// as part of the URL because it's completely unnecessary, waste of everyone time & resources. It took about 1 second from everyone each time he read or write the http:// protocol, and when added all the time spend on this useless piece of text, we have wasted decades of time from all Internet user as a whole...

Now, my CSS mod ONLY hide https:// in secure site, it will still reveal http:// if the connection to the host is deem insecure by Vivaldi. The idea is using minimalistic info to help user focus on the color coded domain when he scanning the URL in plain view. GREEN domain is secure, while PINK domain with http:// is consider caution. This is actually a time saver feature, it will save u about 1 second each time you scanning the URL from new tab!

As for the inconsistent placement of URL & text, I kinda agree with u for now. But I think it will take a few days for me to study the benefits vs cons of such design. Because we always hate changes & love something we get used to, so it will take some time for me to overcome the nostalgia effect & experiment with this new design fairly.

[dude99]

Updated ReadMe section, now you can always keep the URL & text centered by follow instruction #3.

BONUS: Automate EV Cert CSS mod from yesterday: https://forum.vivaldi.net/post/523972

[enc0re]

@dude99 I write only honest and direct feedback, no sauces around.

The idea is using minimalistic info to help user focus on the color coded domain when he scanning the URL in plain view.

I bet that massive amount of people do not focus on URL once they are on page. Rather, they will get annoyed that URL will move away when addressbar is focused when they want to copy it, or selec part of it and copy it.

I don't like changes when the change is making something worse than it was before change. And in 59% of cases the change is to the worse.

[dude99]

@enc0re

I bet that massive amount of people do not focus on URL once they are on page

Unfortunately u r right, because most people aren't tech competent enough to understand the importance of URL. Heck, they don't even know WTF it is. LOL

And that's why this mod can help them by hiding the complicated stuff that they don't understand & focus on the important part of the URL - the color coded domain. http & https are pretty much the same thing & meaningless to 99.9% of Internet user, matter the fact most of 'em have no concept about "secure connection", so hiding it won't hurt 'em a bit.

But GREEN & PINK domain highlight color will be somewhat helpful to 'em... if they take a moment screening the URL before giving away their password, it could save 'em from lot of trouble later. But recent GC's research shows that Chrome users are just too dumb to even do that, so I hope Vivaldi user will be a bit smarter... LOL

Rather, they will get annoyed that URL will move away when addressbar is focused when they want to copy it, or selec part of it and copy it.

U have judge the book by its cover, my friend. U don't have to install this mod to understand my concept, just pay attention to the demo in the OP & u will notice it's not true. The text will only move to far left when you start typing/editing; selecting & copying text won't change the text alignment. But if u insist on text placement consistency, u can make it centered permanently by follow ReadMe instruction #3.

I don't like changes when the change is making something worse than it was before change. And in 59% of cases the change is to the worse.

Again, this CSS mod is an experimental on UI/UX & no one know if it's useless or not until someone test it out seriously, with an unbiased observation. And so far, after 2 days of using it, to my surprise I don't feel anything weird or annoying about centered URL, matter the fact I found it's easier to notice what website I'm on because it's much more natural to simply look upward of the screen to see the green domain than scanning the URL leftward to look for the domain.

I will keep test drive this until I found something wrong about it... Then, I might fix the problem to optimize this mod further. Good UI/UX take time to optimize, and those UI/UX you get used to since the beginning, aren't necessary always the best, because the Internet is always evolving, for better or worst.

[dude99]

@subtropinka Sorry, I missed your post from 2 days ago. But it seems you have solved your problem since then... LOL

It will take some time to learn enough CSS code to write your own CSS mod, but if you pace yourself slowly & learning it bit by bit in daily basis you will eventually able to code some fun stuff like me.

I'm a self taught CSS script kiddie begin a few years ago, & it's kinda hard in the beginning because CSS is a different "language". Just like learning a new language, you have to get used to new orders, rules, & concepts. So don't get stress over unable to write anything useful in the beginning. Just focus on learning variety of rules & codes as much as possible.

I would recommend u follow FREE online lesson (don't waste $$$ on paid tutorial), do something very simple & basic stuff first to get used to the basic of the CSS language. Then move on to more complicated stuff once you master a strings of simple codes. Most people begin here: https://www.w3schools.com/Css/ , then you can also search Youtube for CSS videos if you prefer learning via video lessons.

If you put a few serious hours into practice CSS daily, in 2 weeks you will be able to write simple code that can customize website via Stylus extension. LOL

[Subtropinka]

@dude99 said in Centering Short Addressfield URL CSS mod:

But it seems you have solved your problem since then... LOL

Yes, yesterday camrade potmeklecbohdan helped me)

1. Now I need to put two another buttons near the address bar. As I see, it's question not of CSS, but JS.
2. Yes, I understand and agree with you about learning CSS. Good idea, I will do it)

[mrjimshim]

@dude99
Hey,after the latest update,the green highlight for secure websites and pink highlight for insecure websites are gone.Could you help?

[nomadic]

@mrjimshim The section with the colors seems to still work for me on 6.8.3381.57. What version are you on?

And since you are a new user, it is worth asking how you added the CSS mods?

If you followed an old guide that recommended adding the file to browser.html or appending it to common.css, then a browser update will wipe your custom CSS changes. This pinned post in the modding section has the up to date instructions: here.

[mrjimshim]

@nomadic I'm on version 6.9.3447.41
And I install all my css modes by adding it to the UserCSS folder and the folder is selected in custom ui modifications in my settings

[nomadic]

@mrjimshim The mod works here, so something about your setup could still be wrong.

Some questions to help figure it out:

---

• Does the mod still center the URL in the Address Field?

  • Just making sure the rest of the mod is working and seeing if some of the CSS is still being applied.
  • A section of invalid CSS can cause all CSS below that line in the file to fail. If the URL is still centered, try moving the color changing section above the rest of the CSS and see if it works then when you restart the browser.
     

• Is this the first browser update you have done since adding the CSS?

• Where is the "UserCSS" folder located?

  • It shouldn't be within the folder that is the same name as the Vivaldi version number. That whole structure is replaced on updates. Somewhere out of the way like the Documents folder on your computer is a good place.

[mrjimshim]

@nomadic
Yeah the mod still centers the URL in the Address Field and like you asked,I tried moving the color changing section above the rest of the CSS but it unfortunatly didnt work.

Nope,not the first browser update I have done since adding the CSS.

The UserCSS folder is located under
C:\Users\ <Username> \AppData\Local\Vivaldi\User Data
Will that be a problem?I havent had any issues in the previous updates with the CSS files being there.

Also,the part which should appear green/pink on the Address Field is appearing white.I'll add screenshot for reference.

[nomadic]

@mrjimshim Sorry, even though you posted your version number, I must have misread it and didn't realize you were on Snapshot.

There was a small change in the structure of the Address Field. The Site Info Button and the URL are no longer siblings. An extra wrapper was added.

Try replacing the color changing CSS with this. I changed the sibling selectors, +, to use :has() instead:

/* secure domain green highlighter  */
.UrlFragment-HostFragment-Subdomain, .UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD {-webkit-text-stroke-width: 0.6px;}
.UrlBar-AddressField:has(.SiteInfoButton:is(.secure, .certified)) .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: var(--colorSuccessBg);}

/* warning domain pink highlighter */
.UrlBar-AddressField:has(.SiteInfoButton.warning) .UrlBar-UrlFieldWrapper :is(.UrlFragment-HostFragment-Basedomain, .UrlFragment-HostFragment-TLD) {color: deeppink;}

---

@dude99 It should work in old versions too if you want to update the first post with the changes.

[mrjimshim]

@nomadic I'm on a snapshot version?Not a stable one? I wasn't aware of that lol.

Thank youu so much!!!! This new code fixed it!

Could you also help me out with something else?

1. Is there a way to make the (i)Not Secure be smaller or just show the (i) icon on insecure websites?
   

2. Is it possible to make the url really short when it is not focused or selected? like right now the url is like this
   
   Can I make it so that only forum.vivaldi.net is visible unless I hover over it or I click on it?Is it possible?

[mrjimshim]

@nomadic if u can't help could you just say so?I've just been waiting.Sorry for the trouble.

[nomadic]

@mrjimshim Sorry, have been busy and was pretty tired when I last replied. You weren't on Snapshot and I didn't even realize my browser wasn't up to date

You could try this:

/* Hide "Not Secure" text on non-secure sites */
.SiteInfoButton.warning .siteinfo-text {
  display: none;
}

/* Hide non-domain URL components unless focused or hovered */
.UrlBar-AddressField .UrlFragment-LinkWrapper .UrlFragment--Lowlight.UrlFragment-Link {
  transition: font-size 0.15s ease-in-out;
}
.UrlBar-AddressField:not(:is(:hover, :focus-within)) .UrlFragment-LinkWrapper .UrlFragment--Lowlight.UrlFragment-Link {
  font-size: 0;
}

Had to animate the font size to make the transition smooth, but you could change it to a display: none; if you don't like the animation.

[mrjimshim]

@nomadic Yesssss this works like a charm! The animation is great.Thanks a lot for going through all the trouble man!
You should probably expect to see me around here asking for your help cause I'm a newbie. LOL

[OhHim]

This post is deleted!