User Tools

Site Tools


fs_colorschemecontest
Advertisement

How to create a custom color scheme in Firestorm!

Create and Submit your own Firestorm Color Scheme!

Creating a color scheme for firestorm is not difficult, and we're actively seeking more of them!
This document will help you create one and share it with us.
The best ones we receive will be included with future releases of the Firestorm viewer!

You will need:

  • A basic understanding of markup documents, like HTML/XML
  • The ability to navigate around folders on your computer
  • The Firestorm viewer installed on your system!
  • A willingness to experiment!
  • Basic mathematical skill, about equivalent to a typical 11yr old.

1. First create a menu entry for your custom color theme

1a. Find the firestorm skins directory for your Firestorm install

  • In Windows this is usually C:\Program Files\Firestorm-Beta-Mesh\skins
  • In MacOSX this is usually in your Applications folder, right click Firestorm-Beta-Mesh, select Show Package Contents, then navigate to Contents/Resources/skins
  • In Linux, go to where you unpacked your Firestorm package, and then navigate to the skins folder

Once you have found the correct location, you should see a “skins.xml” file in this folder.

1b. Edit the skins.xml file

Use a good text editor of choice to edit this file. NOTE: On some computers, double-clicking .xml files will show them in a web browser. You do not want this! Launch your highlighting text editor first, then open the .xml file from within your editor.

Find the “Grey” theme block. It starts on line 10 and looks like this:

            <key>themes</key>
            <array>
                <map>
                <key>name</key>
                    <string>Grey</string>
                <key>folder</key>
                    <string>grey</string>
                </map>

Add a new block right after this for your custom theme. Add lines similar to the following six (6) new lines:

                <key>name</key>
                    <string>Grey</string>
                <key>folder</key>
                    <string>grey</string>
                </map>
                <map>
                <key>name</key>
                    <string>Color Contest</string>
                <key>folder</key>
                    <string>color_contest</string>
                </map>
            </array>
        </map>

1c. Save the file

2. Create your custom color scheme!

2a. Find the firestorm skins theme directory for your Firestorm install

  • In Windows this is usually c:\Program Files\Firestorm-Beta-Mesh\skins\firestorm\themes
  • In MacOSX this is usually in your Applications folder.
    Right click Firestorm-Beta-Mesh, select Show Package Contents, then navigate to Contents/Resources/skins/firestorm/themes
  • In Linux, go to where you unpacked your Firestorm package, and then navigate to skins/firestorm/themes

You should see a folder “dark” in this location.

2b. Create a new folder

The folder should be named “color_contest”, or whatever matches the folder name you entered in in step 1b above.
Use all lower case letters, no spaces, no punctuation.

2c. Create a basic colors.xml file

