MozillaZine

Mozilla OS Colors: Screenshots request.

Discuss application theming and theme development.
patrickjdempsey

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

Post Posted April 22nd, 2010, 7:21 pm

Ok guys, I'd love some help collecting data on what Mozilla's OS colors do in different environments. I can handle Windows XP and 2000, but I'm looking for helpful people using Windows Vista/7, Mac OSX, and Linux builds. Screenshot submissions should include the specific OS, the version of Firefox (or other Gecko browser) and the OS Theme.

I want to create a Flickr group that we can upload them to as a reference. This is a really rough little html page I build that shows all of the color values I found in the 3.6 default theme for Windows as a table. It also shows the two basic Mozilla OS fonts, "message-box" and "menu" as well as a sample button. Before we start collecting screen-shots, I'd love some feedback on the test, should I add a few more objects? are there Linux or Mac-specific Mozilla OS colors you would like to see tested?


OLD TEST
Code: Select all

<html>
<!-- Beginning of HTML -->

<title>Mozilla OS Colors Test</title>

<body ><center>

<br>
Mozilla OS Colors from Firefox 3.6 Strata theme.<br>
<br>

<table bgcolor="black"><tbody style="font: message-box;">

<tr> <td style="background-color:ThreeDHighlight; color:ThreeDDarkShadow;" colSpan="3">
ThreeDHighlight</td></tr>
<tr><td style="background-color:ThreeDLightShadow; color:ThreeDDarkShadow;" colSpan="3">
ThreeDLightShadow</td></tr>
<tr><td style="background-color:ThreeDFace; color:ThreeDDarkShadow;" colSpan="3">
ThreeDFace</td></tr>

<tr> <td style="background-color:ThreeDShadow; color:ThreeDHighlight;" colSpan="3">
ThreeDShadow</td></tr>
<tr><td style="background-color:ThreeDDarkShadow; color:ThreeDHighlight;" colSpan="3">
ThreeDDarkShadow</td></tr>
<tr><td style="background-color:ButtonShadow; color:ThreeDHighlight;" colSpan="3">
ButtonShadow</td></tr>

<tr> <td style="background-color:ActiveBorder; color:black;" colSpan="3">
ActiveBorder</td></tr>



<tr height="5px"> <td style="background-color:black;" colSpan="3"></td></tr>



<tr>
<td style="background-color:-moz-Dialog; color:-moz-DialogText;" colSpan="2">
-moz-Dialog / -moz-DialogText</td>
<td style="background-color:-moz-DialogText;" width="1*"></td>
</tr>

<tr >
<td style="background-color:ButtonFace; color:ButtonText;" colSpan="2">
ButtonFace / ButtonText</td>
<td style="background-color:ButtonText;" width="1*"></td>
</tr>

       
<tr>
<td style="background-color:Highlight; color:HighlightText;" colSpan="2">
Highlight / HighlightText</td>
<td style="background-color:HighlightText;" width="1*"></td>
</tr>

<tr>
<td style="background-color:-moz-menuhover; color:-moz-menuhovertext; font: menu;" colSpan="2">
-moz-menuhover / -moz-menuhovertext</td>
<td style="background-color:-moz-menuhovertext; color:-moz-menuhover; font: menu;" width="1*">
font: Menu</td>
</tr>

<tr>
<td style="background-color:-moz-cellhighlight; color:-moz-cellhighlighttext; font: menu;"

colSpan="2">
-moz-cellhighlight / -moz-cellhighlighttext</td>
<td style="background-color:-moz-cellhighlighttext; color:-moz-cellhighlight; font: menu;"

width="1*">
font: Menu</td>
</tr>

<tr>
<td style="background-color:Menu; color:MenuText; font: menu;" colSpan="2">
Menu / MenuText </td>
<td style="background-color:MenuText; color:Menu; font: menu;" width="1*">
font: Menu</td>
</tr>

<tr>
<td style="background-color:-moz-Field; color:-moz-FieldText;" colSpan="2">
-moz-Field / -moz-FieldText</td>
<td style="background-color:-moz-FieldText;" width="1*"></td>
</tr>
   
<tr>
<td style="background-color:Window; color:WindowText;" colSpan="2">
Window / WindowText</td>
<td style="background-color:WindowText;" width="1*"></td>
</tr> 

