Installation

Via FTP
  1. Log into your moodle site via FTP client and go to moodle theme directory located at your-moodle-site/themes/.
  2. Unzip the theme file you downloaded from ThemeForest and upload only the extracted theme folder (space.zip).
  3. Ensure that the new theme folder and its contents are readable by the webserver.
  4. Now login to your Moodle site and go to Administration → Site administration → Notification, you will see a Notification for theme to be installed. Click “Upgrade Moodle Database now” button to continue for the installation procedure.
  5. Go to the Site administration → Appearance →Themes → Theme selector
  6. Select: Space theme
  7. Done

After all clear global cache. Go to: Dashboard → Site administration → Development → Purge all cache


Via the built in Moodle plugin installer
  1. Login to your Moodle site as an admin.
  2. Go to: Administration → Site administration → Plugins → Install plugins.
  3. Then upload theme ZIP file space.zip. You shoold only be prompted to add extra details (in the Show more section) if your plugin is not automatically detected.
  4. Check the plugin validation report
  5. Done
  6. Go to the Site administration → Appearance →Themes → Theme selector
  7. Select: Space theme
  8. Done

After all clear global cache. Go to: Dashboard → Site administration → Development → Purge all cache


Update

Updating a theme is very similar to the installation process. Don't worry your settings wont be lost.


Downgrade

If you want to back to previous version of the theme you have to edit version.php file inside space.zip

Change plugin version number from 01 to 02 eg.

$plugin->version = 2019032801; // YYYYMMDDVV.
$plugin->version = 2019032802; // YYYYMMDDVV.

Now just install the theme (Compress the space folder if you use Moodle Plugin Installer).


Customization

Space Moodle Theme is highly customizable. You can find all the necessery options in the theme settings. To open it, go to Site administration → Appearance → Space. Settings are divided into groups and each of them is described below.


Colors

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: General
  3. Save

You can change:

  • Main brand colors (6x)
  • Alerts colors: Red, Green, Yellow

Everything else you have to change using Custom CSS →

Each field has description below.


Typography

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Advanced
  3. Save
  • Google Font URL URL address should include https://
    Select font from Google Fonts Library
    Default: https://fonts.googleapis.com/css?family=Poppins:300,400,500,700
  • Google Font Name Use the following CSS rules recommended by Google Fonts to specify font families.
    Default: 'Poppins', sans-serif
  • Font weight: Light
    Default: 300
  • Font weight: Regular
    Default: 400
  • Font weight: Medium
    Default: 500
  • Font weight: Bold
    Default: 700

Top Bar


Custom navigation

First, you have to set up more than one language for your site.

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: ★ Custom Navigation
  3. Custom Navigation Icon
  4. Custom Navigation HTML
    Sample:
    <ul class="c-custom-nav-container">
      <li><a href="#"><i class="fas fa-box-open"></i><span class="nav-label">Courses list</span></a></li>
      <li><a href="#"><i class="fas fa-flag-checkered"></i><span class="nav-label">Courses list</span></a></li>
      <li><a href="#"><i class="fab fa-slack"></i><span class="nav-label">Courses list</span></a></li>
      <li><a href="#"><i class="far fa-calendar-alt"></i><span class="nav-label">Courses list</span></a></li>
    </ul>

    More icons you can find here: FontAwesome

  5. Extra Custom Navigation HTML
    Sample:
    <h4 class="c-custom-nav-extra-title">External resources <i class="fas fa-external-link-square-alt"></i></h4>
      <ul class="c-custom-nav-extra-container">
      <li><a href="#"><span class="nav-label">Get this theme</span></a></li>
      <li><a href="#"><span class="nav-label">Get this theme</span></a></li>
      <li><a href="#"><span class="nav-label">Get this theme</span></a></li>
    </ul>

    More icons you can find here: FontAwesome

  6. Save

Language menu

First, you have to set up more than one language for your site.

  1. Go to: Dashboard → Site administration → Language → Language settings
  2. Check Display language menu
  3. Save

Top bar custom text
  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Top Bar
  3. Check "Show Top Bar Text" field
  4. Add custom text or html code.
  5. Save

Samples:
<i class="fas fa-phone"></i><strong>Need help?</strong> +48 888 932 322

Search bar
  1. Go to: Dashboard → Site administration → Advanced features
  2. Check Enable global search
  3. Save

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Footer
  1. Display footer social list
  2. Website Title and URL
  3. Mobile
  4. E-mail
  5. Social icons: Facebook, Twitter, Instagram, Linkedin, YouTube, Google Plus
  6. Custom Footer Text
  7. Copyright Text
  8. Custom Alert

Login Page

Form aligment
  1. Go to: Dashboard → Site administration → Themes → Space
  2. Go to: Login Page
  3. Select:Login Box Position: right, left, center
  4. Save

Login page background
  1. Go to: Dashboard → Site administration → Themes → Space
  2. Go to: Login Page
  3. Check:✓ (Login Page) Show Background Image
  4. Upload Login Background Image
  5. Save

Custom text on the login page - below login form (yellow area).
  1. Go to: Dashboard → Site administration → Plugins → Authentication → Manage authentication
  2. Scroll down to: Instructions
  3. Add some text and Save

Sidebar

Custom Logo (1)
  1. Go to: Dashboard → Site administration → Appearance → Logos
  2. Upload Logo - Front page, login and registration page
  3. Upload Compact logo - on the sidebar
  4. Save

Custom moodle menu (3)
  1. Go to: Dashboard → Site administration → Appearance → Themes → Theme settings
  2. Scroll to: Custom menu items
  3. Save

