MozillaZine

Australis Ico/Text, Text Only and more...

Discussion of general topics about Mozilla Firefox
phkhgh
 
Posts: 790
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Post Posted August 17th, 2014, 3:33 pm

Frank, then you're saying an edited image must be placed INside the userChrome.css file - not just in the chrome folder? Cause I tried it in just the chrome folder & it doesn't work.

If it must go inside the chromeUser file, except for "keeping everything in one place" and slightly less written code, I don't see much difference vs. putting edited images in other paths. Except that putting them inside userChrome.css may require restarting Fx?
DOMi shows the Reload under Computed Styles as being - list-style-image: url("chrome://browser/skin/reload-stop-go.png");

So, I put chrome://browser/skin/reload-stop-go.png in the urlbar, image pops up, save it and open in graphics program

Good tip!
If you have the chrome path to enter in the Fx address bar, that's faster. If only have a file name (for instance), but know it's located "somewhere in omni.ja," using a "real" search function (like Multi Commander & others) is very quick (assuming omni.ja has been extracted to another location) compared to searching by hand through all omni.ja folders.

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted August 17th, 2014, 3:56 pm

phkhgh wrote:Frank, then you're saying an edited image must be placed INside the userChrome.css file - not just in the chrome folder? Cause I tried it in just the chrome folder & it doesn't work.

???

Edited image goes in the chrome folder and the latest .css code in the userChrome.css file. It works.

I think we've taken this one as far as we need to now.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

phkhgh
 
Posts: 790
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Post Posted August 17th, 2014, 4:03 pm

To test, I put the edited image in chrome folder, but I'm using Stylish for the code. That didn't work.
Maybe your method won't work doing it that way (no idea why).

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted August 18th, 2014, 1:45 am

Summary (of most of Page 9) -

Image

Code: Select all
/*Franks Blue Reload Button....*/
 #urlbar-reload-button {
      -moz-image-region: rect(14px, 14px, 28px, 0) !important;}



Code: Select all
/*Franks Green Reload Button - this code in userChrome.css and place image below in chrome folder..*/
#urlbar-reload-button {
   list-style-image: url("reload-stop-go.png") !important;}


Image


...for any other colour of the Reload button or other buttons then wade through the code of this theme - https://addons.mozilla.org/en-US/firefo ... lis-theme/ and learn about svg code filters.


Err, that's it.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted October 6th, 2014, 4:44 pm

We'll go off on a slight tangent now.

Up till now, I've concentrated on how .css coding relates to the UI (the user interface, aka chrome, and is essentially all the bits you see in a browser that are not part of the web page). However, we can also use .css coding for other useful stuff. Look up userContent.css in the Knowledge Base searchbox on the right to learn about that file. This is how we can alter what you see on the webpages themselves, again just using .css.

For example, I use weather.com (very accurate) for its 5 day forecast, but by default the site is a right old mess. With .css I can get rid of everything I don't need and just have the actual 5 day forecast. Miles better to use and the site loads much quicker.

To start you off into this userContent.css journey, try this -


