MozillaZine

Metal Lion Australis.

Discuss application theming and theme development.
Frank Lion

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

Post Posted January 7th, 2014, 2:32 pm

Metal Lion Australis

~ https://addons.mozilla.org/en-US/firefo ... lis-theme/

Metal Lion Australis is a basic theme for the Australis UI changes in Firefox with 2 simple goals ~

#1. To provide a basic, dark alternative to the default theme that gives far greater visibility of the toolbar buttons to users on tablets, netbooks and to those with visual impairment. Dark searchbar/urlbar as standard and small extra features like a searchbar history dropmarker of your recent search history, a wider opening sidebar wider and no minimum width, etc, etc have all been added. However, it deliberately doesn't attempt to change or alter the default UI too much, but just visually changes it here and there and is ideal for those you who prefer the default UI look.

Just to mention, as with all of the dark themes of mine, this theme has light coloured backgrounds on all menus, dropdowns and sidebar lists for easier visibility.

Later themes in this series (which are already long completed) will progressively depart from the default look to more how I feel the Firefox UI should appear in 2014.

#2. This theme was also created to give a simple, effective template for new novice theme authors to give them a good idea of where to start in making their own themes.

For the last 12 years, all Firefox themes have been written in exactly the same way. However, with the release of Firefox 4 and the introduction of the 'rapid release' policy of changes, or potential changes, every 6 weeks (previously changes affecting themes only happened once a year!) there has been a heavy burden of constant theme maintenance and vigilance that has fallen on the shoulders of theme writers.

This is a burden that no one should expect potential new theme writers to endure. Therefore, a new and radical approach to how to write Firefox themes was required. An approach that made the initial creation of a theme far simpler and also greatly reduced the constant theme maintenance burden on the theme author after that. That is what this theme does and is partly why it was made.

The previously, complicated, 'Theme Workshop' has gone and the entire theme was initially created by using the more familiar userChrome.css method. 100% of the .css code has been written from scratch in a simple, but effective, style. This has been partly to assist the novice to understand the process, but also because I deliberately write in this style anyway as I noticed long ago that it doesn't 'break', like fancy coding styles. Although the writing style is simply done, it's worth mentioning that the very latest CCS3 commands and techniques have also been used when required as have SVG filters, which are extremely useful coding tools that have been greatly underused in the past.

People who follow this stuff closely will have already noticed that Metal Lion Australis was created and released at the height of the alpha stage of the Australis UI development process. You see people complaining about it now breaking? You see me needing to constantly update it, despite all the development changes going on it the 2 months since it was released? ....now you know why.

...any problems or improvement suggestions just feel free to let me know here or via my website.

Meantime, hope you enjoy using Metal Lion Australis.

Frank :)


Image



Image



Image
Click for fullsize image ^



Image
Click for fullsize image ^



Image
Click for fullsize image ^


Enjoy. :)
Last edited by Frank Lion on November 11th, 2015, 8:51 pm, edited 5 times 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.)

mightyglydd

User avatar
 
Posts: 9061
Joined: November 4th, 2006, 7:07 pm
Location: Hollywood Ca.

Post Posted January 7th, 2014, 9:39 pm

Nice ! Image
#KeepFightingMichael

WaltS48

User avatar
 
Posts: 3472
Joined: May 7th, 2010, 9:38 am
Location: Pennsylvania, USA

Post Posted January 8th, 2014, 9:26 am

Very nice!

I even have an icon for Home on the Bookmarks toolbar, which doesn't appear in the default theme on Linux.

Only problem I see is the text for Home is black, while the text for my bookmark folders and Most Visited is white.
Linux Desktop - AMD Athlon(tm) II X3 455 3.3GHz | 8.0GB RAM | GeForce GT 630
Windows Notebook - AMD A8 7410 2.2GHz | 6.0GB RAM | AMD Radeon R5

Frank Lion

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

Post Posted January 8th, 2014, 11:00 am

Firstly, thank you both for your kind comments.

WLS wrote:Only problem I see is the text for Home is black, while the text for my bookmark folders and Most Visited is white.

There is a good reason for that - I totally forgot that the Home button changes when on the Bookmarks Bar.

