Form Designer: How to change the stylesheet dynamically

Process Design Form Designer
1

This feature is available since version 5.6.2.

If you want to change the web form stylesheet and other attributes (header image, footer text, etc.) at runtime you can add the following .NET code to your form.

This example replaces:

  • The current "metal.css" template stylesheet
  • The header title label
  • The header image
  • The footer title label
  • The footer image
protected void Page_Load(object sender, EventArgs e)
{
base.Page_Load(sender, e);
String stylePath=HttpContext.Current.Request.PhysicalApplicationPath.Replace("WfApps\\WebForms\\","App_Data\\Templates\\Forms\\En\\Default\\css");
Page.Header.Controls.Remove(this.FindControl("StyleSheet"));
Page.Header.Controls.Add(
new LiteralControl(
System.IO.File.ReadAllText(stylePath + "\\" + "metal.css")
)
);
string imageUrl="http://mywebsite/mylogo.jpg";
HeaderImage.Style["background-image"] = "url('" + imageUrl+ "')";

HeaderTitleLabel.Text="My Title #";

FooterTitleLabel.Text="My footer";

imageUrl="http://mywebsite/myfooter.jpg";
FooterImage.Style["background-image"] = "url('" + imageUrl+ "')";

}

Note: You should define the width and the height of the images in the form configuration or in the .NET code. For example:

FooterImage.Style["width"] = "200px";
FooterImage.Style["height"] = "100px";

An absolute URL is recommended because the generated form archive (HTML) can be opened in an email notification.