<tr>
<td style="background-color:InfoBackground; color:InfoText;" colSpan="2">
InfoBackground / InfoText</td>
<td style="background-color:InfoText;" width="1*"></td>
</tr>



<tr height="5px"> <td style="background-color:black;" colSpan="3"></td></tr>



<tr>
<td style="background-color:-moz-menuhover; color:-moz-menubarhovertext;" width="1*">
-moz-menubarhovertext</td>
<td style="background-color:-moz-menubarhovertext; color:-moz-menubarhovertext;" width="1*">
-moz-menubarhovertext</td>
<td style="background-color:-moz-menubarhovertext; color:-moz-menubarhovertext;" width="1*">
-moz-menubarhovertext</td>
</tr>

<tr>
<td style="background-color:white; color:-moz-nativehyperlinktext;" width="1*">
-moz-nativehyperlinktext</td>
<td style="background-color:-moz-nativehyperlinktext;" colSpan="2"></td>
</tr>

<tr>
<td style="background-color:white; color:GrayText;" width="1*">
GrayText</td>
<td style="background-color:GrayText;" colSpan="2"></td>
</tr>

<tr>
<td style="background-color:ActiveCaption; color:InactiveCaption;" colSpan="3">
ActiveCaption</td>
</tr>

<tr>
<td style="background-color:InactiveCaption; color:ActiveCaption;" colSpan="3">
InactiveCaption</td>
</tr>


</tbody></table>
<br>
<button>Sample OS Button</button><br>
 
</center></body>

</html>



EDIT March 2011: I'm updating this test again to include all of the colors I missed. I think it's organized a bit better too.

Code: Select all

<html>
<!-- Beginning of HTML -->

<title>Mozilla OS System Colors Test</title>

<body><center>
<br>

<table bgcolor="black"  width="800px"><tbody style="font: message-box;">

<tr>
<td style="background-color:white; color:black; font-size:120%" colSpan="5" align="center" >
System colors from: <a href="https://developer.mozilla.org/en/CSS/color_value">https://developer.mozilla.org/en/CSS/color_value</a></td>
<td style="background-color:white; color:black; width="1*" align="center">
<button>Sample OS Button</button>
</td>
</tr>

<tr>
<td style="background-color:Background; color:Window;" colSpan="6" align="center">
Background</td>
</tr>

<tr>
<td style="background-color:InactiveCaption; color:InactiveCaptionText;" width="1*" align="right">
InactiveCaption</td>
<td style="background-color:InactiveCaptionText; color:InactiveCaption;" width="1*">
InactiveCaptionText</td>
<td style="background-color:ActiveBorder; color:WindowText;" width="1*" align="center">
ActiveBorder</td>
<td style="background-color:InactiveBorder; color:WindowText;" width="1*" align="center">
InactiveBorder</td>
<td style="background-color:Scrollbar; color:WindowText;" width="1*" align="center">
Scrollbar</td>
<td style="background-color:AppWorkspace; color:Window;" width="1*" align="center">
AppWorkspace</td>
</tr>

<tr>
<td style="background-color:ActiveCaption; color:CaptionText;" width="1*" align="right">
ActiveCaption</td>
<td style="background-color:CaptionText; color:ActiveCaption;" width="1*">
CaptionText</td>
<td style="background-color:Window; color:WindowText;" width="1*" align="right">
Window</td>
<td style="background-color:WindowText; color:Window;" width="1*">
WindowText</td>
<td style="background-color:WindowFrame; color:Window;"colSpan="2" align="center">
WindowFrame</td>
</tr>

<tr>
<td style="background-color:Highlight; color:HighlightText;" width="1*" align="right">
Highlight</td>
<td style="background-color:HighlightText; color:Highlight;" width="1*">
HighlightText</td>
<td style="background-color:-moz-Field; color:-moz-FieldText;" width="1*" align="right">
-moz-Field</td>
<td style="background-color:-moz-FieldText; color:-moz-Field;" width="1*">
-moz-FieldText</td>
<td style="background-color:GrayText; color:Window;" colSpan="2" align="center">
GrayText</td>
</tr>

