MozillaZine

Full Article Attached Discussion: Classic Skin Development Direction

Monday August 7th, 2000

Ben Goodger writes, "Over the past few weeks, Classic skin development has really taken off and the Classic skin is, I believe something that can be used every day, on all three platforms.

I recently posted to the n.p.m.ui newsgroup soliciting feedback on the development. I want to reach a broader audience so I'm asking mozillaZine readership the same questions..."

(Click "Full Article" below to read more.)

#1 out with the old . . .

by BigShu

Monday August 7th, 2000 10:55 PM

I love the Aqua-ized version of the Classic skin. It helps the make transition more smooth, while at the same time emphasizing the "new" aspects of the browser. Way to go!

#11 Where did it go?

by BigShu

Tuesday August 8th, 2000 11:52 AM

What happened to the Aqua style skin. It had been in the M18 builds, but they have now reverted to the traditional style interface.

#2 I just wish they'd fix the scrollbars..

by antony

Tuesday August 8th, 2000 12:12 AM

I'm just waiting until they decide to do something with the patch I submitted last week to fix the problems with scrollbar colours in Classic on Win32 where the 3d object colours not the default grey. Gets kinda frustrating extracting new Moz builds and then having to copy the patched css file over the supplied one each time ;)

More Info: Bug 47441 http://bugzilla.mozilla.org/show_bug.cgi?id=47441

#3 Re: I just wish they'd fix the scrollbars..

by Ben_Goodger

Tuesday August 8th, 2000 12:20 AM

...fixed ;)

#40 Re: Re: I just wish they'd fix the scrollbars..

by thelem

Thursday August 24th, 2000 6:03 PM

By my calculations that took slightly under 8 minutes. You can't really complain.

Ben: Why are you checking mozillazine so often...?

#4 merge the status bar with the tool bar

by archen

Tuesday August 8th, 2000 12:43 AM

not really part of the skinning portion, but I think most of us want something like what was done in N4.

#5 Something new looking classic-like :-)

by NikoP

Tuesday August 8th, 2000 4:39 AM

I think, Classic shouldn't be a 4.x-Clone. There were changes from version 2 to 3 and from 3 to 4 and so there MUST be changes from version 4 to 6. Also, many end users don't see what's done under the ui, so there has to be something new for them. I like the new clean (I mean: only 4 items instead of, uh, let me think, in 4.x there were about 10) Navbar with included adressbar. Please make only bugfixes in Classic, no more great changes! Instead make an additionally completely new PACKAGE or take the Aphrodite package in Mozilla.

#6 Classic Skins

by chrisc

Tuesday August 8th, 2000 6:33 AM

Hi Ben, With regards to the classic skin, I really feel that the classic skin is the best it could be (not counting any bugs, not that I've noticed any) - it really captures the original netscape feel. Once the nice fonts (win32) were switched on the whole browser took on a more solid,professional look.

My request (although perhaps unrealistic -with marketing people being the way they are) would be to bring the netscape look (icons) to the internet explorer (button/toolbar border etc) look. I.E 4/5 has a lighter, cleaner look which reflects the look of other modern Win32 apps. The overall effect of this is an impression of speed/clarity which doesn't distract the user in the same way that heavy styling (n4-ish) does. Also, the icons could be created/rendered as greyscale when the mouse isn't over them. It's obvious that microsoft did it this way to avoid distracting the user (which gives using the browser a more effortless feel).

This will likely come about as a skin by someone outside netscape but I would like to see netscape do this for themselves, the current classic skin hints at this sort of styling but falls short of implementing it totally -obviously to give the user the classic 'feel'. I wouldn't go as far as to assume that your agree on this but I'm sure you would agree that the clean style of I.E does have some value which mozilla could be in a position to exploit. http://www.webprofusion.com

#10 Re: Classic Skins

by aengblom

Tuesday August 8th, 2000 9:27 AM

Wow, this is what i've wanted to say for a year and a half, but never found the words! Thanks! ;-)

#35 I agree!

by Micko

Thursday August 10th, 2000 11:12 PM

You are so right.. Netscape (and to an extent, the Classic skin) does have a bit of a "clunky" feel to it that I don't think Mozilla needs/should have. Well said.

#7 Great work!

by danielhill

Tuesday August 8th, 2000 7:56 AM

More and more people I know are using Mozilla more often, because of this Classic skin. Modern sucks.

Does anyone remember the first concept UI? http://www.mozilla.org/xpfe/nsGFXWidgets.html are some of the widgets. I'd like to see Moz or NSCP ship with a skin like the good old days (without the horrible lavender colour though :)

#13 Re: Great work!

by sremick

Tuesday August 8th, 2000 12:42 PM

Ah yes... I do remember looking at that page with the widgets (and getting all excited). Whatever happened to that? They had a very polished look... something lacking in the "modern" theme.

I use Classic, not because I particularly like the 4.x look, but because it looks far more polished than "modern". Modern has a few advantages over classic, such as progress meter bars, but they aren't enough to win me over.

#30 Re: Great work!

by danielhill

Wednesday August 9th, 2000 10:26 PM

Oh yes ... get the NeoClassic theme from http://x.themes.org/ ... :)

#8 update it a bit

by jhewitt

Tuesday August 8th, 2000 8:42 AM

I love the classic skin. My only problem with it is that it looks _too much_ like Netscape 4. Each version of Netscape from 1-4 had a different look from the last, and I think v6 should be no different.

The things I appreciate from the classic skin are the native colors, buttons, bevels, fonts, etc... The v4 icons and grippies I could do without.

#9 A few minor Classic quibbles

by rkl

Tuesday August 8th, 2000 8:46 AM

1. You can't set the icons to "text only" like you can in NS 4.X (not really a Classic quibble directly, but I don't want icons wasting my screen estate !).

