MozillaZine

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

Discussion of general topics about Mozilla Firefox
Frank Lion

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

Post Posted February 9th, 2014, 4:49 am

This is just a linking post, that'll make stuff easier to find in the future.

Here's more explanation of -moz-box-ordinal-group - viewtopic.php?p=13344581#p13344581

...and here was a quick one relating to the new, exciting bookmark animation stuff, which as you can see I was mighty impressed with -

viewtopic.php?p=13343663#p13343663

Code: Select all
    /*frank gets rid of some bookmark silliness....*/
    #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
      background-image: none !important;
      animation: none !important;
    }
    #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {  animation: none !important;}



Finally, some general notes about 'transition' code effects, the main effect being that they slow things down - viewtopic.php?p=11686229#p11686229
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: 20353
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 17th, 2014, 3:00 pm

Some people have asked me about how to 'bring back' the star button. Well, obviously, it doesn't show the bookmarked state any longer, but it still does the same job as it did before and you just need this -

Code: Select all
#star-button {
   display: -moz-box !important;
   visibility: visible !important;
   list-style-image: url("your-image.png") !important;
   -moz-image-region: rect(0, 16px, 16px, 0);
}

#star-button:hover {
   opacity: 0.7 !important;}


The 'your-image.png' should be no larger than 16x16 or else you'll break the urlbar and you just throw it in the chrome folder and userChrome.css will spot it there. The opacity bit is what we do when we can't be bothered to make a new image for something small.

Incidentally, I mentioned above how to break the new bookmark animation. However, theme writers with stuff on AMO don't have that luxury - all features showing in default must show in the theme (this is as it should be) or it may not pass review, so...how do you get around it? Use the default newtab-inverted.png or newtab.png instead. The animation takes place, but the small white cross looks a lot less silly than that baby blue star that default uses.
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.)

Caspid

User avatar
 
Posts: 580
Joined: December 18th, 2005, 4:01 pm

Post Posted February 18th, 2014, 2:33 pm

I'm trying to change the back/forward icons and not having a whole lot of luck. Any pointers?
"Know what I pray for? The strength to change what I can, the inability to accept what I can't, and the incapacity to tell the difference." -Calvin

Frank Lion

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

Post Posted February 19th, 2014, 1:11 am

Caspid wrote:I'm trying to change the back/forward icons and not having a whole lot of luck. Any pointers?

:-k

Caspid wrote:Any pointers?

Yeah, spend 10 minutes to write a post that I can understand what you're trying to do and what you've already done so far.

You might want to change the Forward/Back icons into toadstools for all I know by reading 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.)

Frank Lion

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

Post Posted February 20th, 2014, 1:01 pm

I want to revisit my 'Tabs on Bottom' coding - viewtopic.php?p=13197641#p13197641 for 2 reasons -

#1. To add a new ID, so that it now looks like this -

Code: Select all
/*Frank Tabs back to Bottom....*/
#TabsToolbar {
-moz-box-ordinal-group: 2 !important;
}
#addon-bar {
-moz-box-ordinal-group: 3 !important;
}
#titlebar-placeholder-on-TabsToolbar-for-captions-buttons {
   visibility: collapse !important;}


...this guarantees that when you have the tabs on the bottom that no unneeded gap remains to the right of the tabs. That's the gap that reserves a space for the window controls (- + x) when the tabs are right at the top without a titlebar.

#2. To remind extension writers how to code for this. I was betatesting a colleague's theme today and no less than 2 extensions came unstuck here.

One did tabs on bottom OK, but the tabs flew back to the top on restart and needed re-doing. The other extension actually wrecked the entire inactive tab side on the theme! For what?

The 6 lines above and it's done and doesn't break stuff. How hard was 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.)

patrickjdempsey

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

Post Posted February 20th, 2014, 1:40 pm

I think for Aero tabs on bottom requires a bit more hacking as there is some code that pushes the tabs up into the titlebar that needs to be considered. I'm not 100% sure that it's still required, but I was using this:

Code: Select all
/* TITLEBAR FIX */
#titlebar-content {
   margin-bottom: 40px!important;
}
#titlebar {
   margin-bottom: -40px!important;
}
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/

LafinJack

User avatar
 
Posts: 18
Joined: June 25th, 2010, 10:18 am

Post Posted February 21st, 2014, 1:42 am

Hello!

A couple Nightly builds ago my custom CSS to disable the glow effect on app tabs stopped working. Can you tell what changed, and if there's new code that will work?

Code: Select all
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
    background-image: none !important;
}


Thanks!

Frank Lion

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

Post Posted February 21st, 2014, 4:53 am

LafinJack wrote:A couple Nightly builds ago my custom CSS to disable the glow effect on app tabs stopped working. Can you tell what changed, and if there's new code that will work?

The default code for that now looks like this -

Code: Select all
.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
  background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, rgba(127,179,255,0) 70%);
  background-position: center bottom 1px;
  background-repeat: no-repeat;
  background-size: 85% 100%;
}

..so that's the class ID you have to hit to stop 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.)

LafinJack

User avatar
 
Posts: 18
Joined: June 25th, 2010, 10:18 am

Post Posted February 23rd, 2014, 7:25 pm

Hmm, thank you, but it looks like I'll have to either play with it more or wait for a fix. Adding

Code: Select all
> .tab-stack > .tab-content

