Links

Links in the text are always shown in the colour of the institution. Additionally, the link can be preceded by a small arrow. External links are the links that mark pages leaving the TU Chemnitz web pages. These links should be marked accordingly. The symbol   is used for marking.

<a href="#link">This is the default link.</a><br />
<a class="link" href="#link">This is a link with an arrow.</a><br />
<a class="linkextern" href="#link" target="_blank">This is a link that refers to an external page.</a>

Notes:

The addition target="_blank" opens the link in a new tab. In this case, please pay attention to this for the sake of accessibility, make sure that the context change (new tab) is indicated in the link text. You will find further details on accessible link texts in our guide.

Tables

Following the guidelines of the corporate design, tables are displayed with horizontal black lines (default). Alternatively, grey lines (class="horizontal grey") can be used.

If tables are labeld with a table heading, the caption-element, which directly follows the table-element, is used for this purpose.

The summary-element should only be used when special instructions are needed, this helps screen reader users to make sense of the complex table.

<table class="horizontal">
  <caption>Table Heading</caption>
  <tbody>
    <tr>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="horizontal grey">
  <tbody>
    <tr>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

<table class="zeile">
  <tbody>
    <tr>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
      <th>Table Head <a href="">Link</a></th>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
    <tr>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
      <td>Table cell <a href="">Link</a></td>
    </tr>
  </tbody>
</table>

Images/Photos on the Website

Please only use images or photos to which you have the rights for online publication! Images published under a Creative-Commons-Licence for example, can be used - but only if the conditions stated in the corresponding licence are complied with (in the case of the CC-BY licence: the name of the author must be mentioned).

Images should always be published with the alt-attribute set:

<img src="image.png" alt="Image description">

Please read the information on alternative text in the chapter on accessibility..

Define Copyright Notice

<figure class="imgtitle black left" title="Copyright-Notice">
  <img class="img-responsive" src="images/responsive-design.jpg"
       alt="Smartphone and laptop with TU page accessed">
</figure>

Icons

Named Characters

The corporate design of the TU Chemnitz includes symbols that you can use on your pages. In addition to this, Bootstrap itself offers over 200 so-called glyphs from the character set of Glyphicons Halflings. For further information, please refer to the Bootstrap documentation.

• tucicon-nav-up
• tucicon-nav-right
• tucicon-nav-left
• tucicon-nav-down
• tucicon-link
• tucicon-link-extern
• tucicon-link-download
• tucicon-check
• tucicon-error
• tucicon-rss
• tucicon-key-closed
• tucicon-key-open
• tucicon-feedback-good
• tucicon-feedback-neutral
• tucicon-feedback-bad
• tucicon-telephone
• tucicon-search
• tucicon-video
• tucicon-emergency
• tucicon-contact
• tucicon-mail
• tucicon-pdf
• tucicon-sm-fb
• tucicon-sm-tw
• tucicon-sm-xi
• tucicon-sm-yt
• tucicon-sm-in
• tucicon-sm-li
• tucicon-sm-ma
• tucicon-sm-sc
• tucicon-sm-tt

Usage

The symbols "tucicon-nav-…" should be used for navigation on the page and between pages. The icons "tucicon-link" and "tucicon-link-extern" are used to identify references/links. And the symbols "tucicon-sm-…" serve to label social media content (in = Instagram, fb = Facebook, tw = Twitter/X, xi = Xing, yt = YouTube, li = LinkedIn).

The icons are predefined in classes and are integrated by specifying the corresponding designation.

Icons are black by default, but can be coloured as desired using the CSS property color. The size can also be changed.

<button class="btn btn-info" type="button">
 <span class="tucicon-search">Search</span></button>
<button class="btn btn-info" type="button">
 <span class="tucicon-search" style="color:red">Search</span></button>

All Characters of the Icon Collection of the TU Chemnitz

The Icon Collection of the TU Chemnitz includes many more (earmarked) symbols. Those will not all be provided as a CSS class, but can be used by entering the respective character set position:

<span class="tucicon" aria-hidden="true">&#x1f44d;</span>

Highlighting

Special text markings can be highlighted in colour. Three different types of boxes are available for this purpose.

Note Boxes for Special Emphasis in the Text

Note boxes are usually used directly in the text for special highlights. They do not have a coloured background, but are identified by a matching coloured marker on the left-hand side and a frame.- The standard class is designated "tucbox-tip" and appears in the university colour by default.

<div class="tucbox-tip">
<h4>Heading Note Box <code>tucbox-tip</code> <a href="#">Link</a></h4>
<p>This box appears in the university colours &hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-info">
<h4>Heading Note Box <code>tucbox-tip-info</code> <a href="#">Link</a></h4>
<p>This box is grey &hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-warning">
<h4>Heading Note Box <code>tucbox-tip-warning</code> <a href="#">Link</a></h4>
<p>This box is intended to warn &hellip; <a href="#">Link</a></p>
</div>