2. Where's the "Home" icon - it should be "inline" with the Back/Forward/Reload/Stop icons. Yes, I know it's in the Personal Toolbar (I have that switched off, cos it's useless) and in the Go -> Home menu (never use that) and it's CTRL-H (never use that) - if Classic is supposed to be 4.X clone, please put the home icon back where it should be !

3. The "Search" button is annoying as heck and takes up far too much screen estate - it *doesn't* search on the current page - it takes you to the Netcenter Search which I don't want. Much better would be to drop the Search button (relegate it to a pull-down menu) and put back the early 4.X "Find" button (find text on page), which was 100 times more useful.

#12 Re: A few minor Classic quibbles

by dave532

Tuesday August 8th, 2000 11:54 AM

The find button wasn't an early 4.x function is was in Netscape 3 and earlier.

A better description of the classic theme is that it's meant to look like Mozilla Classic (aka Netscape 5) rather than like Netscape 4.x MozClassic used the same minimalist icon approach that we have here.

Yes we do need to be able to switch between text only, pictures and text and pictures only, this would be a very useful thing to have.

#15 Re: Re: A few minor Classic quibbles

by Ben_Goodger

Tuesday August 8th, 2000 3:29 PM

place this in user.css in your_profile_dir/chrome/:

ICONS ONLY

.button-toolbar-1 > .button-internal-box > .button-text-container, .button-toolbar-2 > .button-internal-box > .button-text-container { visibility: collapse; }

TEXT ONLY

same as above but use 'button-icon' for 'button-text-container'

(The first is for Navigator, the second for editor/mailnews, etc)

#20 Re: Re: Re: A few minor Classic quibbles

by slm

Tuesday August 8th, 2000 11:01 PM

works for Relod and Stop, but does'nt work for Back and Forward (M18-200080808/Linux)

#21 Re: Re: Re: Re: A few minor Classic quibbles

by Ben_Goodger

Wednesday August 9th, 2000 12:54 AM

oops. I'll need to develop a more sophisticated set of rules...

#22 Re: Re: Re: Re: A few minor Classic quibbles

by Ben_Goodger

Wednesday August 9th, 2000 12:54 AM

oops. I'll need to develop a more sophisticated set of rules...

#14 Smoother images

by misagon

Tuesday August 8th, 2000 1:08 PM

I have drawn a few smoother version of the classic icons for back, forward and reload. I had planned to release them as part of a skin, but I got tired of all the hazzle with XUL and javascript so I quit it. I found it easier to just hack Galleon and to use my already existing GTK theme than to dive deep into XUL, stylesheets and javascript (three languages, just for skinning the thing and it is still slow as hell... no thanks.)

I have drawn slightly different versions for Unix, Windows and MacOS. The Unix versions (dark colors) can be found at http://www.obsession.se/johan/art/xenozilla.tar.gz. I will replace the package with one containing the other ones shortly.

#25 Re: Smoother images

by chrisc

Wednesday August 9th, 2000 9:01 AM

Hey, those icons are really good. you should finish the ones for the stop button and then you'd have the set and someone else can do the skin (for the browser anyway, mail is a whole other story and a bunch of other icons..)

#16 classic skins feedback

by caseyperkins

Tuesday August 8th, 2000 3:47 PM

You guys are doing a great job on the classic skin. I do have a few things I'd like to see different: 1) The Stop button is smaller than the Back, Forward, and Reload buttons; it doesn't look symmetrical. 2) The Search button is huge! 3) The text color on Linux is a light blue; it has the effect of looking "greyed out". Otherwise, I'm very pleased. The button appearance on Linux already looks smoother/sharper than the old N4 Motif look. Thanks again.