Create a file named “colors.xml”. Using the text editor you used above, open up your new “colors.xml” file and add the following lines into this new file.

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<colors>

    <!-- Common Accent Colors -->
    
    <color
     name="EmphasisColor"
     value="0.38 0.694 0.573 1" />
    <color
     name="EmphasisColor_13"
     value="0.38 0.694 0.573 0.13" />
    <color
     name="EmphasisColor_35"
     value="0.38 0.694 0.573 0.35" />
    <color
     name="White"
     value="1 1 1 1" />
    <color
     name="White_05"
     value="1 1 1 0.05" />
    <color
     name="White_10"
     value="1 1 1 0.1" />
    <color
     name="White_25"
     value="1 1 1 0.25" />
    <color
     name="White_50"
     value="1 1 1 0.5" />
    <color
     name="LtGray"
     value="0.75 0.75 0.75 1" />
    <color
     name="LtGray_50"
     value="0.75 0.75 0.75 0.50" />
    <color
     name="DkGray"
     value="0.125 0.125 0.125 1" />
    <color
     name="DkGray_66"
     value="0.125 0.125 0.125 .66" />
    <color
     name="DkGray2"
     value="0.169 0.169 0.169 1" />
    <color
     name="MouseGray"
     value="0.191 0.191 0.191 1" />
    <color
     name="Black"
     value="0 0 0 1" />
    <color
     name="Black_10"
     value="0 0 0 0.1" />
    <color
     name="Black_25"
     value="0 0 0 0.25" />
    <color
     name="Black_50"
     value="0 0 0 0.5" />
     
    <!-- UI elements -->
    
    <color
     name="AccordionHeaderTextColor"
     reference="LtGray" />
    <color
     name="AgentChatColor"
     reference="White" />
    <color
     name="AlertBoxColor"
     value="0.24 0.24 0.24 1" />
    <color
     name="AlertCautionBoxColor"
     value="1 0.82 0.46 1" />
    <color
     name="AlertCautionTextColor"
     reference="LtYellow" />
    <color
     name="AvatarListItemIconDefaultColor"
     reference="White" />
    <color
     name="AvatarListItemIconOnlineColor"
     reference="White" />
    <color
     name="AvatarListItemIconOfflineColor"
     value="0.5 0.5 0.5 0.5" />
    <color
     name="AvatarListItemIconVoiceInvitedColor"
     reference="AvatarListItemIconOfflineColor" />
    <color
     name="AvatarListItemIconVoiceJoinedColor"
     reference="AvatarListItemIconOnlineColor" />
    <color
     name="AvatarListItemIconVoiceLeftColor"
     reference="AvatarListItemIconOfflineColor" />
    <color
     name="BadgeImageColor"
     value="1.0 0.40 0.0 1.0" />
    <color
     name="BadgeBorderColor"
     value="0.9 0.9 0.9 1.0" />
    <color
     name="BadgeLabelColor"
     reference="White" />
    <color
     name="ButtonImageColor"
     reference="White" />
    <color
     name="ButtonLabelColor"
     reference="LtGray" />
    <color
     name="ButtonLabelDisabledColor"
     reference="White_25" />
    <color
     name="ButtonLabelSelectedColor"
     reference="White" />
    <color
     name="ButtonLabelSelectedDisabledColor"
     reference="White_25" />
    <color
     name="ChatHistoryBgColor"
     reference="Transparent" />
    <color
     name="ChatHistoryTextColor"
     reference="LtGray" />
    <color
     name="ChicletFlashColor"
     value="0.114 0.65 0.1" />
    <color
     name="ColorDropShadow"
     reference="Black_50" />
    <color
     name="ComboListBgColor"
     reference="DkGray" />
    <color
     name="ConsoleBackground"
     reference="Black" />
    <color
     name="ContextSilhouetteColor"
     reference="EmphasisColor" />
    <color
     name="DefaultHighlightDark"
     reference="White_10" />
    <color
     name="DefaultHighlightLight"
     reference="White_25" />
    <color
     name="DefaultShadowDark"
     reference="Black_50" />
    <color
     name="DefaultShadowLight"
     reference="Black_50" />
    <color
     name="EffectColor"
     reference="White" />
     <color
     name="FilterBackgroundColor"
     reference="Black" />
    <color
     name="FilterTextColor"
     value="0.38 0.69 0.57 1" />
     <color
     name="FloaterButtonImageColor"
     reference="LtGray" />
    <color
     name="FloaterDefaultBackgroundColor"
     reference="DkGray_66" />
    <color
     name="FloaterFocusBackgroundColor"
     reference="DkGray2" />
    <color
     name="FloaterFocusBorderColor"
     reference="Black_50" />
    <color
     name="FloaterUnfocusBorderColor"
     reference="Black_50" />
    <color
     name="FocusColor"
     reference="EmphasisColor" />
    <color
     name="FolderViewLoadingMessageTextColor"
     value="0.3344 0.5456 0.5159 1" />
    <color
     name="GridFocusPointColor"
     reference="White_50" />
    <color
     name="GridlineBGColor"
     value="0.92 0.92 1 0.78" />
    <color
     name="GridlineColor"
     reference="White" />
    <color
     name="GridlineShadowColor"
     value="0 0 0 0.31" />
    <color
     name="GroupNotifyBoxColor"
     value="0.3344 0.5456 0.5159 1" />
    <color
     name="GroupNotifyTextColor"
     reference="White"/>
    <color
     name="GroupNotifyDimmedTextColor"
     reference="LtGray" />
    <color
     name="GroupOverTierColor"
     value="0.43 0.06 0.06 1" />
    <color
     name="HTMLLinkColor"
     reference="EmphasisColor" />
    <color
     name="HealthTextColor"
     reference="White" />
    <color
     name="HighlightChildColor"
     reference="Yellow" />
    <color
     name="HighlightInspectColor"
     value="1 0 1 1" />
    <color
     name="HighlightParentColor"
     value="0.67 0.83 0.96 1" />
    <color
     name="IconDisabledColor"
	 reference="White_25" />
    <color
     name="IconEnabledColor"
     reference="White" />
    <color
     name="InventoryBackgroundColor"
     reference="DkGray2" />
    <color
     name="InventoryFocusOutlineColor"
     reference="White_25" />
    <color
     name="InventoryItemSuffixColor"
     reference="White_25" />
    <color
     name="InventoryItemLibraryColor"
     reference="EmphasisColor" />
    <color
     name="InventoryItemLinkColor"
     reference="LtGray_50" />
    <color
     name="InventorySearchStatusColor"
     reference="EmphasisColor" />
    <color
     name="LabelDisabledColor"
	 reference="White_25" />
    <color
     name="LabelSelectedColor"
     reference="White" />
    <color
     name="LabelSelectedDisabledColor"
     reference="White_25" />
    <color
     name="LabelTextColor"
     reference="LtGray" />
    <color
     name="LoginProgressBoxBorderColor"
     value="0 0.12 0.24 0" />
    <color
     name="LoginProgressBoxCenterColor"
     value="0 0 0 0.78" />
    <color
     name="LoginProgressBoxShadowColor"
     value="0 0 0 0.78" />
    <color
     name="LoginProgressBoxTextColor"
     reference="White" />
    <color
     name="MapAvatarColor"
     reference="Green" />
    <color
     name="MapAvatarFriendColor"
     reference="Yellow" />
    <color
     name="MapAvatarSelfColor"
     value="0.53125 0 0.498047 1" />
    <color
     name="MapFrustumColor"
     reference="White_10" />
    <color
     name="MapFrustumRotatingColor"
     value="1 1 1 0.2" />
    <color
     name="MapTrackColor"
     reference="Red" />
    <color
     name="MapTrackDisabledColor"
     value="0.5 0 0 1" />
    <color
     name="MenuBarBgColor"
     reference="DkGray" />
    <color
     name="MenuBarGodBgColor"
     reference="FrogGreen" />
    <color
     name="MenuDefaultBgColor"
     reference="DkGray2" />
    <color
     name="MenuItemDisabledColor"
	 reference="LtGray_50" />
    <color
     name="MenuItemEnabledColor"
     reference="LtGray" />
    <color
     name="MenuItemHighlightBgColor"
     reference="EmphasisColor_35" />
    <color
     name="MenuItemHighlightFgColor"
     reference="White" />
    <color
     name="MenuNonProductionBgColor"
     reference="Black" />
    <color
     name="MenuNonProductionGodBgColor"
     value="0.263 0.325 0.345 1" />
    <color
     name="MenuPopupBgColor"
	  reference="DkGray2" />
    <color
     name="MultiSliderDisabledThumbColor"
     reference="Black" />
    <color
     name="MultiSliderThumbCenterColor"
     reference="White" />
    <color
     name="MultiSliderThumbCenterSelectedColor"
     reference="Green" />
    <color
     name="MultiSliderTrackColor"
     reference="LtGray" />
    <color
     name="MultiSliderTriangleColor"
     reference="Yellow" />
    <color
      name="NameTagBackground"
      value="0 0 0 1" />
    <color
     name="NameTagChat"
     reference="White" />
    <color
     name="NameTagFriend"
     value="0.447 0.784 0.663 1" />
    <color
     name="NameTagLegacy"
     reference="White" />
    <color
     name="NameTagMatch"
     reference="White" />
    <color
     name="NameTagMismatch"
     reference="White" />
    <color
     name="NetMapBackgroundColor"
     value="0 0 0 1" />
    <color
     name="NetMapGroupOwnAboveWater"
     reference="Purple" />
    <color
     name="NetMapGroupOwnBelowWater"
     value="0.78 0 0.78 1" />
    <color
     name="NetMapOtherOwnAboveWater"
     value="0.24 0.24 0.24 1" />
    <color
     name="NetMapOtherOwnBelowWater"
     value="0.12 0.12 0.12 1" />
    <color
     name="NetMapYouOwnAboveWater"
     value="0 1 1 1" />
    <color
     name="NetMapYouOwnBelowWater"
     value="0 0.78 0.78 1" />
    <color
     name="NotifyBoxColor"
     value="LtGray" />
    <color
     name="NotifyCautionBoxColor"
     value="1 0.82 0.46 1" />
    <color
     name="NotifyCautionWarnColor"
     reference="White" />
    <color
     name="NotifyTextColor"
     reference="White" />
    <color
     name="ObjectBubbleColor"
     reference="DkGray_66" />
    <color
     name="ObjectChatColor"
     reference="EmphasisColor" />
    <color
     name="OverdrivenColor"
     reference="Red" />
    <color
     name="PanelDefaultBackgroundColor"
     reference="DkGray" />
    <color
     name="PanelDefaultHighlightLight"
     reference="White_50" />
    <color
     name="PanelFocusBackgroundColor"
     reference="DkGray2" />
    <color
     name="ParcelHoverColor"
     reference="White" />
    <color
     name="PieMenuBgColor"
     value="0.24 0.24 0.24 0.59" />
    <color
     name="PieMenuLineColor"
     value="0 0 0 0.5" />
    <color
     name="PieMenuSelectedColor"
     value="0.72 0.72 0.74 0.3" />
    <color
     name="PropertyColorAuction"
     value="0.5 0 1 0.4" />
    <color
     name="PropertyColorAvail"
     reference="Transparent" />
    <color
     name="PropertyColorForSale"
     value="1 0.5 0 0.4" />
    <color
     name="PropertyColorGroup"
     value="0 0.72 0.72 0.4" />
    <color
     name="PropertyColorOther"
     value="1 0 0 0.4" />
    <color
     name="PropertyColorSelf"
     value="0 1 0 0.4" />
    <color
     name="ScriptBgReadOnlyColor"
     value="0.39 0.39 0.39 1" />
    <color
     name="ScriptErrorColor"
     reference="Red" />
    <color
     name="ScrollBGStripeColor"
     reference="Transparent" />
    <color
     name="ScrollBgReadOnlyColor"
      reference="Transparent" />
    <color
     name="ScrollBgWriteableColor"
     reference="White_05" />
    <color
     name="ScrollDisabledColor"
     reference="White_25" />
    <color
     name="ScrollHoveredColor"
     reference="EmphasisColor_13" />
    <color
     name="ScrollSelectedBGColor"
     reference="EmphasisColor_35" />
    <color
     name="ScrollSelectedFGColor"
     reference="White" />
    <color
     name="ScrollUnselectedColor"
     reference="LtGray" />
    <color
     name="ScrollbarThumbColor"
     reference="White" />
    <color
     name="ScrollbarTrackColor"
     reference="Black" />
    <color
     name="SelectedOutfitTextColor"
     reference="EmphasisColor" />
    <color
     name="SilhouetteChildColor"
     value="0.13 0.42 0.77 1" />
    <color
     name="SilhouetteParentColor"
     reference="Yellow" />
    <color
     name="SliderDisabledThumbColor"
     reference="White_25" />
    <color
     name="SliderThumbCenterColor"
     reference="White" />
    <color
     name="SliderThumbOutlineColor"
     reference="White" />
    <color
     name="SpeakingColor"
     reference="FrogGreen" />
    <color
     name="SystemChatColor"
     reference="LtGray" />
    <color
     name="TextBgFocusColor"
     reference="White" />
    <color
     name="TextBgReadOnlyColor"
	 reference="White_05" />
    <color
     name="TextBgWriteableColor"
     reference="LtGray" />
    <color
     name="TextCursorColor"
     reference="Black" />
    <color
     name="TextDefaultColor"
     reference="Black" />
    <color
     name="TextEmbeddedItemColor"
     value="0 0 0.5 1" />
    <color
     name="TextFgColor"
     value="0.102 0.102 0.102 1" />
    <color
     name="TextFgReadOnlyColor"
     reference="LtGray" />
    <color
     name="TextFgTentativeColor"
     value="0.4 0.4 0.4 1" />
    <color
     name="TimeTextColor"
     reference="LtGray" />
    <color
     name="TitleBarFocusColor"
     reference="White_10" />
    <color
     name="ToolTipBgColor"
     value="0.937 0.89 0.655 1" />
    <color
     name="ToolTipBorderColor"
     value="0.812 0.753 0.451 1" />
    <color
     name="ToolTipTextColor"
     reference="DkGray2" />
    <color
     name="InspectorTipTextColor"
     reference="LtGray" />
    <color
     name="UserChatColor"
     reference="White" />
    <color
     name="llOwnerSayChatColor"
     reference="LtYellow" />

    <!-- New Colors -->
    
    <color
     name="OutputMonitorMutedColor"
     reference="DkGray2" />
    <color
     name="SysWellItemUnselected"
     value="0 0 0 0" />
    <color
     name="SysWellItemSelected"
     value="0.3 0.3 0.3 1.0" />
    <color
    name="ColorSwatchBorderColor"
    value="0.45098 0.517647 0.607843 1"/>
    <color
     name="ChatTimestampColor"
     reference="White" />
    <color
     name="MenuBarProjectBgColor"
     reference="MdBlue" />
  
    <color
      name="MeshImportTableNormalColor"
      value="1 1 1 1"/>
    <color
      name="MeshImportTableHighlightColor"
      value="0.2 0.8 1 1"/>

    <color
     name="DirectChatColor"
     reference="LtOrange" />

