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

Discussion of general topics about Mozilla Firefox
Locked
User avatar
Steve196
Posts: 128
Joined: September 28th, 2013, 4:53 pm

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

Post by Steve196 »

Thanks, Frank and Patrick! :)

Lot's to catch up on (long day at work today and a long end of the week ahead ... can't wait to dive back in!

Again, thanks!
Frank, awesome thread, sir! :D
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

smsmith wrote:I was able to get the reload/stop button on the left of the urlbar, and even though it still "looked" like part of the urlbar, I think I liked how it looked.

That's what I always say when I get stuck on something. :)

...and I'd imagine that having the back/forward button doing it's disappearing act with the stop/reload button in between it and the urlbar would look silly.

You're right, it will look silly. As conditional Forward wasn't part of the 'challenge', I'm going to help you on that one - it's not a hard fix.

#1. Margin the Back/Forward well away from the urlbar (clean up your 'tail' as well)
#2. Read up about the DOMi DOM Node here - viewtopic.php?p=13274897#p13274897
#3. Get the Forward not showing and use DOM Node to find the selectors conditional to that happening.
#4. Switch to CCS Styles and View a likely default css which will show those selector states doing what they do to the code...and stop them doing it. Hint - occluded-by-urlbar - true, is one of them.
#5. That's it, 8 line fix. Forward now shows all the time (disabled/normal/active/hover states). You'd think that the urlbar would still be flexing about, like the proverbial fiddler's elbow, but it doesn't, it stays fixed. You're done.

#6. Well, apart from a really lame clip path shape around the Forward. Just use this and adjust -

Code: Select all

#forward-button > .toolbarbutton-icon {
   clip-path: none !important;
   border-radius: 10000px !important;
   padding: 0 !important;} 



...coming up next (when I get time)... the single biggest reason for css UI code not working. Your IDs are right, the commands are right, but it just will not work. Why? 99% of the time it's because you haven't used the most important command in all css UI coding - -moz-appearance: none !important; and we'll cover what it all means and when to use it..........


@Steve, glad you like it and are enjoying it. :)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
smadlragon
Posts: 1
Joined: January 16th, 2014, 3:35 pm

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

Post by smadlragon »

I have been watching this thread for some time now and today I felt like posting something I have done.

I really wanted a good small tab mode for Australis that looked official, was as small as the "classic theme" and blended well with custom themes so I came up with this:

Image

I achieved this by making the tabs small, by moving their top margin up and by adding a border at the bottom to make it look better.

Here is the code:

Code: Select all

#TabsToolbar {
  max-height : 28px !important;
  border-bottom: 2px solid #C8C8C8 !important;
  margin-top: -4px !important;
}


Note: It is possible to make the tabs even smaller and still usable and good looking, but that causes any ad-dons placed in the tab bar to be a bit out of screen.

I would also like to know if it is possible to make the bottom border match the theme being used.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

Frank Lion wrote:...coming up next (when I get time)... the single biggest reason for css UI code not working. Your IDs are right, the commands are right, but it just will not work. Why? 99% of the time it's because you haven't used the most important command in all css UI coding - -moz-appearance: none !important; and we'll cover what it all means and when to use it..........

Still haven't got the time to do this one yet, but I haven't forgotten about it.

Meanwhile -

Code: Select all

menupopup scrollbox { overflow-y: auto !important;}

The y there just means downwards (x is across)

The Bookmarks option in the normal Menu takes you to the Library for 'Unsorted Bookmarks', but if you select them from the Bookmark Menu Button dropmarker then you get a long list of them with no scrollbar. The above gives that list a scrollbar...much quicker to use.

You could make it specific to just that menupopup dropdown, but there's bound to be others hidden away that also need scrollbars and a general code* there is not going to hurt.