<tr>
<td style="background-color:-moz-MenuHover; color:-moz-MenuHoverText; font: menu;" width="1*" align="right">
-moz-MenuHover</td>
<td style="background-color:-moz-MenuHoverText; color:-moz-MenuHover; font: menu;" width="1*">
-moz-MenuHoverText</td>
<td style="background-color:Menu; color:MenuText; font: menu;" width="1*" align="right">
Menu</td>
<td style="background-color:MenuText; color:Menu; font: menu;" width="1*">
MenuText</td>
<td style="background-color:-moz-MenuBarText; color:-moz-Dialog; font: menu;" width="1*" align="center">
-moz-MenuBarText</td>
<td style="background-color:-moz-MenuBarHoverText; color:-moz-Dialog; font: menu;" width="1*" align="center">
-moz-MenuBarHoverText</td>
</tr>

<tr>
<td style="background-color:-moz-CellHighlight; color:-moz-CellHighlightText;" width="1*" align="right">
-moz-CellHighlight</td>
<td style="background-color:-moz-CellHighlightText; color:-moz-CellHighlight;" width="1*">
-moz-CellHighlightText</td>
<td style="background-color:-moz-Combobox; color:-moz-ComboboxText;" width="1*" align="right">
-moz-Combobox</td>
<td style="background-color:-moz-ComboboxText; color:-moz-Combobox;" width="1*">
-moz-ComboboxText</td>
<td style="background-color:-moz-EvenTreeRow; color:-moz-FieldText;" width="1*" align="center">
-moz-EvenTreeRow</td>
<td style="background-color:-moz-OddTreeRow; color:-moz-FieldText;" width="1*" align="center">
-moz-OddTreeRow</td>
</tr>

<tr>
<td style="background-color:-moz-html-CellHighlight; color:-moz-html-CellHighlightText;" width="1*" align="right">
-moz-html-CellHighlight</td>
<td style="background-color:-moz-html-CellHighlightText; color:-moz-html-CellHighlight;" width="1*">
-moz-html-CellHighlightText</td>
<td style="background-color:InfoBackground; color:InfoText;"  width="1*" align="right">
InfoBackground</td>
<td style="background-color:InfoText; color:InfoBackground;"  width="1*">
InfoText</td>
<td style="background-color:-moz-nativehyperlinktext; color:-moz-Dialog;" colSpan="2" align="center">
-moz-nativehyperlinktext</td>
</tr>

<tr>
<td style="background-color:-moz-ButtonHoverFace; color:-moz-ButtonHoverText;" width="1*"  align="right">
-moz-ButtonHoverFace</td>
<td style="background-color:-moz-ButtonHoverText; color:-moz-ButtonHoverFace;" width="1*" >
-moz-ButtonHoverText</td>
<td style="background-color:-moz-Dialog; color:-moz-DialogText;" width="1*" align="right">
-moz-Dialog</td>
<td style="background-color:-moz-DialogText; color:-moz-Dialog;" width="1*">
-moz-DialogText</td>
<td style="background-color:-moz-ButtonDefault; color:ButtonHighlight;" colSpan="2" align="center">
-moz-ButtonDefault</td>
</tr>

<tr>
<td style="background-color:ThreeDHighlight; color:ThreeDDarkShadow;" width="1*" align="center">
ThreeDHighlight</td>
<td style="background-color:ThreeDLightShadow; color:ThreeDDarkShadow;" width="1*" align="center">
ThreeDLightShadow</td>
<td style="background-color:ThreeDFace; color:ButtonText;" colSpan="2" align="center">
ThreeDFace</td>
<td style="background-color:ThreeDShadow; color:ThreeDHighlight;" width="1*" align="center">
ThreeDShadow</td>
<td style="background-color:ThreeDDarkShadow; color:ThreeDHighlight;" width="1*" align="center">
ThreeDDarkShadow</td>
</tr>

<tr>
<td style="background-color:ButtonHighlight; color:ButtonShadow;" colSpan="2" align="center">
ButtonHighlight</td>
<td style="background-color:ButtonFace; color:ButtonText;" width="1*" align="right">
ButtonFace</td>
<td style="background-color:ButtonText; color:ButtonFace;" width="1*">
ButtonText</td>
<td style="background-color:ButtonShadow; color:ButtonHighlight;" colSpan="2" align="center">
ButtonShadow</td>
</tr>

