Jump to content

Page Control colour


rc002017

Recommended Posts

How do I change the colour of a Page Control (or any other component) which does not have a colour property ?

 

I have a Page Control on top of a Panel, I can set the panel color property and it shows correctly in a browser, but the page control always shows the default light blue. Page control is ok when run as a standalon VCL app.

 

This may mean I need to change themes but I am unsure of how to do this.

 

Using v0.86

 

Thanks

Link to comment
Share on other sites

I changed the color during creating form event. The code below I used to change the color to clWhite for all pages.

 

for i:=0 to uniPageControl1.PageCount-1 do

begin

uniPageControl1.Pages.Color:=clWhite;

end;

Link to comment
Share on other sites

  • Administrators

How do I change the colour of a Page Control (or any other component) which does not have a colour property ?

 

I have a Page Control on top of a Panel, I can set the panel color property and it shows correctly in a browser, but the page control always shows the default light blue. Page control is ok when run as a standalon VCL app.

 

This may mean I need to change themes but I am unsure of how to do this.

 

Using v0.86

 

Thanks

 

Like many other Ext JS controls Tabs are rendered using CSS themes. There is no easy way to change those colors from Delphi.

Link to comment
Share on other sites

I changed the color during creating form event. The code below I used to change the color to clWhite for all pages.

 

for i:=0 to uniPageControl1.PageCount-1 do

begin

uniPageControl1.Pages.Color:=clWhite;

end;

 

Thanks Amit, changes the colour of the pages, but the tabs themselves remain the default light blue, something I wish to change as well.

 

Like many other Ext JS controls Tabs are rendered using CSS themes. There is no easy way to change those colors from Delphi.

 

Is there a way to use a modified CSS theme that I can set to the colour scheme I wish to use ?

Link to comment
Share on other sites

  • Administrators

In a CSS theme file there are many entries for tabs:

 

.x-tab-panel-inner {
border: 1px solid #8db2e3;
border-top:none;
}

.x-tab-panel-sheet {
border-left: 2px solid #dfe8f6;
}

.x-tab-panel-header, .x-tab-panel-footer {
background-color: #deecfd;
border-color:#8db2e3;
 overflow:hidden;
 zoom:1;
}

ul.x-tab-strip-top{
 background-color:#cedff5;
background-image: url(../images/default/tabs/tab-strip-bg.gif);
border-bottom-color: #8db2e3;
}

ul.x-tab-strip-bottom{
 background-color:#dfe8f6;
background-image: url(../images/default/tabs/tab-strip-btm-bg.gif);
border-top-color: #dfe8f6;
}

.x-tab-panel-header-plain .x-tab-strip-spacer,
.x-tab-panel-footer-plain .x-tab-strip-spacer {
border-color:#dfe8f6;
background-color: #dfe8f6;
}

.x-tab-strip span.x-tab-strip-text {
font:normal 11px tahoma,arial,helvetica;
color:#416aa3;
}

.x-tab-strip-over span.x-tab-strip-text {
color:#15428b;
}

.x-tab-strip-active span.x-tab-strip-text {
color:#15428b;
/*  font-weight:bold;*/
}

.x-tab-strip-disabled .x-tabs-text {
color:#aaaaaa;
}

.x-tab-strip-top .x-tab-right, .x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner{
background-image: url(../images/default/tabs/tabs-sprite.gif);
}

.x-tab-strip-bottom .x-tab-right {
background-image: url(../images/default/tabs/tab-btm-inactive-right-bg.gif);
}

.x-tab-strip-bottom .x-tab-left {
background-image: url(../images/default/tabs/tab-btm-inactive-left-bg.gif);
}

.x-tab-strip-bottom .x-tab-strip-over .x-tab-right {
background-image: url(../images/default/tabs/tab-btm-over-right-bg.gif);
}

.x-tab-strip-bottom .x-tab-strip-over .x-tab-left {
background-image: url(../images/default/tabs/tab-btm-over-left-bg.gif);
}

.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
background-image: url(../images/default/tabs/tab-btm-right-bg.gif);
}

.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
background-image: url(../images/default/tabs/tab-btm-left-bg.gif);
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close {
background-image:url(../images/default/tabs/tab-close.gif);
}

.x-tab-strip .x-tab-strip-closable a.x-tab-strip-close:hover{
background-image:url(../images/default/tabs/tab-close.gif);
}

.x-tab-panel-body {
border-color:#dfe8f6;
background-color:#fff;
}

.x-tab-panel-body-top {
border-top: 0 none;
}

.x-tab-panel-body-bottom {
border-bottom: 0 none;
}

.x-tab-scroller-left {
background-image:url(../images/default/tabs/scroll-left.gif);
border-bottom-color:#8db2e3;
}

.x-tab-scroller-left-over {
background-position: 0 0;
}

.x-tab-scroller-left-disabled {
background-position: -18px 0;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
cursor:default;
}

.x-tab-scroller-right {
background-image:url(../images/default/tabs/scroll-right.gif);
border-bottom-color:#8db2e3;
}

.x-tab-panel-bbar .x-toolbar, .x-tab-panel-tbar .x-toolbar {
border-color:#99bbe8;
}

 

As you can see there are many of them and in many places images are used to render Tabs. So changing color is not enough. You must also provide your own images.

Link to comment
Share on other sites

In a CSS theme file there are many entries for tabs:

 

.x-tab-panel-inner {
border: 1px solid #8db2e3;
border-top:none;
}

.x-tab-panel-sheet {
border-left: 2px solid #dfe8f6;
}
.......
.......
.......
}

 

As you can see there are many of them and in many places images are used to render Tabs. So changing color is not enough. You must also provide your own images.

 

Thanks Farshad. Looking in the css directory of the UniGui components I see a number of different css theme files. How do I change the UniGui setting in my app so I can use a different css theme for each app ?

Link to comment
Share on other sites

In MainModule there is a theme property.

 

 

Thanks, missed that one ! Works well, however there seems to be a problem changing the theme with source originally created with version 0.85. I am now using 0.86, and when I change the theme of the code created under 0.85 from blue to gray it does not change the page control theme, it remains blue in the web browser.

 

If I create a new page control using 0.86, then change the theme it works perfectly. Not worried about this for now, but will the same problem be apparent moving from say 0.86 to 0.90, or a 1.0 release version ?

 

Thanks.

Link to comment
Share on other sites

  • Administrators

Thanks, missed that one ! Works well, however there seems to be a problem changing the theme with source originally created with version 0.85. I am now using 0.86, and when I change the theme of the code created under 0.85 from blue to gray it does not change the page control theme, it remains blue in the web browser.

 

It is not normal. Theme is not related to uniGUI version you used to create a project. I'm not sure what's happening.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...