* be wary about writing in a general code way unless you code a lot, as it can 'ripple' into areas you didn't expect. Then again, general code rippling is a very useful technique to very quickly style lots of backgrounds (including ones you've never seen, like the options on some extension) but it does need to be used with care.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
User avatar
the-edmeister
Posts: 32249
Joined: February 25th, 2003, 12:51 am
Location: Chicago, IL, USA

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

Post by the-edmeister »

smadlragon wrote:I have been watching this thread for some time now and today I felt like posting something I have done.

I really wanted a good small tab mode for Australis that looked official, was as small as the "classic theme" and blended well with custom themes so I came up with this:

Image

I achieved this by making the tabs small, by moving their top margin up and by adding a border at the bottom to make it look better.

Here is the code:

Code: Select all

#TabsToolbar {
  max-height : 28px !important;
  border-bottom: 2px solid #C8C8C8 !important;
  margin-top: -4px !important;
}


Note: It is possible to make the tabs even smaller and still usable and good looking, but that causes any ad-dons placed in the tab bar to be a bit out of screen.

I would also like to know if it is possible to make the bottom border match the theme being used.


Nice, but if I hit the Alt key to temporarily show the Menu Bar that mod won't show after the Menu Bar goes away.


Ed
A mind is a terrible thing to waste. Mine has wandered off and I'm out looking for it.
User avatar
ShareBird
Posts: 2740
Joined: December 8th, 2004, 7:09 am
Location: Berlin | Made in Brasil
Contact:

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

Post by ShareBird »

I don't know if this was discussed before, but this extension: https://addons.mozilla.org/en-US/firefo ... olbarmode/ works fine with theme that provide code for small, big icons, icons + text and so on...
Silvermel - A Theme for Firefox and Thunderbird
YATT - Yet Another Theme Tutorial
Don't give a man a fish. Teach him how to fish instead.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

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

Post by patrickjdempsey »

Interesting that it still works 3 years on! Cheers Sharebird!
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/
User avatar
Steve196
Posts: 128
Joined: September 28th, 2013, 4:53 pm

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

Post by Steve196 »

Wait, that's not what we're trying to do in this thread, is it?
I'm still working on Frank's challenge (though time has been limited for me these days) and learning what he's teaching us.

Even so, glad some of the add-ons still work with Australis but, again, I don't think such is related to this particular thread ...

Here, maybe? ... Australis FAQ thread
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

That's OK, Steve, Sharebird is a fellow theme writer and friend of mine. He is also originally from Brasil, so it's quite understandable that he would read a 4 page thread on css coding and still not realise that the thread was about, er, css coding. :)

But, we can learn from anything, so let's have a look at this one - https://addons.mozilla.org/en-US/firefo ... olbarmode/

The small/large icon option doesn't do anything on default (although might be useful on a Complete Theme), so let's look at how to look at extensions and, in this case, the 'Text Only' mode. If someone is using 'Text Only' mode, how likely is it that they would be moving to 'Icons Only' one day and 'Text Only' the next? Perhaps it is much more likely that they would be in 'Text Only' mode all the time and that this is a suitable candidate for a userChrome.css snippet?

So, let's look at what the user of 'Text Only' mode would be seeing with this extension. Put a few toolbar buttons on the Nav Bar, etc. ....oh dear...no Stop or Reload in the urlbar and with 5 or 6 buttons on the Nav Bar the addressbar is now just over an inch wide. Because it's an old extension? Nope, CTR does the same.

You see, it's not just about how you code, it's also about how you look at things. We already have the basic css fix from here - viewtopic.php?p=13219703#p13219703
(if it doesn't have the word 'full' after 'frank', it's a quick fix) -

Code: Select all

    /*Frank Text Only Mode....*/
    .toolbarbutton-text {
       display: -moz-box !important;
    }   
    .toolbarbutton-icon {
       display : none !important;}


