SeaMonkey userChrome.css snippets

Discussion of general topics about Seamonkey
barbaz
Posts: 1504
Joined: October 1st, 2014, 3:25 pm

Re: SeaMonkey userChrome.css snippets

Post by barbaz »

libertyernie wrote:What about Preferences > Appearance > Colors?
Thanks! :D

I apparently had "Use system colors" set. So un-set that and chose white background and problem solved, no undesirable side-effects AFAICT. 8-)
barbaz
Posts: 1504
Joined: October 1st, 2014, 3:25 pm

Re: SeaMonkey userChrome.css snippets

Post by barbaz »

barbaz wrote:2) The notifications, such as the "You have requested a page that is partially encrypted" message and the NoScript bar, now have, by default, a light yellow background that's hard to see. How to customise the default notification style without also overriding non-default styling on notifications?
Wow I must be really tired. Solution to that was right in front of my face -

Code: Select all

/* barbaz restyle only warning notifications .......*/
notification[type="warning"] {
    -moz-appearance: none ! important;
    /* etc...*/
}
On a related note, all the notifications are all scrunched really tiny, so:

Code: Select all

/* barbaz notification height fix .....*/
notification {
    min-height: 26px ! important;
}
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

barbaz wrote:Wow I must be really tired. Solution to that was right in front of my face -
Yep, 3 rules -

#1. Never code when you're tired.
#2. Never code for more than 3 hours at a time.
#3. Always log your changes on a 'Fix List.rtf' as you finish each area - even if it's just pasting the code additions/changes without explanation.

50% of coding is mundane and routine, but 50% is like playing chess and you need your wits about you.

Try this in SM (with Lightning) or T/bird -

Code: Select all

#threadpane-splitter,#folderpane_splitter,#folderpane-splitter,#today-splitter {
	-moz-appearance: none !important;
	background-color: #868C91 !important;
	max-width: 4px !important;
}
Simple enough, simple background colour change on the splitters and limiting the width to 6px (inc. borders.)

Now try it and look at the SM Email client. Put the DOMi on it and see why the whole thing is wrecked...you can't, it shows nothing.

I broke Rule #2 and was saved by Rule #3. Even if you're tired, Rule #3 will save you, by you just commenting out your changes in stages without having to think it through. This one was the max-width and was just a 10 seconds lapse of concentration after a tough session.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

On the new 2.46, there is a massive 'download complete' notification that hangs around and eventually vanishes (I thought the SM devs didn't like animated effects?)

Anyway, short story - this makes that 'box' a lot smaller, i.e. normal looking -

Code: Select all

/*Franks Smaller Download Alert for 2.46+...*/
#alertImage {
	width: 32px !important;
	height: 32px !important; } 
That'll be OK for now, but I can do a better version later, if needed. (that whole code has been imported straight from Firefox - I can tell by the way it's coded *shudder*)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

Time for yet another departure from userChrome stuff. :)

http://forums.mozillazine.org/viewtopic ... #p14723058

There's loads of JavaScript Toggle button extensions around, but let's say we wanted to make our own. I've mentioned the Custom Button extension here before - https://addons.mozilla.org/en-GB/seamon ... m-buttons/ and now we'll use it to do this job as well -

#1. SM menu > View > Add New Button.

#2. In the Code section, paste this -

Code: Select all

switch(this.PS.getBoolPref(this.pref)){
	case true: this.PS.setBoolPref(this.pref,0);break;
	case false: this.PS.setBoolPref(this.pref,1);break;
}
#3. In the Initilization code section, paste this -

Code: Select all

