Styling a form in bxp - Revision history

Philip Lacey: /* Form Elements */

2017-09-27T16:53:10Z

‎Form Elements

Philip Lacey at 11:31, 2 September 2017

2017-09-02T11:31:02Z

Philip Lacey: /* Applying the new css */

2017-09-01T12:31:00Z

‎Applying the new css

Philip Lacey at 12:29, 1 September 2017

2017-09-01T12:29:56Z

Philip Lacey at 12:04, 1 September 2017

2017-09-01T12:04:57Z

Philip Lacey: Created page with "= Overview = A form in bxp has the ability to be styled in a number of ways. This article goes through the options available. = Base layout for discussion = File:form..."

2017-09-01T12:00:19Z

Created page with "= Overview = A form in bxp has the ability to be styled in a number of ways. This article goes through the options available. = Base layout for discussion = File:form..."

New page

= Overview =

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

This article goes through the options available.

= Base layout for discussion =

[[File:form_styling_001.png|800px]]

= Basic Settings =

== 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)''

<syntaxhighlight lang="css">
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)%>;
}
</syntaxhighlight>

== Font colour ==

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

Adding

<syntaxhighlight lang="css">
<style> .Spoken { color:#343434; } </style>
</syntaxhighlight>

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

== Custom buttons ==

The buttons in bxp are styled using css classes

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

{| class="wikitable"
! 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
|-
|}

[[File:form_styling_002.png|800px]]

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.

== 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,

{| class="wikitable"
! 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 || This provides server and diagnostic tools|-
|-
| 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.

== 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

{| class="wikitable"
! 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

= 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.

<syntaxhighlight lang="html4strict" line start="1">
<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">
   
<a href="../campaign/userCDD_Edit-details.asp?intCampaign_Id=41&ID=83&intCDA_Id=0&strInline=true&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>
 
</td>
<td id="tableid_82_testing_8" style="width:11px;" height="30"> </td>
</tr>
<tr id="tableid_82_tr2">
<td colspan="6"><br/></td>
</tr>
</table>
</syntaxhighlight>

[[Category:Module Specific:Form Management]]
[[Category:Topic:About bxp]]

← Older revision		Revision as of 11:31, 2 September 2017
Line 248:		Line 248:

	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.		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.
		+
		+
		+	= Form Section Groups =
		+
		+
		+	Section Groups are styled using the class cssMaster_Table100PC_SectionHeader from the style_master_layout.css library
		+
		+
		+	<syntaxhighlight lang="css">
		+	.cssMaster_Table100PC_SectionHeader{
		+	width: 100%;
		+	border: 0px;
		+	border-spacing:0;
		+	border-collapse:collapse;
		+	}
		+	</syntaxhighlight>
		+
		+
		+	Within the table you also have Master_Scripting_Line_Background on the tr and Notes on the td

← Older revision		Revision as of 12:31, 1 September 2017
Line 295:		Line 295:

	When you have your new css designed there are two ways to apply it. Locally to the current form or applying it to all the system.		When you have your new css designed there are two ways to apply it. Locally to the current form or applying it to all the system.
−
−
−	For both, create the new .css sheet. Then through System Access Management you upload using Custom Upload. This will then make the file available as https://ww3.allnone.ie/client/client_XXX/custom/yourFile.css
−


Line 313:		Line 309:

	== System Wide ==		== System Wide ==
		+
		+
		+	For both options in here, create a new .css sheet.
		+
		+
		+	Through System Access Management you upload using Custom Upload. This will then make the file available as https://ww3.allnone.ie/client/client_XXX/custom/yourFile.css

← Older revision		Revision as of 12:29, 1 September 2017
Line 248:		Line 248:

	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.		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.
		+
		+
		+
		+	= Form Inline Tabs =
		+
		+
		+	The inline tabs are dynamically created. They are styled with cssInlineTabs which is in the library style_master_modulespecific3.css
		+
		+
		+
		+	https://ww3.allnone.ie/library/style/style_master_modulespecific3.css
		+
		+
		+	The background and how the hover is set colour wise:
		+
		+	<syntaxhighlight lang="css">
		+	.cssInlineTabs ul li a {
		+	background: #dedede;
		+	}
		+	.cssInlineTabs ul li a:hover {
		+	background: #dedeff;
		+	}
		+	</syntaxhighlight>


Line 265:		Line 288:

	The Final Media schedule bar is also configurable in Advanced Settings.		The Final Media schedule bar is also configurable in Advanced Settings.
		+
		+
		+
		+	= Applying the new css =
		+
		+
		+	When you have your new css designed there are two ways to apply it. Locally to the current form or applying it to all the system.
		+
		+
		+	For both, create the new .css sheet. Then through System Access Management you upload using Custom Upload. This will then make the file available as https://ww3.allnone.ie/client/client_XXX/custom/yourFile.css
		+
		+
		+
		+	== Form only ==
		+
		+
		+	The way to apply the .css to only one form, in the Introduction of the form add the following
		+
		+	<style>
		+	paste all the code in here
		+	</style>
		+
		+
		+
		+	== System Wide ==
		+
		+
		+	<link> tags can only be added to the <head> tag of the page. This is system wide.
		+
		+
		+	''Main Menu > System Access Management > System Settings > User Interface > CSS > '' put in the full URL as generated by the upload.
		+
		+
		+
		+	It is also possible to set the CSS for individual users system wide.
		+
		+
		+	''Main Menu > System Access Management > User Administration > Edit User > Find the user > Interface Options > CSS'' put in the full URL as generated by the upload.
		+

← Older revision		Revision as of 12:04, 1 September 2017
Line 245:		Line 245:
	</table>		</table>
	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+	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.
		+
		+
		+
		+	= Form closing elements =
		+
		+
		+	At the bottom you also have the option of removing one to all of the form options [[JavaScript_Show_/_Hide_elements]]
		+
		+	<syntaxhighlight lang="javascript">
		+	fn_Gen_EndElements ( blComments, blOutcome, blCallback, blAssignedTo, blViewAppointments, blAppFrom, blAppUntil, blClosing );
		+	</syntaxhighlight>
		+
		+
		+	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.

@@ Line 195: / Line 195: @@
 |-
 |}
@@ Line 201: / Line 210: @@
 Next are the questions
 = Form Questions =