Now for the next part, we can kill 2 birds with 1 stone. Firefox thinks the the tab close buttons and the .tabs-newtab-button (hidden on default, but you can have that in addition to the New Tab button) are both, er, toolbarbuttons, so we need to exclude those. All of the toolbar buttons we want to hit are class="toolbarbutton-1 chromeclass-toolbar-additional", but the Stop and Reload are only class="chromeclass-toolbar-additional" so if we pick our class right, we can leave those out as well and let the icons show there.

The reason the Stop/Reload text doesn't show is because there really are no label values on either of those, so there is nothing to show. Even if they did, text there would cause 'fiddler's elbow' flexing on the addressbar, so showing just the icons there is no bad idea.

So, we select the correct ID and get this -

Code: Select all

/*Frank Text Only Mode....*/
.toolbarbutton-1:not(.tab-close-button):not(.tabs-newtab-button)
 .toolbarbutton-text {
   display: -moz-box !important;

.toolbarbutton-1:not(.tab-close-button):not(.tabs-newtab-button) .toolbarbutton-icon {
   display : none !important;}


Almost there, but the 'inch wide addressbar' problem? Meet my chum - ellipsis. Add the width of text you want and anything over that will... < do that.


Code: Select all

/*Frank Full Text Only Mode....*/
.toolbarbutton-1:not(.tabs-newtab-button):not(.tab-close-button) .toolbarbutton-icon {
   visibility: collapse !important;
}   
.toolbarbutton-1:not(.tabs-newtab-button):not(.tab-close-button):not([type="menu-button"]) {
     -moz-box-orient: vertical !important;
}
.toolbarbutton-1:not(.tabs-newtab-button):not(.tab-close-button) .toolbarbutton-text {
    display: -moz-box !important;
    width: 50px !important;
        text-overflow: ellipsis;
       text-align:center !important;
}


Job done, text only with visible Stop/Reload and a reasonable width on the addressbar with the usual number of buttons that people have on the Nav Bar..

Aris wrote:Its a bit more than that to have a 'clean' text/icons+text mode.

viewtopic.php?p=13219625#p13219625
Indeed.


Bookmark text a bit long on the BTF? Yep, our chum again -

Code: Select all

/*Frank Bookmark Label Width Fix...*/
#PlacesToolbarItems > .bookmark-item > .toolbarbutton-text {
   width: 60px !important;
   text-overflow: ellipsis; } 


2 days left on the challenge and showing conditional Forward all the time is possible, as is stopping the related urlbar flexing. However, both are quite tricky fixes, so maybe you'd better leave those for now. Meanwhile..get your fixes in for the remaining stuff. :)

Just time for this - viewtopic.php?p=13308593#p13308593

A for effort and correct IDs and syntax, but toolbars are meant to flex and all sorts of stuff breaks if they don't, so max-height there is not a good idea. Plus, the active tab is designed/meant to flow into the Nav bar, so perhaps the border is not really needed there.

There's a fancy way to do this that retains the concave/convex curves of the tabs properly, but the quick fix is this -

Code: Select all

/*frank instant 25px tabs......*/
.tabbrowser-tabs {max-height : 25px !important;}
.tab-content,.tabs-newtab-button { margin-bottom: 5px !important;}


(on some OSs, you can get away with just using height, rather than max-height there)


Sometime, I will really get around to the -moz-appearance: none !important; stuff :P

Edit - slight code fix to, er, a code fix.
Last edited by Frank Lion on May 15th, 2014, 2:07 pm, 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: Australis Ico/Text, Text Only and more...

Post by Frank Lion »

Here's a very simple snippet that makes a big impact on the Australis Customise Window, well, it does on mine -

Code: Select all

/*frank Give accurate button sizes to extensions in Customise window (PanelUI dross)...*/
 .toolbarbutton-icon {
  min-width: 12px !important;
  min-height: 12px !important;}


Small extension buttons will then show their right sizes in that window, instead of the fuzzy 32x32px sizes that they have been resized to at the moment.

