Thread
Tips for theme makers
I'm not sure if other themer know what I just learned, so I thought I should tell it here. Here is a screenshot of Rhapsodized:
This progressbar is on a sheet and most of my themes have this problem.
Until now I did not know what was causing them, but I was working on a theme and tried making indetermined progressbars with transparency and it did not work well at all. So I redid them without transparency and they worked better.
I also noticed that inactive progressbars should not use transparency either, then they would get a flicker between opaque and transparent. It's best to use "fake" transparency.
The problem with sheet would still occur though. Then I realized that this was because I had transparency above and and under the progressbars (in the Rhapsodized theme only above though). So what I did was that I included the part of the progressbar "slide" that is inside the progressbars image area. And then theylooked like they should on transparent sheets! I might be the last to realize this, but if not I hope this info helps someone. I will see to this bug in my themes as soon as I can..
To sum up - dont use ANY transparency in progressbars!
Also, now that I've written this I realize that this might be a good thread for themers to ask questions about tricky parts in theming. So if you have any - bring 'em on!
This progressbar is on a sheet and most of my themes have this problem.
Until now I did not know what was causing them, but I was working on a theme and tried making indetermined progressbars with transparency and it did not work well at all. So I redid them without transparency and they worked better.
I also noticed that inactive progressbars should not use transparency either, then they would get a flicker between opaque and transparent. It's best to use "fake" transparency.
The problem with sheet would still occur though. Then I realized that this was because I had transparency above and and under the progressbars (in the Rhapsodized theme only above though). So what I did was that I included the part of the progressbar "slide" that is inside the progressbars image area. And then theylooked like they should on transparent sheets! I might be the last to realize this, but if not I hope this info helps someone. I will see to this bug in my themes as soon as I can..
To sum up - dont use ANY transparency in progressbars!
Also, now that I've written this I realize that this might be a good thread for themers to ask questions about tricky parts in theming. So if you have any - bring 'em on!
Yeah, this is actaully what you helped me out with during Cappuccino QA remember Max. Definitely a good idea for public themer to themer questions and answers.
Here's a problem I'm having. It's Cocoa applications that are giving me the problem...in those apps, the widgets when inactive are all screwed up. When inactive they display the close widgets transparency image (only the close widget displays well) 
I don't know why, it's so weird...I never had this prob before. Also I'd like to change all of Aqua's grey text to a different color...is this possible? I already changed all of the grey in the clr# (384) resource, And finally, I'd like to change the color of the divider in finder windows....you know, the one that divides the toolbar from the status bar.
I don't know why, it's so weird...I never had this prob before. Also I'd like to change all of Aqua's grey text to a different color...is this possible? I already changed all of the grey in the clr# (384) resource, And finally, I'd like to change the color of the divider in finder windows....you know, the one that divides the toolbar from the status bar.
Swiz - at the time I did not realize that that was what you wanted help with.. Anyway, glad I could help 
Incative Cocoa apps titlebar widgets always look bad..
Solution to this is to
A. Have the inactive titlebar transparent, that way the different looking titlebar widgets not stand out so much.
B. Make the inactive titlebar opaque and make the inactive titlebar buttons opaque. That way they will look exactly as you intended it, unless they are a other shape than square.. Then you will probably get a little white round the edges from the antialiasing..
An other important thing to remember is that all the titlebar widget has to be the same shape. This is because all widgets use the mask from the aquablue close button. If you do use different shapes, you will have a white "ghost" image on the - and + buttons..
It's not possible to change the inactive grey text, globally at least. This should work in carbon apps though.
As far as I know, it's not possible to change the dividers either... At least, I don't know how.
Quote:
|
Originally posted by Dace: Here's a problem I'm having. It's Cocoa applications that are giving me the problem...in those apps, the widgets when inactive are all screwed up. When inactive they display the close widgets transparency image (only the close widget displays well) I don't know why, it's so weird...I never had this prob before.
|
Incative Cocoa apps titlebar widgets always look bad..
Solution to this is to
A. Have the inactive titlebar transparent, that way the different looking titlebar widgets not stand out so much.
B. Make the inactive titlebar opaque and make the inactive titlebar buttons opaque. That way they will look exactly as you intended it, unless they are a other shape than square.. Then you will probably get a little white round the edges from the antialiasing..
An other important thing to remember is that all the titlebar widget has to be the same shape. This is because all widgets use the mask from the aquablue close button. If you do use different shapes, you will have a white "ghost" image on the - and + buttons..
Quote:
|
Originally posted by Dace: Also I'd like to change all of Aqua's grey text to a different color...is this possible? I already changed all of the grey in the clr# (384) resource, And finally, I'd like to change the color of the divider in finder windows....you know, the one that divides the toolbar from the status bar. |
It's not possible to change the inactive grey text, globally at least. This should work in carbon apps though.
As far as I know, it's not possible to change the dividers either... At least, I don't know how.
Here's another tip (although Max probably knows this one): You can use large PPATs (like 128x128) in a theme and avoid the 'stutter' effect that you'll get in certain windows (like System Prefs) as long as you make sure the first 8x8 upper left pixel region in your master PPAT is uniform enough to tile in a visually consistent/pleasant manner while not standing out in the larger master PPAT. The system will tile this region over very large and seemingly important expanses of the interface, go figure...
Another tip (or something I've been doing anyways)... you can get pretty thick pane borders if you make the pane fill nothing and incorporate a suitable edge mask into the pane border so it blends with any underlying PPAT fills. The only place I've seen this not work is with Metal Windows, which don't have a specific pane fill resource of their own, they just cut into your Pane border enough to utilize the outer stroke and shadow region of the original Aqua Pane resource... it doesn't look bad, but you can compensate by moving any beveled Pane edges you want visible in a Metal Window into those regions occupied by the Aqua Pane stroke and Shadow.
And a design tip (which can be ignored): Aqua's 'sculpting' exists primarly in the vertial space... horizontal real estate is hard to come by and any implied outer edging depth through beveling, etc will fall apart with titlebars meeting dropdown toolbars, lack of right/bottom edging in menus, etc... any theme that utilizes substantial edging detail will look wonky as a result in many cases. In themes that use some sort of defining bottom edge in a titlebar, I would suggest keeping edging down to 1 or 2 pixels width... in those without a titlebar bottom (where the implied effect is a continuous vertical surface), edging is best avoided altogether or faded top to bottom in some way so that abrupt transitions between things like the finder titlebar don't happen. If your theme requires depth, there is too much vertical real estate in the Aqua titlebar definition anyways (visually, it's too tall in comparison to the other window elements like scrollbars), so explore implied depth through vertical edging effects and your results will sing better with the overall limitations of the theme... same is true of tabs, which are way too tall. You'll find that you can maintain consistent edging throughout the majority of the design if you limit your major depth-enhancing effects to the vertical plane. Does that make sense?
Another tip (or something I've been doing anyways)... you can get pretty thick pane borders if you make the pane fill nothing and incorporate a suitable edge mask into the pane border so it blends with any underlying PPAT fills. The only place I've seen this not work is with Metal Windows, which don't have a specific pane fill resource of their own, they just cut into your Pane border enough to utilize the outer stroke and shadow region of the original Aqua Pane resource... it doesn't look bad, but you can compensate by moving any beveled Pane edges you want visible in a Metal Window into those regions occupied by the Aqua Pane stroke and Shadow.
And a design tip (which can be ignored): Aqua's 'sculpting' exists primarly in the vertial space... horizontal real estate is hard to come by and any implied outer edging depth through beveling, etc will fall apart with titlebars meeting dropdown toolbars, lack of right/bottom edging in menus, etc... any theme that utilizes substantial edging detail will look wonky as a result in many cases. In themes that use some sort of defining bottom edge in a titlebar, I would suggest keeping edging down to 1 or 2 pixels width... in those without a titlebar bottom (where the implied effect is a continuous vertical surface), edging is best avoided altogether or faded top to bottom in some way so that abrupt transitions between things like the finder titlebar don't happen. If your theme requires depth, there is too much vertical real estate in the Aqua titlebar definition anyways (visually, it's too tall in comparison to the other window elements like scrollbars), so explore implied depth through vertical edging effects and your results will sing better with the overall limitations of the theme... same is true of tabs, which are way too tall. You'll find that you can maintain consistent edging throughout the majority of the design if you limit your major depth-enhancing effects to the vertical plane. Does that make sense?
Quote:
|
Originally posted by bOOzo: As far as I know, it's not possible to change the dividers either... At least, I don't know how. |
Yes, that sucks... so does lack of control over stroke/shadow colour and positioning... imagine the cool glowing interfaces you could dream up if you could control these elements as well.
Really, no matter what you want to do with OS X it's a compromise... pure design is impossible really (and we'll probably never have Kaleidoscope-level control over the interface), so anything you do has to fit into this very limited framework. It's sad that from a customization standpoint PCs are now light years ahead of the Mac. But I'd rather use a Mac stuck with Aqua than a PC tricked out with a wicked interface overlay, anyways - beauty is more than skin deep in this case.
The ppat tip is good! This is how I solved it in my Brushed themes, although i used a flat grey instead of a smaller pattern.
And the tab pane tip is really important, and it allows so much more freedom!
To help you picture this, here is a screenshot from Classic Platinum:
The only thing I could not accomplish in this was the lighter color that is used in OS 9, because then it would cover the thick edges. But other than that it's very true to Platinum.
The thing with brushed apps can be solved with DeMetallifizer if needed..
Glad you figured those out BBX, I'm curious to see how you used them..
This is turning out to be a helpfull thread!
And the tab pane tip is really important, and it allows so much more freedom!
To help you picture this, here is a screenshot from Classic Platinum:
The only thing I could not accomplish in this was the lighter color that is used in OS 9, because then it would cover the thick edges. But other than that it's very true to Platinum.
The thing with brushed apps can be solved with DeMetallifizer if needed..
Glad you figured those out BBX, I'm curious to see how you used them..
This is turning out to be a helpfull thread!
Quote:
|
Originally posted by bbxstudio: (and we'll probably never have Kaleidoscope-level control over the interface) |
Actually.. I heard a romur claiming that we will.. I can only hope that it's true.
I also heard a rumour. Oh, wait, I heard a dozen rumours.
Its theoretically possible to get Kaleidoscope-like control... but it would make far more sense that we would have less control.
One thing we do know is iTunes and Quicktime will become Cocoaonce OS 9 is totally gone. Not sure that'll be, but I guess pretty far off.
Its theoretically possible to get Kaleidoscope-like control... but it would make far more sense that we would have less control.
One thing we do know is iTunes and Quicktime will become Cocoaonce OS 9 is totally gone. Not sure that'll be, but I guess pretty far off.
Quote:
|
Originally posted by bOOzo: Actually.. I heard a romur claiming that we will.. I can only hope that it's true. |
Elaborate please! - in private if you must
But really, you can't dangle a carrot like that and not follow up. What's the deal there? I know the guy who runs Railhead was going off about this 2 years ago, but I was always skeptical... where's the beef?
Question: Can you have a different font color for small titlebars from big titlebars? If yes, how?
Quote:
|
Originally posted by Dace: Question: Can you have a different font color for small titlebars from big titlebars? If yes, how? |
Yes, but they will still be black in cocoa apps. Here is a list of the clr#'s:
ID 384
Index 00 - Dialog Active Text Color
Index 01 - Dialog Inactive Text Color
Index 02 - Alert Active Text Color
Index 03 - Alert Inactive Text Color
Index 04 - Modeless Dialog Active Text Color
Index 05 - Modeless Dialog Inactive Text Color
Index 06 - Window Header Active Text Color
Index 07 - Window Header Inactive Text Color
Index 08 - Placard Active Text Color
Index 09 - Placard Inactive Text Color
Index 10 - Placard Pressed Text Color
Index 11 - Push Button Active Text Color
Index 12 - Push Button Inactive Text Color
Index 13 - Push Button Pressed Text Color
Index 14 - Bevel Button Active Text Color
Index 15 - Bevel Button Inactive Text Color
Index 16 - Bevel Button Pressed Text Color
Index 17 - Popup Button Active Text Color
Index 18 - Popup Button Inactive Text Color
Index 19 - Popup Button Pressed Text Color
Index 20 - Icon Label Text Color
Index 21 - List View Text Color (and Open/Save dialog list color)
Index 22 - Document Window Title Active Text Color
Index 23 - Document Window Title Inactive Text Color
Index 24 - Movable Modal Window Title Active Text Color
Index 25 - Movable Modal Window Title Inactive Text Color
Index 26 - Utility Window Title Active Text Color
Index 27 - Utility Window Title Inactive Text Color
Index 38 - Popup Window Title Active Text Color
Index 29 - Popup Window Title Inactive Text Color
Index 30 - Active menu title text color
Index 31 - Selected menu title text color
Index 32 - Disabled menu title text color (OS uses a lighter variation)
Index 33 - Active menu item text color
Index 34 - Selected menu item text color
Index 35 - Inactive menu item text color (OS uses a lighter variation)
Index 36 - Popup Label Active Text Color
Index 37 - Popup Label Inactive Text Color
Index 38 - Tab Front Active Text Color
Index 39 - Tab Non Front Active Text Color
Index 40 - Tab Non Front Pressed Text Color
Index 41 - Tab Front Inactive Text Color
Index 42 - Tab Non Front Inactive Text Color
Index 43 - Icon Label Selected Text Color
Index 44 - Bevel Button Sticky Active Text Color
Index 45 - Bevel Button Sticky Inactive Text Color
Index 47 - Finder file-item subtext (View options - Show Item Info)
Quote:
|
Originally posted by bOOzo: Yes, but they will still be black in cocoa apps. Here is a list of the clr#'s |
Thanks Max, I couldn't do it without you. I'm trying to change the font of the titlebar in Finder > Show View Options. Which one is it exactly?
I tried changing these to no avail:
Index 24 - Movable Modal Window Title Active Text Color
Index 25 - Movable Modal Window Title Inactive Text Color
Index 26 - Utility Window Title Active Text Color
Index 27 - Utility Window Title Inactive Text Color
What is a movable modal window?
I'm glad I can help.
These two are for the large window bars:
Index 22 - Document Window Title Active Text Color
Index 23 - Document Window Title Inactive Text Color
Index 24 - Movable Modal Window Title Active Text Color
Index 25 - Movable Modal Window Title Inactive Text Color
These two are for the smaller ones (i'm guessing that Utility is the smallest and Popup is the one you want):
Index 26 - Utility Window Title Active Text Color
Index 27 - Utility Window Title Inactive Text Color
Index 38 - Popup Window Title Active Text Color
Index 29 - Popup Window Title Inactive Text Color
These two are for the large window bars:
Index 22 - Document Window Title Active Text Color
Index 23 - Document Window Title Inactive Text Color
Index 24 - Movable Modal Window Title Active Text Color
Index 25 - Movable Modal Window Title Inactive Text Color
These two are for the smaller ones (i'm guessing that Utility is the smallest and Popup is the one you want):
Index 26 - Utility Window Title Active Text Color
Index 27 - Utility Window Title Inactive Text Color
Index 38 - Popup Window Title Active Text Color
Index 29 - Popup Window Title Inactive Text Color
Quote:
|
Originally posted by bOOzo: I'm glad I can help. These two are for the large window bars: Index 22 - Document Window Title Active Text Color Index 23 - Document Window Title Inactive Text Color Index 24 - Movable Modal Window Title Active Text Color Index 25 - Movable Modal Window Title Inactive Text Color These two are for the smaller ones (i'm guessing that Utility is the smallest and Popup is the one you want): Index 26 - Utility Window Title Active Text Color Index 27 - Utility Window Title Inactive Text Color Index 38 - Popup Window Title Active Text Color Index 29 - Popup Window Title Inactive Text Color |
Nope
Still black 
Quote:
|
Originally posted by Dace: Nope Still black
|
Nice use of the new smilies
Anyway, I'm not sure what's wrong then..
Perhaps try comparing your clr# to mine in the XP Luna theme. That might help..