to the code block only gives me the very bright and obnoxious default glow. Without it it gives either a lighter glow (what the original code did) or the default glow, no matter what arguments I try inside the braces. Argh!

Frank Lion

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

Post Posted February 25th, 2014, 7:26 am

LafinJack wrote: it gives either a lighter glow (what the original code did) or

Sounds like you have a notifier or tab related extension working against you.

The above full code is the only default code that controls that side and the only either/or situation possible with that is show/not show.

Until you brought the subject up, I've never seen that glow stuff before and I can well see why you want rid. Very poor graphic - the over saturated blue colour there will always give that 'Fisher Price' kiddie look and the lack of tonal range between the blue/white means that it is not going to show hardly at all on light backgrounds. All pretty basic 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.)

thenitpicker
 
Posts: 97
Joined: June 6th, 2012, 5:33 am

Post Posted March 29th, 2014, 12:07 pm

Caspid wrote:I'm trying to change the back/forward icons and not having a whole lot of luck. Any pointers?

back-button and forward-button are the ids.

Code: Select all
#back-button {
    list-style-image:url(your-image.png) !important;
    -moz-image-region: rect(0,18px,18px,0) !important;
}
#forward-button {
    list-style-image:url(your-image.png) !important;
    -moz-image-region: rect(0,18px,18px,0) !important;
}

thenitpicker
 
Posts: 97
Joined: June 6th, 2012, 5:33 am

Post Posted March 29th, 2014, 12:10 pm

Frank Lion wrote:This is just a linking post, that'll make stuff easier to find in the future.

Here's more explanation of -moz-box-ordinal-group - viewtopic.php?p=13344581#p13344581

...and here was a quick one relating to the new, exciting bookmark animation stuff, which as you can see I was mighty impressed with -

viewtopic.php?p=13343663#p13343663

Code: Select all
    /*frank gets rid of some bookmark silliness....*/
    #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
      background-image: none !important;
      animation: none !important;
    }
    #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {  animation: none !important;}



Finally, some general notes about 'transition' code effects, the main effect being that they slow things down - viewtopic.php?p=11686229#p11686229


Even easier !
Code: Select all
    /*frank gets rid of some bookmark silliness....*/
    #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
      display:none !important;
    }
    #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {  animation: none !important;}

Frank Lion

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

Post Posted March 29th, 2014, 2:02 pm

ntim wrote:Even easier !
Code: Select all
    /*frank gets rid of some bookmark silliness....*/
    #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
      display:none !important;
    }
    #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {  animation: none !important;}

Thanks, but if you read through this thread, you'll see that the code here is not designed to be easier to code, but easiest to understand.

For example, my usual -

Code: Select all
padding: 0px 1px !important;


...becomes this here, and so on -

Code: Select all
  padding-top: 0px !important;
  padding-right: 1px !important;
  padding-bottom: 0px !important;
  padding-left: 1px !important;


That doesn't mean that anyone else who has code snippets for new stuff has to follow suit, but just explains why my usual more concise style doesn't appear here much.

************

Actually, might as well do some new stuff while I'm here.

For those who have been following this thread, you'll recall we covered -moz-box-ordinal-group and I know that many of you already knew how that you could move stuff up and down the UI with that, like the toolbars, etc. Later, we covered how it could also move things left to right (horizontally) as well.

There is another direction stuff can move, er, towards you. Now, you will not run into this one very often, but it's useful to know and it's called z-index. Imagine a stack of CDs or layers coming at you, well, it's like that.

Why it's useful (but rarely seen) to know is this - viewtopic.php?p=13337153#p13337153 very occasionally your -moz-app: none can be OK and disp/opac/vis as well and the stuff still doesn't show....then it might well be because it's hidden behind another layer. Bring it forward with z-index : 3 !imp, etc and it comes to the front and shows.

The other reason is this - say you wanted to put Home between Forward/Back and urlbar. Easy enough margin over Forward/Back, place Home to the left and margin that across into the right position. So far, so good and you can see Home in the right position. Now click that Home - it doesn't work, WTF! ... now z-index it to the front and it will.

I'm not going to do examples of this stuff, because it's so rare to come across it, but it's one of those things that's very good to know in a tight spot.
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: 20353
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted March 30th, 2014, 8:04 am

I was checking one of my themes earlier and looked at 'Private Browsing Mode' in Australis. You seen the Tabs Toolbar? WTF? Why not have Trololo Man sing out instead when someone goes into that mode? Maybe flash the monitor on and off a few times, just in case someone a few blocks away doesn't know what mode the user is in.

Now, I don't really approve of 'private browsing', especially when people are supposed to be working. However, when I'm doing a theme, what I approve/disapprove of is irrelevant, my job is to make the UI look as good and work as good as it should...and that stuff needed fixing.

You can easily do the same - find yourselves a 16x16 image/button and call it 'your-image.png' and put it in the chrome folder and userChrome.css will spot it there.

Then do this -

Code: Select all
/*Frank Vanish huge purple Private Browsing mode Indicator.....*/
#TabsToolbar > .private-browsing-indicator {
   background: url("your-image.png") no-repeat center center !important;
   width: 16px !important;}



Yes, I know. (that's me answering in advance the usual 'actually, you can actually use display: none !important there, actually' 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.)

patrickjdempsey

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

Post Posted March 30th, 2014, 4:07 pm

Or background:unset would probably get it as well. ;)
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/

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 0 guests