Don't worry about understanding everything in this file yet. We'll come back to it later!
Make sure to save the file.

3. Test your new skin

  • Launch firestorm. Go to the Avatar menu / Preferences / Skins.
  • Select “Firestorm”
  • In the themes menu, you should see your new theme “color_contest” as a choice!
  • Select it and restart Firestorm.

4. Customize Colors!

Now, open up the colors.xml file you saved earlier and start editing the color definitions.
This is easier than it sounds.

4a Make a list of your new colors

First figure out what colors you want to use in your theme.

The color scheme selector mentioned in the requirements at the start of this guide is a good place to get color ideas.

Once you have a list of the colors you want to use, record the hexidecimal code for each of your desired colors, also known as
the “HTML code”.

Your color scheme selector, paint program, or color picker should tell you these codes.

4b Convert your new colors to normalized vector format

Use the color converter mentioned at the start of this document to convert your HTML color codes to percentages.

  Example:  HTML color "00FF7F" converts to percentage 0% red, 100% green, 50% blue  

Convert the percentages to a numeric value from 1.0 (100%) to 0.0 (0%).
To do this simply divide the percentage values above by 100.

  Example:  0% red, 100% green, 50% blue converts to "0.0, 1.0, 0.5"
  

Finally, add a fourth number to this list, that corresponds to the alpha value. The alpha value is a measure of transparency.
1.0 is “Solid Color”, 0.0 is “Completely transparent”, “0.5” is “partially see-through”, etc.
When in doubt, use an alpha value of 1.0

  Example:  The color in the previous examples is "0.0 1.0 0.5 1.0" after adding in an alpha value.
  

