Old PM15-style padlock icons for PM19 and up

Post your tutorials for using Pale Moon or performing related tasks here.
Note: Not for "how do I...?" Questions!
Forum rules
Tutorials and Howtos should only relate to Pale Moon, and not to third party applications. e.g.: Don't post a Howto for configuring your firewall.
If you have a question how to do something, you should use one of the support boards, not this board. It is meant for people to document and post instructions.
Locked
Sowmoots

Old PM15-style padlock icons for PM19 and up

Post by Sowmoots » 2013-06-15, 04:05

In Pale Moon 15 striped, 3D-looking padlock icons were used in the UI to show secure/EV/broken security status for sites. These were changed to flat, 2D-looking padlock icons in PM19.

For users that prefer how the padlock icons looked under PM15, this CSS code will change the look of these icons in PM19 and up back to the style used in PM15. This code also removes the empty areas that appear at the end of the status bar and the tab bar when padlocks are enabled but not shown in those areas.

Code: Select all

/*Restores the old striped padlock icons(broken/secure/trusted) that were changed to flat padlocks in Palemoon 19*/
/*Broken padlock*/
#padlock-ib[level="broken"][padshow="ib-trans-bg"],
#padlock-ib-left[level="broken"][padshow="ib-left"],
#padlock-ub-right[level="broken"][padshow="ub-right"],
#padlock-sb[level="broken"][padshow="statbar"],
#padlock-tab[level="broken"][padshow="tabs-bar"] {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnhJREFUeNqkU99LU1Ec/5zr3E/bMjfmXU0xXaMiX3oSHwzqpQeRalAUIfZUYH9A9FA++drrsB5CoughkCiooCAUwkRCG5rc2ObY5q9t7s6p9+6eezr3ug2DosADX875Xu7nx/me75cwxnCQZdmfSO8uDtga7YNfZ74Rt9v1/MLt7y//RSDUDh+i3XcXYksvsulkwe/zrH+ZXXs69+r86H87KG6W74dD4vCZy5NPjDy9Hv48N/9zTIo0xJxi64C7+Ugvk2Xk11anZEWZ0IBng/z+dYJQu9vi83nf1vIu0fs+Nb6oh29cH/e6mmDNZkDjcZRLpUhGVSMxxrrGCBmpEzgdDn1H3tip5Yk70/2nLl1zBkURDYkEElHTGLwBP0QQKAQPOIlk+RQ92dbeFri5q+zabcQ5KL05lyMCQdMJcdhQNsBUkvZctXqxURXwcBIr2IAl2NaR9Hf2YS3+Ed7g2UcgvK66ipyzuGc7lYK2nKoXrVINwsMB0iusZxdA7MfgC10BsQUhODqh0QawUsm8swGu5PO/EajVqNReIRt7DF3XwZgO16EWbBULKHtklOdzsBeL4BWHi999eR94i0cBbMokaPaHuG0FYBoE7sZqS2K7r4zM5KxZMGOVM6vmrnKibb6vgkEGJkwCObcMnVIYbW21yZA382DhClb6W6C8zpkFIxxYUzbAPxgbobwXTILD/tNgumoqEMEGSqfRaBUQGvJjpaMRS1MyKjPb2UrVtqFsgB/WGkkp8aeimqHDa0GRiqehaZSfGehxC452+9BzKx74YyvvqParSwuL94yfzQ8WAVJShqJQMzeG1eUURnv+MgvkoOP8S4ABADV6IMIW33wjAAAAAElFTkSuQmCC) !important;
}

/*Secure padlock*/
#padlock-ib[level="high"][padshow="ib-trans-bg"],
#padlock-ib-left[level="high"][padshow="ib-left"],
#padlock-ub-right[level="high"][padshow="ub-right"],
#padlock-sb[level="high"][padshow="statbar"],
#padlock-tabs[level="high"][padshow="tabs-bar"] {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe9JREFUeNqkk09oE0EUxr+dZLO7iY0tJixK06g1hSJ48SDiwYO96EXFgxf/HLyI4Fk8ePAg1VPPBRHEg/9QPClF0KuoFAmG1BBok5BGk9boJs06uzuzvlgD0m7bgLMM7Jt583vf+5hRfN/H/wxlI0Bx5vhJTdUvfvj4SYnHYw8nLn9+EpTHghZfTx+4ms8VHtWqpaaZ3N54N1u/n31+bDKwUlfB2vn09t6v2WdHLvXix3fGzj24mbaDcgMVZNLxcDKZeNmLx/aYM0Nxtd13C1HDkLa1ZPfiyuJih7SKLU18Oz0+kh7ZdX6l1bym6dEbLBReVpiCb/XGYL3RuWUmYlMrHffexJW5ciCg+OqEv3P0KOrzb5BIHaRdEigdCL6EQm4Ww6kUKuXSi0MXsqcDW2jU8lD0YSQzZ6BoKTBjFJ4IQQiJ3fvGwVQN0mud+vdMeG1PtdxdSCnJYYnYwA60fzbhcJsgAq7rrPNgHWDIzJBsTp55YKQmopXguZygHkFcVBe+bA6wlsuQVK3rTUSzYP34Dm63Yf9ywLkDQ99CwaC5H75claowjaq+hxphMLaFCKwSkG8O4K0FOuRBoU9Kgcp8FZ4n6N+HoDlAoA0BtqOfLeTnrneT/2yGGYoli6SLv9ceiEXZ5OF+XmO/47cAAwD3W/5lconD2wAAAABJRU5ErkJggg==) !important;
}

