May 15th

Color themes in TabSRMM 3

2010, 19:05 UTC | By | In TabSRMM
Leave a comment | Trackback  | 5532 views
Quick summary: The article explains how to customize the UI in TabSRMM 3 using custom colors only. No skinning is required to attain a look like shown in the screenshot on the left.

In TabSRMM 2, skins were the only way to completely change the look of the message window. While skins have a number of advantages, they also come at some cost:

  • They can slow down the UI, because they involve complex drawing operations.
  • They can be hard to modify and tweak

TabSRMM with custom colors (no skin)

In TabSRMM 3, skins are still supported, but the UI is much easier customizable by using another method: Colors. With a few color settings, you can change the look of most UI parts, including the info panel, the tool bar, the tabs and the generic background color. No need to edit a skin and any change you do will be immediately visible in open message windows. Color settings are saved to the database and there is a feature for easily exporting and importing them. The only elements which cannot be customized with this method are the title bar and window border(s) - these are rendered by the operating system and will therefore use the current Windows theme (either classic theme or a visual style).

1. Some basics

Like said in the summary, this is different from using a skin. It allows you to significantly change the appearance of the message window without using a skin. This is much easier, because basically, you just need to change a few colors and are done. Such color themes can be saved for later use with a simple export and import feature.

The relevant settings are under Customize->Fonts and colors->TabSRMM and its subsections. The sub sections Single Messaging and Group chats should be known by any TabSRMM user - they did exist in previous versions and their purpose is to set colors for the message log and message input field only. These colors control the appearance of the two large text areas in a message window.

The sub sections Info panel, Common colors and Tabs are either completely new in TabSRMM 3 or contain additional color settings. Some of them did exist in previous versions, but most didn't.