this.pref='javascript.enabled';
this.setState=function(){
 var state=this.PS.getBoolPref(this.pref);
 if (state==1){
  this.image=
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsSAAALEgHS3X78AAADY0lEQVR4nIXU709bVRgHcP6GCzTC6FYGeKX39vZAgI6WH7bg6ES6Qu+hpSGTstkwOqzMdXMrDOi9/NCYmCxu3Ss1KotBlznUmEz8MdtxGcjG3GaiUaNtTmLfzTc20xdfXwwSKc188X3zJOeTJ8855yl4EIwW5EZvC/K7bcEDnCBnOEHOcoKcLRTpVjLlrSFfuX3Emu/sjoKhZbiFE2SNE2RwAkWhyYsiyQcd6YOO+KEjfhQTP+y9J5FY2cBjwfLWkLXdexKcQFFW149icx90tf3QWwawp/Ewdu0bRGlDAKWWAEobArB7T6Oy/SVLXrCs8YjICbLGiRRFJi+MjiHMX76G1+MLqLKHYGgNYe7CAj5Z0rB4bRmXriyhOziDssYjK+X2Y9XbQN4Z0eltwU5OkFEkeaEjflS3DYMxhuTNDVQ+MwrlzQUwxnB08i2MvfEBGGP46edfsdcxslbRFu7JBY2VtgEUir0oJn6U1D8PoSOMVDqNpcQ6qjtP49LidTDG4B45B/HgOByBV9EWmMOTHSf+2OsIZ3hnRPdfsEln9qFI8uGJukPQW1+AuTPyCEzegsk9ASV+BYwxMMbgO3ERZk8MUvckBFcU/IHIQ94ZadoGltT4oavxY5dlEIanQyDuM5vgbUiyAkIVKPGPMb/4LRhjUC9eRXf4PKSeKRi7on/tAMvq+2GwBqC3BcF3HEcdnUQqlcaXN26DUAU1vSoIfZTxc5fx6Ver0NbvwSwrt0zuiX9yQWOFbRDe4Vl8cX0VgVfiEFxRpFJpfLNyB4SqqPVOo7Z3GvV9syBUxdHYu2CMgVDlPalnCrwzYtx2y92Hp7C+cR+MMSjnP0Jz/wwYY/jw82Ucm34f2vp9/PDjL/CMxjE4/jZ++z2FVCoNQtWrZk/sz3zv0FLaEMCpuXeQuHkHydXv8dnXa7D4Z9F06DXU+WYwv5hAcu0ubqzdxfJ390CoeoFQFYJr3LoD3NM8JJXUD2iG1mHwzghE1xjMnhgIVR9uzu7vrRnmRBNcY6a8X6/C8aJ1d/NQsmr/cQhdUZh6pkCospm8WMLYFeUfuxwq20dbKtrC2lPPnoLoPgvJE4M5P6gJrjHxf7fNg2C0oGr/y1beGfFVP3cmI7onspInliVUyRKqZglVM+LBs/tyO9vKvyLhho4N04IcAAAAAElFTkSuQmCC';
  this.checked=false;
 }else{
  this.image=
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsSAAALEgHS3X78AAADcUlEQVR4nIXU3U9bdRgH8P4NBziRl27tyta1pz39wdox2kIpL6OTUUp7Di1HIi1MUlu3BrWDjfHWngwujCRGhhcmmpl5QVaTocaoaDLb7UwGSNw0M2ZxO+SovVw01unF1wsxga6ZF988V79PnuT5PY8KgCqsWtgTtWNEv88xcoJiuDzFcAWK4QplJv6/5LWueEjrPm0vfgdApSoGNc2xZorhJIrhQDE8ysxBlLMh0KQfNBFAEwEVRIC77yyyt7bwVFDritvbg2dBMTxqrAOosPSDrh+AuiGM/Y3DqD42hKqjEVQ1RFBjGwTfHYfTOewsCdY0njJRDCdRJh7l5iCMrVFcyXyG15aWcdAdh8YVx/ylZXy4KmHlkyxujJ7DWE8U9rq+Ta37JcMeUO9J0mrHSBfFcChng6CJAENbDIqiIPf1Fmo7RpF+cxmKoiA29TYkZycejY/jl9cXUOuOr+vaEv5i0FjrCKPM1IcKIqDSNgimMwF5exur2Q0Yus7h/ZXrUGQZnzKN+LiawQcGOzoGL+JQ56u/HmhN5PWeJL0bdNKWEMrZEJ6xPg+1/QVYupL/grlNmH3TEBev4ndBwJ9NTVg1O1HnnwHbOwPGOwH9ieRjvSfp3ANW1gmg6wRUNwxB0xIH8Z3fAb8BCcwioz2C+4dZ/Hj8JBRZhvjWNfQmFsH6Z2HsnvjjCbDGNgCNPQK1YwT6zpdh5Wcgy9v44qt1ZLRHcIvWIaO1op5LYfKNDD76cg3Sxl1YuPSm2Tf9dzFo1DmGEIzN4fPra4iML4HxTkD+6QF+7vFDonXIHLDCyqVh658D4UW8mLoMRVFA+PR7rH8Wek/SuGfKvcOz2Nj6DoqiIL14FS5BxG/hMB66OpCztkBa+xbf/3AfgdElDE2+gwcPZcjyNggvXrMEUo9K/cOGqqMRjM2/i+zNTdxLzeHeqRiWDzWieWAe1tBFXFnJInf7Dm7cvoOb63dBePES4UUw3kn7E+D+pihbaQtLGlcMzS1RPOcMY9zGoZ5LPSa8CMKLf+3U4kiM94K55OrpWs/Y9zVFc8b2M2htPw1L7zQIn95JSSxr7J7QP/U41LaPNuvaEtLhZ8dg8k2BDaRgKQ1KjPeC6X+vTVi1oDp4/BW73pMMGU6ez5t80wU2kCoQPl0gvFggvJg39Uwd293ZbvAfxat6eCzc1xcAAAAASUVORK5CYII=';
  this.checked=true;
 }
}

