Personal tools

The Erwin Schroedinger Institute for Mathematical Physics

The ESI Page Template

Organizers are usually expected to provide a web page for their scientific programme or workshop at the ESI. To simplify this task, the ESI provides a basic set of files containing several exemplary html files as well as the necessary style sheets to provide a consistent look and feel. Please note that it is not necessary to strictly adhere to these guidelines, but the resulting website should at least try to maintain an appearence resembling the original ESI website. Since the ESI provides both hosting and funding for this activity the corresponding webpage has to be approved by the ESI directorate. In particular, the organizers are kindly requested to inform the  of any major changes before publishing it on the web page.

The archive containing all the necessary files can be found here.

Almost all of the necessary adjustments should be rather straightforward and only require a minimal working knowledge of html. However, certain details - most notably the schedule - are slightly more involved and are therefore explained in more detail below.

You can embed your own google calendar or create one specifically for your programme/workshop to embed it into the programme/workshop website. If you do then please make sure that all the talks of your programme have been added. Otherwise please delete the page and remove any reference to the calendar from the templates. 

Note: Detailed instructions on how to embed a Google calendar can be found here. Information on how to create a public calendar can be found here as well as here.

Additional Details

The navigation is enclosed in the <ul> element with class="nav". It usually looks something like

<ul class="nav">
  <li class="active"><a href="index.html">Overview</a></li>
  <li><a href="schedule.html">Schedule</a></li>
  <li><a href="minicourses.html">Mini Courses</a></li>
  <li><a href="participants.html">Participants</a></li>
</ul>

 

The <li> elment with class="active" denotes the currently selected entry in the navigation and has to be adjusted accordingly for each page. 

The schedule page is basically seperated into two related parts. The sections of the schedule (i.e. weeks or subworkshops) have to be defined in the <ul>-block with id="schedule-tabs". Each section consists of a link enclosed in a <li> block and has to have the data-toggle="tabs" attribute as well as an identifier of the form href="#name", e.g.:

<ul id="schedule-tabs" class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#week1">Oktober 16-18, 2525</a>
  </li>
  <li>
    <a data-toggle="tab" href="#week2">Oktober 21-25, 2525</a>
  </li>
</ul>

This defines two sections, one for each week of a fictional workshop. Just as with the navigation, the default entry is selected using the class="active" attribute. 

For each section defined above, a corresponding div has to be created inside the <div id="schedule-tabs-content" class="tab-content"> block, having the name of the associated section as id as well as class="tab-pane fade". For the example above, this would amount to:

<div id="schedule-tabs-content" class="tab-content">
  <div id="week2" class="tab-pane fade">
    ...
  </div>
  <div id="week1" class="tab-pane fade in active">
    ...
  </div>
</div>

The active entry would have the additional classes in active in its attributes. The schedules for each week can now be placed inside the corresponding divs as usual.