Changes

The Page Structure of bxp

1,943 bytes added, 01:23, 18 November 2015

no edit summary

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 [[Primary_Interface_Options]] for what can be customised within the interfacemore details.

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.

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 attempt to stretch background images to cover the entire space available. The image used is a user entered parameter. See Backgrounds below[[Primary_Interface_Options]] for more details.

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

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;

cssBodyInnerWithin 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.  We put a border around the table to mark out where bxp operates. This creates a visual frame. The frame can be hidden but for troubleshooting it serves as a useful marker. So when someone sends a screen shot to support you can confirm you're actually seeing the whole width of the page.  The default inner colour is usually a light background to make it easier for readers.  There is a Primary Template called bureau. If used it will not colour the main body of the page. This allows for more modern browsers to use CSS to put transparent pngs in to give the main body a transparent effect over the background image. e.g. look at the bottom right corner of the inner div in [[File:Screen_bureau.png]]  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 

color:<%=(strCSS_Font_DarkColour)%>;

margin: 0px 0px 0px 0px;

margin-top: 0px; margin-left: 0px; margin-right: 0px;

padding: 0px;

}

</syntaxhighlight>

 

 

Within the table, we have a div. It is into this div that all the Interface Bars are built. We maximise the space available within the table for use by the div and we set the default font to have have a dark colour to sit on top of the default fill of a light colour.

 

 

 

= User Defined Entry Elements =

 

 

It is possible for the user to enter information through the interface without any CSS knowledge at all.

 

 

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]]

• ← Older edit

Philip Lacey

Anonymous, bureaucrat, administrator

7,528

edits