Difference between revisions of "The Page Structure of bxp"

From All n One's bxp software Wixi

Jump to: navigation, search
(Created page with "= 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. = Structu...")
 
Line 58: Line 58:
  
 
== cssBodyInner ==
 
== cssBodyInner ==
 +
 +
<syntaxhighlight lang="css">
 +
.cssBodyInner{
 +
width:<%=(strCSS_Page_Width)%>px;
 +
height:30px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
</syntaxhighlight>
 +
 +
  
 
== cssMaster_Page ==
 
== cssMaster_Page ==
 +
 +
<syntaxhighlight lang="css">
 +
.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;
 +
 +
}
 +
</syntaxhighlight>
 +
  
 
== cssMaster_Header ==
 
== cssMaster_Header ==
 +
 +
<syntaxhighlight lang="css">
 +
.cssMaster_Header{
 +
color:<%=(strCSS_Font_DarkColour)%>;
 +
margin: 0px 0px 0px 0px;
 +
    margin-top: 0px;
 +
    margin-left: 0px;
 +
    margin-right: 0px;
 +
padding: 0px;
 +
}
 +
</syntaxhighlight>

Revision as of 23:29, 17 November 2015

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 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;
}
Retrieved from ‘https://www.bxpsoftware.com/wixi/index.php?title=The_Page_Structure_of_bxp&oldid=5755’