ToolContainer Background Color

[itg-assistant]

Cris asked 2016-09-26 19:05:53 UTC

Hi,

In ThemeBuilder and in Appearances.ToolContainer.Default.Styles, I added a backgroundColor and set it to color the same as in Table Header Cell.Default.Styles.backgroundColor. It works but only it only affects the Tool I added and not on the whole container.

Is it not possible so that the ToolContainer would have the same color as the DGV column headers? I think it would look nicer.

Thanks.

[itg-assistant]

Luca answered 2016-09-26 20:39:33 UTC

The ToolContainer shrinks to the minimum size enough to hold the child buttons.

The editable widgets (textbox, combobox, ect) have 2 tool containers, one to the left of the inner input and one to the right - in order to hold the tools aligned left or right.

The other non-editable composite widgets (treeview, data grid) have a tool strip at the top that container 2 tool containers. For the grid look under Appearances/Table/Tools. It's already defined in all the themes.

One way to see what the appearance of an inner widget that is not defined it to click on it in the theme builder and the full path is displayed in the status bar. However in this case there is no preview for the tool container: I will add it somewhere in the preview scripts.

Best,

Luca

[itg-assistant]

Cris answered 2016-09-28 18:21:56 UTC

Hi Luca,

I got the right spot and was able to add a background-color as shown in the image attached. But there's something missing. No border at the top of the columns-header or at the bottom of the tool container. Is it possible to put one in there?

And how to make the image brighter or change it to white?

Thanks.

[itg-assistant]

Luca answered 2016-09-28 20:06:48 UTC

Hi Cris,

The screenshot was missing. You can add the border to Appearances/Table/Tools under Styles, set the color or colorBottom and width or widthBottom.

Best,

Luca

[itg-assistant]

Cris answered 2016-09-29 13:40:58 UTC

Hi Luca,

I can't find a border item either in Styles or Properties in ThemeBuilder (1.2.67 or 1.2.68).

I knew that you already got what I meant but still attaching the image for future reference.

Thanks.

[itg-assistant]

Luca answered 2016-09-29 13:44:23 UTC

You have to add the value under Appearances/Table/Tools/Styles. After selecting it, click the + icon above the properties. Add "colorBottom" and "widthBottom". Also, to change the color of the svg icons, add Appearances/Table/Tools/Properties/textColor.

ThemeBuilder shows the properties that are present in the theme. There are countless styles and properties and components that can be added.

Best,

Luca

[itg-assistant]

Cris answered 2016-09-29 17:24:58 UTC

Hi Luca,

I did try at the same node before but didn't work. So, I looked for "border" item in styles/properties. Please see images of what I got after adding "colorBottom" and "widthBottom". At runtime, it's totally invisible.

Is there something wrong on my side?

Thanks.

[itg-assistant]

Luca answered 2016-09-29 17:48:49 UTC

See below, the screenshot and theme snippet:

"table":
 {
   "components":
   {
     "tools":
     {
       "states":
       {
         "default":
         {
           "properties":
           {
             "padding": [5, 2, 5, 2],
             "textColor": "white"
           },
           "styles":
           {
             "backgroundColor": "green",
             "widthBottom": 3,
             "colorBottom": "yellow"
           }
         }
       }
     }
   }
 }

[itg-assistant]

Cris answered 2016-09-29 18:29:53 UTC

Hi Luca,

Got it working now. I created a new theme from the built-in theme. Maybe, I was using an old theme file.

Thanks for your patience.

Best.