Skip to end of metadata
Go to start of metadata

The LAMS "look and feel" is achieved through the use of common stylesheets and tags. The tags (including one to include the appropriate stylesheets) is described in the [LAMS Custom Tags] page.

 The following screen dumps will give you an idea of how pages should look.

What pages have the LAMS logo?

  • Login Page
  • Main (Index) Page
  • Tool Authoring Pages

Learning and admin pages do not have the LAMS logo.
 

Colons and Field Labels

LAMS has many areas where users fill in forms and a traditional layout for online forms has been to use a colon after the field name (e.g. FieldName: Field Value). This layout raises many questions. What do we do with the colon (':')? Do we put it in the language file or the jsp? How do we get it in the right place for a right to left language? Is a colon appropriate for all character sets?

This is the policy for LAMS:

  • Colons (':') are not to be coded into any jsp pages or in the layout definitions in Flash.
  • Field labels should use the "field-name" or "field-name-alternative-color" class. This will render the text in a different colour.
  • If the page layout in a particular language requires colons, then the colons must be defined in the language file as part of the overall text string e.g. "Blah:".
  • For the Australian English language version (which is the default), LAMS authoring screens will not use colons for the field labels.

The main reason is that it gives the power to the translators. If they feel that there should be colons then they can add them wherever they like - at the end, at the beginning (for a right to left language?), in the middle if they so choose. In other character sets the translators may prefer to use a different character rather than ":".

Login Page

Chat Tool Authoring Page

Forum Authoring

 This screen dump is using some older widgets. The tabs look like the screen dump above.

Learner Screens

These screens do not have the LAMS logo and use the "page-learner" style which is narrow enough to fit into the learner window.

The code below gives you an idea of the tags and classes that go with the page-learner style.

<div id="page-learner"><!--main box 'page'-->

	<h1 class="no-tabs-below">Activity Title Entered In Authoring</h1>
	<div id="header-no-tabs-learner">

	</div><!--closes header-->

	<div id="content-learner">

		<h2>Some SubTitle</h2>

		<p>Instructions Here</p>

		<div class="left-buttons"><a href="#" class="button-add-item">Add Something</a><a href="#" class="button space-left">Do Something Else</a></div>

		<div class="right-buttons"><a href="#" class="button space-left">Finish</a></div>

	</div>  <!--closes content-->


	<div id="footer-learner">
	</div><!--closes footer-->

</div><!--closes page-->

We are having trouble getting the buttons to work correctly if they use <html:button> or some other submit button - they sit straddling the footer line. But they do seem to work if you are using a table. So if you are using submit buttons and they don't come out in the right place, try wrapping them in a table. Example with just a finished button:

<table><tr><td><div class="right-buttons">
     <html:submit styleClass="button"><fmt:message key="label.finish.button"/></html:submit>
</div></td></tr></table>

Below is a mockup done using the stylesheets. It uses A HREFs for buttons. The background is wrong - it should be our normal plain blue background. Notice that the main title (H1) is the title entered in authoring not a generic tool title. "Some SubTitle" could be a heading such as "Progress Voting Results". The buttons are spaced using DIVs. Finished should be on the right and all other buttons on the left (that way the user doesn't click Finished accidently).

The source is attached as "message_board2.htm".


 

Noticeboard screen ( Real screen, not mockup )
Grouping Screen (lam_learning/web/grouping/show.jsp)


 

Error Messages

 Done using <p class="warning">

 The close button is actually "<P><a href="javascript:;" onclick="closeWin();" class="button"><fmt:message key="button.close" /></a></p>". The class="button" converts the A HREF from a link into a button. The A HREF has to be within a "content" div for it to work.

 

Themes

See Themes, Skins, CSS and SASS.

  • No labels