I'm just starting to use this WebDialogWindow but I can't find a way to remove the default light blue gradient background image on the Header area. What do I need to do to remove that background image and just use my own background colors? Setting the background color for the header works cause I can see the color showing on the corners of the header, but the background image is covering the whole area. I want to remove that image.
Help?
Thanks in advance!
You can try using AppStylist for ASP.NET and set your own colors.
Hi,
That is correct, you may use AppStylist to configure your own appearance of whole control or for several controls on page.
The appearance of WebDialogWindow is based on css classes located at file similar to WebSite\ig_res\Default\ig_dialogwindow.css. So, you may modify values there and that will affect all controls in application.
WebDialogWindow also exposes public properties for all its css classes. Particularly appearance related to header is defined by properties in RoundedCorners (area related to rounded images) and in Header (whole header and its child elements) properties of WebDialogWindow.
To replace only background and keep the rest unchanged, you may use following:
<style type="text/css"> .myBackColor{background:#C0C0C0;}</style>
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="148px" Width="428px"> <RoundedCorners HeaderContentCssClass="myBackColor" HeaderCornerLeftCssClass="myBackColor" HeaderCornerRightCssClass="myBackColor" /></ig:WebDialogWindow>
You also may set transparent background to areas used for rounded corners and define appearance of whole header by following:
<style type="text/css"> .myHeaderCorners{background:transparent;} .myHeader { background:#C0C0C0; border-right:1px solid black; border-top:1px solid black; border-left:1px solid black; }</style>
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="148px" Width="428px"> <RoundedCorners HeaderContentCssClass="myHeaderCorners" HeaderCornerLeftCssClass="myHeaderCorners" HeaderCornerRightCssClass="myHeaderCorners" /> <Header CssClass="myHeader"></Header></ig:WebDialogWindow>
Hi Ajoseph,
To change color of caption, you may modify the "color" attribute in global igdw_HeaderCaption css or set custom css with that attribute for Header.CaptionTextCssClass. You also may use Header.ForeColor directly and its value should initialize "style='color:yourValue'" explicitly for the <span> which is used to draw caption.
To modify background color of header the RoundedCorners.HeaderXxx properties should be used, as I mentioned in previous response. The background color comes from color of background images. So, you should create custom background images with desired color and corners and set them tobackground-image:url(yourImage);attributes of your custom css classes.
I suggest you to look at content of igdw_HeaderCornerLeft/Right and igdw_HeaderContent classes in ig_dialogwindow.css file. It will allow you to understand how it works.
I also recommend to put those custom background images into ig_res/YourStyleName/images: at the same place where default images are located.At last you may keep all properties of WebDialogWindow with their original defaults and replace only default background images by your custom background images (with same names). That will affect all dialogs in application. Those images are following:images/igdw_headercornerleft.gifimages/igdw_headercontent.gifimages/igdw_headercornerright.gif
Also, is there any way to maintain the rounded corners after you set the background color?
What if I want to change the color of the captiontext?