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 General

3.2 cssBodyAll

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

3.3 cssBodyInner

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

3.4 cssMaster_Page

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

3.5 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