this.PS=
 Components.classes['@mozilla.org/preferences-service;1']
 .getService(Components.interfaces.nsIPrefBranch);
this.ob={};
this.ob.observe=this.setState.bind(this);
this.PS.addObserver(this.pref,this.ob,false);


(the code is pretty simple, the long stuff is just the images you need being translated into a data format.)

#4. Call it what you like, save it and drag it out of the Customise Window to use and you're done.

****

Don't you just hate it when someone post some really long code or big image here and it breaks the page width?

If so, I'm guessing that's because you haven't put this into your userContent.css file yet -

Code: Select all

 /*.......Frank Resize wide post pages - put in userContent.css.........*/ 
 div.postbody {
	max-width: 650px;
    overflow: auto !important; }
Last edited by Frank Lion on December 14th, 2016, 3:42 am, edited 1 time in total.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

Quick one - Vimeo videos not playing - http://forums.mozillazine.org/viewtopic ... #p14557301

Trouble is, not only will Vimeo vids play, but so will ones on media sites and drive you mad with their autostarting. Going into about:config each time to change the setting back would get pretty tiresome.

So, another Custom Button toggle button needs to be written -

Code: Select all

     /*Initialization Code*/

        var prefName = "media.autoplay.enabled";

        var enabledImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABxElEQVQ4y5WTz0sbQRiGn9m1p+i2FUHQQ/AXu5sQaFHUg6ceCuKhtseCgXrIPyA0FHrqQVkP/QcUFb0qiCCiV1viIbmk6s6KilaLKFo0rQ1FN9vLbklsavSFgfmGd57hG95PcEP6W/2RELwE2v2lABkgjSLm5Yj8XuwXxYWR1HuBcaCB8joGEtJyFv4BGEl9GHgHUGNomBETUzMBsHM29qbND5kL7B+l5Qz9BRhJ/TmwrIaq6O7tJh6Oowq15GnXc5nZnyG1lMK9vAZ4IS1nQfg9rwONna+6SDQnuE1Te1N8ml0FOPYKRBUh6AMaQy3VDDa9oZIGwgPUGBpAvVDoV/yfpjXWSpV4UBGgChUzYgZluwJ0AES1KHdVRIuUAArcUx5esC0oQBpgI7dxZ4Cds4NtJkgZ21+2ufauKl52PRd7sxSwCHy93PnJ2O54RcD0/nQQqCNgXj39fPa7rqduHYifHJxwWHvI08dPUG4EKe/mmdybZG0uFRy9lpaTLY7yB+A9IEIt1bTF2og9jAGQvciyldkif/ArsI9Ky0mWG6ZnwAQQ/k8H34BBaTkrZafRh2hAnx+wDn+c00DG81h0Rp3zYv8fcTKSxJDSkdkAAAAASUVORK5CYII=";

        var disabledImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAALGPC/xhBQAAADJJREFUOE9jYBhM4D/QMcRirO7+v/L4UYIYasmoATiinmAAggJ5uAcipSlxMGUrEtwCAA3iK1xHw9NLAAAAAElFTkSuQmCC";


        this.onclick = function (aE) {
           if (aE.button === 0) {
              Services.prefs.setBoolPref(prefName, !Services.prefs.getBoolPref(prefName));
              setSelfImage();
           }
        };

        function setSelfImage() {
           if (Services.prefs.getBoolPref(prefName))
              self.image = enabledImage;
           else
              self.image = disabledImage;
        }

        setSelfImage();