This thread's a bit quiet, but that's OK. Threads like this aren't like 'yesterday's newspaper is today's fish 'n chip wrapping', but are around for years to be read by others. Like this one was - viewtopic.php?p=2987525#p2987525

Feel free to ask any last questions, but be advised that this thread is off to General or wherever when Australis hits...and I sure don't intend to be around here when it does. :)
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
LewS
Posts: 190
Joined: January 28th, 2014, 2:18 pm

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

Post by LewS »

Before you go please, the -moz-appearance-none discussion. I've been guessing when to use it (generally if something doesn't work and should!) but it would be nice to have a reasonable basis for using it.
User avatar
Steve196
Posts: 128
Joined: September 28th, 2013, 4:53 pm

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

Post by Steve196 »

Frank, sorry my time has been limited to reply on this thread but, be assured, I do read everything and have learned much.
After a 20 hour marathon designing a structure which had to be finished in that time, my right hand woke up half paralyzed. Seriously. Apparently, I'll have other issues than work with which to deal.

Keep spreading your knowledge, and thanks for doing so, sir.
My avatar is my newly adopted kitten ... I figured y'all were getting tired of looking at my baggy eyes. :)
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

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

Post by Frank Lion »

LewS wrote:Before you go please, the -moz-appearance-none discussion.


Sure. With most css related stuff, be it for coding websites (content) or program UI (chrome), then it's not really that necessary to understand how things work, you just have to know what works and do it.

-moz-appearance is the exception to that and you need to have a fair grasp of how that works or, css-wise, you enter a world of pain. First, the terminology - the -moz bit just shows it relates to Mozilla products (-webkit is Chrome stuff) and appearance refers to the appearance/behaviour that elements will have, such as buttons, etc on the OS (Operating System), this is also known as 'the platform', 'platform specific' and 'native' appearance.

All OSs deliberately handle the 'appearance' styling slightly differently and it is this that gives the system its individual look, both to itself and to programs that are used on it, if they have been coded 'natively', for example, just about every Utility type program you've ever used.

So, when you look at css code, you see stuff like this -

Code: Select all

/* ::::: toolbox ::::: */

toolbox {
  -moz-appearance: toolbox;
  background-color: -moz-Dialog;
  border-top: 2px solid;
  -moz-border-top-colors: ThreeDShadow ThreeDHighlight;
}

/* ::::: toolbar & menubar ::::: */

toolbar, menubar {
  -moz-appearance: toolbar;
}   


Easy enough so far, now the important bit - -moz-appearance: button; doesn't only just tell the OS the 'appearance' of that button to use, the OS has a huge set of rules for each element that govern the size of the button..here we go...the button colours, the shape, the borders, the colour of the borders, the margins, the paddings, the hover state colours, the disabled state, the focus/active states, the text colours to use, the text-decoration and on and on.

To make things more interesting, different OSs have tighter/slacker adherence to varying appearance rules, even within the same OS, let alone on a different one.

That's why you can code something up on, say, Linux, and the code blows up on Win7. It's because Win7 is sticking closer to the native appearance rules on that element. That is why we need to override -moz-appearance and force the code to behave as we want it to, irrespective of the OS it is being used on.

Put simply, trying to put a background that still thinks it has -moz-appearance: button; will get you nowhere and it will keep showing that ol' native button. Now throw -moz-appearance: none !important; into the same code and it'll work and I think you can now see why.

Whenever code like that is posted, you'll always get some guy popping up and saying 'Actually, that code will work actually with just -moz-appearance: none; actually' ...Yes, sunshine, but that's because you're only coding for your own Win7, I have to code across 5 Windows platforms, a few Mac ones and over a 100 different Linux distros, which all have the tighter/slacker rules and I like to have very short Support threads. :)

You don't have to use -moz-appearance: none !important; everywhere though. Non-native theme writers, like me, always do but that's because you want a certain specific look across all platforms, but there are also theme writers, like CatThief with MostlyCrystal, who will only -moz-appearance: none !important; certain parts and code other areas very lightly and let the OS do the majority of the styling in those areas.

