The Page Structure of bxp

From All n One's bxp software Wixi

Jump to: navigation, search

1 Overview

This article discusses the technical structures of the bxp pages to allow designers and CSS teams to completely restyle and manage the bxp interface.


2 Structures - Page Archetypes

There are four page archetypes within bxp

  1. Login
  2. Main Menu
  3. Section Menu
  4. Page


Each of these page types have commonalities.


3 Structures - General Presentation

Within the HTML of the page there is a common framing structure for MOST pages. 


<body >
	<div id="divBodyAll" class="cssBodyAll">
		<div id="divBodyInner" class="cssBodyInner">
			<table id="tableBodyInner" border="0" cellspacing="0" cellpadding="0" class="cssMaster_Page">
				<tr>
					<td><div class="cssMaster_Header">
							<form name="form1" id="form1" action="xxxxxxxx.asp" method="post">
							</form>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</div>
</body>

Lets look at what the CSS classes do


3.1 CSS Classes

		<link href="https://ww3.allnone.ie/library/style/style_master_internal.asp?intSystem=2" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_rootobjects.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_layout.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_login.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_toolbars.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_modulespecific.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_buttons.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_master_password.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_menu_bars.css" rel="stylesheet" type="text/css" />
		<link href="https://ww3.allnone.ie/library/style/style_menu_panels.css" rel="stylesheet" type="text/css" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="https://ww3.allnone.ie/favicon.ico" />
		<link rel="shortcut icon" href="https://ww3.allnone.ie/favicon.ico" />


You'll note that the style_master_internal is an ASP page not a CSS page. This is because bxp needs to make dynamic changes to the CSS depending on input content. Specifically there are a number of key user input options available in the system that saves the user form having to create CSS manually. i.e. bxp creates the correct CSS based on options chosen. See Primary_Interface_Options for more details.


Each of the files are grouped to ensure that no one CSS file has more than 31 classes as this causes issues with IE6.


All of the following classes are located in style_master_internal.asp


3.2 General

body{
    margin: 0px 0px 0px 0px; 
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
    font-family: <%=(strCSS_Font_Family)%>;
    font-size: 14px;
    <% If blBrowserIE6 = False Then %>
	background: url("<%=(strCSS_Background_Main_Image)%>") #ffffff no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
    <% Else %>
        background-color:#ffffff;
    <% End If %>
}


We attempt to fill the entire available space of the screen.


We indent 20px from the top but use the full width.


The font family is a user entered parameter. See Fonts below.


If the clients browser is IE6 we can't write out those lines at all to the CSS file or IE6 is really really not happy with us. IE6 doesn't like those settings on a div.


We attempt to stretch background images to cover the entire space available. The image used is a user entered parameter. See Primary_Interface_Options for more details.


3.3 cssBodyAll

Only used on the login pages. 

.cssBodyAll{
   position: absolute;
   top: 20%;
   margin-top: 0 px;/* half of #content height */
   left: 0;
   width: 100%;
}


When working with phone systems they often use a browser component embedded in their software. This can give faulty readings on window space available. So we add an extra div and ensure it takes the maximum space available.


The cssBodyAll class moves the log in box down 20% of the available space to ensure the login is "generally" centred on the screen.


3.4 cssBodyInner

Used on all pages with HTML rendering. 


.cssBodyInner{
	width:<%=(strCSS_Page_Width)%>px;
	height:30px;
	margin-left: auto;
	margin-right: auto;
}


This is a container div. It sets a definite pixel width. This allows absolute control of the width of the page to ensure that where a browser or browser component is unable to provide an accurate width an absolute one can be provided. This can be overwritten using custom JavaScript on the page if necessary. The width can be set through the user interface Primary_Interface_Options.


3.5 cssMaster_Page

Used on all pages with HTML rendering. 

.cssMaster_Page{
	
	width:<%=(strCSS_Page_Width)%>px;
	border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
	border-spacing:2;
	border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
	color:<%=(strCSS_PrimaryButton_ColourText)%>;

<%
if strCSS_Colour_Template = "Bureau" then
else
%>	
	background:<%=(strCSS_Background_Inner_Colour)%>;
	background-color:<%=(strCSS_Background_Inner_Colour)%>;
<%
end if
%>
	border-collapse:separate;
<% If blBrowserIE6 = False Then %>
	background-image:url('<%=(strCSS_Background_Inner_Image)%>');
<% Else %>
	background-color:<%=(strCSS_IE6_Background_Tint)%>;
<% End If%>

	padding: 5px;
	padding-left: 7px;
	behavior: url('<%=(strServerName)%>/library/javascript/PIE.js');
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-khtml-border-radius: 15px; 
	-o-border-radius: 15px;
	-pie-track-active: false;
	-pie-track-hover: false;
	
}


Within the containing div we put a table. The table gives us the structure to contain numerous Interface Bars. There is a containing table used and this is the css for it.


As IE6 couldn't handle the div dimension control, we have to repeat it on the table.


We put a border around the table to mark out where bxp operates. This creates a visual frame. The frame can be hidden but for troubleshooting it serves as a useful marker. So when someone sends a screen shot to support you can confirm you're actually seeing the whole width of the page.


The default inner colour is usually a light background to make it easier for readers.


There is a Primary Template called bureau. If used it will not colour the main body of the page. This allows for more modern browsers to use CSS to put transparent pngs in to give the main body a transparent effect over the background image. e.g. look at the bottom right corner of the inner div in Screen bureau.png


The final large block of code is to round the corners of the table. As IE7 has issue with rounding there is a JavaScript library called PIE.js which can help so we use that. http://css3pie.com


3.6 cssMaster_Header

.cssMaster_Header{
	color:<%=(strCSS_Font_DarkColour)%>;
	margin: 0px 0px 0px 0px; 
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
}


Within the table, we have a div. It is into this div that all the Interface Bars are built. We maximise the space available within the table for use by the div and we set the default font to have have a dark colour to sit on top of the default fill of a light colour.


4 User Defined Entry Elements

It is possible for the user to enter information through the interface without any CSS knowledge at all.


These are detailed in Primary_Interface_Options


5 Custom CSS

It is possible to override any of these settings with your own custom css at a system or user level. Read here for more details Custom_CSS

Retrieved from ‘https://www.bxpsoftware.com/wixi/index.php?title=The_Page_Structure_of_bxp&oldid=5765’