The Page Structure of bxp
From All n One's bxp software Wixi
Contents
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 %>
}If the clients browser is IE6
3.3 cssBodyAll
.cssBodyAll{
position: absolute;
top: 20%;
margin-top: 0 px;/* half of #content height */
left: 0;
width: 100%;
}3.4 cssBodyInner
.cssBodyInner{
width:<%=(strCSS_Page_Width)%>px;
height:30px;
margin-left: auto;
margin-right: auto;
}
3.5 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.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;
}
