Styling a form in bxp

Contents

1 Overview

A form in bxp has the ability to be styled in a number of ways.

This article goes through the options available.

2 Base layout for discussion

3 Basic Settings

3.1 System Font

If you're using a custom CSS approach, then most influential classes are as follows.

However you can set the font system wide through the interface. Main Menu > System Access Management > System Management > Primary Interface Management > System Font Set (CSS Layout)

 
body{
	font-family: <%=(strCSS_Font_Family)%>;
	font-size: 14px;
}
form {
	font-family:<%=(strCSS_Font_Family)%>;
}
input.text, input.password, select {
	font-family:<%=(strCSS_Font_Family)%>;
    font-size: <%=(strGlobal_Input_FontSize)%> ;
}
input.text, input.password, textarea {
	font-family:<%=(strCSS_Font_Family)%>;
    font-size: <%=(strGlobal_Input_FontSize)%> ;
	behavior: url('<%=(strServerName)%>/library/javascript/PIE.js');
}
input[type=text] {
	font-family:<%=(strCSS_Font_Family)%>;
    font-size: <%=(strGlobal_Input_FontSize)%> ;
	behavior: url('<%=(strServerName)%>/library/javascript/PIE.js');
}
input[type=password] {
	font-family:<%=(strCSS_Font_Family)%>;
    font-size: <%=(strGlobal_Input_FontSize)%> ;
	behavior: url('<%=(strServerName)%>/library/javascript/PIE.js');
}
select{
	font-family:<%=(strCSS_Font_Family)%>;
    font-size: <%=(strGlobal_Input_FontSize)%> ;
	behavior: url('<%=(strServerName)%>/library/javascript/PIE.js');
}
a{
	font-family:<%=(strCSS_Font_Family)%>;
}
a:hover{
	font-family:<%=(strCSS_Font_Family)%>;
}
td{
	font-family:<%=(strCSS_Font_Family)%>;
}
textarea {
	font-family:<%=(strCSS_Font_Family)%>;
}
.Standard_Input{
	font-family:<%=(strCSS_Font_Family)%>;
}
.cssStandard_Input{
	font-family:<%=(strCSS_Font_Family)%>;
}

3.2 Font colour

The main coloring of the font on the form is .Spoken and .Notes.

Adding

 
<style> .Spoken { color:#343434;  } </style>

to the "Opening Instructions" of the form, would allow the Red text of spoken to become grey as in the image used above.

3.3 Custom buttons

The buttons in bxp are styled using css classes

https://ww3.allnone.ie/library/style/style_master_buttons.css

Class	Library
Master_Button	style_master_internal.asp
cssMaster_Button	style_master_internal.asp
cssButton_Blue	style_master_buttons.css
cssButton_Red	style_master_buttons.css
cssButton_Green	style_master_buttons.css
cssButton_Yellow	style_master_buttons.css
cssButton_Orange	style_master_buttons.css
cssButton_Purple	style_master_buttons.css
cssButton_Grey	style_master_buttons.css
cssStopWatchButton	style_master_buttons.css

The Master_Button and cssMaster_Button are one of the colours depending on which system colouring template is chosen. Primary_Interface_Options

You can see from the images on that article which one of the Buttons are selected.

Overwriting the default Master_Button and cssMaster_Button will allow you to set the button styling system wide.

The on Hover of the buttons simple sets the colour of the button upside down.

3.4 Elements of the page

Interface bars allow you to include options on the page. The default for the page is 22,25,4,13,19,5,26

It is possible to show and hide interface bars,

Bar	Title	Reason
22	Boundary Top - Clear	This bar allows you to logout at any time
25	Custom HTML Header	Only if custom html is to be applied to every page
4	The body of the page	This is the actual form of the page
13	IconBar	This is the bar that shows you what modules you have access to
19	I Want To - Full	The I Want To bar functionality
5	Footer bar	-
26	Custom HTML Footer	If there is custom html to be applied to every page

Changing the page interface bars to 35,4 will remove everything from the page but the form. However this is system wide for pages and removes very frequently used functionality such as the ability to easily get to the Main Menu and also to log out.

3.5 Form Elements

In this form you can see "Move Next Record Bar" which is an easy way to navigate through the records. Not ideal for secure records or outbound. Turned on and off in the form Advanced Settings of the form.

The next element is a table with three items in it, tableFormHead

TR (Row)	TD (Element)	Reason	Set by
trFormHead_Title	tdFormHead_Title	The name of the form	Always set by the system.
trFormHead_Introduction	strCampaign_Introduction	The introduction	This is set in Advanced Settings.
trFormHead_HR	tdFormHead_HR	The Contact History for existing records	Only visible on records already stored.

The Media Code is an Advanced Setting which allows the Media Code engine to be used. Module_-_Media_Manager

Next are the questions

4 Form Questions

Each question can be coloured from within the bxp interface. Form_Script_Background_Colours

• The text of a question is styled by .Spoken
• The notes line just underneath a question is styled by .Notes
• The input types area also styled by .Notes

Each question will always be embedded with tags to allow completely manipulation of the structure.

<table class="cssMaster_Table100PC" width="100%" id="tableid_82" bgcolor="EBF1DD">
	<tr id="tableid_82_tr" valign="top">
		<td id="tableid_82_testing_3" width="0%" height="30" ></td>
		<td id="tableid_82_testing_4" width="48%" height="30">
			<div class="Spoken">Prospect Owner</div>
			<div class="Notes">The owner of this client</div>
		</td>
		<td id="tableid_82_testing_5" width="5%" height="30"></td>
		<td id="tableid_82_testing_6" width="45%" height="30">
			<select name="strCDA_41_field_0_82" id="strCDA_41_field_0_82" class="Notes" style="width:100%;" tabindex="10" onfocus="fn_Focus(this.id);" onchange="fn_Focus(this.id);" onclick="fn_Focus(this.id);" >
				<option value=""></option>
				<option value="1">Admin istrator</option>
			</select>
		</td>
		<td id="tableid_82_testing_7" style="width:11px;" height="30">
			&nbsp;&nbsp;&nbsp;
			<a href="../campaign/userCDD_Edit-details.asp?intCampaign_Id=41&amp;ID=83&amp;intCDA_Id=0&amp;strInline=true&amp;strType=Inbound"><img src="https://ww3.allnone.ie/images/main/edit_this.png" border="0" height="12" width="12" name="btn_Edit_tableid_82" id="btn_Edit_tableid_82" title="Edit this item" alt="Edit this item" /></a>
			&nbsp;
		</td>
		<td id="tableid_82_testing_8" style="width:11px;" height="30">&nbsp;</td>
	</tr>
	<tr id="tableid_82_tr2">
		<td colspan="6"><br/></td>
	</tr>
</table>

The pencil icon out on the right only appears if the user has Form Management access and provides an easy way of editing the form elements as needed.

5 Form closing elements

At the bottom you also have the option of removing one to all of the form options JavaScript_Show_/_Hide_elements

 fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing );

The reset button also has a JavaScript id if it has to be removed as well btn_reset

The Final Media schedule bar is also configurable in Advanced Settings.