<div class="tucbox-tip-danger">
<h4>Heading Note Box <code>tucbox-tip-danger</code> <a href="#">Link</a></h4>
<p> This box marks particularly important, urgent and special notes to be emphasised &hellip; <a href="#">Link</a></p>
</div>

Text Hightlights

These areas are intended to highlight information within texts. Text labels appear in the faculty or facility colour by default, but can also be used in grey.

<div class="tucbox-area">This represents a special <strong>hightlight</strong> in the text
and can be extended as desired.  <a href="#">Link</a></div>

<div class="tucbox-area-info">This represents a special <strong>hightlight</strong> in the text
and can be extended as desired. <a href="#">Link</a></div>

Panels

Panels can also be used to highlight text. Unlike the text labels, the area is not completely filled with colour. Only the heading and the border are coloured to match the respective class. Panels also appear in the faculty or facility colour by default and can alternatively be used in grey.

<div class="tucbox-panel">
<div class="panel-heading">
<h3 class="panel-title">Headings in Panel, <a href="#">also with Link</a></h3>
</div>
<div class="panel-body">This is the content.</div>
</div>

<div class="tucbox-panel-info">
<div class="panel-heading">
<h3 class="panel-title">Hadings in Panel <code>tucbox-panel-info</code>, <a href="#">also with Link</a></h3>
</div>
<div class="panel-body">This is the content.</div>
</div>

Alert Boxes

"Alerts" have no round corners and no shadows. Four colours are available (faculty or facility colour, grey, orange for warnings, red for danger/prohibitions). A typical use for alerts is to warn about missing input in a form.

<div class="alert alert-success"><strong>Well done!</strong> You have just read <a href="#">this message</a>.</div>
<div class="alert alert-info"><strong>Attention!</strong> This text needs <a href="#">your attention,</a> but it is not as important as it seems.</div>
<div class="alert alert-warning"><strong>Warning!</strong> You should attach more <a href="#">importance </a> to this text!</div>
<div class="alert alert-danger"><strong>Error!</strong> This <a href="#">important information</a> describes the details.</div>

Buttons

The standard button classes included in Bootstrap have been redefined as follows. The button of class btn-default is displayed in the colour of the institution or faculty.

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>

The same applies to all classes that use buttons, such as the class btn-group.

Buttons are actually meant for actions.Every now and then links are also designed like buttons (only available on German). For accessibility reasons, it should be remembered in such cases to provide the screen reader with this information via the WAI-ARIA role.:

<a class="btn btn-default" href="/urz/www/bf" role="button">Notes on accessibility </a>

Formulare

Responsive design is particularly useful for web-based forms, so that meaningful input can be made on small mobile devices as well as on the normal PC screen. For this purpose the use of Grids is very useful, as you can see in the following example:

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputTerm" class="col-xm-3 control-label">Search term</label>
    <div class="col-xm-9">
      <input type="text" class="form-control" id="inputTerm" placeholder="Search term">
    </div>
  </div>
  <div class="form-group">
    <label for="inputCategory" class="col-xm-3 control-label">Category</label>
    <div class="col-xm-9">
      <select class="form-control" id="inputCategory">
        <option value="web" selected>Web page</option>
        <option value="dict">Dictionary</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <div class="checkbox">
        <label><input type="checkbox" id="checkCase"> Case-sensitive</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-xm-offset-3 col-xm-9">
      <button type="submit" class="btn btn-default">Search</button>
    </div>
  </div>
</form>

Notes

• You can find more examples on the Bootstrap page.
• State the column width with col-xm-… instead of col-sm-…!
• Notes on form evaluation with PHP

Mathematical formulas

On this page we will show you a method of presenting mathematical formulas in a visually appealing and at the same time accessible way on web pages. Formulas can be entered in different formats, in our example we used LaTeX. Using the right mouse button, the website viewer can adjust the output.

MathJax is used for this, which we have mirrored locally so that the website visitors only obtain the necessary resources from our web servers. In order to save resources, the integration should only take place on pages that actually contain formulas. To use the current version 3 of MathJax with TeX code, these two JavaScript files must be specified in the header:

• https://www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js (for Internet Explorer 11 compatibility)
• https://www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js

Before requesting seite() these definitions should therefore be made:

$javascript[] = '//www.tu-chemnitz.de/static/mathjax/polyfill-3-es6.min.js';
$javascript[] = '//www.tu-chemnitz.de/static/mathjax/3/es5/tex-mml-chtml.js';

In the content, you can then simply open a maths environment and specify formulas in it:

<div class="tucbox-tip">
Ohm's law: \[ R = \frac{U}{I} \]
<p>(The strength of current is therefore calculated with \( I = \frac{U}{R} \).)</p>
</div>

Right-click on the form display to open a context menu in which, for example, language output settings can be made.

For more information, we link to the MathJax documentation:

• TeX and LaTeX in HTML-Documents
• Examples in a Browser