Watch, Follow, &
Connect with Us

For forums, blogs and more please visit our
Developer Tools Community.


Welcome, Guest
Guest Settings
Help

Thread: TIWModalWindow - change color


This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 1 - Last Post: Aug 23, 2017 2:07 AM Last Post By: Alexandre Machado
Buzu Dan

Posts: 8
Registered: 5/17/09
TIWModalWindow - change color  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 17, 2017 4:22 AM
how can be changed the silver color of TIWModalWindow header and footer?
Thanks!
Alexandre Machado

Posts: 1,754
Registered: 8/10/13
Re: TIWModalWindow - change color  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Aug 23, 2017 2:07 AM   in response to: Buzu Dan in response to: Buzu Dan
Buzu Dan wrote:
how can be changed the silver color of TIWModalWindow header and footer?
Thanks!

Hi,

First, you need to provide your own stile sheet to the control. This is how it works and what is required:

These are the CSS classes used by IWModalWindow. They are both generated at runtime, as long as its property RenderStyles is TRUE. So, if you want to provide your own style sheet, you must set RenderStyles to FALSE (in TIWModalWindow control), and then create a CSS file with all those classes.

.iw-dlg-windowCSS
.iw-dlg-headerCSS
.iw-dlg-titleCSS
.iw-dlg-close-btnCSS
.iw-dlg-footerCSS
.iw-dlg-btn-panelCSS
.iw-dlg-btnCSS
.iw-dlg-btnCSS:hover
.iw-dlg-btnCSS:focus
.iw-dlg-btnCSS:active
.iw-dlg-btn-panelCSS


This is one example, extracted from IWModalWindow demo:

.iw-dlg-windowCSS {background-color: #FFFFFF; border: 1px solid #8c8c8c; border-radius: 6px; z-index: 10001; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);}
.iw-dlg-headerCSS {background: none repeat scroll 0 0 #f5f5f5; border-radius: 6px 6px 0 0; border-bottom: 1px solid #ddd; box-shadow: 1px 0 #fff 0 inset;}
.iw-dlg-titleCSS {font-size: 18px; font-family: helvetica; text-align: center; cursor: default;}
.iw-dlg-close-btnCSS {font-size: 24px; font-family: Verdana; text-decoration: none; color: #aaaaaa}
.iw-dlg-footerCSS {background: none repeat scroll 0 0 #f5f5f5; border-radius: 0 0 6px 6px; border-top: 1px solid #ddd; box-shadow: 0 1px 0 #fff inset;}
.iw-dlg-btn-panelCSS {float: right; margin-right: 10px; outline: none;}
.iw-dlg-btnCSS {height: 30px; margin: 10px 10px 0 0; background-color: #E6E6E6; background-image: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);border: 1px solid #bbb; color: #333; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); border-radius: 4px;}
.iw-dlg-btnCSS:hover {background-color: #DDEDFC; background-image: -moz-linear-gradient(top, #E6F5FF, #DDEDFC);); border: 1px solid #7EB4EA;}
.iw-dlg-btnCSS:focus {box-shadow: 0 0 5px #2B72D5; outline: medium none;}
.iw-dlg-btnCSS:active {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);}
.iw-dlg-btn-panelCSS > button::-moz-focus-inner {border: 0;}
Legend
Helpful Answer (5 pts)
Correct Answer (10 pts)

Server Response from: ETNAJIVE02