Now you have a color value corresponding to a custom color of your choice.
Do this for each of the custom colors you want to use in your scheme.

You want to add new entries for your custom colors at the top of the colors.xml file, under the banner <!– Custom Colors –>. For example, for the color we've been using above, we we add the following:

<!-- Common Accent Colors -->

<color
     name="MyCustomGreen1"
     value="0.0 1.0 0.5 1.0" />

When editing your files, make sure to exactly copy the syntax characters that make up each color tag, such as “<color” at the beginning and “/>” at the end, and making sure that after each “name=” and “value=” you have both opening and closing quotation marks. . Your editor should color your file to help you see them. If after a change your file is mostly one color and no-longer neatly color-formatted, it probably means you missed some syntax characters somewhere.

4c Use your colors in the colors.xml file in place of the existing values

In the colors file, replace the “value” line of select lines with your custom colors.
You can make big differences just by changing a few of the lines near the top, for example changing the value of “Emphasis Color” or “DkGray”.

For example, you can change:

<color
     name="FocusColor"
     reference="EmphasisColor" />

to:

<color
     name="FocusColor"
     reference="MyCustomGreen1" />

You may be confused as to which colors to change first. The best way to see this is with some trial and error. You can make some very big improvements just by changing the value of some color definitions at the top of the file, for example redefining EmphasisColor or DkGray.