Go to Vimeo and you toggle it on, otherwise you leave it set to off.

Sorted. :)
Last edited by Frank Lion on December 14th, 2016, 3:45 am, edited 1 time in total.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

Even quicker one - in case it's not obvious, the above code can be used to toggle any Boolean about:config entry from true to false or vice versa. For example, I prefer to use Flash on YouTube, so instead of "media.autoplay.enabled" above, just substitute that with "html5.offmainthread" and you now have a HTML5 Toggle button.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

We're back to .css again.

From time to time, we all come across Facebook pages. If you are a member (I'm not) you, I would imagine, just log in. But if you're not, you get the page going dark (and unresponsive) and a massive popup that says 'Log In, Sign Up' or 'Not Now.' Hit 'not now' and the screen goes back to normal, but still leaves you with a second, slightly smaller, popup.

Trying to then read the page, is like looking at the world from a machine gunner's pillbox.

You can get around this in 2 ways -

#1. Use the JS toggle button (or your equivalent) to turn off JavaScript for this page. - that will stop the popups appearing. It will also stop the page looking or working right.

#2. Put the following in userContent.css -

Code: Select all

/*Facebook Popup Blitz...*/
._5hnd { display: none !important;}
You still have to click the 'Not Now' on the initial massive popup, but after that everything will look and work fine and the second popup has gone.

Incidentally, you might notice I didn't make that code site specific - if the ID or Class (in this case, the 5h stuff) is pretty unique, then I don't bother* as no other sites are going to be using that. But, if you were changing something more common on a site, like body or something, then yeah, you'd have to make that site specific with the usual wrapping.

* saves having to figure out if you have to be site specific for a whole bunch of related sub domains or not...and, of course, pure laziness also play a part.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: SeaMonkey userChrome.css snippets

Post by Frank Lion »

Hopefully there are some apart from just me reading this thread and we are not now in some Resident Evil type, post-apocalyptic situation where I am the last remaining SeaMonkey user on the the planet.

On the off-chance that I'm not, I'll press on -

Yesterday, by some misfortune, I happened to be using the default theme for 10 minutes. Bottom left of the statusbar was the word 'Done', continued reading the page I was on and 5 minutes later and the word 'Done' was still there. What, in 2017, we still haven't fixed that one yet? Not like a loaded page is going to become undone any time soon, is it?

I fixed that one in my theme stuff years ago now. Here's how -

Code: Select all

/*Franks undone the Done...*/
#statusbar-display label[value="Done"] {
	opacity: 0 !important;
	-moz-transition: opacity 0.5s 5s !important;}
When a page loads, it appears for a few seconds and then vanishes for evermore, until something new happens, like refreshing the page or something.

Obviously, if you are unfortunate enough to live in some country that, through sheer obstinacy, refuses to speak English, then I imagine that you would have some other 'word' or primitive symbol showing on your statusbar for that. Just substitute the word "Done" in the code above for your version of it and, er, you're done.....then again, it might be that the 'localisation' stuff is applied later to the main code and you will not have to do anything. Let me know?



