MozillaZine

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

Discussion of general topics about Mozilla Firefox
Frank Lion

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

Post Posted July 24th, 2014, 12:03 pm

Thanks, Dick.

In Firefox 31 the about:config pref for vanishing the tab close buttons has been vanished itself.

Meanwhile, here's how to vanish, should you so wish, your tab close buttons -

Code: Select all
.tab-close-button { display:none !important;}


Incidentally, if you notice your tab close buttons and other tab stuff suddenly looking odd, that'll be the new brighttext selector for #TabsToolbar, i.e. #TabsToolbar[brighttext] Easy enough to override, but you sort of have to know it exists first. ;)

Incidentally #2. - for want of somewhere better to post this info ....On FF31 the NewTab page has changed and a searchbox has been added. People being, er, as they are will assume that this is like the Firefox 'Start' Home page with the Google searchbox.

It's not. Change the NewTab search engine with your search engine manager in the searchbar to whatever search engine you want. Alternatively, enter this - chrome://browser/content/search/engineManager.xul
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.)

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted July 27th, 2014, 11:26 am

An alternative trick to show the tab closer on the active tab and on hovered tabs:

Code: Select all
.tabbrowser-tab:not([selected]):not(:hover) .tab-close-button { opacity:0; }
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Borgata
 
Posts: 59
Joined: March 12th, 2005, 4:23 pm
Location: Italy

Post Posted August 11th, 2014, 8:44 am

Hi everybody. :D

I tried to reduce tab's height (and other things), but I've a problem when tabs is disposed on more lines.
Here is the topic I opened for my issue and where you can find e detailed description of the problem.

I read this topic but it seems it don't contains what I need, so, as suggested, I reported my topic here.
Thanks. :wink:

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

Post Posted August 17th, 2014, 9:12 am

Hi,
I appreciated the code to make the reload & Stop buttons larger & move them to L-end of address box in Australis - shown here:
viewtopic.php?p=13508369#p13508369
I even made the Reload button slightly larger than specified in Frank's code.

Small problem for me is, for many yrs the reload has always been outside the address box - next to Nav buttons (for me). So it being dull gray kind of obscures it.
If I could change the color of reload button in its UNhovered state, it'd make it easier to spot.

That may be easier said than done. I believe ? the image(s) for the reload are in the form: -moz-image-region: rect(0px, 14px, 14px, 0px);
with image specified: list-style-image: url("chrome://browser/skin/reload-stop-go.png");

BUT... searching w/ MultiCommander in omni.ja from Fx 29, I don't find an entry (specification) for file "reload-stop-go.png." That file reference only appears in earlier Fx omni.ja files (least, that's what searching shows).
However, that's where DOMi seems to indicate the .png is, when using "Inspect" addon to inspect the reload button in Fx 31 UI. So, I'm confused about that.

I'm not sure a color can just be added. Don't know how difficult it'd be to find a colored set of these same buttons (with correct dimensions).
It might be easier to specify a background color for the Reload button?

I guess the gray reload button image could be "colorized," saved, then the new image / path could be specified as part of Frank's code?
That's a good bit of work for something so small.

EDIT: I quickly found the button set for reload-stop-go.png in Fx 31 omni.ja & colored the inactive reload image (Paint.net). Saved it in exact same size to new path & added the code to use the new image, to Frank's code for changing the reload button location in Australis. Ashamed to show the amateurish code I used (but it's worked for other stuff, before). NOTE: THIS 1ST CODE ATTEMPT (below) DIDN'T WORK (will be obvious to experienced CSS coders, but not to me :D):
Code: Select all
#urlbar-reload-button {
   list-style-image: url("file:///E:/Temp/Mozilla/Firefox/icons/Buttons/Australis-reload-button-colorized/reload-stop-go.png");
   -moz-image-region: rect(0px, 14px, 14px, 0px);
}

Then I looked at the original code in the browser.CSS file & came up w/ this - which WORKS to color the unhovered reload button (using my edited / colorized reload button):
Code: Select all
/* Use colorized reload button image */
#urlbar > toolbarbutton {
  -moz-appearance: none;
   list-style-image: url("file:///E:/Temp/Mozilla/Firefox/icons/Buttons/Australis-reload-button-colorized/reload-stop-go.png");
}

#urlbar-reload-button {
   -moz-image-region: rect(0px, 14px, 14px, 0px);
}


Thanks.
Last edited by phkhgh on August 17th, 2014, 10:40 am, edited 1 time in total.

Frank Lion

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

Post Posted August 17th, 2014, 10:27 am

phkhgh wrote:Hi,
I appreciated the code to make the reload & Stop buttons larger & move them to L-end of address box in Australis - shown here:
viewtopic.php?p=13508369#p13508369
I even made the Reload button slightly larger than specified in Frank's code.

