Customizing the Lucity Citizen Portal Page

This page explains some advanced steps to customizing the look of the Citizen Portal page.

How To Customize the Citizen Portal Page

Create your own master file using Notepad or another text-editing program. You'll use this file to customize the fonts and colors of the citizen app.

Start with one of the 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 file in the master file is necessary for the Citizen Portal code to function. You can copy the stylesheet distributed with our application or create your own (such as StateOfNE.css). Then, reference the customized stylesheet in the master file and place it in the root folder:

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

The cascading style sheet gives an agency 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 file to use the master file:

<appSettings>

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

</appSettings>