Anonymous, bureaucrat, administrator
7,528
edits
Changes
no edit summary
Lets look at what the CSS classes do
== CSS Classes ==
<syntaxhighlight lang="html4strict">
<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" />
</syntaxhighlight>
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.
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
== General ==
<syntaxhighlight lang="css">
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 %>
}
</syntaxhighlight>
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 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.
== cssBodyAll ==
Only used on the login pages.
<syntaxhighlight lang="css">
}
</syntaxhighlight>
When working with phone systems they often use a browser component embedded in their software. This can give faulty readings on window space available. So we add an extra div and ensure it takes the maximum space available.
The cssBodyAll class moves the log in box down 20% of the available space to ensure the login is "generally" centred on the screen.
== cssBodyInner ==
Used on all pages with HTML rendering.
<syntaxhighlight lang="css">
}
</syntaxhighlight>
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]].
== cssMaster_Page ==
Used on all pages with HTML rendering.
<syntaxhighlight lang="css">
width:<%=(strCSS_Page_Width)%>px;
border-spacing:2;
border-color:<%=(strCSS_PrimaryButton_ColourBorder)%>;
end if
%>
background-image:url('<%=(strCSS_Background_Inner_Image)%>');
padding: 5px;
}
</syntaxhighlight>
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.
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;
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]]