Widen 1Password's menu in the browser extension for Chrome-based browsers #1password #browserextension #vivaldi #chrome

The annoying small popup-menu of the 1Password browser extension, where all item titles get cut off and an ... is added, can be modified to a normal sized box.

First, try it inside the dev-tools in the browser window:

Before:

After:

So that works. But where is menu.css? Right-click on the name and choose 'Copy link address':

That gave me: chrome-extension://aeblfdkhhhdcdjpifhhbdiojplfjncoa/inline/menu/menu.css.

I use Vivaldi, so I have to look here for that ID 'aeblfdkhhhdcdjpifhhbdiojplfjncoa' : /Users/myusername/Library/Application Support/Vivaldi/Default/Extensions/
You can find the exact folder for your Chrome-based browser, if not Vivaldi, under the URL chrome://version.

I found it and the complete path to 'menu.css' is now: /Users/myusername/Library/Application Support/Vivaldi/Default/Extensions/aeblfdkhhhdcdjpifhhbdiojplfjncoa/8.12.10.36_0/inline/menu/menu.css

Open the file in a text editor and find html{width:300px;max-width:300px} and change that into html{width:max-content;max-width:500px}.

Save and close, reload the page in the browser and voilá.

You'll probably have to this again after every update of the 1Password-extension, until they decide to make this change permanent.

CSS buttons

Today I converted all download links on this site, from using Javascript + CSS to style them to CSS-only (with a background image). I kept some CSS from the JSbuttons installation, because that is how I still want them to look. In case you're interested, here's the CSS:

General CSS:

.mybutton {
   display: block;
   position: relative;
   float: left;
   background: #aaa;
   padding: 5px;
   margin-top: 0px;
   margin-bottom: 10px;
   border: 1px solid gray;
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   color: #fff;
   font-style: normal;
   font-weight:bold;
   line-height: 15px;
   cursor: pointer;
}

.mybutton:active { background: #444; }
.mybutton:hover { background: #eaeaea; }

.mybutton.blue { background: #2ae; }
.mybutton.blue:hover { background: #05b; }

.mybutton.green { background: #5b5; }
.mybutton.green:hover { background: #282; }

.mybutton.pink { background: #e1a; }
.mybutton.pink:hover { background: #a0a; }

.mybutton.yellow { background: #dd3; }
.mybutton.yellow:hover { background: #aa0; }

.mybutton.black { background: #222; }
.mybutton.black:hover { background: #000; }

.mybutton[class] {
   background-image: url(%pathto(button-shade.png)%);
   background-position: bottom;
}

On a per page basis:

a.mybutton {
   height: 16px;
   width: 100px;
   color: #eeee00;
}

a:hover.mybutton { color:#ff5500; }


And this is the background image (inside the border):

Normal link:	.mybutton link:
Go to Apple	Go to Apple
<a href="http://www.apple.com/">Go to Apple</a>	<a href="http://www.apple.com/" class="mybutton blue">Go to Apple</a>