I did also notice that the little Home hover state wasn't right and that the text of the Bookmarks Toolbar Items is the wrong colour in Customise Mode. The following will fix the lot -

Code: Select all
#home-button.bookmark-item:hover {
   -moz-appearance: none !important;
  background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1)) !important;
  background-color: transparent !important;   
  border: none !important;
}

#bookmarks-toolbar-placeholder > .toolbarbutton-text,
.bookmark-item > .toolbarbutton-text {
   color: #FFFFFF !important; }


I'll be adding the above latest IDs to the existing styling and the fix will appear in the next update version. That little house will also get a lick of the purple paint as well. Thanks for reporting it.



Before I forget - although I never remove features or functionality to be found on the default theme, I will often add a few. On this one, I've added -

#1. Searchbar dropmarker for the dropdown list of previous search term entries.

#2. Bookmark/History Sidebar (Ctrl + B, Ctrl + H) now has no minimum width and opens to a maximum width of 800 pixels.

#3. All tabs (apart from pinned ones) now have close buttons, whether in 'overflow mode' or not.

#4. The tabbar now has a permanently displayed New Tab button (the little cross), leaving you free to have the larger New Tab button displayed elsewhere or not be used at all.
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: 19511
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 16th, 2014, 10:02 am

Metal Lion Australis............. Image

~ https://addons.mozilla.org/en-US/firefo ... lis-theme/

Version Update - 2.0.1.4.3

Compatibility -
29.0a1 - 29.0

Changelog -

#1. Top of active tab appearance improved.
#2. Border added to the top of the Navigation Toolbar and blended into the active tab.
#3. Border added to top of the Tabs Toolbar.
#4. New button styling added to Options Window and other areas.


Image

This shows the new borders and active tab improvements. That Nav bar really did need that top border and it also makes the other tabs look right when you hover over them, i.e. they look like they really are behind the active tab and Nav bar now. As some of you may recall, I like the technique of making UI elements look like they are real life objects, with the way they are 'lit', etc.

I'm told that not that many people have that Menu bar showing, but even so I thought it was looking a little 'slab-like' when added to the Tab toolbar, so put a slight top border into that area, just to break that up slightly.

All pretty subtle stuff. :)



Image

The new button styling.
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.)

kkdeep
 
Posts: 1
Joined: January 18th, 2014, 11:46 am

Post Posted January 18th, 2014, 11:54 am

Hi i tried your theme in ubuntu(13.04) Firefox 29.0a1 & in this tabs are not distinguisable properly.
Also the preferences windows looks out of space.
Here is the screen link http://imgur.com/iPhfsEp

Frank Lion

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

Post Posted January 18th, 2014, 2:54 pm

kkdeep wrote:Hi i tried your theme in ubuntu(13.04) Firefox 29.0a1 & in this tabs are not distinguisable properly.

Hi,
Sorry to hear that, the active tab and hovered over inactive tabs look just like my screenshots on my Kubuntu, Peppermint, Kanotix, Elive and Windows, etc. when I use them. But, I'll look into this when I can..

Meanwhile, try disabling any extensions that you are using and restarting. There really is no reason why your tabs should not be showing.

Also the preferences windows looks out of space.
Here is the screen link http://imgur.com/iPhfsEp

The Preferences Window is what you find under Edit > Preferences. Your screenshot is showing the PanelUI dropdown menu on the right, did you mean that? If so, those text colours are showing wrongly and I'll fix that for the next version update.
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: 19511
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 21st, 2014, 4:20 pm

Metal Lion Australis............. Image

~ https://addons.mozilla.org/en-US/firefo ... lis-theme/

Version Update - 2.0.1.4.4

Compatibility -
29.0a1 - 29.0

Changelog -

#1. Many very minor bugs fixed.
#2. Toolbar button spacings adjusted on usual toolbars and contracted spacings on the Tabs Toolbar, which allow more buttons to be added there, if required.
#3. Throbber changed.
#4. Scrollbar added to long bookmark lists.
#5. Fixes for even better Linux compatibilty.
#6. As always, lots of other little bits that I cannot remember atm :)

