Jump to content

Recommended Posts

Posted

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

Posted

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;

  • Administrators
Posted

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.

Posted

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 ?

  • Administrators
Posted

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.

Posted

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 ?

Posted

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.

  • Administrators
Posted

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.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...