LearnIT Design


The new LearnIT theme is based on Essential Theme by Moodleman. Most of the changes takes place within the actual theme, which will enable us to easily update to new version of the theme without having to make extensive modifications. A few settings will be changed in the php-files within the theme folder, which will need to be updated in a similar manner as described further down.

All of the settings that are added within the moodle Web UI should persist through theme (Essential Theme) updates, and a minimal amount of work on our end will be required.

1. Settings via Web UI

1.1 - General Settings


learnit_v2_4.png
Logo =>
Use a standard course layout: YES
Edit Icons V2: YES
Include Autohide Functionality: YES
Navbar Separator: Thin Bracket
Footnote:
IT University of Copenhagen | Rued Langgaards Vej 7, 2300 Copenhagen, Denmark | +45 7218 5000 | itu@itu.dk | www.itu.dk
Custom CSS:


/* -------------------------------------
    -= G E N E R A L  C H A N G E S =-
---------------------------------------- */
 
/* learnIT REMOVED FROM NAV BAR */
.navbar .brand {
display: none;
}
 
/* COLOR INCONSISTENCY IN NAV BAR */
.navbar-inner {
border: 1px solid #427bab !important;
}
 
/* REMOVE BLUE LINE AT TOP OF PAGE*/
body {
border-top: none !important;
}
 
/* HEADLINES MADE THIN */
h1, h2, h3, h4, h5, h6 {
font-family: sans-serif !important;
font-weight: 100 !important;
}
 
/* BLOCKS & SHADOWS */
.block {
box-shadow: 1px 1px 0px lightgray !important;
border: 1px solid #e1e1e1;
}
 
/* BACK TO TOP BUTTON DISABLED! */
.back-to-top {
display: none !important;
}
 
/* NAV BAR ON SMALL SCREENS */
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
    font-weight: 100;
}
.dropdown-menu .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
color: #000 !important;
}
 
/* HELP LINK DISABLED (bottom right corner) */
.helplink {
display: none;
}
 
/* learnIT LOGO */
a.logo {
height: 45px;
margin-top: -8px;
}
 
/* FOOTER */
#page-footer .block_html {
    box-shadow: none !important;
}
#page-footer {
border-radius: 5px;
box-shadow: 1px 1px 2px gray;
}
 
/* MOBILE NAV BAR BUTTON */
.navbar .btn-navbar {
padding: 8px 8px;
}
 
/* HTML OVERFLOW (potential usafe?) */
html {
overflow-x: hidden;
}
 
/* BREADCRUMB DISABLED */
.breadcrumb {display: none;}
 
 
 
/* ------------------------
   -= F R O N T P A G E =-
--------------------------- */
 
/* DISPLAY OF FRONTPAGE BLOCKS */
.coursebox>.info>.name a {
padding-left: 25px;
width: 230%;
font-size: 18px;
}
 
#region-main, #region-main-essential.span8.pull-right {
background: none !important;
border: none !important;
}
 
.course-content ul li.section.main {
background-image: none !important;
}
 
#frontpage-course-list, #frontpage-category-combo, #site-news-forum, #frontpage-category-names {
background: none !important;
padding-top: 0px;
}
 
#block-region-side-pre.span4.pull-right.block-region  {
padding-top: 10px;
}
 
#frontpage-course-list, #frontpage-category-combo, #site-news-forum, #frontpage-category-names, .course-search-result {
background-color: #ffffff !important;
padding: 20px;
border-radius: 5px;
box-shadow: 1px 1px 0px lightgray !important;
border: 1px solid #e1e1e1;
}
 
.info {
padding-right: 10px;
/* might affect areas not foreseen */
}
 
.course_category_tree .category > .info {
     border: none;
     box-shadow: none;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 3px;
}
 
.courses .coursebox {
    border-radius: 5px;
    border: none !important;
    padding: 3px !important;
    box-shadow: none !important;
    background: #F4F4F4 !important;
}
 
.coursebox.even {
background: #fefefe !important;
}
 
.category .name a {
font-size: 16px;
}
 
.coursebox > .info > .name a {
    font-weight: 100 !important;
    font-size: 14px !important;
}
 
 
 
/* ---------------------
   -= C O U R S E S =-
------------------------ */
 
/* BORDER & SHADOW ON COURSE ITEMS */
.course-content ul li.section.main, #adminsettings {
border: 1px solid #e1e1e1;
margin: 10px 0px 10px 0px;
box-shadow: 1px 1px 0px lightgray !important;
border-radius: 5px;
background-color: #fff;
padding: 10px 0px 0px 0px;
}
 
/* WHITE BACKGROUND MAIN AREA */
.span8 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E7E7E7;
    border-radius: 5px 5px 5px 5px;
    padding: 10px;
}
 