Here are a few facts, you need to know:

  1. For the colors in Common colors, you cannot use pure black (RGB #000000). If a color is set to 0 (pure black), it is ignored and the default is used. The default depends on your Windows theme or visual style. However, you can cheat this by using a color that is technically not black, but looks like black, for example, RGB #010101 (technically, a very dark grey, but you'll never be able to tell the difference between it and a real pure black).
  2. When using the Aero UI, some color settings will be ignored, because TabSRMM paints the aero style you have set in Options->Message Sessions->Containers.
  3. When using custom background colors, Tabs and switch bar buttons will be painted without using Windows visual styles. This is, because visual styles usually match the default Windows color theme, so using them with a custom TabSRMM color theme would look very strange or ugly (for example, you would see light grey tabs on a otherwise completely dark message window - not good). In that case, tabs are rendered using transparent PNG images on a color-filled background - basically the same method used by the Aero UI.
  4. Under Customize->Fonts and colors->TabSRMM->Tabs, you can find the color settings used to render tabs when custom colors are in use. There are background and text colors available for various states - normal, active, hottracked and unread. The last one is used for background tabs with unread messages only. These colors are ignored when tabs are rendered with visual styles or fully transparent while the Aero UI is active.

1. Set the fill color

The fill color is the most important thing here, because when it is set, TabSRMM will paint various UI elements differently. By default, the fill color is the standard windows color for dialog backgrounds, which is usually a light grey. If the fill color is NOT set (which means, it is set to pure black, RGB 0,0,0), most custom drawing is disabled and TabSRMM will use default Windows colors. When the fill color is set to any other value than RGB #000000, it will be used to paint all otherwise blank background areas of the message window. At the same time, the painting strategy of TabSRMM will change so that it will:

  • draw tabs and switch bar buttons with a custom method, without using visual styles
  • fill the window background with the fill color instead of using the default windows color (usually, a light grey)

2. Colors which do not depend on the fill color

The info panel and tool bar gradients can be used independently. Note that for any of these gradients, both colors must be valid (which means: different from rgb #0000000). The gradient colors for the info panel can be found in Customize->Fonts and colors->TabSRMM->info panel and the gradient colors for the tool bar are under Customize->Fonts and colors->TabSRMM->Common colors.

3. How the tool bar is painted

This is a bit complex and follows a few rules:

  • When the tool bar colors under Customize->Fonts and colors->TabSRMM->Common colors are NOT set (read: they are black, rgb #000000), the tool bar uses a gradient that matches the Windows Aero color theme in Aero mode, or, if Aero is not available or disabled, the tool bar will use a background from the current Windows visual style.
  • If tool bar colors are set, they will be used in any mode, regardless of operating system theme or other TabSRMM settings. By configuring the tool bar background colors (both low and high must be defined), you can force the tool bar to always use a color gradient rendering.

4. How the info panel background is painted

In Aero mode, the look of the info panel background depends on the following settings:

  • Aero effect (Options->Message sessions->Container).
  • Info panel background colors in Customize->Fonts and colors->TabSRMM->info panel. The final look depends on the aero effect - some effects will ignore colors or use their own.

In any other mode (classic Windows theme or visual styles), the info panel will use its configured background color gradient.

5. How tabs are painted

In Aero mode, tabs will use a transparent look, colorized by the current Windows Aero theme color. Active or hovered tabs will use a subtle glowing effect. Contextual colors for active, hovered or unread tabs are not available, simply because colors don't always mix nicely with transparent Aero backgrounds.

When Aero is disabled or not available, the look of the tabs depends on the Fill color.

  • When the fill color is not set, tabs are rendered with the native OS look (either classic Windows theme or the currently active visual style.
  • When the fill color is valid, tabs will use custom rendering and the colors under Customize->Fonts and colors->TabSRMM->Tabs are applied.

6. Info panel fonts and colors

You can set fonts and colors for various info panel fields under Customize->Fonts and colors->TabSRMM->Info panel. However, the Aero UI may ignore them and use the typical Aero font rendering (with glow and shadow effects) instead. This depends on the Aero effect and while some aero effects will draw colored text in the info panel, others won't.

7. Text area border color

This color, found in the Common colors sub section will be used to draw the borders around the message log and input area text fields. If this is set to RGB #000000, it is ignored and the borders will use their default color defined by the visual style (typically, a medium grey tone). Note that this requires a visual style and does not work when using the classic windows theme. Also, there is a setting under Options->Message sessions->Tabs and layout to disable text area borders completely and a similar setting is available in IEView.

8. Exporting and importing color themes

Currently, this is only available when a message window is open.  Click the third button of the right button group (by default, it uses a wheel-like icon and a "Message log options" tool tip) and select either "Export message log settings" or "Import message log settings" from the pulldown menu. A file selection dialog will open and let you specify a file name. By default, such files will be saved to your skins root directory and use a .tabsrmm extension. Exporting the theme will save all colors, fonts and some other UI-related settings.

Note that this method is probably not the final one - exporting and importing color themes should be available from the options dialog.

Like
 

12 responses to: Color themes in TabSRMM 3

  1. Some trouble with skining by  Vladimir, May 20th, 2010 at 13:11
    Reply | Quote | #2

    Hi, i have question.

    How to change gradient colors in info panel?

    These colors don't change in TabSRMM 3.0.0.31

    Preview: _http://img13.imageshack.us/img13/7815/tabsj.png

  2. Admin, May 20th, 2010 at 14:04
    Reply | Quote | #3

    Well, this article is about customizing TabSRMM WITHOUT a skin.

    You are using a skin (judging from your screenshot), so the skin must define the look of the info panel. Skin format has changed slightly, so old skins, written for TabSRMM 2, may not be fully compatible as in TabSRMM 2 there was no info panel background skin.

    Skins will need to be updated and I'll post documentation about this once the final TabSRMM 3 format is ready (which should be soon).

    Updating a skin will be fairly easy, because it's only 1 or 2 items that have changed.

  3. Vladimir, May 20th, 2010 at 15:10
    Reply | Quote | #4

    Thank you very much. Can you inform me please, when information will be available?

  4. Admin, May 20th, 2010 at 16:32
    Reply | Quote | #5

    It will be announced here like all other releases, but I cannot give you a specific date.

  5. background color by  p.F, May 21st, 2010 at 22:34
    Reply | Quote | #6

    same problem with gradient color :/

  6. Admin, May 21st, 2010 at 22:52
    Reply | Quote | #7

    <blockquote cite="#commentbody-25741">

    p.F :

    same problem with gradient color :/

    Same answer applies. Didn't you read it?

  7. Input area &amp; message log borders by  František Nes, Jul 23rd, 2010 at 01:14
    Reply | Quote | #8

    Hi,

    is there any way to set different colors for the input area borders and message log borders? Now both are merged into one option "text area borders" in customize -> fonts and colors -> TabSRMM -> Common colors.

    Or is there any way to disable the borders of the message log?

    Thanks,

    František Nesveda

  8. Admin, Jul 23rd, 2010 at 12:19
    Reply | Quote | #9

    1) There is only one border color

    2) There is no option to disable borders, but you can set the border color to the same as the background which will make the borders disappear.

  9. incoming and outgoing msg by  mkay, Oct 20th, 2010 at 19:15

    hi there,

    im trying to use different colored backgrounds for outgoing and incoming messages but i cant find any settings.

    can anybody help me?

    greetings mkay

    • mkay, Oct 21st, 2010 at 18:04

      found it! thx anyways

Subject

  (this is optional)

Comment text

Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>