How to customize the course design with CSS

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="canonical" href="https://docs.openolat.org/manual_how-to/css/css/"> <link rel="prev" href="../../lifecycle/lifecycle/"> <link rel="next" href="../../language_adaption_tool/language_adaption_tool/"> <link rel="alternate" href="./" hreflang="en"> <link rel="alternate" href="../../../de/manual_how-to/css/css/" hreflang="de"> <link rel="icon" href="../../../assets/favicon64.png"> <meta name="generator" content="mkdocs-1.4.3, mkdocs-material-9.1.20+insiders-4.37.0"> <title>How to customize the course design with CSS - OpenOlat Documentation</title> <link rel="stylesheet" href="../../../assets/stylesheets/main.3a36e643.min.css"> <link rel="stylesheet" href="../../../assets/stylesheets/palette.ecc776e4.min.css"> <link rel="stylesheet" href="../../../lighbox/basicLightbox.min.css"> <link rel="stylesheet" href="../../../stylesheets/extra.css"> <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script> <script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-65NJX5QBES"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-65NJX5QBES",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-65NJX5QBES",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script> <script>var consent;"undefined"==typeof __md_analytics||(consent=__md_get("__consent"))&&consent.analytics&&__md_analytics()</script> </head> <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="cyan" data-md-color-accent="orange"> <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off"> <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off"> <label class="md-overlay" for="__drawer"></label> <div data-md-component="skip"> <a href="#how-can-i-create-custom-css-for-my-course-design" class="md-skip"> Skip to content </a> </div> <div data-md-component="announce"> </div> <header class="md-header" data-md-component="header"> <nav class="md-header__inner md-grid" aria-label="Header"> <a href="../../.." title="OpenOlat Documentation" class="md-header__button md-logo" aria-label="OpenOlat Documentation" data-md-component="logo"> <img src="../../../assets/OpenOlat_Button_Quadrat_RGB.png" alt="logo"> </a> <label class="md-header__button md-icon" for="__drawer"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg> </label> <div class="md-header__title" data-md-component="header-title"> <div class="md-header__ellipsis"> <div class="md-header__topic"> <span class="md-ellipsis"> OpenOlat Documentation </span> </div> <div class="md-header__topic" data-md-component="header-topic"> <span class="md-ellipsis"> How to customize the course design with CSS </span> </div> </div> </div> <form class="md-header__option" data-md-component="palette"> <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="cyan" data-md-color-accent="orange" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0"> <label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> </label> <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="cyan" data-md-color-accent="orange" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1"> <label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3Z"/></svg> </label> </form> <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <div class="md-header__option"> <div class="md-select"> <button class="md-header__button md-icon" aria-label="Select language"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7 1.62-4.33L19.12 17h-3.24Z"/></svg> </button> <div class="md-select__inner"> <ul class="md-select__list"> <li class="md-select__item"> <a href="./" hreflang="en" class="md-select__link"> English </a> </li> <li class="md-select__item"> <a href="../../../de/manual_how-to/css/css/" hreflang="de" class="md-select__link"> Deutsch </a> </li> </ul> </div> </div> </div> <label class="md-header__button md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> </label> <div class="md-search" data-md-component="search" role="dialog"> <label class="md-search__overlay" for="__search"></label> <div class="md-search__inner" role="search"> <form class="md-search__form" name="search"> <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required> <label class="md-search__icon md-icon" for="__search"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </label> <nav class="md-search__options" aria-label="Search"> <a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7 0-.24-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91 1.61 0 2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08Z"/></svg> </a> <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg> </button> </nav> <div class="md-search__suggest" data-md-component="search-suggest"></div> </form> <div class="md-search__output"> <div class="md-search__scrollwrap" data-md-scrollfix> <div class="md-search-result" data-md-component="search-result"> <div class="md-search-result__meta"> Initializing search </div> <ol class="md-search-result__list" role="presentation"></ol> </div> </div> </div> </div> </div> </nav> </header> <div class="md-container" data-md-component="container"> <nav class="md-tabs" aria-label="Tabs" data-md-component="tabs"> <div class="md-grid"> <ul class="md-tabs__list"> <li class="md-tabs__item"> <a href="../../.." class="md-tabs__link"> Start </a> </li> <li class="md-tabs__item"> <a href="../../../release_notes/" class="md-tabs__link"> Release notes </a> </li> <li class="md-tabs__item"> <a href="../../../manual_user/general/" class="md-tabs__link"> User manual </a> </li> <li class="md-tabs__item"> <a href="../../" class="md-tabs__link md-tabs__link--active"> How to </a> </li> <li class="md-tabs__item"> <a href="../../../manual_admin/" class="md-tabs__link"> Admin manual </a> </li> <li class="md-tabs__item"> <a href="../../../manual_dev/" class="md-tabs__link"> Developer cookbook </a> </li> <li class="md-tabs__item"> <a href="../../../en/" class="md-tabs__link"> </a> </li> <li class="md-tabs__item"> <a href="../../../de/" class="md-tabs__link"> </a> </li> </ul> </div> </nav> <main class="md-main" data-md-component="main"> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0"> <label class="md-nav__title" for="__drawer"> <a href="../../.." title="OpenOlat Documentation" class="md-nav__button md-logo" aria-label="OpenOlat Documentation" data-md-component="logo"> <img src="../../../assets/OpenOlat_Button_Quadrat_RGB.png" alt="logo"> </a> OpenOlat Documentation </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" > <div class="md-nav__link md-nav__container"> <a href="../../.." class="md-nav__link "> <span class="md-ellipsis"> Start </span> </a> <label class="md-nav__link " for="__nav_1"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_1"> <span class="md-nav__icon md-icon"></span> Start </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../archive/" class="md-nav__link"> <span class="md-ellipsis"> Archive </span> </a> </li> <li class="md-nav__item"> <a href="../../../imprint/" class="md-nav__link"> <span class="md-ellipsis"> Imprint </span> </a> </li> <li class="md-nav__item"> <a href="../../../license/" class="md-nav__link"> <span class="md-ellipsis"> License </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" > <div class="md-nav__link md-nav__container"> <a href="../../../release_notes/" class="md-nav__link "> <span class="md-ellipsis"> Release notes </span> </a> <label class="md-nav__link " for="__nav_2"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_2"> <span class="md-nav__icon md-icon"></span> Release notes </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_19.0/" class="md-nav__link"> <span class="md-ellipsis"> 19.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_18.2/" class="md-nav__link"> <span class="md-ellipsis"> 18.2 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_18.1/" class="md-nav__link"> <span class="md-ellipsis"> 18.1 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_18.0/" class="md-nav__link"> <span class="md-ellipsis"> 18.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_17.2/" class="md-nav__link"> <span class="md-ellipsis"> 17.2 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_17.1/" class="md-nav__link"> <span class="md-ellipsis"> 17.1 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_17.0/" class="md-nav__link"> <span class="md-ellipsis"> 17.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_16.2/" class="md-nav__link"> <span class="md-ellipsis"> 16.2 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_16.1/" class="md-nav__link"> <span class="md-ellipsis"> 16.1 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_16.0/" class="md-nav__link"> <span class="md-ellipsis"> 16.0 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_15.5/" class="md-nav__link"> <span class="md-ellipsis"> 15.5 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_15.4/" class="md-nav__link"> <span class="md-ellipsis"> 15.4 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_15.3/" class="md-nav__link"> <span class="md-ellipsis"> 15.3 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/Release_notes_15.2/" class="md-nav__link"> <span class="md-ellipsis"> 15.2 </span> </a> </li> <li class="md-nav__item"> <a href="../../../release_notes/archive/" class="md-nav__link"> <span class="md-ellipsis"> Archive </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/general/" class="md-nav__link "> <span class="md-ellipsis"> User manual </span> </a> <label class="md-nav__link " for="__nav_3"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3"> <span class="md-nav__icon md-icon"></span> User manual </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/basic_concepts/" class="md-nav__link "> <span class="md-ellipsis"> Basic concepts </span> </a> <label class="md-nav__link " for="__nav_3_2"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2"> <span class="md-nav__icon md-icon"></span> Basic concepts </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_2" > <label class="md-nav__link" for="__nav_3_2_2" id="__nav_3_2_2_label" tabindex="0"> <span class="md-ellipsis"> Requirements </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2_2"> <span class="md-nav__icon md-icon"></span> Requirements </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Requirements_OpenOlat/" class="md-nav__link"> <span class="md-ellipsis"> Technical Requirements </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Terms_Of_Use/" class="md-nav__link"> <span class="md-ellipsis"> Terms of use </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_3" > <label class="md-nav__link" for="__nav_3_2_3" id="__nav_3_2_3_label" tabindex="0"> <span class="md-ellipsis"> Roles and Rights </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2_3"> <span class="md-nav__icon md-icon"></span> Roles and Rights </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Roles_Rights/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/User_Types/" class="md-nav__link"> <span class="md-ellipsis"> User types </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Roles/" class="md-nav__link"> <span class="md-ellipsis"> Roles </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Assign_Roles/" class="md-nav__link"> <span class="md-ellipsis"> Assign roles </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Authorisation_Concept/" class="md-nav__link"> <span class="md-ellipsis"> Authorisation in courses </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/coach/" class="md-nav__link"> <span class="md-ellipsis"> The role of a coach </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/guest_access/" class="md-nav__link"> <span class="md-ellipsis"> Guest access </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_4" > <label class="md-nav__link" for="__nav_3_2_4" id="__nav_3_2_4_label" tabindex="0"> <span class="md-ellipsis"> Account </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2_4"> <span class="md-nav__icon md-icon"></span> Account </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Session_Timeout_and_Logout/" class="md-nav__link"> <span class="md-ellipsis"> Session Timeout and Logout </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_5" > <label class="md-nav__link" for="__nav_3_2_5" id="__nav_3_2_5_label" tabindex="0"> <span class="md-ellipsis"> Framework </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2_5"> <span class="md-nav__icon md-icon"></span> Framework </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Navigation/" class="md-nav__link"> <span class="md-ellipsis"> Navigation </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_5_2" > <label class="md-nav__link" for="__nav_3_2_5_2" id="__nav_3_2_5_2_label" tabindex="0"> <span class="md-ellipsis"> Search </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_2_5_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2_5_2"> <span class="md-nav__icon md-icon"></span> Search </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Search_General/" class="md-nav__link"> <span class="md-ellipsis"> General information on the search </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Search_Global/" class="md-nav__link"> <span class="md-ellipsis"> Global search </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Search_Local/" class="md-nav__link"> <span class="md-ellipsis"> Local search </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Search_Person/" class="md-nav__link"> <span class="md-ellipsis"> Search other users </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Search_in_Course/" class="md-nav__link"> <span class="md-ellipsis"> Search in a course </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Search_in_FileHub/" class="md-nav__link"> <span class="md-ellipsis"> Search in the file hub </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Portal_configuration/" class="md-nav__link"> <span class="md-ellipsis"> Portal configuration </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Chat/" class="md-nav__link"> <span class="md-ellipsis"> Chat </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Table_Concept/" class="md-nav__link"> <span class="md-ellipsis"> Table concept </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Folder_Concept/" class="md-nav__link"> <span class="md-ellipsis"> Folder concept </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Math_formula/" class="md-nav__link"> <span class="md-ellipsis"> Math formula </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/To_Dos_Basics/" class="md-nav__link"> <span class="md-ellipsis"> To-dos </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Content_Editor/" class="md-nav__link"> <span class="md-ellipsis"> Content Editor </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Object_Collections/" class="md-nav__link"> <span class="md-ellipsis"> File and Data Collections </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/File_Hub_Concept/" class="md-nav__link"> <span class="md-ellipsis"> File Hub </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2_6" > <label class="md-nav__link" for="__nav_3_2_6" id="__nav_3_2_6_label" tabindex="0"> <span class="md-ellipsis"> Technology </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_2_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_2_6"> <span class="md-nav__icon md-icon"></span> Technology </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Technology/" class="md-nav__link"> <span class="md-ellipsis"> Supported Technologies </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Using_WebDAV/" class="md-nav__link"> <span class="md-ellipsis"> Using WebDAV </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/basic_concepts/Technology_and_Navigation/" class="md-nav__link"> <span class="md-ellipsis"> Technology and Navigation </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_3" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/login_registration/" class="md-nav__link "> <span class="md-ellipsis"> Login and registration </span> </a> <label class="md-nav__link " for="__nav_3_3"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_3"> <span class="md-nav__icon md-icon"></span> Login and registration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/login_registration/Login_Page/" class="md-nav__link"> <span class="md-ellipsis"> Login Page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/login_registration/Login_Concept/" class="md-nav__link"> <span class="md-ellipsis"> Login Concept </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/login_registration/Password/" class="md-nav__link"> <span class="md-ellipsis"> Password </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/login_registration/Passkey/" class="md-nav__link"> <span class="md-ellipsis"> Passkey </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/login_registration/Security_levels/" class="md-nav__link"> <span class="md-ellipsis"> Security levels </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_4" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/personal_menu/" class="md-nav__link "> <span class="md-ellipsis"> Personal menu </span> </a> <label class="md-nav__link " for="__nav_3_4"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_4"> <span class="md-nav__icon md-icon"></span> Personal menu </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_4_2" > <label class="md-nav__link" for="__nav_3_4_2" id="__nav_3_4_2_label" tabindex="0"> <span class="md-ellipsis"> Personal tools </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_4_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_4_2"> <span class="md-nav__icon md-icon"></span> Personal tools </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Personal_Tools/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Calendar/" class="md-nav__link"> <span class="md-ellipsis"> Calendar </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Subscriptions/" class="md-nav__link"> <span class="md-ellipsis"> Subscriptions </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Personal_folders/" class="md-nav__link"> <span class="md-ellipsis"> Personal folders </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/File_Hub/" class="md-nav__link"> <span class="md-ellipsis"> File Hub </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Notes/" class="md-nav__link"> <span class="md-ellipsis"> Notes </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Evidence_of_Achievements/" class="md-nav__link"> <span class="md-ellipsis"> Evidence of Achievements </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Competences/" class="md-nav__link"> <span class="md-ellipsis"> Competences </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/OpenBadges/" class="md-nav__link"> <span class="md-ellipsis"> Badges </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Bookings/" class="md-nav__link"> <span class="md-ellipsis"> Bookings </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Other_users/" class="md-nav__link"> <span class="md-ellipsis"> Other users </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Absences/" class="md-nav__link"> <span class="md-ellipsis"> Absences </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Portfolio/" class="md-nav__link"> <span class="md-ellipsis"> Portfolio </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Media_Center/" class="md-nav__link"> <span class="md-ellipsis"> Media Center </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/To-Dos/" class="md-nav__link"> <span class="md-ellipsis"> To-dos </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/E-Mail/" class="md-nav__link"> <span class="md-ellipsis"> E-Mail </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_4_3" > <label class="md-nav__link" for="__nav_3_4_3" id="__nav_3_4_3_label" tabindex="0"> <span class="md-ellipsis"> Configuration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_4_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_4_3"> <span class="md-nav__icon md-icon"></span> Configuration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Personal_Configuration/" class="md-nav__link"> <span class="md-ellipsis"> Übersicht </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Profile/" class="md-nav__link"> <span class="md-ellipsis"> Profile </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Settings/" class="md-nav__link"> <span class="md-ellipsis"> Settings </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/Password/" class="md-nav__link"> <span class="md-ellipsis"> Password </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/personal_menu/COVID_certificate/" class="md-nav__link"> <span class="md-ellipsis"> COVID certificate </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/area_modules/" class="md-nav__link "> <span class="md-ellipsis"> Area and modules </span> </a> <label class="md-nav__link " for="__nav_3_5"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5"> <span class="md-nav__icon md-icon"></span> Area and modules </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_2" > <label class="md-nav__link" for="__nav_3_5_2" id="__nav_3_5_2_label" tabindex="0"> <span class="md-ellipsis"> Courses </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_2"> <span class="md-nav__icon md-icon"></span> Courses </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Courses/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/catalog1.0/" class="md-nav__link"> <span class="md-ellipsis"> Catalog 1.0 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_3" > <label class="md-nav__link" for="__nav_3_5_3" id="__nav_3_5_3_label" tabindex="0"> <span class="md-ellipsis"> Catalog </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_3"> <span class="md-nav__icon md-icon"></span> Catalog </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/catalog2.0/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/catalog2.0_angebote/" class="md-nav__link"> <span class="md-ellipsis"> Offers </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_4" > <label class="md-nav__link" for="__nav_3_5_4" id="__nav_3_5_4_label" tabindex="0"> <span class="md-ellipsis"> Groups </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_4"> <span class="md-nav__icon md-icon"></span> Groups </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Group_Management/" class="md-nav__link"> <span class="md-ellipsis"> Group Management </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_5" > <label class="md-nav__link" for="__nav_3_5_5" id="__nav_3_5_5_label" tabindex="0"> <span class="md-ellipsis"> Coaching </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_5"> <span class="md-nav__icon md-icon"></span> Coaching </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Coaching/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_lektionen/" class="md-nav__link"> <span class="md-ellipsis"> Lectures </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_klassen/" class="md-nav__link"> <span class="md-ellipsis"> Classes </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_teilnehmer/" class="md-nav__link"> <span class="md-ellipsis"> Members </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_gruppen/" class="md-nav__link"> <span class="md-ellipsis"> Groups </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_kurse/" class="md-nav__link"> <span class="md-ellipsis"> Courses </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_personenbeziehungen/" class="md-nav__link"> <span class="md-ellipsis"> Role user to user </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_linienvorgesetzte/" class="md-nav__link"> <span class="md-ellipsis"> Line manager </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_auftraege/" class="md-nav__link"> <span class="md-ellipsis"> Orders </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_auftragsverwaltung/" class="md-nav__link"> <span class="md-ellipsis"> Orders management </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/coaching_personensuche/" class="md-nav__link"> <span class="md-ellipsis"> User search </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_6" > <label class="md-nav__link" for="__nav_3_5_6" id="__nav_3_5_6_label" tabindex="0"> <span class="md-ellipsis"> Authoring </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_6"> <span class="md-nav__icon md-icon"></span> Authoring </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Authoring/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/authoring_new_course/" class="md-nav__link"> <span class="md-ellipsis"> Create courses and learning resources </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Authoring_BulkActions/" class="md-nav__link"> <span class="md-ellipsis"> Bulk actions </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_7" > <label class="md-nav__link" for="__nav_3_5_7" id="__nav_3_5_7_label" tabindex="0"> <span class="md-ellipsis"> Question Bank </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_7"> <span class="md-nav__icon md-icon"></span> Question Bank </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_Bank/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Data_Management/" class="md-nav__link"> <span class="md-ellipsis"> Data Management </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_Bank_Import_Questions/" class="md-nav__link"> <span class="md-ellipsis"> Import questions </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Item_Detailed_View/" class="md-nav__link"> <span class="md-ellipsis"> Item Detailed View </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_bank_possible_operations/" class="md-nav__link"> <span class="md-ellipsis"> Question bank possible operations </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_Pool_Search/" class="md-nav__link"> <span class="md-ellipsis"> Search </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_Pool_Sharing_Options/" class="md-nav__link"> <span class="md-ellipsis"> Question Pool Sharing Options </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_Bank_Review_Process/" class="md-nav__link"> <span class="md-ellipsis"> Question Bank Review Process </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Question_Bank_Administration/" class="md-nav__link"> <span class="md-ellipsis"> Question Bank Administration </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_8" > <label class="md-nav__link" for="__nav_3_5_8" id="__nav_3_5_8_label" tabindex="0"> <span class="md-ellipsis"> Projects </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_8"> <span class="md-nav__icon md-icon"></span> Projects </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Overview/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Member_Management/" class="md-nav__link"> <span class="md-ellipsis"> Project member management </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Cockpit/" class="md-nav__link"> <span class="md-ellipsis"> Cockpit </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Whiteboard/" class="md-nav__link"> <span class="md-ellipsis"> Whiteboard </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Timeline/" class="md-nav__link"> <span class="md-ellipsis"> Timeline </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Schedule/" class="md-nav__link"> <span class="md-ellipsis"> Schedule </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Todos/" class="md-nav__link"> <span class="md-ellipsis"> To-dos </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Decisions/" class="md-nav__link"> <span class="md-ellipsis"> Decisions </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Notes/" class="md-nav__link"> <span class="md-ellipsis"> Notes </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Files/" class="md-nav__link"> <span class="md-ellipsis"> Files </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_VideoAudio/" class="md-nav__link"> <span class="md-ellipsis"> Video/Audio </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Admin/" class="md-nav__link"> <span class="md-ellipsis"> Administration </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Project_Report/" class="md-nav__link"> <span class="md-ellipsis"> Project report </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_9" > <label class="md-nav__link" for="__nav_3_5_9" id="__nav_3_5_9_label" tabindex="0"> <span class="md-ellipsis"> Portfolio </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_9"> <span class="md-nav__icon md-icon"></span> Portfolio </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Portfolio/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Portfolio_General_Information/" class="md-nav__link"> <span class="md-ellipsis"> Portfolio - General Information </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_9_3" > <label class="md-nav__link" for="__nav_3_5_9_3" id="__nav_3_5_9_3_label" tabindex="0"> <span class="md-ellipsis"> Components of the portfolio </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_5_9_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_9_3"> <span class="md-nav__icon md-icon"></span> Components of the portfolio </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Components_of_the_portfolio/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/My_portfolio_binders/" class="md-nav__link"> <span class="md-ellipsis"> My portfolio binders </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/My_entries/" class="md-nav__link"> <span class="md-ellipsis"> My entries </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Shared_by_me/" class="md-nav__link"> <span class="md-ellipsis"> Shared by me </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Shared_with_me/" class="md-nav__link"> <span class="md-ellipsis"> Shared with me </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Multiple_use_of_entries/" class="md-nav__link"> <span class="md-ellipsis"> Multiple use of entries </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Competences_tags/" class="md-nav__link"> <span class="md-ellipsis"> Competences tags </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/The_portfolio_editor/" class="md-nav__link"> <span class="md-ellipsis"> The portfolio editor </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/The_portfolio_editor_17_1/" class="md-nav__link"> <span class="md-ellipsis"> The portfolio editor for 17.1 </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Curriculum_Management/" class="md-nav__link"> <span class="md-ellipsis"> Curriculum Management </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_5_11" > <label class="md-nav__link" for="__nav_3_5_11" id="__nav_3_5_11_label" tabindex="0"> <span class="md-ellipsis"> Quality Management </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_5_11_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_5_11"> <span class="md-nav__icon md-icon"></span> Quality Management </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_Surveys/" class="md-nav__link"> <span class="md-ellipsis"> Surveys </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_Data_Collections/" class="md-nav__link"> <span class="md-ellipsis"> Data collection </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_Data_Collection_Generators/" class="md-nav__link"> <span class="md-ellipsis"> Data collection generators </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_Data_Collection_Preview/" class="md-nav__link"> <span class="md-ellipsis"> Data collection previews </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_Analysis/" class="md-nav__link"> <span class="md-ellipsis"> Analysis </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_To-dos/" class="md-nav__link"> <span class="md-ellipsis"> Actions (To-dos) </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/area_modules/Quality_Management_Improvement/" class="md-nav__link"> <span class="md-ellipsis"> Suggestion for improvement </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/learningresources/" class="md-nav__link "> <span class="md-ellipsis"> Learning resources </span> </a> <label class="md-nav__link " for="__nav_3_6"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6"> <span class="md-nav__icon md-icon"></span> Learning resources </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_2" > <label class="md-nav__link" for="__nav_3_6_2" id="__nav_3_6_2_label" tabindex="0"> <span class="md-ellipsis"> General functions </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_2"> <span class="md-nav__icon md-icon"></span> General functions </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/General_Functions_Concept/" class="md-nav__link"> <span class="md-ellipsis"> Function concept </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Detailed_View_of_Learning_Resources/" class="md-nav__link"> <span class="md-ellipsis"> Detailed View of Learning Resources </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Set_up_info_page/" class="md-nav__link"> <span class="md-ellipsis"> Set up info page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Technical_Information_on_Resources_and_Usage/" class="md-nav__link"> <span class="md-ellipsis"> Technical Information on Resources and Usage </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Access_configuration/" class="md-nav__link"> <span class="md-ellipsis"> Access configuration </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3" > <label class="md-nav__link" for="__nav_3_6_3" id="__nav_3_6_3_label" tabindex="0"> <span class="md-ellipsis"> Course </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3"> <span class="md-nav__icon md-icon"></span> Course </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/General_Information/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Creating_Course/" class="md-nav__link"> <span class="md-ellipsis"> Create course </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_3" > <label class="md-nav__link" for="__nav_3_6_3_3" id="__nav_3_6_3_3_label" tabindex="0"> <span class="md-ellipsis"> Course design </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_6_3_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_3"> <span class="md-nav__icon md-icon"></span> Course design </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Learning_path_course/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Creating_learning_path_courses/" class="md-nav__link"> <span class="md-ellipsis"> Creating learning path courses </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Learning_path_course_Course_editor/" class="md-nav__link"> <span class="md-ellipsis"> Learning path course - Course editor </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Learning_path_course_Participant_view/" class="md-nav__link"> <span class="md-ellipsis"> Learning path course - Participant view </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_4" > <label class="md-nav__link" for="__nav_3_6_3_4" id="__nav_3_6_3_4_label" tabindex="0"> <span class="md-ellipsis"> Course editor </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_6_3_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_4"> <span class="md-nav__icon md-icon"></span> Course editor </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/General_Configuration_of_Course_Elements/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Deleting_Moving_and_Copying_Course_Elements/" class="md-nav__link"> <span class="md-ellipsis"> Deleting, Moving and Copying Course Elements </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Access_Restrictions_in_the_Expert_Mode/" class="md-nav__link"> <span class="md-ellipsis"> Access Restrictions in the Expert Mode </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Using_additional_Course_Editor_Tools/" class="md-nav__link"> <span class="md-ellipsis"> Using additional Course Editor Tools </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_5" > <label class="md-nav__link" for="__nav_3_6_3_5" id="__nav_3_6_3_5_label" tabindex="0"> <span class="md-ellipsis"> Toolbar </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_6_3_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_5"> <span class="md-nav__icon md-icon"></span> Toolbar </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Info_page/" class="md-nav__link"> <span class="md-ellipsis"> Info page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Additional_Course_Features/" class="md-nav__link"> <span class="md-ellipsis"> Additional Course Features </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Using_Additional_Course_Features/" class="md-nav__link"> <span class="md-ellipsis"> Using Additional Course Features </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_6" > <label class="md-nav__link" for="__nav_3_6_3_6" id="__nav_3_6_3_6_label" tabindex="0"> <span class="md-ellipsis"> Administration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_6_3_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_6"> <span class="md-nav__icon md-icon"></span> Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Administration/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Using_Course_Tools/" class="md-nav__link"> <span class="md-ellipsis"> Using Course Tools </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Members_management/" class="md-nav__link"> <span class="md-ellipsis"> Members management </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Storage_folder/" class="md-nav__link"> <span class="md-ellipsis"> Storage folder </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_6_5" > <label class="md-nav__link" for="__nav_3_6_3_6_5" id="__nav_3_6_3_6_5_label" tabindex="0"> <span class="md-ellipsis"> Assessment tool </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="5" aria-labelledby="__nav_3_6_3_6_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_6_5"> <span class="md-nav__icon md-icon"></span> Assessment tool </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_tool_overview/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_tool_tab_Users/" class="md-nav__link"> <span class="md-ellipsis"> Tab users </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_of_learners/" class="md-nav__link"> <span class="md-ellipsis"> Assessment of learners </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_of_course_modules/" class="md-nav__link"> <span class="md-ellipsis"> Assessment of course modules </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessing_tasks_and_group_tasks/" class="md-nav__link"> <span class="md-ellipsis"> Assessing tasks and group tasks </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessing_tests/" class="md-nav__link"> <span class="md-ellipsis"> Assessing tests </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/The_assessment_form/" class="md-nav__link"> <span class="md-ellipsis"> The assessment form </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_translate_points_in_grades/" class="md-nav__link"> <span class="md-ellipsis"> Grading / Evaluation Scale </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/OpenBadges/" class="md-nav__link"> <span class="md-ellipsis"> Badges </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assess_tasks/" class="md-nav__link"> <span class="md-ellipsis"> Assess tasks </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Portfolio_assignment_Grading/" class="md-nav__link"> <span class="md-ellipsis"> Portfolio assignment Grading </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Forms_in_Rubric_Scoring/" class="md-nav__link"> <span class="md-ellipsis"> Forms in Rubric Scoring </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_6_6" > <label class="md-nav__link" for="__nav_3_6_3_6_6" id="__nav_3_6_3_6_6_label" tabindex="0"> <span class="md-ellipsis"> Lectures and absences </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="5" aria-labelledby="__nav_3_6_3_6_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_6_6"> <span class="md-nav__icon md-icon"></span> Lectures and absences </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Lectures_and_absences/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Lectures_User_view/" class="md-nav__link"> <span class="md-ellipsis"> Lectures </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Lectures_Teacher_view/" class="md-nav__link"> <span class="md-ellipsis"> Lectures teacherview </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_todos/" class="md-nav__link"> <span class="md-ellipsis"> To-dos </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Reminders/" class="md-nav__link"> <span class="md-ellipsis"> Course Reminders </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_6_9" > <label class="md-nav__link" for="__nav_3_6_3_6_9" id="__nav_3_6_3_6_9_label" tabindex="0"> <span class="md-ellipsis"> Assessment management </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="5" aria-labelledby="__nav_3_6_3_6_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_6_9"> <span class="md-nav__icon md-icon"></span> Assessment management </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_Management/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_mode/" class="md-nav__link"> <span class="md-ellipsis"> Assessment mode </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_inspection/" class="md-nav__link"> <span class="md-ellipsis"> Assessment inspection </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Data_Collection_Previews/" class="md-nav__link"> <span class="md-ellipsis"> Data collection previews </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Archiving/" class="md-nav__link"> <span class="md-ellipsis"> Archiving & Reporting </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Record_of_Course_Activities/" class="md-nav__link"> <span class="md-ellipsis"> Record of Course Activities </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Exams/" class="md-nav__link"> <span class="md-ellipsis"> Exams </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Assessment_mode_v1/" class="md-nav__link"> <span class="md-ellipsis"> Assessment mode </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_3_7" > <label class="md-nav__link" for="__nav_3_6_3_7" id="__nav_3_6_3_7_label" tabindex="0"> <span class="md-ellipsis"> Settings </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_6_3_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_3_7"> <span class="md-nav__icon md-icon"></span> Settings </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Settings/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Settings_Assessment/" class="md-nav__link"> <span class="md-ellipsis"> Tab Assessment </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Settings_Options/" class="md-nav__link"> <span class="md-ellipsis"> Tab Options </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/LTI_Share_courses/" class="md-nav__link"> <span class="md-ellipsis"> LTI access </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Design_possibilities_of_courses_and_course_elements/" class="md-nav__link"> <span class="md-ellipsis"> Design possibilities of courses and course elements </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_4" > <label class="md-nav__link" for="__nav_3_6_4" id="__nav_3_6_4_label" tabindex="0"> <span class="md-ellipsis"> Course elements </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_4"> <span class="md-nav__icon md-icon"></span> Course elements </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Elements/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Structure/" class="md-nav__link"> <span class="md-ellipsis"> Structure </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Page/" class="md-nav__link"> <span class="md-ellipsis"> Page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_HTML_Page/" class="md-nav__link"> <span class="md-ellipsis"> HTML Page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_External_Page/" class="md-nav__link"> <span class="md-ellipsis"> External Page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_CP_Learning_Content/" class="md-nav__link"> <span class="md-ellipsis"> CP learning content </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_SCORM_Learning_Content/" class="md-nav__link"> <span class="md-ellipsis"> SCORM Learning Content </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Document/" class="md-nav__link"> <span class="md-ellipsis"> Document </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Folder/" class="md-nav__link"> <span class="md-ellipsis"> Folder </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Podcast/" class="md-nav__link"> <span class="md-ellipsis"> Podcast </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Blog/" class="md-nav__link"> <span class="md-ellipsis"> Blog </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Video/" class="md-nav__link"> <span class="md-ellipsis"> Video </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Video_Livestream/" class="md-nav__link"> <span class="md-ellipsis"> Video Livestream </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Opencast/" class="md-nav__link"> <span class="md-ellipsis"> Opencast </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_edu_Sharing/" class="md-nav__link"> <span class="md-ellipsis"> edu-sharing </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_card2brain_Flashcards/" class="md-nav__link"> <span class="md-ellipsis"> card2brain Flashcards </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Mediasite/" class="md-nav__link"> <span class="md-ellipsis"> Mediasite </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Edubase/" class="md-nav__link"> <span class="md-ellipsis"> Edubase </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_JupyterHub/" class="md-nav__link"> <span class="md-ellipsis"> JupyterHub </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Assessment/" class="md-nav__link"> <span class="md-ellipsis"> Assessment </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Task/" class="md-nav__link"> <span class="md-ellipsis"> Task </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Grouptask/" class="md-nav__link"> <span class="md-ellipsis"> Grouptask </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Portfolio_Task/" class="md-nav__link"> <span class="md-ellipsis"> Portfolio Task </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Test/" class="md-nav__link"> <span class="md-ellipsis"> Test </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Self_Test/" class="md-nav__link"> <span class="md-ellipsis"> Self-test </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Practice/" class="md-nav__link"> <span class="md-ellipsis"> Practice </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Video_Task/" class="md-nav__link"> <span class="md-ellipsis"> Video task </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Form/" class="md-nav__link"> <span class="md-ellipsis"> Form </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Survey/" class="md-nav__link"> <span class="md-ellipsis"> Survey </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Checklist/" class="md-nav__link"> <span class="md-ellipsis"> Checklist </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Wiki/" class="md-nav__link"> <span class="md-ellipsis"> Wiki </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Forum/" class="md-nav__link"> <span class="md-ellipsis"> Forum </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_File_Dialog/" class="md-nav__link"> <span class="md-ellipsis"> File dialog </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Participant_Folder/" class="md-nav__link"> <span class="md-ellipsis"> Participant Folder </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Participant_List/" class="md-nav__link"> <span class="md-ellipsis"> Participant list </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_vitero/" class="md-nav__link"> <span class="md-ellipsis"> vitero </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_OpenMeetings/" class="md-nav__link"> <span class="md-ellipsis"> OpenMeetings </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Adobe_Connect/" class="md-nav__link"> <span class="md-ellipsis"> Adobe Connect </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_GoToMeeting/" class="md-nav__link"> <span class="md-ellipsis"> GoToMeeting </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_BigBlueButton/" class="md-nav__link"> <span class="md-ellipsis"> BigBlueButton </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Frequentyl_asked_questions_BigBlueButton/" class="md-nav__link"> <span class="md-ellipsis"> BBB - Frequently asked questions </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Microsoft_Teams/" class="md-nav__link"> <span class="md-ellipsis"> Microsoft Teams </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Zoom/" class="md-nav__link"> <span class="md-ellipsis"> Zoom </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Frequentyl_asked_questions_Zoom/" class="md-nav__link"> <span class="md-ellipsis"> Zoom - Frequently asked questions </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Enrolment/" class="md-nav__link"> <span class="md-ellipsis"> Enrolment </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Notifications/" class="md-nav__link"> <span class="md-ellipsis"> Notifications </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_EMail/" class="md-nav__link"> <span class="md-ellipsis"> E-Mail </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Topic_Broker/" class="md-nav__link"> <span class="md-ellipsis"> Topic Broker </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Calendar/" class="md-nav__link"> <span class="md-ellipsis"> Calendar </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Appointment_Scheduling/" class="md-nav__link"> <span class="md-ellipsis"> Appointment scheduling </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_LTI_Page/" class="md-nav__link"> <span class="md-ellipsis"> LTI Page </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Topic_Assignment/" class="md-nav__link"> <span class="md-ellipsis"> Topic assigment </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Link_List/" class="md-nav__link"> <span class="md-ellipsis"> Link list </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Course_Element_Selection/" class="md-nav__link"> <span class="md-ellipsis"> Selection </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_5" > <label class="md-nav__link" for="__nav_3_6_5" id="__nav_3_6_5_label" tabindex="0"> <span class="md-ellipsis"> Test </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_5"> <span class="md-nav__icon md-icon"></span> Test </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Test/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/General_Information_on_Tests/" class="md-nav__link"> <span class="md-ellipsis"> General Information on Tests </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_5_3" > <label class="md-nav__link" for="__nav_3_6_5_3" id="__nav_3_6_5_3_label" tabindex="0"> <span class="md-ellipsis"> Test editor QTI 2.1 </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_3_6_5_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_5_3"> <span class="md-nav__icon md-icon"></span> Test editor QTI 2.1 </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Test_editor_QTI_2.1/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Test_question_types/" class="md-nav__link"> <span class="md-ellipsis"> Test question types </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Configure_test_questions/" class="md-nav__link"> <span class="md-ellipsis"> Configure test questions </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Configure_tests/" class="md-nav__link"> <span class="md-ellipsis"> Configure tests </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Test_settings/" class="md-nav__link"> <span class="md-ellipsis"> Test settings </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Changing_from_QTI_1.2_to_QTI_2.1/" class="md-nav__link"> <span class="md-ellipsis"> Changing from QTI 1.2 to QTI 2.1 </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_6" > <label class="md-nav__link" for="__nav_3_6_6" id="__nav_3_6_6_label" tabindex="0"> <span class="md-ellipsis"> CP learning content </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_6"> <span class="md-nav__icon md-icon"></span> CP learning content </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/CP_Editor/" class="md-nav__link"> <span class="md-ellipsis"> CP Editor </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_7" > <label class="md-nav__link" for="__nav_3_6_7" id="__nav_3_6_7_label" tabindex="0"> <span class="md-ellipsis"> Wiki </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_7"> <span class="md-nav__icon md-icon"></span> Wiki </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Wiki/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_8" > <label class="md-nav__link" for="__nav_3_6_8" id="__nav_3_6_8_label" tabindex="0"> <span class="md-ellipsis"> Podcast </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_8"> <span class="md-nav__icon md-icon"></span> Podcast </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Podcast/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Podcast_Further_Configurations/" class="md-nav__link"> <span class="md-ellipsis"> Podcast </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_9" > <label class="md-nav__link" for="__nav_3_6_9" id="__nav_3_6_9_label" tabindex="0"> <span class="md-ellipsis"> Blog </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_9"> <span class="md-nav__icon md-icon"></span> Blog </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Blog/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Blog_Create/" class="md-nav__link"> <span class="md-ellipsis"> Create a blog </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Blog_Configuration/" class="md-nav__link"> <span class="md-ellipsis"> Configure a blog </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Blog_Blogging/" class="md-nav__link"> <span class="md-ellipsis"> Blogging </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_10" > <label class="md-nav__link" for="__nav_3_6_10" id="__nav_3_6_10_label" tabindex="0"> <span class="md-ellipsis"> Audio </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_10_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_10"> <span class="md-nav__icon md-icon"></span> Audio </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Audio_Recording/" class="md-nav__link"> <span class="md-ellipsis"> Audio Recording </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_11" > <label class="md-nav__link" for="__nav_3_6_11" id="__nav_3_6_11_label" tabindex="0"> <span class="md-ellipsis"> Video </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_11_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_11"> <span class="md-nav__icon md-icon"></span> Video </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Video/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Video_in_HTML_Pages/" class="md-nav__link"> <span class="md-ellipsis"> Video in HTML Pages </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Learning_resource_Video/" class="md-nav__link"> <span class="md-ellipsis"> Learning resource Video </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Video_Upload/" class="md-nav__link"> <span class="md-ellipsis"> Video Upload </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Video_Recording/" class="md-nav__link"> <span class="md-ellipsis"> Video Recording </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_12" > <label class="md-nav__link" for="__nav_3_6_12" id="__nav_3_6_12_label" tabindex="0"> <span class="md-ellipsis"> Resource folder </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_12_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_12"> <span class="md-nav__icon md-icon"></span> Resource folder </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Resource_Folder/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_13" > <label class="md-nav__link" for="__nav_3_6_13" id="__nav_3_6_13_label" tabindex="0"> <span class="md-ellipsis"> Form </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_13_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_13"> <span class="md-nav__icon md-icon"></span> Form </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Form/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Forms_General_Information/" class="md-nav__link"> <span class="md-ellipsis"> General information on forms </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Form_Editor/" class="md-nav__link"> <span class="md-ellipsis"> Form Editor </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Form_Elements/" class="md-nav__link"> <span class="md-ellipsis"> Form Elements </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Form_Element_Rubric/" class="md-nav__link"> <span class="md-ellipsis"> Form Element Rubric </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Form_Question_Rules/" class="md-nav__link"> <span class="md-ellipsis"> Question rules </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Forms_in_Courses/" class="md-nav__link"> <span class="md-ellipsis"> Forms in Courses </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_14" > <label class="md-nav__link" for="__nav_3_6_14" id="__nav_3_6_14_label" tabindex="0"> <span class="md-ellipsis"> Portfolio 2.0 Template </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_14_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_14"> <span class="md-nav__icon md-icon"></span> Portfolio 2.0 Template </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Portfolio_template_Creation/" class="md-nav__link"> <span class="md-ellipsis"> Portfolio template Creation </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Portfolio_template_Administration_and_editing/" class="md-nav__link"> <span class="md-ellipsis"> Portfolio template Administration and editing </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Forms_in_the_ePortfolio_template/" class="md-nav__link"> <span class="md-ellipsis"> Forms in the ePortfolio template </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_6_15" > <label class="md-nav__link" for="__nav_3_6_15" id="__nav_3_6_15_label" tabindex="0"> <span class="md-ellipsis"> Glossary </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_6_15_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_6_15"> <span class="md-nav__icon md-icon"></span> Glossary </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Glossary/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Glossary_usage/" class="md-nav__link"> <span class="md-ellipsis"> Usage </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/learningresources/Glossary_create/" class="md-nav__link"> <span class="md-ellipsis"> Create a glossary </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_7" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/groups/" class="md-nav__link "> <span class="md-ellipsis"> Groups </span> </a> <label class="md-nav__link " for="__nav_3_7"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_7"> <span class="md-nav__icon md-icon"></span> Groups </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/groups/Create_Groups/" class="md-nav__link"> <span class="md-ellipsis"> Create Groups </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/groups/Using_Group_Tools/" class="md-nav__link"> <span class="md-ellipsis"> Using Group Tools </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_7_4" > <label class="md-nav__link" for="__nav_3_7_4" id="__nav_3_7_4_label" tabindex="0"> <span class="md-ellipsis"> Administration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_3_7_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_7_4"> <span class="md-nav__icon md-icon"></span> Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/groups/Group_Administration/" class="md-nav__link"> <span class="md-ellipsis"> Group Administration </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/groups/LTI_Share_groups/" class="md-nav__link"> <span class="md-ellipsis"> LTI access </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_8" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/help/" class="md-nav__link "> <span class="md-ellipsis"> Help </span> </a> <label class="md-nav__link " for="__nav_3_8"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_8"> <span class="md-nav__icon md-icon"></span> Help </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/help/Course_Problems_and_Error_Messages/" class="md-nav__link"> <span class="md-ellipsis"> Course Problems and Error Messages </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_9" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_user/about/" class="md-nav__link "> <span class="md-ellipsis"> About us </span> </a> <label class="md-nav__link " for="__nav_3_9"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_3_9"> <span class="md-nav__icon md-icon"></span> About us </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_user/about/Information_on_OpenOlat/" class="md-nav__link"> <span class="md-ellipsis"> Information on OpenOlat </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_user/about/OpenSource_Software/" class="md-nav__link"> <span class="md-ellipsis"> The Idea of Open-Source Software </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked> <div class="md-nav__link md-nav__container"> <a href="../../" class="md-nav__link "> <span class="md-ellipsis"> How to </span> </a> <label class="md-nav__link " for="__nav_4"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_4"> <span class="md-nav__icon md-icon"></span> How to </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_2" > <label class="md-nav__link" for="__nav_4_2" id="__nav_4_2_label" tabindex="0"> <span class="md-ellipsis"> Working Processes </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_2"> <span class="md-nav__icon md-icon"></span> Working Processes </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../course_list/course_list/" class="md-nav__link"> <span class="md-ellipsis"> How do I create an Excel list of all available courses? </span> </a> </li> <li class="md-nav__item"> <a href="../../multiple_use/multiple_use/" class="md-nav__link"> <span class="md-ellipsis"> How to use the same files in several courses </span> </a> </li> <li class="md-nav__item"> <a href="../../webdav/webdav/" class="md-nav__link"> <span class="md-ellipsis"> Transfer files using WebDAV </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_3" > <label class="md-nav__link" for="__nav_4_3" id="__nav_4_3_label" tabindex="0"> <span class="md-ellipsis"> Create Courses </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_3"> <span class="md-nav__icon md-icon"></span> Create Courses </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../my_first_course/my_first_course/" class="md-nav__link"> <span class="md-ellipsis"> My first course </span> </a> </li> <li class="md-nav__item"> <a href="../../course_element_selection/course_element_selection/" class="md-nav__link"> <span class="md-ellipsis"> How do I use course element "selection"? </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_4" > <label class="md-nav__link" for="__nav_4_4" id="__nav_4_4_label" tabindex="0"> <span class="md-ellipsis"> Create Learning Resources </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_4"> <span class="md-nav__icon md-icon"></span> Create Learning Resources </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../blog/blog/" class="md-nav__link"> <span class="md-ellipsis"> Create a blog </span> </a> </li> <li class="md-nav__item"> <a href="../../content_package/content_package/" class="md-nav__link"> <span class="md-ellipsis"> Create a Content Package </span> </a> </li> <li class="md-nav__item"> <a href="../../create_a_form/create_a_form/" class="md-nav__link"> <span class="md-ellipsis"> Create a form </span> </a> </li> <li class="md-nav__item"> <a href="../../podcast/podcast/" class="md-nav__link"> <span class="md-ellipsis"> Create a podcast </span> </a> </li> <li class="md-nav__item"> <a href="../../wikis/wikis/" class="md-nav__link"> <span class="md-ellipsis"> Create a wiki </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_5" > <label class="md-nav__link" for="__nav_4_5" id="__nav_4_5_label" tabindex="0"> <span class="md-ellipsis"> Offer Courses </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_5"> <span class="md-nav__icon md-icon"></span> Offer Courses </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../catalog/catalog/" class="md-nav__link"> <span class="md-ellipsis"> How do I present my courses in the catalog? </span> </a> </li> <li class="md-nav__item"> <a href="../../oai_pmh/oai_pmh/" class="md-nav__link"> <span class="md-ellipsis"> How can I have my courses found by search engines? </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_6" > <label class="md-nav__link" for="__nav_4_6" id="__nav_4_6_label" tabindex="0"> <span class="md-ellipsis"> Participant Administration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_6"> <span class="md-nav__icon md-icon"></span> Participant Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../purpose_of_groups/purpose_of_groups/" class="md-nav__link"> <span class="md-ellipsis"> Group Scenarios </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_7" > <label class="md-nav__link" for="__nav_4_7" id="__nav_4_7_label" tabindex="0"> <span class="md-ellipsis"> Attend Participants </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_7"> <span class="md-nav__icon md-icon"></span> Attend Participants </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../bulk_assessment/bulk_assessment/" class="md-nav__link"> <span class="md-ellipsis"> Bulk assessment </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_8" > <label class="md-nav__link" for="__nav_4_8" id="__nav_4_8_label" tabindex="0"> <span class="md-ellipsis"> Tests and Assessments </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_4_8"> <span class="md-nav__icon md-icon"></span> Tests and Assessments </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../test_creation_procedure/test_creation_procedure/" class="md-nav__link"> <span class="md-ellipsis"> How do I proceed when I create a test? </span> </a> </li> <li class="md-nav__item"> <a href="../../assessing_tests/assessing_tests/" class="md-nav__link"> <span class="md-ellipsis"> How do I assess a test? </span> </a> </li> <li class="md-nav__item"> <a href="../../peer_review/peer_review/" class="md-nav__link"> <span class="md-ellipsis"> How do I perform a peer review? </span> </a> </li> <li class="md-nav__item"> <a href="../../communication_during_exam/communication_during_exam/" class="md-nav__link"> <span class="md-ellipsis"> Communication during an exam </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4_9" checked> <label class="md-nav__link" for="__nav_4_9" id="__nav_4_9_label" tabindex="0"> <span class="md-ellipsis"> Adjust OpenOlat </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_4_9_label" aria-expanded="true"> <label class="md-nav__title" for="__nav_4_9"> <span class="md-nav__icon md-icon"></span> Adjust OpenOlat </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../reduce_storage_consumption/reduce_storage_consumption/" class="md-nav__link"> <span class="md-ellipsis"> Reduce storage consumption </span> </a> </li> <li class="md-nav__item"> <a href="../../lifecycle/lifecycle/" class="md-nav__link"> <span class="md-ellipsis"> Lifecycle management </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc"> <label class="md-nav__link md-nav__link--active" for="__toc"> <span class="md-ellipsis"> How to customize the course design with CSS </span> <span class="md-nav__icon md-icon"></span> </label> <a href="./" class="md-nav__link md-nav__link--active"> <span class="md-ellipsis"> How to customize the course design with CSS </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#what-requirements-do-i-have-to-meet" class="md-nav__link"> <span class="md-ellipsis"> What requirements do I have to meet? </span> </a> </li> <li class="md-nav__item"> <a href="#which-tools-do-i-need-to-customize-my-openolat-design" class="md-nav__link"> <span class="md-ellipsis"> Which tools do I need to customize my OpenOlat design? </span> </a> </li> <li class="md-nav__item"> <a href="#what-is-possible" class="md-nav__link"> <span class="md-ellipsis"> What is possible? </span> </a> </li> <li class="md-nav__item"> <a href="#where-is-the-css-file-stored-and-integrated" class="md-nav__link"> <span class="md-ellipsis"> Where is the CSS file stored and integrated? </span> </a> </li> <li class="md-nav__item"> <a href="#examples-for-individual-design" class="md-nav__link"> <span class="md-ellipsis"> Examples for individual design </span> </a> </li> <li class="md-nav__item"> <a href="#example-customize-the-background" class="md-nav__link"> <span class="md-ellipsis"> Example: Customize the background </span> </a> </li> <li class="md-nav__item"> <a href="#example-course-element-single-page" class="md-nav__link"> <span class="md-ellipsis"> Example: Course element "Single page" </span> </a> </li> <li class="md-nav__item"> <a href="#example-id-and-class-selectors" class="md-nav__link"> <span class="md-ellipsis"> Example: ID and class selectors </span> </a> </li> <li class="md-nav__item"> <a href="#further-links" class="md-nav__link"> <span class="md-ellipsis"> Further links </span> </a> </li> <li class="md-nav__item"> <a href="#checklist" class="md-nav__link"> <span class="md-ellipsis"> Checklist </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../language_adaption_tool/language_adaption_tool/" class="md-nav__link"> <span class="md-ellipsis"> How do I use the language adaption tool? </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_admin/" class="md-nav__link "> <span class="md-ellipsis"> Admin manual </span> </a> <label class="md-nav__link " for="__nav_5"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5"> <span class="md-nav__icon md-icon"></span> Admin manual </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2" > <label class="md-nav__link" for="__nav_5_2" id="__nav_5_2_label" tabindex="0"> <span class="md-ellipsis"> Administration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2"> <span class="md-nav__icon md-icon"></span> Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/System/" class="md-nav__link"> <span class="md-ellipsis"> System </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_2" > <label class="md-nav__link" for="__nav_5_2_2" id="__nav_5_2_2_label" tabindex="0"> <span class="md-ellipsis"> Core functions </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_2"> <span class="md-nav__icon md-icon"></span> Core functions </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Core_functions/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/REST_API/" class="md-nav__link"> <span class="md-ellipsis"> REST API </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Landing_pages/" class="md-nav__link"> <span class="md-ellipsis"> Landing pages </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/E-Mail_Settings/" class="md-nav__link"> <span class="md-ellipsis"> E-Mail Settings </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Files_and_Folders/" class="md-nav__link"> <span class="md-ellipsis"> Files and Folders </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/WebDAV/" class="md-nav__link"> <span class="md-ellipsis"> WebDAV </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Licenses/" class="md-nav__link"> <span class="md-ellipsis"> Licenses </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_3" > <label class="md-nav__link" for="__nav_5_2_3" id="__nav_5_2_3_label" tabindex="0"> <span class="md-ellipsis"> Login </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_3"> <span class="md-nav__icon md-icon"></span> Login </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Login/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Login_Security/" class="md-nav__link"> <span class="md-ellipsis"> Security </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Login_Password_and_Authentication/" class="md-nav__link"> <span class="md-ellipsis"> Password and Authentication </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Guest_and_invitation/" class="md-nav__link"> <span class="md-ellipsis"> Guest and invitation </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_4" > <label class="md-nav__link" for="__nav_5_2_4" id="__nav_5_2_4_label" tabindex="0"> <span class="md-ellipsis"> Modules </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_4"> <span class="md-nav__icon md-icon"></span> Modules </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Instant_Messaging/" class="md-nav__link"> <span class="md-ellipsis"> Module Instant Messaging </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Contact_Tracing/" class="md-nav__link"> <span class="md-ellipsis"> Module Contact Tracing </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Video/" class="md-nav__link"> <span class="md-ellipsis"> Module Video </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Audio_Video_Recording/" class="md-nav__link"> <span class="md-ellipsis"> Module Audio/Video Recording </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Document_pool/" class="md-nav__link"> <span class="md-ellipsis"> Module Document pool </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Taxonomy/" class="md-nav__link"> <span class="md-ellipsis"> Module Taxonomy </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Media_Center/" class="md-nav__link"> <span class="md-ellipsis"> Module Media Center </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Lecture_and_roll_call_management/" class="md-nav__link"> <span class="md-ellipsis"> Module Lectures </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Catalog_2.0/" class="md-nav__link"> <span class="md-ellipsis"> Module Catalog </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Repository/" class="md-nav__link"> <span class="md-ellipsis"> Module Repository </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Organisations/" class="md-nav__link"> <span class="md-ellipsis"> Module Organisations </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Curriculum/" class="md-nav__link"> <span class="md-ellipsis"> Module Curriculum </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Projects/" class="md-nav__link"> <span class="md-ellipsis"> Module Projects </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_Quality_Management/" class="md-nav__link"> <span class="md-ellipsis"> Module Quality Management </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Modules_OAI/" class="md-nav__link"> <span class="md-ellipsis"> Module OAI PMH </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_5" > <label class="md-nav__link" for="__nav_5_2_5" id="__nav_5_2_5_label" tabindex="0"> <span class="md-ellipsis"> Life cycles </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_5_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_5"> <span class="md-nav__icon md-icon"></span> Life cycles </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Life_cycles_-_Administration/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Automatic_Group_Lifecycle/" class="md-nav__link"> <span class="md-ellipsis"> Automatic Group Lifecycle </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_6" > <label class="md-nav__link" for="__nav_5_2_6" id="__nav_5_2_6_label" tabindex="0"> <span class="md-ellipsis"> Payment modules </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_6"> <span class="md-nav__icon md-icon"></span> Payment modules </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Payment_modules/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/PayPal_Configuration/" class="md-nav__link"> <span class="md-ellipsis"> PayPal Configuration </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Reports/" class="md-nav__link"> <span class="md-ellipsis"> Reports </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_8" > <label class="md-nav__link" for="__nav_5_2_8" id="__nav_5_2_8_label" tabindex="0"> <span class="md-ellipsis"> e-Assessment Administration </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_8"> <span class="md-nav__icon md-icon"></span> e-Assessment Administration </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/e-Assessment_Administration/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/eAssessment_ePortfolio/" class="md-nav__link"> <span class="md-ellipsis"> eAssessment ePortfolio </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/eAssessment_Question_bank/" class="md-nav__link"> <span class="md-ellipsis"> eAssessment Question bank </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Assessment_translate_points_in_grades_admin/" class="md-nav__link"> <span class="md-ellipsis"> eAssessment Einstufung/Noten </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/e-Assessment_openBadges/" class="md-nav__link"> <span class="md-ellipsis"> eAssessment OpenBadges </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_9" > <label class="md-nav__link" for="__nav_5_2_9" id="__nav_5_2_9_label" tabindex="0"> <span class="md-ellipsis"> External tools </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_2_9_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_9"> <span class="md-nav__icon md-icon"></span> External tools </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/External_Tools_-_Administration/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/BigBlueButton_module/" class="md-nav__link"> <span class="md-ellipsis"> BigBlueButton module </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/SharePoint_OneDrive/" class="md-nav__link"> <span class="md-ellipsis"> SharePoint / OneDrive </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Zoom/" class="md-nav__link"> <span class="md-ellipsis"> Zoom integration </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Analytics_module/" class="md-nav__link"> <span class="md-ellipsis"> Analytics module </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_2_9_6" > <label class="md-nav__link" for="__nav_5_2_9_6" id="__nav_5_2_9_6_label" tabindex="0"> <span class="md-ellipsis"> LTI 1.3 Integrations </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="4" aria-labelledby="__nav_5_2_9_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_2_9_6"> <span class="md-nav__icon md-icon"></span> LTI 1.3 Integrations </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/administration/LTI_Integrations/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/LTI_External_tools/" class="md-nav__link"> <span class="md-ellipsis"> External tools </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/LTI_External_platforms/" class="md-nav__link"> <span class="md-ellipsis"> External platforms </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/LTI_Deeplinking/" class="md-nav__link"> <span class="md-ellipsis"> Deep Linking </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item"> <a href="../../../manual_admin/administration/Customizing/" class="md-nav__link"> <span class="md-ellipsis"> Customizing </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_3" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_admin/usermanagement/" class="md-nav__link "> <span class="md-ellipsis"> User management </span> </a> <label class="md-nav__link " for="__nav_5_3"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_3"> <span class="md-nav__icon md-icon"></span> User management </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/usermanagement/Search_Users/" class="md-nav__link"> <span class="md-ellipsis"> User / Account Search </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/usermanagement/Create_User/" class="md-nav__link"> <span class="md-ellipsis"> Create User </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/usermanagement/Assign_roles/" class="md-nav__link"> <span class="md-ellipsis"> Assign roles </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/usermanagement/Configure_User/" class="md-nav__link"> <span class="md-ellipsis"> Configure User </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/usermanagement/Data_protection/" class="md-nav__link"> <span class="md-ellipsis"> Data protection </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4" > <label class="md-nav__link" for="__nav_5_4" id="__nav_5_4_label" tabindex="0"> <span class="md-ellipsis"> Installation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_5_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_4"> <span class="md-nav__icon md-icon"></span> Installation </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/installation/installGuide/" class="md-nav__link"> <span class="md-ellipsis"> Installation guide </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/installation/updateGuide/" class="md-nav__link"> <span class="md-ellipsis"> Update guide </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4_3" > <label class="md-nav__link" for="__nav_5_4_3" id="__nav_5_4_3_label" tabindex="0"> <span class="md-ellipsis"> Supporting tools installation </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_4_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_4_3"> <span class="md-nav__icon md-icon"></span> Supporting tools installation </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/installation/imageMagick/" class="md-nav__link"> <span class="md-ellipsis"> imageMagick </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/installation/gotenbergPdf/" class="md-nav__link"> <span class="md-ellipsis"> Gotenberg PDF </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/installation/athenaPdf/" class="md-nav__link"> <span class="md-ellipsis"> AthenaPDF </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/installation/handBrakeCli/" class="md-nav__link"> <span class="md-ellipsis"> HandBrakeCLI </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/installation/ffmpeg/" class="md-nav__link"> <span class="md-ellipsis"> ffmpeg </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5_4_4" > <label class="md-nav__link" for="__nav_5_4_4" id="__nav_5_4_4_label" tabindex="0"> <span class="md-ellipsis"> Alternative installation environments </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_5_4_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_5_4_4"> <span class="md-nav__icon md-icon"></span> Alternative installation environments </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_admin/installation/mysql/" class="md-nav__link"> <span class="md-ellipsis"> MySQL DB </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_admin/installation/windows/" class="md-nav__link"> <span class="md-ellipsis"> Windows support </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_dev/" class="md-nav__link "> <span class="md-ellipsis"> Developer cookbook </span> </a> <label class="md-nav__link " for="__nav_6"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6"> <span class="md-nav__icon md-icon"></span> Developer cookbook </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_dev/dev/" class="md-nav__link "> <span class="md-ellipsis"> Development </span> </a> <label class="md-nav__link " for="__nav_6_2"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6_2"> <span class="md-nav__icon md-icon"></span> Development </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_dev/dev/coding_guidelines/" class="md-nav__link"> <span class="md-ellipsis"> Coding Guildelines </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_2_3" > <label class="md-nav__link" for="__nav_6_2_3" id="__nav_6_2_3_label" tabindex="0"> <span class="md-ellipsis"> Development Environment </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_6_2_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6_2_3"> <span class="md-nav__icon md-icon"></span> Development Environment </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_dev/dev/development_environment/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/dev/intellij/" class="md-nav__link"> <span class="md-ellipsis"> IntelliJ </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_dev/ux/" class="md-nav__link "> <span class="md-ellipsis"> UX Guidelines </span> </a> <label class="md-nav__link " for="__nav_6_3"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6_3"> <span class="md-nav__icon md-icon"></span> UX Guidelines </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3_2" > <label class="md-nav__link" for="__nav_6_3_2" id="__nav_6_3_2_label" tabindex="0"> <span class="md-ellipsis"> Design Pattern </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_6_3_2_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6_3_2"> <span class="md-nav__icon md-icon"></span> Design Pattern </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_dev/ux/patterns/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/nav/" class="md-nav__link"> <span class="md-ellipsis"> Navigation </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/empty_state/" class="md-nav__link"> <span class="md-ellipsis"> Empty state </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/tooltip.md" class="md-nav__link"> <span class="md-ellipsis"> Tooltip </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_3_3" > <label class="md-nav__link" for="__nav_6_3_3" id="__nav_6_3_3_label" tabindex="0"> <span class="md-ellipsis"> Components </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="3" aria-labelledby="__nav_6_3_3_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6_3_3"> <span class="md-nav__icon md-icon"></span> Components </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_dev/ux/components/" class="md-nav__link"> <span class="md-ellipsis"> Overview </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/button/" class="md-nav__link"> <span class="md-ellipsis"> Button </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/card/" class="md-nav__link"> <span class="md-ellipsis"> Card </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/delete_object/" class="md-nav__link"> <span class="md-ellipsis"> Delete object </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/file/" class="md-nav__link"> <span class="md-ellipsis"> File </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/file_upload/" class="md-nav__link"> <span class="md-ellipsis"> File Upload </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/label_tag/" class="md-nav__link"> <span class="md-ellipsis"> Labels & Tags </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/object_integration/" class="md-nav__link"> <span class="md-ellipsis"> Object integration </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/object_representation/" class="md-nav__link"> <span class="md-ellipsis"> Object representation </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/performence_widget/" class="md-nav__link"> <span class="md-ellipsis"> Performance widget </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/pickers/" class="md-nav__link"> <span class="md-ellipsis"> Pickers </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/switch_slider/" class="md-nav__link"> <span class="md-ellipsis"> Switch & Sliders </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/tab/" class="md-nav__link"> <span class="md-ellipsis"> Tab / Tab pane </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/ux/table/" class="md-nav__link"> <span class="md-ellipsis"> Table </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6_4" > <div class="md-nav__link md-nav__container"> <a href="../../../manual_dev/documentation/" class="md-nav__link "> <span class="md-ellipsis"> Manual How-To </span> </a> <label class="md-nav__link " for="__nav_6_4"> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_6_4_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_6_4"> <span class="md-nav__icon md-icon"></span> Manual How-To </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../manual_dev/documentation/howto-visual-studio/" class="md-nav__link"> <span class="md-ellipsis"> Setup Visual Studio Code </span> </a> </li> <li class="md-nav__item"> <a href="../../../manual_dev/documentation/author-tips/" class="md-nav__link"> <span class="md-ellipsis"> Tips for authors </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" > <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0"> <span class="md-ellipsis"> </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_7"> <span class="md-nav__icon md-icon"></span> </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../en/" class="md-nav__link"> <span class="md-ellipsis"> None </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_8" > <label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0"> <span class="md-ellipsis"> </span> <span class="md-nav__icon md-icon"></span> </label> <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false"> <label class="md-nav__title" for="__nav_8"> <span class="md-nav__icon md-icon"></span> </label> <ul class="md-nav__list" data-md-scrollfix> <li class="md-nav__item"> <a href="../../../de/" class="md-nav__link"> <span class="md-ellipsis"> None </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" > <div class="md-sidebar__scrollwrap"> <div class="md-sidebar__inner"> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class="md-nav__title" for="__toc"> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix> <li class="md-nav__item"> <a href="#what-requirements-do-i-have-to-meet" class="md-nav__link"> <span class="md-ellipsis"> What requirements do I have to meet? </span> </a> </li> <li class="md-nav__item"> <a href="#which-tools-do-i-need-to-customize-my-openolat-design" class="md-nav__link"> <span class="md-ellipsis"> Which tools do I need to customize my OpenOlat design? </span> </a> </li> <li class="md-nav__item"> <a href="#what-is-possible" class="md-nav__link"> <span class="md-ellipsis"> What is possible? </span> </a> </li> <li class="md-nav__item"> <a href="#where-is-the-css-file-stored-and-integrated" class="md-nav__link"> <span class="md-ellipsis"> Where is the CSS file stored and integrated? </span> </a> </li> <li class="md-nav__item"> <a href="#examples-for-individual-design" class="md-nav__link"> <span class="md-ellipsis"> Examples for individual design </span> </a> </li> <li class="md-nav__item"> <a href="#example-customize-the-background" class="md-nav__link"> <span class="md-ellipsis"> Example: Customize the background </span> </a> </li> <li class="md-nav__item"> <a href="#example-course-element-single-page" class="md-nav__link"> <span class="md-ellipsis"> Example: Course element "Single page" </span> </a> </li> <li class="md-nav__item"> <a href="#example-id-and-class-selectors" class="md-nav__link"> <span class="md-ellipsis"> Example: ID and class selectors </span> </a> </li> <li class="md-nav__item"> <a href="#further-links" class="md-nav__link"> <span class="md-ellipsis"> Further links </span> </a> </li> <li class="md-nav__item"> <a href="#checklist" class="md-nav__link"> <span class="md-ellipsis"> Checklist </span> </a> </li> </ul> </nav> </div> </div> </div> <div class="md-content" data-md-component="content"> <article class="md-content__inner md-typeset"> <h1 id="how-can-i-create-custom-css-for-my-course-design">How can I create custom CSS for my course design?</h1> <details class="abstract"> <summary>Objectives and content of this instruction</summary> <p>tbd</p> </details> <details class="abstract"> <summary>Target group</summary> <p>[ ] Authors [ ] Coaches [ ] Participants [x] Administrators</p> <p>[ ] Beginners [x] Experienced users [x] Experts</p> </details> <details class="abstract"> <summary>Expected previous knowledge</summary> <ul> <li>Experience as administrator</li> <li>Experienced in HTML and CSS programming</li> </ul> </details> <div class="admonition danger"> <p class="admonition-title">Only for experts!</p> <p>Creating your own course design is not recommended for normal setups and non-expert users! </p> <p>Note, that modifying the OpenOlat layout by manipulating the system CSS is not supported over versions. This means that creating a course layout may result in a broken course design after a system update. </p> <p>Use a own CSS only</p> <ul> <li>with caution,</li> <li>only if absolutely necessary</li> <li>and when you are in control over the update cycle of your OpenOlat installation.</li> </ul> </div> <div class="admonition hint"> <p class="admonition-title">Hint</p> <p>Ask your system provider to implement course themes that are supported on system level and are recompiled after each OpenOlat update and thus guaranteed to work after updates.</p> </div> <h2 id="what-requirements-do-i-have-to-meet">What requirements do I have to meet?</h2> <ul> <li>in-depth knowledge of CSS</li> <li>experience with various browser developer tools</li> <li>basic HTML knowledge</li> </ul> <h2 id="which-tools-do-i-need-to-customize-my-openolat-design">Which tools do I need to customize my OpenOlat design?</h2> <p>You need:</p> <ul> <li>An <b>editor</b> (e.g. <a href="https://notepad-plus-plus.org/">Notepad++</a>) to create the CSS file</li> <li>and a tool to analyse the website's CSS. This will help you find the appropriate ID and class selectors.<br> It can be done e.g. via the <b>browser option "Examine element"</b>. In Firefox and Chrome this tool is already integrated. Right-click in the web page and select "Examine Element (Q)" or "Examine (Ctrl+Shift+I)". For example, if you click on the top navigation bar, the information will show you the name of the selector, in this case "#o_navbar_container".</li> </ul> <h2 id="what-is-possible">What is possible?</h2> <p>You want to customize the course design and visually enhance your course or adapt it to your organization's corporate design?</p> <p>The standard OpenOlat layout can be customized and changed as desired using CSS. This makes it possible to give a course an individual recognition value. A reference to the course content, a certain color harmony or the visual design for game-based courses can also be implemented this way.</p> <div class="admonition warning"> <p class="admonition-title">Warning!!</p> <p>Some element selectors (e.g. “p” or “h2”) are often used throughout the platform. Changes can therefore apply far beyond their original purposes with unforeseen consequences. For instance, should the font color be changed to blue, the changes could also apply to blue buttons, thus rendering the text illegible. Please mind those unexpected consequences before changing the layout of a course. You should also follow the basics of web design, for example by keeping a sufficient contrast between the font color and the background.</p> </div> <h2 id="where-is-the-css-file-stored-and-integrated">Where is the CSS file stored and integrated?</h2> <p>To be able to use your css file for the design of your OpenOlat course, you must create a <b>subfolder "courseCSS"</b> in the <b>course folder</b> and store the course CSS file there.</p> <p>To ensure that the file is also used, the desired file is selected in the OpenOlat <b>course menu "Layout"</b>. If you want to return to the standard OpenOlat layout later, select the option "Standard", or simply delete your CSS from the file folder.</p> <h2 id="examples-for-individual-design">Examples for individual design</h2> <p>The possibilities for change are manifold. </p> <div class="admonition danger"> <p class="admonition-title">Be aware</p> <p>Modifying OpenOlat CSS classes might result in unexpected behavior when updating the system. The class names and element ID's listed below are not guaranteed to be available between OpenOlat updates. The DOM tree of OpenOlat is subject of change and thus it is not recommended creating CSS rules that modify the styles in the OpenOlat DOM or CSS namespace.</p> </div> <h2 id="example-customize-the-background">Example: Customize the background</h2> <p>To customize the background of a course, you need to use the ID selector <code>#o_body</code> and declare the property <code>background</code>, <code>background-color</code> or <code>background-image</code>. So you can define both the background image and the background color for this path. The desired background color can simply be stored in the course storage folder and linked appropriately.</p> <p>The code could for instance look like this: </p> <pre><code>#o_body { background-color: red; /* creates a red background */ background-image: url(bild.svg); /* linkes to an image that is used as background */ background-position: center; /* sets the image centered */ } </code></pre> <p>Usually it makes sense to link either a background color or a background image. Place the image in a suitable location in the course storage folder.</p> <p>Furthermore, it is recommended to use the following CSS settings in order to make other sections of the website transparent:</p> <pre><code>#o_main_wrapper, #o_main_wrapper #o_main_container { background: transparent; } #o_main_wrapper #o_main_container #o_main_left { background:transparent; margin-right: 15px; } #o_main_wrapper #o_main_container #o_main_center { background:transparent; } #o_footer_wrapper, #o_footer_container { background: transparent; } </code></pre> <h2 id="example-course-element-single-page">Example: Course element "Single page"</h2> <p>It can often be necessary to adapt the background of a single HTML page to the overall design. In this case, too, the desired effect is realized with CSS code.</p> <p>For example, to make the HTML page transparent (so that the background of the page shines through), the body is made transparent in the HTML page of the course element single page:</p> <pre><code>body { background-color: transparent; } </code></pre> <h2 id="example-id-and-class-selectors">Example: ID and class selectors</h2> <p>Here are some sections of a course's site with the appropriate ID or class selectors:</p> <p><img alt="css_structure_v1_en.png" class="shadow lightbox" src="../assets/css_structure_v1_en.png" /> </p> <p><strong>1. Upper menu:</strong> CSS ID selector: <code>#o_navbar_container</code></p> <p><strong>1a. Change the logo</strong> </p> <p>You can change or adjust the logo of the upper menu with the class selector <code>.o_navbar-brand</code>. For example, you can declare the following properties as follow:</p> <ul> <li><code>display: none;</code> (will not display the default logo)</li> <li><code>background: rgba(0, 0, 0, 0) url("logo-k-town.png");</code> (will change the default logo for the file "logo-k-town.png")</li> </ul> <p><strong>2. Course menu:</strong> CSS class selektors: <code>.o_toolbar .o_tools_container</code></p> <p><strong>3. Left menu:</strong> CSS ID selector: <code>#o_main_left_content</code></p> <p><strong>4. Footer:</strong> CSS ID selector: <code>#o_footer_container</code> and <code>#o_footer_wrapper</code></p> <p><strong>5. User menu (folding menu on the right):</strong> CSS ID selector <code>#o_offcanvas_right</code></p> <p>Should you wish to change the font of titles in OpenOlat, then you should use the element selector <strong>h2</strong>. Two other element selectors can also be modified to adjust to your design: <strong>p</strong> (paragraph) and <strong>a</strong> (hyperlinks). Many CSS properties may apply to those element selectors. Here are some examples:</p> <ul> <li><code>color: red;</code> (changes the color of the font, here in red. The hex code <code>#ffffff</code> or RGB value <code>rgb(87 , 53, 4)</code> can alternatively be used.</li> <li><code>font-family: verdana;</code> (changes the font family) </li> <li><code>font-weight: bold;</code> (defines the weight of the font, here <code>bold</code>) </li> <li><code>text-transform: uppercase;</code> (changes the text to uppercase/all caps) </li> </ul> <h2 id="further-links">Further links</h2> <p><strong><a href="http://www.w3schools.com/css/default.asp">W3school:</a></strong> Useful resource on CSS selectors, elements and properties<br /> <strong><a href="https://notepad-plus-plus.org/">Notepad++:</a></strong> Free text editor adjusted for programming and markup languages such as CSS</p> <hr /> <h2 id="checklist">Checklist</h2> <ul class="task-list"> <li class="task-list-item"><label class="task-list-control"><input type="checkbox" disabled checked/><span class="task-list-indicator"></span></label> tbd</li> </ul> <aside class="md-source-file"> <span class="md-source-file__fact"> <span class="md-icon" title="Last update"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1-2.1-2M12.5 7v5.2l4 2.4-1 1L11 13V7h1.5M11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2v1.8Z"/></svg> </span> 2023-12-04 </span> </aside> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg> Back to top </button> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../../lifecycle/lifecycle/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Lifecycle management" rel="prev"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Lifecycle management </div> </div> </a> <a href="../../language_adaption_tool/language_adaption_tool/" class="md-footer__link md-footer__link--next" aria-label="Next: How do I use the language adaption tool?" rel="next"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> How do I use the language adaption tool? </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2006 - 2023 <a href="https://frentix.com">frentix GmbH</a> </div> Made with <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener"> Material for MkDocs Insiders </a> </div> <div class="md-social"> <a href="https://mastodon.social/@openolat" target="_blank" rel="noopener me" title="mastodon.social" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg> </a> <a href="https://twitter.com/openolat" target="_blank" rel="noopener" title="twitter.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> </a> <a href="https://www.linkedin.com/groups/1473557/" target="_blank" rel="noopener" title="www.linkedin.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg> </a> <a href="https://github.com/openOLAT/" target="_blank" rel="noopener" title="github.com" class="md-social__link"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> </a> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <div class="md-consent" data-md-component="consent" id="__consent" hidden> <div class="md-consent__overlay"></div> <aside class="md-consent__inner"> <form class="md-consent__form md-grid md-typeset" name="consent"> <h4>Cookie consent</h4> <p>We use cookies to recognize your repeated visits and preferences, as well as to measure the effectiveness of our documentation and whether users find what they're searching for. With your consent, you're helping us to make our documentation better.</p> <input class="md-toggle" type="checkbox" id="__settings" checked> <div class="md-consent__settings"> <ul class="task-list"> <li class="task-list-item"> <label class="task-list-control"> <input type="checkbox" name="analytics" checked> <span class="task-list-indicator"></span> Google Analytics </label> </li> </ul> </div> <div class="md-consent__controls"> <button class="md-button md-button--primary">Accept</button> <button type="reset" class="md-button md-button--primary">Reject</button> </div> </form> </aside> </div> <script>var consent=__md_get("__consent");if(consent)for(var input of document.forms.consent.elements)input.name&&(input.checked=consent[input.name]||!1);else"file:"!==location.protocol&&setTimeout(function(){document.querySelector("[data-md-component=consent]").hidden=!1},250);var action,form=document.forms.consent;for(action of["submit","reset"])form.addEventListener(action,function(e){if(e.preventDefault(),"reset"===e.type)for(var n of document.forms.consent.elements)n.name&&(n.checked=!1);__md_set("__consent",Object.fromEntries(Array.from(new FormData(form).keys()).map(function(e){return[e,!0]}))),location.hash="",location.reload()})</script> <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tracking", "navigation.tabs", "navigation.top", "navigation.indexes", "navigation.footer", "search.suggest", "search.highlight", "search.share", "content.code.copy"], "search": "../../../assets/javascripts/workers/search.6c7302c4.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../../assets/javascripts/bundle.7c5c0157.min.js"></script> <script src="../../../lighbox/basicLightbox.min.js"></script> <script src="../../../javascripts/extra.js"></script> </body> </html>

CINXE.COM

How to customize the course design with CSS - OpenOlat Documentation