• Home > 
• Packages > 
• uni-pb-style

Using the ubp Stylesheet

0. Contents

The UPB Stylesheet provides a view to the data arranged in a virtuial room of the steam system using the CI of the University of Paderborn. The content of the page is layouted using a template mechanism and therefore filling pre- defined parts of the screen with content.

Figure 1 : Screenshot of the UPB Stylesheet

To bring up a Website using the UPB STylesheet follow the steps below:
1) create a container in a room of your choice.
2) publish the container by entering a URL of your choice on the details page of the container (click on the "i" and scroll down to the "publishing details). e.g. "/login/testpage". You are able to change the URL at a later time
3) change the Stylesheet for the Public view to "uni-pb" (default is "public") by clicking on the "..." behind the input field for the public stylesheet in the section "publishing details" of the containers details.
4) An initial Website using the UPB Stylesheet has been published. Please keep in mind that all files you put into that published container will be reacheable by everyone by using the URL you chose in step 2.
5) To make the basic setup you have to provide "a file named "config.xml" at the root container of your website. once you provide this file, all sub-container will be displayed using the information of the config.xml in the websites root. If you want some sub-pages using different setup, just provide a "config.xml" with the information in this sub-container.
6) to bring in some content just start to upload files into the container. They will be published automatically following the rules of the UPB Stylesheets template mechanism

You have to provide some basic parameters to the Stylesheet using the "config.xml" file in the root container of the website. The file has to be written in XML. It is possible to provide the following information:
all variables must be inside of config as the surrounding root
title - Title shown in the browsers headline
home - displayname for the Link to the root of the website
root - The Websites Root Path on the Public Port
root-navigation - surrounding tag for the navigation links in the breadcrumb
default - surrounds the following infomation :
-- footer - default footer
-- header - default header
-- image-path - to point out the images to be shown in the header. (default is /styles/uni-pb/images)
fixed-left - feel free to place some fixed links in here to be displayed in the menu on the left
stylesheet-dir - to point out the stylesheets (header.css, import-upb.css and upb.css) (default is: /styles/uni-pb)
Please keep in mind that there is no need to provide all of these parameters. e.g. it is a good idea not to provide the tags image-path and stylesheet-dir. If you want to use them keep in mind that you have to use the fixed file names for the images and CSS files (just take a look in /styles/uni/pb to find out the names)
It is also a good idea to leave header and footer blank, but this depends on your own taste.
If you encounter Problems using german umluts in teh config file try using a CDATA Section and the html- entities instead.

An Example File looks like this:

<config>
  <title><![CDATA[A Website using the CI of UPB]]></title>
  <home>Home</home>
  <root>/mylogin/website</root>
  <root-navigation>
    <A href="http://www.upb.de">University of Paderborn</A>
    <A href="http://iug.upb.de/"><![CDATA[ Computers ans Society]]></A>
    <A href="/steam-cdtf" active="true"><![CDATA[ My Test Website using UPB Stylesheet ]]></A>
  </root-navigation>
  <default>
    <footer><![CDATA[ Just define the default footer here ]]></footer>
    <header>a default header</header>
    <image-path>/styles/cdtf-public/images</image-path>
  </default>
  <fixed-left>
    <A href="http://cs.upb.de/">Computer Science</A>
  </fixed-left>
</config>

To add content to the page just create the information using the Webinterface of the sTeam System. The content of the root- container will be displayed in the following way:
Containers are shown in the menu on the left. To add a new Link in the menu just create a new Container. Note that Containers will be displayed in the "file area" too. If the Name of the container starts with "." the Container will not listed in the menu neither in the file list. If the name of the Container starts with "!" the "intro" image of the container will be diaplayed in the file list (larger than the icon) instead of the icon. A Container named "---" is shown as a horizontal line. This can be used to divide the menu.
Image files of type image/jpg, image/gif or image/png will be displayed as Thumbnails.
Messageboards will be displayed on the bottom of the page as a kind of "newsticker". Just add a newsticker to your website by creating a new Messageboard and add a message in the messageboard (Only the messages on the highest Level will be displayed on the website).
External Links will be displayed as a Link below the file list
Documents will be displayed in the file list with Icon, Name and theit Description. Note that you can upload all kinds of Files like PDF, Html, Doc, AVI etc... . Please Note that there are some "magic" files used to fill the page with content. Therse Files will be identified by their Name.
Magic Filenames with special function are:
fullindex.html - full replacement for a page
body.html - replaces the body of the page - keeps navigation
header.html - header insert right and below th blue block
footer.html - will be displayed below the content
abstract.html - text to display below the header and left of intro image
intro.png / intro.gif / intro.jpg - an image to display right to abstract
header-r.html - header of the right column
abstract-r.html - second row of the right column. The presence of this file indicates the occurance of the right column. (sometimes it is needed to create an empty abstract-r.html file e.g. if you only want to display intro-r image without any test in the right column)
intro-r.png / intro-r.gif / intro-r.jpg - an image to display in the right column
active.xml - configuration file for registration page. if there is an active.xml the whole content will be generated using the data given in active.xml