Right, that's the dull old stuff done. :) ...but I've known experienced coders who didn't know that stuff and it's not really very well explained in other places.

On to 'example time' - you want to put a background on a bookmark highlight and it will not stick, so you put in 'm-a:n !imp and suddenly all your hovers are jumping around, why? It's because you used it on the states (:hover :active, etc) and forgot that original normal state still has a mass of margin/padding rules still attached to it, because it is still defined as -moz-appearance: menupopup or whatever.

Put the -moz-appearance: none !important; rule in 'higher up' and it will ripple through the states, i.e. -

Code: Select all

#urlbar,.urlbar-textbox-container {
   -moz-appearance: none !important;
   border-radius: 12px !important;
   background: -moz-linear-gradient(rgba(0,0,0,.8), rgba(82,82,82,.8) 85%)  !important;
   border-color: transparent !important;
   color: #EAEAEA !important;
}
   
   
.urlbar-textbox-container:hover,.urlbar-textbox-container[focused] {
   background: -moz-linear-gradient(rgba(215,215,215,.2), rgba(255,255,255,.2) 75%) !important;
   border-color: transparent !important;
}


In the example above, I wanted to style the normal state but there are many occasions when you may only want to style just the hovers. Knowing what you know now, can you see why the first example below will blow up and dance around and the second will not?


Code: Select all

.urlbar-textbox-container:hover,.urlbar-textbox-container[focused] {
        -moz-appearance: none !important;
   background: -moz-linear-gradient(rgba(215,215,215,.2), rgba(255,255,255,.2) 75%) !important;
   border-color: transparent !important;
}



Code: Select all

.urlbar-textbox-container {
   -moz-appearance: none !important;
}
   
.urlbar-textbox-container:hover,.urlbar-textbox-container[focused] {
   background: -moz-linear-gradient(rgba(215,215,215,.2), rgba(255,255,255,.2) 75%) !important;
   border-color: transparent !important;
}


Another example...

When you code something up and you know for sure you have the IDs and syntax right, then why the **** doesn't it show up?

...into the DOM Inspector, select the chosen ID and then right hand side and select 'Computed Style' and learn these 3 off by heart -

Code: Select all

#star-button {
   display: -moz-box !important;
   visibility: visible !important;
        opacity: 1.0 !important; }


If any one of those is not showing right, then no way will it show. So, if you get display: none; or visibility: collapse; or opacity: 0; then find out why by reading the other css files controlling that bit (under CSS Rules) and decide how best to override it, either specifically to that ID or more generally- but beware of unwanted rippling effects.

If they are showing OK, then just throw in a quick -moz-appearance: none !important; and it's bound to work out. Well, it does for me, doesn't pay to over-analyse these things, I find. :P


@ Steve, hope you're feeling better soon, mate.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
LewS
Posts: 190
Joined: January 28th, 2014, 2:18 pm

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

Post by LewS »

Thanks for the -moz-appearance write-up. I've bookmarked it since it raises questions I didn't know to ask so I'll be coming back. As you said, the topic isn't very well covered elsewhere. Good luck if you really mean to go away when Australis hits.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

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

Post by patrickjdempsey »

And there's a flip-side to the story as well. While the Firefox default theme currently uses quite a lot of custom styles, the SeaMonkey default theme (and much older versions of Firefox) use mostly "native" -moz-appearance styles for better OS integration. The examples I posted above are minimal exactly because I used -moz-appearance to tell Firefox to use the OS styles. It's a nice "cheat" if you don't want to have to code up all of the various "states" for a button or textbox... "active" "hover" and "focus" states are all (mostly) handled by the OS styling. You do usually need some "backup" styles for cases where things don't always work right... especially in Linux-land as Frank mentioned, but nothing is easy right? ;)
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/
Locked