</tbody></table>

</center></body>

</html>
Last edited by patrickjdempsey on March 8th, 2011, 4:10 am, edited 5 times in total.
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/

BruceAWittmeier

User avatar
 
Posts: 2640
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted April 23rd, 2010, 2:09 am

Is this what you wanted? Vista Home Premiun on a Dell.

Mine is 3.7a3pre - do you just want 3.6?

Id be curious to see a screen shot of yours. You show me yours, Ill show you mine :)

Image
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

patrickjdempsey

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

Post Posted April 24th, 2010, 3:32 pm

Weird colors, what OS Color Scheme are you using?

Edit: I removed the reference to the Flickr group because I never got it working.
Last edited by patrickjdempsey on June 12th, 2010, 7:17 pm, edited 1 time in total.
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/

BruceAWittmeier

User avatar
 
Posts: 2640
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted April 25th, 2010, 5:36 am

Sorry...didnt give much thought to my theme :)

Ive never used Flickr either and still probably wont. Nor MySpace or FaceBook.

Here is the html file I used - I use KompoZer.
http://gotnarcosis.com/brucewittmeier/technical/VistaHomePremium.html

How about this - Windows Vista Aero default:

Image
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

patrickjdempsey

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

Post Posted April 25th, 2010, 12:26 pm

Thanks Bruce!

Well Flickr is useless... even though it's a "public" group, you can only see the images if you are signed in? WTF? I guess I'll just migrate the images to my Photobucket account. :roll:
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/

patrickjdempsey

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

Post Posted June 8th, 2010, 4:33 pm

OK, I'm finally getting back to rehosting my images and sharing them, sorry folks.

XP Royale, Firefox 3.6:
Image


XP Luna Blue, Firefox 3.6:
Image


XP Luna Silver, Firefox 3.6:
Image


XP Luna Olive, Firefox 3.6:
Image
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/

tanjihay

User avatar
 
Posts: 54
Joined: October 30th, 2007, 2:11 am

Post Posted June 10th, 2010, 3:49 am

I'll upload screenshots from Windows 7 later 8-)
Image
Image

patrickjdempsey

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

Post Posted June 10th, 2010, 3:53 pm

Thank you tanjihay, that confirms that the "ThreeDShadow" colors should be avoided for Mac-compatible themes, as well as the purpose of the Menu font.
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/

tanjihay

User avatar
 
Posts: 54
Joined: October 30th, 2007, 2:11 am

Post Posted June 12th, 2010, 1:04 am

Windows 7 :twisted:
The 2nd one is Classic, I just forgot to change the red text ](*,)
Image
Image

patrickjdempsey

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

Post Posted June 12th, 2010, 7:16 pm

These are all taken in Firefox 3.6 in Windows XP Classic mode:

Image
Classic.

Image
Standard.

Image
Teal.

Image
Spruce.

Image
High Contrast #1.

Image
High Contrast #2.

Image
High Contrast Black.

Image
High Contrast White.
Last edited by patrickjdempsey on January 23rd, 2014, 1:19 pm, edited 1 time in total.
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/

malliz
Folder@Home

User avatar
 
Posts: 43777
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted June 12th, 2010, 9:10 pm

What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"

patrickjdempsey

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

Post Posted June 13th, 2010, 3:50 pm

I didn't realize Zune was available for XP, I thought it was just for Vista and 7. I didn't include Royale Noir because it's basically identical to Royale except for title-bars and scrollbars, but no difference in the other colors.
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/

patrickjdempsey

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

Post Posted June 14th, 2010, 2:54 pm

I've added ActiveCaption and InactiveCaption to the test as these are currently being used by the test builds of 3.7.
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/

patrickjdempsey

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

Post Posted June 28th, 2010, 4:26 pm

I added a new version of the test up top in the second CODE box. I'll update all of my screenshots accordingly.
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/

patrickjdempsey

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

Post Posted March 8th, 2011, 4:06 am

Newest OS color test results. I've tried to organize the sections in a way that makes sense so you can see how the colors relate to one another.

Image
Image
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 Theme Development


Who is online

Users browsing this forum: No registered users and 0 guests