/* SMALLER FONTSIZE IN HEADERS (probably not specific enough) */
h3.section-title {
font-size: 14px;
}
 
.section-navigation {font-size: 14px !important;}
 
/* COURSE CREATION */
.mform {
border: 1px solid #e1e1e1;
margin: 10px 0px 10px 0px;
box-shadow: 1px 1px 0px lightgray !important;
border-radius: 5px;
background-color: #fff;
padding: 10px 20px 0px 30px;
}
 
/* ENROLL STUDENTS */
.uep-wrap {
 
border: 1px solid #bbb !important;
margin: 0px -6px -6px 0px;
box-shadow: 1px 1px 1px lightgray !important;
border-radius: 5px !important;
padding: 3px;
background: #eeeeee !important;
}
 
 
 
 
 
/* -------------------------
   -= A D M I N A R E A =-
---------------------------- */
 
#adminsettings {
padding: 0px 15px 15px 15px;
}
 
/* SUBMIT BUTTON AREA TRANSPARENT (SYSTEM SETTINGS) */
.path-admin .buttons, .form-buttons {
background: none;
border-top: none;
border: none;
float: right
padding-left: 15px;
}
 
table#form td.submit, .form-buttons, .path-admin .buttons, #fitem_id_submitbutton, .fp-content-center form + div, div.backup-section + form, #fgroup_id_buttonar {
    margin-top: 10px;
    border-top: none;
    background-color: transparent;
    margin-bottom: 0px;
    padding: 15px 10px 10px;
    padding-right: 20px;
    float: right;
}
 
.admintable {
border: 1px solid #e1e1e1;
margin: 10px 0px 10px 0px;
box-shadow: 1px 1px 0px lightgray !important;
border-radius: 5px;
background-color: #fff;
padding: 10px 20px 0px 30px;
}
 
 
 
 
 
 
/* -----------------------------------------------
   -= B L O C K S  -  I C O N S  &  C O L O R =-
-------------------------------------------------- */
 
/* NAVIGATION */
.block_navigation .header .title h2:before {
    content: "";
}
 
/* FINISH EDITING */
.icon-power-off:before, .icon-off:before {
content: "" !important;
}
 
.breadcrumb-button .btn-danger {
    background-color: #5BB75B;
    background-image: linear-gradient(to bottom, #62C462, #51A351);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
 
.breadcrumb-button .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
    background-color: #51A351;
    color: #FFFFFF;
}
 
 
 
 
 
/* --------------------------
    -= I T U  B A N N E R =-
----------------------------- */
 
.top_banner_wrapper {
position: absolute;
top: 12px;
}
 
.itu_banner {
    background-image: url("https://dl.dropboxusercontent.com/u/4582348/LEARNIT/logo_en_horizontal_scaled.png");
    height: 25px;
    width: 225px;
    float: right;
    margin-right: 48px;
}
 
@media (max-width: 768px) {
     .itu_banner {
 
}
}
 
@media (max-width: 540px) {
     .itu_banner {
          background-image: url('https://dl.dropboxusercontent.com/u/4582348/LEARNIT/logo_en_horizontal_small_scaled.png');
          width: 34px;
}
}
 
 
 
 
 
/* --------------------------------------------
    -= MOBILE DISPLAY - GENERAL APPEARANCE =-
----------------------------------------------- */
 
@media (max-width: 768px) {
     body {
          margin-left: -20px;
          margin-right: -20px;
}
      a.logo {
          margin-left: 12px;
}
 
     #page {
          margin: 0px 20px 0px 20px;
}
}
 
@media (max-width: 480px) {
     .course-content ul.topics li.section,.course-content ul.topics li.section .content,.course-content ul.weeks li.section .content,.course-content ul.weeks li.section,.course-content
ul.section {
          padding: 0px 5px 0px 5px;
}
}

1.2 - Colour Settings


Page Background Image =>gray_jean.png
Theme Colour: #427bab
Theme Hover Colour: #427bab
Footer Seperator Colour: #427bab
Footer Colour: #427bab





2. Other Modifications


/renderers/core_renderer.php
Customized "My Dashboard" - Line 140
$branch = $menu->add($branchlabel, $branchurl, $branchtitle, $branchsort);
             $branch->add('<em><i class="icon-user"></i>'.get_string('profile').'</em>',new moodle_url('/user/profile.php'),get_string('profile'));
             $branch->add('<em><i class="icon-calendar"></i>'.get_string('pluginname', 'block_calendar_month').'</em>',new moodle_url('/calendar/view.php'),get_string('pluginname', 'block_calendar_month'));
             $branch->add('<em><i class="icon-envelope"></i>ITU E-mail</em>',new moodle_url('http://webmail.itu.dk'));
             $branch->add('<em><i class="icon-signout"></i>'.get_string('logout').'</em>',new moodle_url('/login/logout.php'),get_string('logout'));