Print bookPrint book

Features

Site: Lambda - Responsive Moodle Theme - Live Demo
Course: Lambda - Responsive Moodle Theme - Live Demo
Book: Features
Printed by:
Date: Wednesday, 19 December 2018, 12:51 PM

Fully Responsive

One framework, every device.

Theme Lambda uses Bootstrap, the most popular framework for responsive web design.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

responsive

Bootstrap Grid System

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
A single column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single colored column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single colored column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single colored column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

A single colored column

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

<div class="row-fluid">
<div class="span4"><h5>A single column</h5><p>lorem ipsum...</p></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

<div class="row-fluid colored">
<div class="span4"><h5>A single colored column</h5><p>lorem ipsum...</p></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>

Bootstrap Components

Full of features, easy to include

Over a dozen reusable components built to provide dropdowns, input groups, carousels, alerts, and much more.

Available Bootstrap Components

This theme offers lots of custom HTML and CSS components as well as awesome jQuery plugins. Go ahead and try it out: Click on the links below to go to the shortcodes and watch the included components in action.

Theme Options

Powerful Admin settings

Quick and easy customization - options for everything you need!

Theme Lambda allows you to build your own style. The control panel for the theme options is included in the Moodle administration panel. It is subdivided into different points for an otimized workflow:

settings

Administration with Theme Lambda

Theme Lambda follows all Moodle standards to provide a stable and reliable workflow. All admin settings, activity modules and all courses will work just in the way you are used to. Additionally, you get powerful theme options to create your Moodle site - a theme to suit your desired needs!
Main features in the theme settings:
  • Choose from included background images or upload your own
  • Color Picker: unlimited color options for multiple elements
  • Variable or fixed width
  • Choose between boxed or full layout
  • Different layouts for the block columns
  • Font selector for headings and body
  • Style your frontpage with Camera slider
  • Carousel slider for the frontpage

Theme Lambda's UI

Font Awesome

One Font, 929 icons

In a single collection, Font Awesome 5 is a pictographic language of web-related actions

Font Awesome gives you scalable vector icons that can instantly be customized -- size, color, drop shadow, and anything that can be done with the power of CSS. Plus: Font Awesome won't trip up screen readers, unlike other icon fonts.

fa-camera-retro

You can place Font Awesome icons just about anywhere using a CSS style prefix and the icon’s name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

<i class="fas fa-camera-retro"></i>
  • If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.
  • List icons can
  • be used to
  • replace bullets
  • in lists
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

The above examples are taken from the official Font Awesome 5 documentation.

Multilanguage

100% Multilanguage Support

Over 100 built-in language packs that can easily be enabled and plugins that provide extended multi-lingual capabilities.

Displaying text in multiple languages

The multi-language content filter enables resources to be created in multiple languages. 

To use this feature first create your content in multiple languages (in the same resource). Then enclose each language block (aka multilang block) in the following tags:

      <span lang="XX" class="multilang">your_content_here</span>
      <span lang="YY" class="multilang">your_content_in_other_language_here</span>

It is essential to be in the code editing mode (press [<>] in the HTML editor), when you enter these tags for them to work. Only spaces, tabs and enters can be used between the individual languages in the multilang block.

Enabling the multi-language content filter

An admin can enable the multi-language content filter as follows:

  1. Go to Site administration > Plugins > Filters > Manage filters and in the dropdown menu for multi-language content select 'On'.
  2. If headings are to be shown in multiple languages too, select 'Content and headings' in the 'Apply to' column. Note that this may affect site performance.

The 'Restriction by language' additional plugin

Language filters are great, but sometimes they can make your resources and activities very complex.

The Restriction by language availability condition is an additional plugin that makes it easy to show an English resource only to English users and an activity in French only to French speaking students.

multilanguage

Social Media

Let your users stay connected with you!

Theme Lambda makes it easy for you to place social network icons to your Moodle site.

Social Media via Theme Options

In the Theme Options you will see several textfields, one for each included social network. In those fields you should copy/paste the URL to your social network profile (i.e https://www.twitter.com/mycollege).

After entering the links you can choose where to place the social media icons: at the bottom of the page (footer) or at the top (header). You can also set up the color for the icons to fit in your site.

Position 'header':

options-social-02

Position 'footer':

options-social-03


Social Media via HTML Block

Theme Lambda offers pre-defined shortcodes so that you can easily set up a HTML Block with your social media links.

social-03
<address>308 Negra Arroyo Lane, Albuquerque, New Mexico, 87104</address>
<i class="fa fa-mobile fa-lg"></i> Phone: (007) 123-456<br>
<i class="fa fa-envelope-o"></i> E-mail: <a href="info@lambda-school.com">info@lambda-school.com</a>
<h6>Connect with us:</h6>
<div class="social_icons pull-right">
  <a class="social fa fa-facebook" target="_blank" href="https://www.facebook.com/mycollege"> </a>
<a class="social fa fa-pinterest" target="_blank" href="http://pinterest.com/mycollege/mypinboard"> </a> <a class="social fa fa-twitter" target="_blank" href="https://www.twitter.com/mycollege"> </a> <a class="social fa fa-google-plus" target="_blank" href="https://plus.google.com/+mycollege"> </a>
</div>

Note:
The advantage of using a HTML Block is that you can place it to any block position in Moodle you want, even at the footer.