#17 General Observations

by TonyG

Tuesday August 8th, 2000 5:44 PM

Echo on > I think the consensus is that Classic should not be a 4.x clone. It should take the best of its ancestors and move on. It needs to have a recognisable appearance but with a 2000+ implementation.

I like how Classic uses the IE4-5 back/forward buttons with the integrated history feature. The latest versions of this button seem to have got wrong the proportions between the main body of the button and the bit down the right hand side for displaying the history.

Going back to Ben's example of the colored background in the Mac version, I think some fresh creativity needs to be thrown into the mix to give it that retro feel but anchor it firmly in the present. Perhaps allow the user to pick backgrounds for the skin or indeed allow them to add their own creation via prefs or a right click => "change toolbar background" option. I would love to work on this feature if someone was willing to give me an hour of their time to point me in the right direction...

This leads me to a question for Ben. Is there any plans to introduce user definable toolbars? Ns 4.x had the modest ability to drag the toolbars up and down. IE has always had the ability to add/delete/reorder the icons/buttons on the toolbar. IE since 4 has had full blown "Coolbars". The current "Customise sidebar" in Mozilla is the kind of thing I mean.

I tell you another thing I like and that is a "Go" button after the location box. I think it would be much more appropriate than the search button. I bet you that search feature is unpopular as it is in a very unusual place. A print button would be useful as well.

1 last suggestion I have. Mozilla is about involvement. How about getting all those arty farty grafix folks involved more by running a competition to design some interfaces for the browser? I recently kicked off a similar event on a site to create a logo for a gaming company. the response was overwhelming and the company now has a seriously kickass logo.

I work with 2 creative directors - 1 designs merchandise for Lucasarts and the other does pure web interface designs for a major software house. Both have said they would love to contribute a design or 2 to the project. Offer a Tee shirt and a credit in the about box and your will get tons of ideas I bet.

PPs Include Aphrodite in the builds. It is a gorgeous skin... :-)

#18 Ooops - just found this...

by TonyG

Tuesday August 8th, 2000 5:56 PM

Saw Regsrding a competition, I just found this http://home.netscape.com/themes/index.html?cp=n6i

Hope this gets some advertising...

#24 re:

by arielb

Wednesday August 9th, 2000 5:11 AM

yeah and if you win you get much more than a t-shirt. mmm plasma TV...

#19 Make customizability options accessible to users

by Blake

Tuesday August 8th, 2000 8:58 PM

I think it's great that the user can change the toolbar to text-only or pictures-only, and that he can add a Go button all by editing user.css, but such 'hidden features' won't benefit the enduser (nor will it help us in reviews that compare us to IE). We should maximize on customizability, given how easy it is. Why not a simple checkbox pref in the navigator prefs pane saying "Show Go button next to address bar." ? I realize it's a bit harder to implement the toolbar options in a preferences pane since not all skins will have toolbars with text or icons, which is a major drawback to having to design a user interface that is compatible with all skins. Any ideas, Ben?

#37 Re: Make customizability options accessible to use

by Mikenjax

Sunday August 13th, 2000 3:54 PM

I don't know about ben, but I think that on the themes panel, the thing on the bottom (that tab widget) is pretty much wasted. Why not a scrolling "Theme-specific options" list for all of this? IE has a scrolling list such as this on its "Advanced" tab. Btw, boys, while we're on the subject, we need to remember, consistancy of terminology is very important. Why does clicking on "Switch Themes" give you a dialog about "Switching Skins?"

#38 Re: Make customizability options accessible to use

by Mikenjax

Sunday August 13th, 2000 4:00 PM

I submitted that w/o proofreading.. here it is after proofreading.. >I don't know about ben, but I think that on the themes panel, the thing on the bottom (that tab widget) is pretty much wasted space. Why not replace it with a scrolling "Theme-specific options" list for these options? IE has a scrolling list such as this on its "Advanced" tab. And don't tell me that it can't be done b/c skin switching isn't supposed to change content. What do you call those buttons in that Tab widget down there that change to coorespond to whoever that Theme's autor is? Btw, boys, while we're on the subject, we need to remember, consistancy of terminology is very important. Why does clicking on "Switch Themes" give you a dialog about "Switching Skins?"