...I'm sure no one ever reads changelogs, so suffice to say the theme looks better and works better. Linux users (including me) will be particularly pleased with some of the compatibilty improvements in this version.

Rather than post one of the carefully composed screenshots that theme writers do (well, I do), here's the 'stuffed with buttons' reality of how it has to look when I'm working on them (this one is on XP) -

http://franklion.co.uk/ML-Aust/Pictures/Sn0623.png

...and here's how it looks on Linux -

http://franklion.co.uk/ML-Aust/Pictures/Pepp1.png


Oh, before I forget (yet again) there is an 'Easter Egg' in this theme, you can see it by putting the following into your userChrome.css or Stylish. Appropriate, I thought -

Code: Select all
#PanelUI-menu-button {
   list-style-image: url("chrome://customskin/skin/Ham1.png") !important;
   -moz-image-region: rect(0px, 18px, 18px, 0px) !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: 19511
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted January 30th, 2014, 2:58 pm

Metal Lion Australis............. Image

~ https://addons.mozilla.org/en-US/firefo ... lis-theme/

Version Update - 2.0.1.4.5

Compatibility -
29.0a1 - 29.0

Changelog -

#1. Star Button added back to urlbar. When clicked once the page will be bookmarked and the new Bookmark Menu Button will show as a yellow star. Click the Star Button again and the Edit Bookmark window will appear. Due to changes in Firefox 29, the Star Button no longer changes colour when clicked.
#2. Window Controls fix..
#3. Linux non determinate progressmeter fix.
#4. Opacity default change on Bookmark Menu button fix.
#5. Extensions button size fix for PanelUI, Now extension buttons will show actual size as they will appear on toolbars.
#6. Subview Menu text fix.
#7. Tab bar adjusted up 1 pixel to pick up mouse pointer on tabs, when mouse is run across top of the screen. 'Fitt's Law' stuff, I'm told. :)


I don't foresee new versions needing to be brought out so frequently from now on. I've rewritten a few sections now that mean that Metal Lion Australis theme is even more independent of future Australis UI changes.
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 January 30th, 2014, 5:12 pm

Just a note Frank... the word is that Australis will land in 29 and is getting the uplift to Aurora. However, Mozilla plans to continue to do last-minute fixes for the next 6 weeks until Beta merge time.
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/

Frank Lion

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

Post Posted February 13th, 2014, 7:50 am

Metal Lion Australis............. Image

~ https://addons.mozilla.org/en-US/firefo ... lis-theme/

Version Update - 2.0.1.4.6

Compatibility -
29.0a1 - 30.0

Changelog -

Er, well, I haven't done it yet. AMO caught me on the hop by speeding the update through, I thought it would take ages.

I'll do the changelog later and it's about time that I did some more pics, as ML - Australis is looking very slightly different to a month back.

The changelog is dull anyway, full of nothing you'd notice apart from the new Tabs Toolbar and Menu Bar backgrounds.

Oh, there was one thing. I've got another new theme coming out in a few weeks time. It's already done, just going through betatesting. (yeah, I know it's hard to believe I do this stuff properly)

Whereas this theme, Metal Lion Australis, has concentrated on giving users better UI visibility (try default on a netbook!), it has also deliberately stuck, pretty much, to the Australis default UI. In other words, it made it look better, but didn't move or change things too much.

However, the next one due out is pretty different with a different intention. It's monochrome and is my interpretation of what the Australis UI should look like. It was a lot of fun to do and looks OK. As I said, that'll be out soon.

Later, perhaps a conventional style theme, who knows? Certainly those default tabs are very easy to blow out of existence and replace with conventional/traditional/normal ones and the other stuff is very doable, just depends what people want.

Oddly enough, that's the biggest problem ..feedback. Back when I started doing Firefox themes in 2006 it wasn't a problem, the AMO (Addons) site was like something out of the Wild West with unmoderated comments, the lot. You soon got a very clear message about what people liked or didn't like about your stuff and just adjusted your style accordingly. This place used to be a bit like that as well.

Now..it's different. You know like if you put a bowl of birdseed out at night? Well, it's like that, in the morning the bowl is empty and the seed is all gone, but you've no idea if the birds were eating it all or spitting it out across the fence. That's why feedback (wonder if the word came from that?) is good.

One thing you do learn though, if people say your theme is 'nice', you got it wrong and need to improve it or make another one. :)
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: 19511
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted February 13th, 2014, 4:01 pm