Code: Select all
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("youtube.com"),domain("last.fm"){
* {background-color: #001011 !important;
color: #CDAE03  !important;}
a, li > a.title, li > a > span.title {color: #CDAE03  !important;}
#masthead-search-terms {background: #CDAE03  !important;}
h1, h2, h3, h4, h5, h6 {color: #cccccc  !important;}
#watch-player {border: 1px #cccccc solid !important;}
strong {color: #eeeeee !important;}
#watch-headline, #watch-video {width:98% !important;}
p, button,.yt-uix-button {
color: #dddddd !important;
background : #001011 !important;}
.yt-uix-expander-head {color: #FFFFFF !important;}}


...and then look at the Youtoob vids. See the difference?

Right click this page and select 'View Source'. See all that gibberish written there? Yep, most of the code used in webpages is .css coding. Begin to see how useful knowing about .css can be?

Why do I concentrate on userChrome.css and userContent.css fixes and not the Sytlish extension? Simple, most people just look at the styles, click 'Install' and never see the code that underpins what we're doing, never understand what they're doing and never learn a damn thing about what they're doing.

Does that matter? Well, not if you want to be totally dependent on guys like me forever. But, I reckon that at least a good few of you would like to learn how to do things for yourselves, if only someone pointed you in the right direction and that's really what this thread is about.

It's not actually about computer stuff at all, it's about self sufficiency and that's always been a big thing with me going right back to when I built my first camp in the woods when I was a kid. People should know how to do things for themselves, well, I reckon so anyway. :)
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 2nd, 2014, 3:54 pm

Here's a very simple one for people who just want a simple blank page when selecting 'New Tab'. Don't forget that gear wheel thing in the top right, if you only want a blank new tab style. The code below just reverts this lot to how Firefox used to show a new tab.

Unusually, this one goes in userContent.css as that page is treated as 'content'. Content is just stuff that is not user interface (UI), i.e. webpages, etc -

Code: Select all
/* Franks Blank Page for New Tab...*/
#newtab-scrollbox{
   visibility: collapse!important;
        display: none !important; }


Why do I code stuff for both display and visibility, when only one seems to be needed? Because the app code keeps changing, that's why.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

dickvl

User avatar
 
Posts: 51980
Joined: July 18th, 2005, 3:25 am

Post Posted November 2nd, 2014, 11:24 pm

It would be best to put that code in an @-moz-document url(about:newtab){} container in the userContent.css file.

Code: Select all
@-moz-document url(about:newtab){
/* Franks Blank Page for New Tab...*/
#newtab-scrollbox{
   visibility: collapse!important;
        display: none !important; }
}


Note that this is still an XUL page if you hide its content that way and thus may inherit its special security permissions (principal) if you would open a link in it.
I don't know how the about:newtab page works in this aspect.
It would be better to set the browser.newtab.url pref to about:blank if you want a blank page.

I use this code in userChrome.css to hide the EV label in the location bar and show it on hover to show more of the URL.
Code: Select all
#identity-box #identity-icon-labels { display:none; }
#identity-box:hover #identity-icon-labels { display:-moz-box; }

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 3rd, 2014, 4:31 am

dickvl wrote:It would be better to set the browser.newtab.url pref to about:blank if you want a blank page.

Personally, I prefer this route. But in this case, I had been specifically asked for a coding solution.

However, this would be a good point in this thread to do a 'Starter Guide to about:config' here and I'll do so in the next post. Meanwhile, just think of the about:config prefs like you would the registry in Windows - very good to know, but randomly fiddling about in there can really wreck stuff.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 10th, 2014, 1:28 pm

Frank Lion wrote:However, this would be a good point in this thread to do a 'Starter Guide to about:config' here and I'll do so in the next post. Meanwhile, just think of the about:config prefs like you would the registry in Windows - very good to know, but randomly fiddling about in there can really wreck stuff.


Coming back to this one, and here I get lucky. Many of our Knowledge Base articles are 'somewhat convoluted' by trying to cover too much in one article and are, as a result, damn hard to understand.

But, first link here - http://www.google.com/cse?cx=0032583250 ... gsc.page=1

Clear, concise and covers just the essentials. Good, saves me having to write it.

To repeat my earlier warning - about: config stuff is not like userChrome.css stuff which can always be reversed in the text editor, like Programmers Notepad. Fiddle about blindly in about:config and not keep notes of what you've changed can and will result in some seriously messed up profiles, which could easily result in you having to create a brand new profile. I think you get the message? :)

Here's an about:config entry to practise with - browser.search.openintab Search for it in the about:config searchbox in the top left and then right click the actual entry. Toggle it to True. You're done, all searchbar search results will now open in a new tab.

To reverse this setting, right click the entry and select Reset.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 10th, 2014, 7:47 pm

Just a very simple .css snippet in passing, for 'Icons with Text' users -

Code: Select all
/*Franks Toolbar button text to the right of Button...*/
toolbarbutton {-moz-box-orient: horizontal !important;}
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

easysid
 
Posts: 2
Joined: November 21st, 2014, 4:48 am

Post Posted November 21st, 2014, 5:27 am

Hi,
Fantastic thread. I leaned a lot from it and using the snippets from here and around the web, I was able to change the look of my browser quite to my liking. I still have a few issues, and could not find help elsewhere.
I changed the forward and back button images on the browser. I'd now like to add hover and click effects the way stop/reload button is done, where only button glows/changes color, so box shadows and gradients are out (probably).
I used svg because I thought they would support fill property, making it easy to change colors on hover and click. However, I wasn't able to embed svg the normal way (using <svg> tag) so I used base64.
Here is the code I have so far
Code: Select all
/* *** Back and forward buttons*** */

/* Strip all decorations */
#back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon{
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Put new images */
#back-button {
    list-style-image: url(data:image/svg+xml;base64,<long string>) !important;
    -moz-image-region: rect(0,18px,18px,0) !important;
}
#forward-button {
    list-style-image: url(data:image/svg+xml;base64,<long string>) !important;
    -moz-image-region: rect(0,18px,18px,0) !important;
}


Image

So, how do I add hover effect to the buttons?

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted November 22nd, 2014, 6:19 am

easysid wrote:So, how do I add hover effect to the buttons?

Hi,

Glad you're finding the thread useful.

If I just had Forward/Back to do, I'd just make the Back in a graphics program and flip the image for Forward. Hover versions would be made with Bri +10 Con +40 as a starting point (the 'glow' effect comes from the contrast cranking and not from drastically increasing brightness as Firefox default used to do!) Active states are just Bri -10 Con +10 versions of normal state.

These can then be thrown into the chrome folder as 6 images and linked to or done on one .png and -moz-image-regioned. These days, because of using transform and svg filters so much, I hit class, not id, as there are far fewer unwanted effects that way, i.e. - #back-button > .toolbarbutton-icon,
#forward-button > .toolbarbutton-icon

Don't ever use opacity for a state, unless it's some old close button that no one uses and you're in a real hurry - it looks really poor.

If I have normal/hover/active/disabled states to do for an entire toolbar button set (I did this with the Tigers and SeaMonkey themes) then I'd do my versions of svg filter states, save it as states.svg and link to it in the code - viewtopic.php?p=13345625#p13345625 This method, if you want to, has the advantage of providing states for extension buttons as well.

For those not familiar with this stuff, svg in this context is not an image type like .png, .jpg but a type of coding that hits images and there is already a simple greyscale one in default. Svg code filters are a complex area in their own right, my advice is not to try and understand the stuff, but to just use it and fiddle with a couple of the values, test, redo, etc.

Anyway, that's how I would/have done do it.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

easysid
 
Posts: 2
Joined: November 21st, 2014, 4:48 am

Post Posted November 22nd, 2014, 10:35 am

Thanks for the reply.
I went the png route. Got the idea from your reload-stop-go image and saved 6 icons in a single image :) . Used -moz-image-region to select the appropriate image.
svg seemed to be a bit out of my league.
I am still figuring the things out. There are some issues regarding doing things cleanly. (The urlbar doesn't like a resized back button). I'll ask here if I need help.
Thanks :)

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 12th, 2014, 4:51 am

If not already, then soon, you will have come across Firefox/SeaMonkey warning you that the Flash plugin is out of date - even when it isn't. Interfering with Firefox's/SM's blocklist (it blocks rogue extensions, plugins, etc) to fix this is overkill and, indeed, just leaves you vulnerable to nasties.

Instead, in the case of SeaMonkey we turn to .css. and userContent.css

Code: Select all
/*Franks SeaMonkey Flash Fix...*/
.msgVulnerabilityStatus,.msgCheckForUpdates {
   display: none !important;}


The problem in SM has gone. Firefox is using more layers for this, so I'll look at that later.

Edit - Better than it was, but Firefox is actively trying to block the plugin here and you seem to need to also 'Allow Now' the plugin in the urlbar dropdown. *sigh* Adobe themselves updated my Flash only 3 days ago, but this browser knows better than them about their plugin?

Code: Select all
/*Franks Non Ideal Firefox Flash Fix...*/
 .msgVulnerabilityStatus,.msgCheckForUpdates,:-moz-handler-vulnerable-updatable .icon,
:-moz-handler-vulnerable-no-update .icon {
   display: none !important;}
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Frank Lion

User avatar
 
Posts: 19085
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted December 26th, 2014, 11:20 am

This next one is not .css at all, but comes under the category of 'good to know'.

This is how you get your Unsorted Bookmarks list to appear on your Bookmark Toolbar Folder -

#1. Bookmark any site, by Bookmark Star and saving to BTF or just by dragging the favicon in the addressbar to the BTF.

#2. Right click that bookmark and select Properties.

#3. Change Location to - place:folder=UNFILED_BOOKMARKS and Name to something like Unsorted.

#4. Restart Firefox and you're done.

(earlier on this thread I went through how to add scrollbars to any long menu list in Firefox, so look at that if you have lots of unsorteds)

Latest builds of Firefox no longer show those Menu > Bookmarks > Unsorted Bookmarks in the expanded form as before, so this tip is useful for things like that.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

Return to Firefox General


Who is online

Users browsing this forum: dsmith and 1 guest