For more fine-grained control, you can change the colors of selected UI elements in the longer list.

Try to only change one or two colors at a time, then test.

4d Test your color changes

Relaunch firestorm to see the effects of your color changes.

5. Advanced: How to see your changes fast

After changing a few colors, you may wonder if there is an easier way to see the effects of your changes.
Why YES, there is!

To use the secret UI Preview Tool, relaunch Firestorm and press control-T before logging in.

This tool can be used to preview any of the listed windows or controls.
Close them and double-click them in the list again to get a fresh redraw.
This is a faster way of seeing your changes, without having to relaunch the viewer each time.

6. Advanced: Changing graphics, tricky color areas

If you are pushing the limits of what you can do with colors.xml, you may find you reach the point where you want to change a particular graphic, or control the color of a particular window in a way that doesn't appear to be allowed.

If you get this far, tricky color and graphic changes are possible! Ask us in a jira ticket and we'll help out.

7. Share your changes!

When you are happy with your color scheme, open up a jira ticket here.

Attach your custom colors.xml file, and a screenshot of your new color scheme in action.

Make sure to include the name you want listed in our credits window.

Make sure you mention that you give us permission to use and distribute your color scheme under the LGPL (friendly, open source) license or equivalent.

Happy color-scheme creating!

Join the Firestorm Skin Artists Group: secondlife:///app/group/0b520975-e4e3-d348-6546-2a546ba5bc06/about

fs_colorschemecontest.txt · Last modified: 2011/11/21 20:42 by lette