rc002017 Posted July 9, 2011 Posted July 9, 2011 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 Quote
AMIT Posted July 9, 2011 Posted July 9, 2011 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; Quote
Administrators Farshad Mohajeri Posted July 9, 2011 Administrators Posted July 9, 2011 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. Quote
rc002017 Posted July 10, 2011 Author Posted July 10, 2011 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 ? Quote
Administrators Farshad Mohajeri Posted July 10, 2011 Administrators Posted July 10, 2011 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. Quote
rc002017 Posted July 11, 2011 Author Posted July 11, 2011 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 ? Quote
Administrators Farshad Mohajeri Posted July 11, 2011 Administrators Posted July 11, 2011 In MainModule there is a theme property. Quote
rc002017 Posted July 11, 2011 Author Posted July 11, 2011 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. Quote
Administrators Farshad Mohajeri Posted July 11, 2011 Administrators Posted July 11, 2011 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. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.