Yeah, I use code to resize all sorts of stuff these days, but you have to be careful if making images larger as they go fuzzy.

Small problem for me is, for many yrs the reload has always been outside the address box - next to Nav buttons (for me). So it being dull gray kind of obscures it.
If I could change the color of reload button in its UNhovered state, it'd make it easier to spot.

That may be easier said than done.


These days, it's easier done than said and I do it all the time -

The following are on one of my SeaMonkey themes and show a hovered Reload and active Back on images that are all silver grey, but it would be just as easy to colour them to any colour for normal state -

Image


Image

viewtopic.php?f=18&t=2845889

Back in January, I did a basic 'proof of concept' theme to sort out a number of problems surrounding the making of third party themes. One of the improvements was to use svg code filters to colour things or make them grey, etc - that theme, Metal Lion Australis, is completely open source and I would encourage people to pull it apart to learn about the svg filter side - https://addons.mozilla.org/en-US/firefo ... lis-theme/

Things have progressed a lot since then and I now use different filters to select any colour I want, instead of the limited range (about 12 colours) that I had available in that MLA theme. I also now use svg filters to do the hover effects (where the icons glow, like a lightbulb being turned on) and the darker active states.

On a personal note, in some ways it's a pity that the Complete Theme side has collapsed (and the public interest in them) as really all of the historic problems that arose since Firefox 4 have now been solved with that template theme.

It's now possible to make a Complete Theme in a few days, instead of weeks and weeks (some guys took months!) The maintenance of them, even with Rapid Release every 6 weeks, is reduced to a couple of hours instead of being never-ending. For example, these changes - viewtopic.php?p=13707605#p13707605 really didn't take very long at all. In the old days, themers would have had to wade through this lot - viewtopic.php?p=13709201#p13709201. As it is, I didn't even have to look at it.

Not really a problem for me, the only really enjoyable part of being a Complete Theme writer has ever only been the initial making of them and the maintenance of them has always been a chore. Certainly, having to constantly maintain/update stuff you hardly remember making using the old methods every 6 weeks is something I didn't fancy.

It's a great pity that so many of my fellow theme writers have now quit.

.......still, returning to the subject in hand. If you don't want to colour other buttons and only want to colour the Reload button in the normal (unhovered) state, then use the hover coding for it, like this -

Code: Select all
#urlbar-reload-button {
  -moz-image-region: rect(14px, 14px, 28px, 0) !important;}
Last edited by Frank Lion on August 17th, 2014, 11:00 am, edited 1 time in total.
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: 807
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Post Posted August 17th, 2014, 10:58 am

Thanks for all you do, Frank. Yes, I see what you did there. I wanted a color on the UNhovered reload button (not dull gray). Which I accomplished.
If anyone's interested in how to color it, then save to a path you can specify in code (Stylish or what ever), just say so & I'll give basic steps. No one may care about coloring it but me, though it could be applied to many buttons.

I only colored one reload button (gray one) out of the 3 contained in the "reload-stop-go.png" image (originally in omni.ja). Using Paint.net, enlarging the image to say, 1000%, then coloring over the reload button - pixel by pixel, then saving it to a new file (of same name, different path). Not a big deal. Many programs would do for this, but Paint.net is one of the best.

Frank Lion

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

Post Posted August 17th, 2014, 11:13 am

phkhgh wrote:Thanks for all you do, Frank. Yes, I see what you did there. I wanted a color on the UNhovered reload button (not dull gray).

Did you see my edit for this above? -

Image


You could also have your new image directly in your chrome folder instead of that temp one and instead of this path - list-style-image: url("file:///E:/Temp/Mozilla/Firefox/icons/Buttons/Australis-reload-button-colorized/reload-stop-go.png"); just use this -

Code: Select all
#urlbar-reload-button {
   list-style-image: url("reload-stop-go.png") !important;}
Last edited by Frank Lion on August 17th, 2014, 1:41 pm, edited 1 time in total.
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: 807
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

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

Did you see my edit for this above?

Well... no. Guess I'm not following - "the edit."(no surprise there). Guess I missed it / went over my head. I get it now.

But I do get that it may be easier to keep up w/ images (& a bit shorter code - to make it work), to place them in "chrome folder."
But which chrome folder? Where your userChrome file is? Just place the image(s) to be used for occasions like this in the root Chrome folder in the profile?
Or are we talking about putting it in omni.ja?

By your statement:
If you don't want to colour other buttons and only want to colour the Reload button in the normal (unhovered) state, then use the [color of the hover reload icon] hover coding for it, like this

Code: Select all
#urlbar-reload-button {
  -moz-image-region: rect(14px, 14px, 28px, 0) !important;}