#23 looks good

by arielb

Wednesday August 9th, 2000 4:52 AM

First of all-thanks! This is great work and got me to check out mozilla again. The other theme was so ugly that it really stopped my enthusiasm. Now it's back. Anyway, there are a few important changes I'd like to see: The navigation has too much spacing -especially the address bar and search button. I like the search button! I set the search engine to google and it saves some extra steps. But you also need the drop down that's on the left of the search button in the modern theme (NS 4.x always had it). There should be a tooltip for the bookmark icon. I also don't like that extra line of space under the bar. Another thing that bothers me is that security lock on the bottom right corner. It really belongs next to the online status icon on the left because otherwise it's easy to click on when you're scrolling or resizing. Put a corner graphic on the bottom right corner. And also, maybe it makes more sense to put the taskbar on top of the status bar?

#26 Images-only and Text-only options

by biswapesh

Wednesday August 9th, 2000 10:53 AM

Here's my user.css file (you can download it and get relevant instruction at my home page http://www.geocities.com/biswapesh :

/* For images only option */ .button-toolbar-1 > .button-internal-box > .button-text-container, .button-toolbar-2 >.button-internal-box > .button-text-container, .classic-simplebutton-textbox { visibility: collapse; }

/* For text-only option */ /* .button-toolbar-1 > .button-internal-box > .button-icon, .button-toolbar-2 >.button-internal-box > .button-icon, .classic-simplebutton-icon { visibility: collapse; } */

#28 Re: Images-only and Text-only options

by slm

Wednesday August 9th, 2000 7:33 PM

yeah! - Now how to get away the bl... search button? How to get an images on/off button like Navi4? Many questions... :)

#27 How about a NeXT Skin?

by pretzelgod

Wednesday August 9th, 2000 4:57 PM

I don't know exactly where i should ask this, so i'm putting it here. Maybe someone will see it and not flame me for being off-topic :).

I don't have the graphical talent, so the only thing i can do is beg someone to make a NeXT skin, with NeXT icons, colors, widgets, etc.

#29 Why IE-style dropdown history menus over NS4 ones?

by gerbilpower

Wednesday August 9th, 2000 8:17 PM

I personally don't like how I have to click a slim tab to get the dropdown forward or back button history menus, I prefer the way NS4 did it a lot better (by holding it down briefly). Is there a reason why for not implementing it this way?

<:3)~~

#31 Re: Why IE-style dropdown history menus over NS4 o

by Blake

Wednesday August 9th, 2000 11:10 PM

Because many people didn't like having to wait to access the menu every time in nav4 (guess they didn't know about right-click). Also, that method requires timing code which is a bit more complex.

#32 Re: Re: Why IE-style dropdown history menus over N

by gerbilpower

Wednesday August 9th, 2000 11:38 PM

I never thought that the wait was long, and oddly I never used right-clicking on it. I just like the NS4 way better.

I understand that putting in timing code makes it a bit more complex, but it's not impossible.

<:3)~~

#33 Thinner mouseover

by just

Thursday August 10th, 2000 1:05 AM

I'll keep this quick because I'm only using M17 and it may have been fixed already. I prefer the 'thin' type of mouseover on the toolbar buttons that you see in the IE toolbar or the current back button. As in, no solid black outline. Seems more effortless and is inline with modern win32 apps (see Corel Draw for an eg of this taken to extremes)

Also add my vote to making NS6's toolbar a bit more distinctive (perhaps more cartoon-like icons like those used in the BeOS which usually have a black outline).

Also add my vote to the user-organisable toolbar idea. Often this sort of thing is useless but people seem to be really picky about their web browsers.

Great work too.

#36 Re: Thinner mouseover

by chrisc

Friday August 11th, 2000 4:35 AM

Thats what I think too. (See my comment above). There are plans afoot by parties outside of netscape to produce a skin which satisfies all manner of aesthetic tweaks.

#34 looks better :)

by arielb

Thursday August 10th, 2000 4:29 AM

after trying m18, most of my critique goes away. Wow! Now just move the lock somehwere else so I don't have to worry about clicking it

#39 Nav4 Skin for Mozilla

by slm

Saturday August 19th, 2000 10:19 AM

ok, I made my own Navigator-4-only Skin for Mozilla Linux-M18-nightly 2000081808: http://home.germany.net/100-261485/mozilla/nav4moz.html