The Page Structure of bxp - Revision history

Philip Lacey at 00:23, 18 November 2015

2015-11-18T00:23:52Z

Philip Lacey at 23:00, 17 November 2015

2015-11-17T23:00:30Z

Philip Lacey at 22:56, 17 November 2015

2015-11-17T22:56:09Z

Philip Lacey at 22:47, 17 November 2015

2015-11-17T22:47:01Z

Philip Lacey at 22:43, 17 November 2015

2015-11-17T22:43:00Z

Philip Lacey at 22:33, 17 November 2015

2015-11-17T22:33:53Z

Philip Lacey at 22:29, 17 November 2015

2015-11-17T22:29:04Z

Philip Lacey: 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..."

2015-11-17T22:27:06Z

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..."

New page

= 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.

= Structures - Page Archetypes =

There are four page archetypes within bxp

# Login
# Main Menu
# Section Menu
# Page

Each of these page types have commonalities.

= Structures - General Presentation =

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

<syntaxhighlight lang="html4strict">
<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>
</syntaxhighlight>

Lets look at what the CSS classes do

== General ==

== cssBodyAll ==

<syntaxhighlight lang="css">
.cssBodyAll{
position: absolute;
top: 20%;
margin-top: 0 px;/* half of #content height */
left: 0;
width: 100%;
}
</syntaxhighlight>

== cssBodyInner ==

== cssMaster_Page ==

== cssMaster_Header ==

← Older revision		Revision as of 00:23, 18 November 2015
Line 243:		Line 243:

	These are detailed in [[Primary_Interface_Options]]		These are detailed in [[Primary_Interface_Options]]
		+
		+
		+
		+	= 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]]
		+


	[[Category:Topic:bxp Interface]]		[[Category:Topic:bxp Interface]]

@@ Line 63: / Line 63: @@
-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.
+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.
@@ Line 108: / Line 108: @@
-We attempt to stretch background images to cover the entire space available.  The image used is a user entered parameter.  See Backgrounds below.
+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.
@@ Line 150: / Line 150: @@
-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.
+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]].
@@ Line 214: / Line 214: @@
-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
+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
@@ Line 224: / Line 224: @@
 	color:<%=(strCSS_Font_DarkColour)%>;
 	margin: 0px 0px 0px 0px;
-    margin-top: 0px;
+	margin-top: 0px;
-    margin-left: 0px;
+	margin-left: 0px;
-    margin-right: 0px;
+	margin-right: 0px;
 	padding: 0px;
+}
@@ Line 242: / Line 242: @@
-They are all located in ''Main Menu > System Access Management > System Management > System Settings''
+These are detailed in [[Primary_Interface_Options]]
 [[Category:Topic:bxp Interface]]

@@ Line 97: / Line 97: @@
 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 atttempt to stretch background images to cover the entire space available.  The image used is a user entered parameter.  See Backgrounds below.
@@ Line 144: / Line 148: @@
+}
 </syntaxhighlight>
@@ Line 159: / Line 162: @@
 .cssMaster_Page{
-		width:<%=(strCSS_Page_Width)%>px;
+	width:<%=(strCSS_Page_Width)%>px;
-		border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
+	border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
-		border-spacing:2;
+	border-spacing:2;
-		border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
+	border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
-		color:<%=(strCSS_PrimaryButton_ColourText)%>;
+	color:<%=(strCSS_PrimaryButton_ColourText)%>;
 <%
@@ Line 197: / Line 200: @@
 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.
@@ Line 215: / Line 230: @@
+}
 </syntaxhighlight>

@@ Line 102: / Line 102: @@
 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.
+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 atttempt to stretch background images to cover the entire space available.  The image used is a user entered parameter.  See Backgrounds below.
@@ Line 159: / Line 159: @@
 .cssMaster_Page{
-	width:<%=(strCSS_Page_Width)%>px;
+		width:<%=(strCSS_Page_Width)%>px;
-	border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
+		border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
-	border-spacing:2;
+		border-spacing:2;
-	border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
+		border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
-	color:<%=(strCSS_PrimaryButton_ColourText)%>;
+		color:<%=(strCSS_PrimaryButton_ColourText)%>;
 <%
@@ Line 174: / Line 174: @@
 end if
 %>
-    border-collapse:separate;
+	border-collapse:separate;
-    <% If blBrowserIE6 = False Then %>
+<% If blBrowserIE6 = False Then %>
 	background-image:url('<%=(strCSS_Background_Inner_Image)%>');
-	<% Else %>
+<% Else %>
-    background-color:<%=(strCSS_IE6_Background_Tint)%>;
+	background-color:<%=(strCSS_IE6_Background_Tint)%>;
-	<% End If%>
+<% End If%>
 	padding: 5px;
@@ Line 196: / Line 196: @@
-cssBodyInner
+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.

@@ Line 77: / Line 77: @@
 <syntaxhighlight lang="css">
 body{
-	margin: 0px 0px 0px 0px;
+    margin: 0px 0px 0px 0px;
      margin-top: 20px;
      margin-left: 0px;
      margin-right: 0px;
-	font-family: <%=(strCSS_Font_Family)%>;
+    font-family: <%=(strCSS_Font_Family)%>;
-	font-size: 14px;
+    font-size: 14px;
      <% If blBrowserIE6 = False Then %>
 	background: url("<%=(strCSS_Background_Main_Image)%>") #ffffff no-repeat center center fixed;
@@ Line 90: / Line 90: @@
 	background-size: cover;
      <% Else %>
-    background-color:#ffffff;
+        background-color:#ffffff;
      <% End If %>
+}
 </syntaxhighlight>
 If the clients browser is IE6
 == cssBodyAll ==
 <syntaxhighlight lang="css">
@@ Line 108: / Line 121: @@
+}
 </syntaxhighlight>
 == cssBodyInner ==
 <syntaxhighlight lang="css">
@@ Line 119: / Line 144: @@
+}
 </syntaxhighlight>
 == cssMaster_Page ==
 <syntaxhighlight lang="css">
@@ Line 128: / Line 160: @@
 	width:<%=(strCSS_Page_Width)%>px;
-    border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
+	border: 3px solid <%=(strCSS_PrimaryButton_ColourBorder)%>;
 	border-spacing:2;
 	border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
@@ Line 162: / Line 194: @@
+}
 </syntaxhighlight>

@@ Line 42: / Line 42: @@
 Lets look at what the CSS classes do
 == General ==
 == cssBodyAll ==