To use your own Registration Page, you have to create a new container. I suggest to name it something like "register". In the next step, go into the new container and create a new file called "active.xml".
Please check if a free entry of your Group is allowed (you can see this on the details page of your group). Only if the free entry is allowed, the new registered users are directly member of the group and are able to access the materials you provide in a password protected area.
An example file looks like this:

<active>
  <mode>form</mode>
  <style>
    <link rel="stylesheet" type="text/css" href="/styles/uni-pb/form.css"/>
  </style>
  <header>Registration for Course XYZ</header>
  <abstract>Students having already an account on this server are able to <a href="https://YOURSERVERNAME/styles/uni-pb/i_register.pike?_action=join&group=YourGroup&notify=You are now registered for Course XYZ">register using this link</a></strong>   <br />If you dont have an account right now, please fill in the form below:<br />   </abstract>
  <formular function="register" script="/styles/uni-pb/i_register.pike" name="register">
    <string name="Name" desc="Nachname" attr="USER_FULLNAME"/>
    <string name="Vor-Name" desc="Vorname" attr="USER_FIRSTNAME"/>
    <string name="E-Mail" desc="A notification email will be sent to this adress" attr="USER_EMAIL"/>
    <string name="Matrikelnummer" desc="(must have 7 chars)" attr="MatrikelNr"/>
      <selection name="Studiengang" desc="" value="mechanics" attr="studiengang">
      <option value="Medienwissenschaft">Medienwissenschaften (Diplom)</option>
      <option value="Magister">Magister</option>
      <option value="Lehramt">Lehramt</option>
      <option value="Sonstiges">other</option>
    </selection>
    <string name="Nick" desc=Please choose a simple login name as login" param="name"/>
    <password name="Passwort" desc="minimum of 6 chars="pw"/>
    <password name="Password" desc="(repeat password)" param="pw_check"/>
    <button name="Create login"/>
    <server-arg name="vorlesung" value="XYZ"/>
    <server-arg name="group" value="GroupXYZ" />
    <server-arg name="auto-activation" value="true" />
    <server-arg name="vorlesungs-root" value="/MY-PUBLIC-PATH/" />
    <server-arg name="email-notification" value="You are registered for XYZ."/>
  </formular>
  <footer> </footer>
</active>

1) Try to add "?mode=edit" to the URL of your website. This enables some Links which allows you to edit edit the content of your website.
2) If you encounter Problems if using german umlauts or other chars which are not defined in the ISO charset please make sure that the encoding of the file is utf-8 (see details- page of the File in steam, and make sure your editor uses utf-8)
3) Using images in an article but dont display the image in the object list at the bottom
this can be done using a "hidden" container (e.g. ".images") were the images are stored in. to use them in the article use the "img" tag of html with : .... src=".images/picture.jpg"...
4) Some Tools to generate HTML Pages (e.g. Dreamweaver or in the worst case "ms word") using their own style definitions and a lot of redundant tags (e.g. "font"). This may result in some bad effects. please keep an eye on it and try to input mostly "clean" HTML Code. So the UPB Style defines the Tags "h1" - "hx" and a lot of other things to ensure that the whole presentation is displayed in the same "look". If you are using your own HTML- "style" definitions (e.g. using HTML code produced by dreamweaver or ms word), they will override the default settings and may be the source of some problems.