Meaning? - specify a different row of icons (from the image) for the unhovered reload button?
Yes, that'd work (I guess - didn't try). It'd be easier than coloring the icon, as long as the blue color is acceptable. It probably would've been OK, if I'd thought of that earlier.
As is, have a shiny, green reload button (yea!) & got a bit of practice shading icons.

Frank Lion

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

Post Posted August 17th, 2014, 12:12 pm

phkhgh wrote:But I do get that it may be easier to keep up w/ images (& a bit shorter code - to make it work), to place them in "chrome folder."
But which chrome folder? Where your userChrome file is? Just place the image(s) to be used for occasions like this in the root Chrome folder in the profile?

Yep, that's the one.

Meaning? - specify a different row of icons (from the image) for the unhovered reload button?
Yes, that'd work (I guess - didn't try). It'd be easier than coloring the icon, as long as the blue color is acceptable. It probably would've been OK, if I'd thought of that earlier.

Yep, that's what's showing in that last pic - the hover code on normal state. Like you, I didn't think of it at first, because I was thinking of green..like you. But, if someone just wants to be able to see it easier then blue would work and the code route is easier to do.

As is, have a shiny, green reload button (yea!) & got a bit of practice shading icons

...And learnt a lot more by doing so. Well done.
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: 807
Joined: January 25th, 2007, 2:49 pm
Location: So. U.S.A.

Post Posted August 17th, 2014, 12:34 pm

Just for fun, I put a copy of "reload-stop-go.png" in the chrome folder of current profile. Using your code, it doesn't pick it up. The reload button is blank in the UI.

Guessing it may have to do w/ the fact I don't keep profiles in the default location.
For example, when I open the file (placed in the chrome folder) in a browser window, the path is:
file:///F:/Mozilla%20Shared%20Profiles/Firefox/t681iswd.FX-shrd-5-3-14/chrome/reload-stop-go.png
Maybe the code you gave, "list-style-image: url("chrome://reload-stop-go.png") !important;}"
only works if the profile & chrome folder were in default location?

NOTE also (no biggie):
If one wants to color the UNhovered reload differently from the blue (the hovered color), THEN also wants it to change to blue - when hovered, they shouldn't place "!important" after the code:
Code: Select all
#urlbar-reload-button {
   -moz-image-region: rect(0px, 14px, 14px, 0px);
}

Somehow, using !important there forces the hovered color to be = the unhovered (in my case, green). I removed !important - now unhovered is green; hovered is blue.

dickvl

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

Post Posted August 17th, 2014, 12:52 pm

Note that the reload-stop-go.png file should be in browser/omni.ja!
resource:///chrome/browser/skin/classic/browser/reload-stop-go.png

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

Post Posted August 17th, 2014, 1:07 pm

dickvl, please expand.
Do you mean, "should be (IS normally found) in browser\omni.ja?"
Or, in this instance, if editing the image, then place the copy back in the omni.ja path you cited? Actually, then it would REplace the existing image.

Which might not be the best for everyone to do (unless they back up the original image).
Then I'm confused between your statement & Frank's - about just placing the edited "reload-stop-go.png" file in: list-style-image: url("chrome://reload-stop-go.png") !important;}

If it turns out the edited image must be placed in the correct path inside omni.ja, to use "list-style-image: url("chrome://reload-stop-go.png") !important;}"... that's a bit of trouble to unpack it, insert file, repack. If that's the case, seems like storing the edited file elsewhere, then referencing that location (as I did earlier) would be simpler (certainly faster)?

Frank Lion

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

Post Posted August 17th, 2014, 1:24 pm

phkhgh wrote:dickvl, please expand.
Do you mean, "should be (IS normally found) in browser\omni.ja?"

Yes, Dick was attempting to be helpful by pointing out the location of the original image. Don't ever put edited images in omni.ja unless you want them to vanish/get overwritten on every update.

I don't bother hunting about in omni for stuff. 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. Done.

Corrected (I was watching a film at the time #-o ) userChrome.css code for your edited image in the chrome folder is -

Code: Select all
#urlbar-reload-button {
   list-style-image: url("reload-stop-go.png") !important;}


Code edited into earlier posts.
Last edited by Frank Lion on August 17th, 2014, 1:43 pm, edited 1 time in total.
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: 52279
Joined: July 18th, 2005, 3:25 am

Post Posted August 17th, 2014, 1:42 pm

As Frank wrote, you should never modify one of the omni.ja archives, but merely use the link that I provided to browse the archive if you need to find specific images or CSS files to check for style rules or other files.

There are basically these two that you can use to browse the archives:
resource://gre/ and resource://gre-resources/
resource:///

Frank Lion

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

Post Posted August 17th, 2014, 1:58 pm

I've just quickly coloured this up for anyone else who wants to try this stuff -

Image
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: Bing [Bot], earther and 4 guests