Here we go.

I suppose I should have done one of the menus. Anyway, they have the same background as the Options Window above, as in, light coloured. Even when I do dark themes, I always do the menus and sidebar lists (trees) with light backgrounds just for the same reason as 99% of websites do, so you can read them quickly when you're working.

The pics below show the various toolbars showing/not showing and it was those menubar/tabbar/addons bars that I did a new background gradient for.

The RSS button now glows pale blue if there's an available feed and I think I mentioned that I've put the bookmark star back in the urlbar. Because of the UI changes that no longer works the same as explained, and that's why I changed the icon from a star one to make that change clearer.

The urlbar notifications (plugin alerts, etc) now look a lot better than on default, as does the verified identity stuff (green https).

I've worked on the Forward/Back buttons a bit. Their position has been changed slightly and as the default hover on them was dreadful, like a white disc thing lighting up, that's been sorted out as well, together with around 20+ really small dull things elsewhere.



Image
Click for fullsize image ^




Image
Click for fullsize image ^




Image
Click for fullsize image ^




Image
Click for fullsize image ^


Incidentally, someone asked me about flexible spaces - yep, they've gone on Australis, along with spaces and separators. However there's a nice, small 4KB extension around that puts them back, but if you look a the picture below showing the Bookmark Bar, you'll see that the default 'Places Toolbar' (*sigh* it holds the bookmarks) is actually one long flexible space and that's how I could put those other buttons on the far right of that toolbar.

The last picture also shows the scrollbars of my next theme. They are already in this one, but only as 'chrome' scrolls, that you see in the sidebar and searchbar dropdown, etc. and not for 'content' scrollbars that are used in webpages. As I'm going to be doing these content scrollbars as an extension that automatically installs with the new theme, then you can also use them for this...or disable them or whatever you want. You get the idea,
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: 19511
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted March 12th, 2014, 5:38 pm

Finally got around to writing the intro to this theme - viewtopic.php?p=13293773#p13293773 which was more complicated than the usual intro on a theme, as I had to cover the template side of things (see #2)

So, what's up next? Well, immediately after writing this one at the start of January this year, I also wrote 2 more themes. These not only look different, but also change the look of the Australis, the first one a fair bit and the second uses my more usual toolbar button size (roughly halfway between the tiny default ones and the large ones used on this theme) and also departs from the default UI look fairly dramatically.

These will be released after Australis has hit beta, but before final Release and have been held back, deliberately, until then.
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.)

mightyglydd

User avatar
 
Posts: 9061
Joined: November 4th, 2006, 7:07 pm
Location: Hollywood Ca.

Post Posted March 20th, 2014, 6:11 pm

Just updated to 29, installed Aris's extension and MLA is the cream on the cake. :)
Thanks man, got things back to darn near 'normal' in five minutes. Life is good...
The 'community' here rocks !
#KeepFightingMichael

Frank Lion

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

Post Posted March 20th, 2014, 7:22 pm

mightyglydd wrote:Just updated to 29, installed Aris's extension and MLA is the cream on the cake. :)
Thanks man, got things back to darn near 'normal' in five minutes. Life is good...
The 'community' here rocks !

You think MLA is OK? You wait until you see ML-Graphite, ML-Tiger and ML Tiger SP. All 3 break the conditional Forward feature to show a constant Forward button, all 3 stop the urlbar contents moving back and forth like a trombone player's arm and all 3 put a combined Reload/Stop between the Back/Forward and the urlbar.

Each theme subtly departs from the default tabs in various and increasing degrees and...the latter 2 use smaller toolbar buttons and styled scrollbars and other stuff. All were done immediately after MLA and have been held back.

The final one, ML-Tiger SP is a true Metal Lion theme. Expect release of all 3 around beta 6 or 7 time.
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 Theme Development


Who is online

Users browsing this forum: No registered users and 0 guests