Styling a form in bxp
From All n One's bxp software Wixi
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. |
If you want to hide just the red contact history line that appears on existing records you can use the following in the JavaScript onLoad of the form
if ( document.getElementById('trFormHead_PreviousContactDateTime') ) { document.getElementById('trFormHead_PreviousContactDateTime').style.display='none'; }
if ( document.getElementById('tdFormHead_PreviousContactDateTime') ) { document.getElementById('tdFormHead_PreviousContactDateTime').style.display='none'; }
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">
<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>
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 Section Groups
Section Groups are styled using the class cssMaster_Table100PC_SectionHeader from the style_master_layout.css library
.cssMaster_Table100PC_SectionHeader{
width: 100%;
border: 0px;
border-spacing:0;
border-collapse:collapse;
}
Within the table you also have Master_Scripting_Line_Background on the tr and Notes on the td
6 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:
.cssInlineTabs ul li a {
background: #dedede;
}
.cssInlineTabs ul li a:hover {
background: #dedeff;
}
7 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.
8 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.
8.1 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>
8.2 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
<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.
