Customizing the Lucity Web Citizen Page

This page explains some basics to customizing the look of the Web Citizen page. This is an advanced configuration section.

How To

Customize the Web Citizen Page

Create your own master file using Notepad or other editing programs. This will allow you to customize the fonts and colors of the citizen app.

To create your own master file you will need to use examples provided by Lucity. We've created examples for both the Master File (StateOfNE.master) and CS File (StateOfNE.master.cs).
using System;

public partial class MasterPage : System.Web.UI.MasterPage

{

}

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="StateOfNE.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>State of Nebraska</title>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<link href="..\StyleSheet.css" rel="stylesheet" type="text/css" />

<asp:ContentPlaceHolder ID="HeadContentPlaceHolder" runat="server" />

</head>

<body bgcolor="#3BBDC2" text="#0B251F">

<form id="form1" runat="server">

<div>

<asp:ContentPlaceHolder id="phContent" runat="server" >

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>
Please note that the reference to the stylesheet.css is necessary for the code to function. You can copy the stylesheet distributed with our application or create your own (such as StateOfNE.css). Then, reference the customized sylesheet and place it in the root folder:

<link href="..\StateOfNE.css" rel="stylesheet" type="text/css" />

The css allows much more control over the appearance of the web page. One property in particular that you may wish to manipulate is "ProcessInputLabel". This is the class that controls the appearance of the labels on most of the controls.

Update the appsettings.config to use the master file:

<appSettings>

<add key="MasterPage" value="SampleMasters/StateofNE.master"/>

</appSettings>