ProudMonkey Controls for ASP.NET 4.0 - Customizing the Modal

Comments (21) | Share

If you were using the customized MessageBox, ConfirmBox and FrameBox controls and wanted to modify the look and feel of the these controls then you should be happy because the new version of the ProudMonkey controls provide some properties that you can set to customize the modal controls including the header, buttons, body background color, header fonts etc.

You can download the new version here: ProudMonkey Controls Version 2

The MessageBox provides the following properties:

HeaderImageUrl - This property sets the ImageUrl to be used as the background in the MessageBox header. Note that the image should be 2 x 28 in size because this image will be repeated horizontally.
HeaderBackgroundColor - This property sets the background color of the MessageBox header. You can use this property if you don't want to use the default header background of the MessageBox or if you don't want to set the HeaderImageUrl property.
HeaderTextColor - This property sets the text fore color of the MessageBox header.
HeaderTextFont - This property sets the text font of the MessageBox header.
BodyBackgroundColor - This property sets the background color of the MessageBox body where the actual text is displayed.
BodyTextColor - This property sets the text fore color of the actual content dispalyed in the body.
BodyTextFont - This property sets the text font of the actual content displayed in the body
OKButtonImageUrl - This property sets the ImageUrl to be used as the background image for the OK button.
CloseButtonImageUrl - This property sets the ImageUrl to be used as the background image for the Close button.

Note that if you don't set any of those properties the default styles will be automatically applied.

Sample Usage:

<cc1:MessageBox ID="MessageBox1" runat="server" 
                HeaderImageUrl="Images/header.png"
                HeaderTextColor="White"
                HeaderTextFont="Arial Black"
                BodyBackgroundColor="#E1E5F0"
                BodyTextFont="Tahoma"
                BodyTextColor="#263F75"  
                OKButtonImageUrl="Images/btnOK.jpg"
                CloseButtonImageUrl="Images/btnClose.jpg" />

Actual Output:

The ConfirmBox also provides the same properties just like what the MessageBox does. The only additional properties are:

YesButtonImageUrl - This property sets the ImageUrl to be used as the background image for the Yes button.
NoButtonImageUrl - This property sets the ImageUrl to be used as the background image for the No button.

Again if you don't set any of those properties in the ConfirmBox control, the default styles will be automatically applied.

Sample Usage:

<cc1:ConfirmBox ID="ConfirmBox1" runat="server"
                YesButtonImageUrl="Images/btnYes.jpg"
                NoButtonImageUrl="Images/btnNo.jpg"
                CloseButtonImageUrl="Images/btnClose.jpg" 
                HeaderImageUrl="Images/header.png"
                HeaderTextColor="White"
                HeaderTextFont="Arial Black" />

Actual Output:

The FrameBox has the following properties:

HeaderImageUrl - This property sets the ImageUrl to be used as the background in the FrameBox header. Note that the image should be 2 x 28 in size because this image will be repeated horizontally.
HeaderBackgroundColor - This property sets the background color of the FrameBox header.
HeaderTextColor - This property sets the text fore color of the MessageBox header.
HeaderTextFont - This property sets the text font of the MessageBox header.
CloseButtonImageUrl - This property sets the ImageUrl to be used as the background image for the Close button.

Sample Usage:

<cc1:FrameBox ID="FrameBox1" runat="server"
              HeaderImageUrl="Images/header.png"
              HeaderTextColor="White"
              HeaderTextFont="Arial Black"
              CloseButtonImageUrl="Images/btnClose.jpg" />

Actual Output:

That's it! I hope someone find this post useful!