Custom sidebar navigation(4)
  1. Go to: Dashboard → Site administration → Appearance → Space
  2. Go to: Sidebar
  3. Check: Sidebar Custom Navigation
  4. Add: Sidebar Custom Navigation Title
  5. Add: Sidebar Custom Navigation Links
  6. Save

Custom sidebar content (5)
  1. Go to: Dashboard → Site administration → Appearance → Space
  2. Go to: Sidebar
  3. Check: Turn on Sidebar Custom Box
  4. Add: Sidebar Custom Heading
  5. Add: Sidebar Custom Text
  6. Save

Dashboard

Soon..


Front Page


Hero image

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Front Page
  3. Upload: Photo
  4. Add: Heading
  5. Add: Hero Text
  6. Add: Button Label
  7. Add: Button URL with http:// or https://
  8. Save

Hero Slider

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Slider - Front Page
  3. Check: Enable slider
  4. Select how many slides you want to add then click SAVE to load the input fields.
  5. Upload images and add content then Save

Custom Categories

You can add custom icon, heading, categories list with links or your own content. Everything is described below.

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Front Page
  3. Check: Custom Categories Block

Available fields:

  • Icon:
  • Heading:
  • Content below heading:
  • Column no 1:
  • Column no 2

Custom HTML for Custom Categories Block
Samples:

<ul class="c-courses-list">
	<li><a href="course/view.php?id=9">Celebrating Cultures</a></li>
	<li><a href="course/view.php?id=8">Introduction to Open Education</a><br><span class="small"><i class="far fa-calendar-alt"></i> January - June  <i class="m-l-1 fas fa-graduation-cap"></i> Teacher: Adam Smith</span></li>
	<li><a href="course/view.php?id=7">Digital Literacy</a></li>
	<li><a href="course/view.php?id=6">Celebrating Cultures</a><br><span class="small"><i class="far fa-calendar-alt"></i> January - June  <i class="m-l-1 fas fa-graduation-cap"></i> Teacher: Adam Smith</span></li>
	<li><a href="course/view.php?id=9">Celebrating Cultures</a><br><span class="small"><i class="far fa-calendar-alt"></i> January - June  <i class="m-l-1 fas fa-graduation-cap"></i> Teacher: Adam Smith</span></li>
	<li><a href="course/view.php?id=8">Introduction to Open Education</a><br><span class="small"><i class="far fa-calendar-alt"></i> January - June  <i class="m-l-1 fas fa-graduation-cap"></i> Teacher: Adam Smith</span></li>
	<li><a href="course/view.php?id=7">Digital Literacy</a></li>
	<li><a href="course/view.php?id=6">Celebrating Cultures</a></li>
</ul>

3 Column Block

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Front Page
  3. Check: HTML Block #1
  4. Add: icons, heading and content
  5. Save

2 Column Block

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Front Page
  3. Check: HTML Block #2
  4. Add: content
  5. Save

Full width Block

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Front Page
  3. Check: HTML Block #4
  4. Add: content
  5. Save

Call to action Block

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Front Page
  3. Check: HTML Block #3
  4. Add: content
  5. Save

Team

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: ☺☻☺ Team - Front Page
  3. Check: Team
  4. Select ☺☻☺☻ Number of team members per row. Select how many team members you want to add then click SAVE to load the input fields.
  5. Add: content
  6. Save

Logotypes

  1. Go to: Dashboard → Site administration → Appearance → Themes → space
  2. Go to: Partner logotypes - Front Page
  3. Check: Partner logotypes
  4. Select Number of logotypes. Select how many logotypes you want to add then click SAVE to load the input fields.
  5. Add: content
  6. Save

Custom CSS

Use SCSS or CSS code to change elements on the page. It is the best solution if you want to have your unique look and have the Space theme always up to date.

  1. Go to: Dashboard → Site administration → Appearance → Themes → space → Advanced
  2. Add yout CSS to: Raw initial SCSS or Raw SCSS
Raw initial SCSS

In this field you can provide initialising SCSS code, it will be injected before everything else. Most of the time you will use this setting to define variables.

Raw SCSS

Use this field to provide SCSS or CSS code which will be injected at the end of the style sheet.


Page Loader

Preloader is what you see on the screen while the rest of the page's content is still loading.

  1. Go to: Dashboard → Site administration → Appearance → Themes → space → Advanced
  2. Check: Page Loader

Custom Alert

Preloader is what you see on the screen while the rest of the page's content is still loading.

  1. Go to: Dashboard → Site administration → Appearance → Themes → space → Footer
  2. Scroll to: Custom alert
  3. Check: Custom alert
  4. Add some content: Custom alert content

Google Analytics

  1. Go to: Dashboard → Site administration → Appearance → Themes → space → Advanced
  2. Scroll to field: Google Analytics Code
  3. Enter your Google Analytics code to enable analytics on your website. The code format shold be like [UA-XXXXX-Y]

Translations

Adding new language
  1. Go to: Dashboard → Site administration → Language → Language packs
  2. Select Available language packs (on the right)
  3. Install selected language pack(s)

What can I do with untranslated theme elements?
  1. Go to: Dashboard → Site administration → Language → Language customisation
  2. Select: language to add translation.
  3. Click: Open language pack for editing
  4. Show strings of these components: Select all (Ctrl + A or CMD + A)
  5. Only strings containing: e.g My courses or Get access
  6. Click:Show strings
  7. Add translation and Save

Moodle Manual

For more information on using Moodle, please refer to their Manual.


Rate the Theme

If you like this theme and appreciate our work, please rate it on ThemeForest. To do that, go to your username at the top of the page, click Downloads, find this theme and give us a fair rate.