/*Trusted padlock*/
#padlock-ib[level="ev"][padshow="ib-trans-bg"],
#padlock-ib-left[level="ev"][padshow="ib-left"],
#padlock-ub-right[level="ev"][padshow="ub-right"],
#padlock-sb[level="ev"][padshow="statbar"],
#padlock-tabs[level="ev"][padshow="tabs-bar"] {
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAB3RJTUUH3AkaCBQSSJhU2wAAAAlwSFlzAAALEgAACxIB0t1+/AAAAdVJREFUeNpj/P//PwMlgAWXRPPpaH92dvb4c6cvMvLwci+fE3ZoFTZ1TNgEU1c55N64dmvF46eP3wuLCr6+f+bZwuqDoe1YbQJ5AR1HzDJ5UXbALxnGj5ppHhM8yeA7NrVYXSCmJMAiIiq8DcaXURXfySnA9oVoL/Byc/77+O3ddxj/6ePn34DUX2xqGZFjIWWNjZyMvHTsx6/vyznYOWtZmFjeMjIyMrx68Ubg45svrQKivP0/v/2aNy/86COssSAvL//QQNaa4fzTwwzqEgYTQA789/83g7ToW4bL1y8yyMrJ1D969EgfqDQQqxfuP7/NIMQqyWAt48MgzCLFIM4mB3Q4I8O/v/8Z1JTVGViZ2Bi+//kSgDcd7Ly7lOHfv3/gEBbgEWL48Pk9w89fPxj+/v3L8OvXL8IJSUpECaj5N9DpfxkE2SQY2NmeMvz8AzHg59/fDA8f38ZvwOsPT+Au+MT2keHDx/cM335+ZQAGHtgFTOwEXKAorMnw5x/EqSxAP3/+c46BmYWZgY2dlYH5HyPDz08/8Bvw8tsjsHNB0Qeinz96BuEDA/IPELPzsOA2gOkXW/itG7cqYWmDiYWJ4c399wx/fiLSECsnM0qeYKQ0OwMAN/rv8jWbqfQAAAAASUVORK5CYII=) !important;
}

/*Hide unused padlock icons that otherwise take up phantom space*/
#padlock-ib:not([padshow="ib-trans-bg"]),
#padlock-ib-left:not([padshow="ib-left"]),
#padlock-ub-right:not([padshow="ub-right"]),
#padlock-sb-panel:not([padshow="statbar"]),
#tabs-padlock-tbitem:not([padshow="tabs-bar"]) {
    visibility: collapse !important;
}
To use this code, put it in your userChrome.css file or use Stylish to create a new style and put the code in.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 27283
Joined: 2011-08-28, 17:27
Location: 58°2'16"N 14°58'31"E
Contact:

Re: Old PM15-style padlock icons for PM19 and up

Post by Moonchild » 2013-06-15, 10:56

I've actually been planning to give users a choice in the padlock style, either modern (default) or classic. This code will become redundant once that's implemented, but in the meantime it's a good alternative :)
"There will be times when the position you advocate, no matter how well framed and supported, will not be accepted by the public simply because you are who you are." -- Merrill Rose
Image

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 27283
Joined: 2011-08-28, 17:27
Location: 58°2'16"N 14°58'31"E
Contact:

Re: Old PM15-style padlock icons for PM19 and up

Post by Moonchild » 2013-06-27, 09:03

I'm adding the padlock style choice for classic/modern to Pale Moon 20.2. I'm also adopting the "cleanup" code to prevent phantom space (with some edits); thank you for pointing that out! It'll avoid unnecessary "jumping" of the user interface.
"There will be times when the position you advocate, no matter how well framed and supported, will not be accepted by the public simply because you are who you are." -- Merrill Rose
Image

Locked