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

Login
Main Menu
Section Menu
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 options below for what can be customised within the interface.

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.

We atttempt to stretch background images to cover the entire space available. The image used is a user entered parameter. See Backgrounds below.

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.

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;
	
}

cssBodyInner

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;
}

The Page Structure of bxp

Contents