(thought I'd better pad this post out a bit as the code snippet is so short. :) )
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
isaacschemm
Posts: 270
Joined: January 20th, 2015, 12:29 pm

Re: SeaMonkey userChrome.css snippets

Post by isaacschemm »

Now that I see this thread again, there are some userChrome.css snippets that I meant to post but never did.

Changing the toolbars from blue (Windows 7 Aero) or white (Windows 10) to gray:

Code: Select all

toolbar, toolbox, sidebarheader {
	-moz-appearance: none !important;
}
Using system colors for the devtools instead of a white background: (this would work in Firefox too)

Code: Select all

.theme-light .devtools-tabbar {
	background: threedface !important;
	border-top: 1px solid threedshadow !important;
	border-bottom: 1px solid threedshadow !important;
}
.theme-light .theme-toolbar,
.theme-light .devtools-toolbar,
.theme-light .devtools-sidebar-tabs tabs,
.theme-light .devtools-sidebar-alltabs,
.theme-light .cm-s-mozilla .CodeMirror-dialog {
	background: threedface !important;
	border-color: threedshadow !important;
}
.theme-light .devtools-tab {
	border-color: threedshadow !important;
}
.theme-light .devtools-tab[selected],
.theme-light .devtools-tab[selected]:hover:active {
	background-color: Highlight !important;
	color: HighlightText !important;
}
.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
	background: -moz-element(#breadcrumb-separator-normal) no-repeat 0 0 !important;
}
.breadcrumbs-widget-item[checked] {
	background: -moz-element(#breadcrumb-separator-normal) no-repeat 0 0 !important;
	background-color: rgb(76, 158, 217) !important;
}
Anonymosity
Posts: 8779
Joined: May 7th, 2007, 12:07 pm

Re: SeaMonkey userChrome.css snippets

Post by Anonymosity »

There is a dark theme for devtools. I use that instead of the light theme and it is quite nice-looking.
barbaz
Posts: 1504
Joined: October 1st, 2014, 3:25 pm

Re: SeaMonkey userChrome.css snippets

Post by barbaz »

As you know, when you open too many tabs to fit in the tab bar, you get scroll arrows on each side of the tab bar. In SeaMonkey 2.49, those scroll arrows cause the tab bar - and the tabs - to grow in height.

I have no idea why it happens. But this seems to fix it -

Code: Select all

/* barbaz keep tab bar the same size ......*/
.tabbrowser-tabs [class^="scrollbutton"] {
  max-height: 1px !important;
}
Interestingly, that doesn't actually resize the scroll arrows to 1px high. It just makes them the same height as the tab bar.

I really don't understand this. :?
barbaz
Posts: 1504
Joined: October 1st, 2014, 3:25 pm

Re: SeaMonkey userChrome.css snippets

Post by barbaz »

In SeaMonkey 2.49, apparently the Bookmarks Manager has "Back" and "Forward" buttons. But those buttons have no icons, and thus, are only visible when you happen to mouse over them.

This gets those buttons actually visible -

Code: Select all

/* barbaz Bookmarks manager fix missing toolbar icons ............*/
@-moz-document url("chrome://communicator/content/bookmarks/bookmarksManager.xul") {
  #back-button {
    list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
    -moz-image-region: rect(40px, 19px, 59px, 0px);
  }
  #forward-button {
    list-style-image: url("chrome://communicator/skin/icons/communicatoricons-small.png");
    -moz-image-region: rect(60px, 19px, 79px, 0px);
  }

  #back-button[disabled="true"] {
    -moz-image-region: rect(40px, 79px, 59px, 60px);
  }
  #forward-button[disabled="true"] {
    -moz-image-region: rect(60px, 79px, 79px, 60px);
  }
}
User avatar
DanRaisch
Moderator
Posts: 127187
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: SeaMonkey userChrome.css snippets

Post by DanRaisch »

Thread locked at the request of the OP.
Locked