monocolor
Get this themeSupport
  • monocolor
  • Changelog
  • Requirements
  • Getting started
    • Theme Installation/Update
    • Translations
    • Recommended plugins to install
      • Atto Editor: Full Screen
      • Atto Editor: Advanced Link
  • Demo Content
    • Demo content
    • Front Page Blocks
      • Show/hide for non-logged in users
      • Blocks Order
      • Block #0 - Default Moodle Front Page Blocks
      • Hero Blocks
        • Block #1 - Hero Slider
        • Block #2 - Video Hero
        • Block #3 - Hero Image
        • Block #4 - Hero Slider #2
      • HTML Blocks
        • Team
          • Block #17.1, #17.2, #17.3
        • Categories List
          • Block #19
        • Logotypes
          • Block #15
        • Testimonials
          • Block #14.1, #14.2, #14.3
        • Content
          • Block #8
          • Content #1
          • Block #16
          • Block #20
        • Grid Content
          • Animated images with the content (5)
          • Grid with Icons (6.1, 6.2)
          • Block #9.1 , #9.2
          • Block #10
          • Block #11
          • Block #12
          • Block #13
        • FAQ
          • Block #18
        • Call to Action
          • Block #21
          • Block #22
      • Advanced Options
        • Additional Classes
        • Custom Block Title
        • Custom CSS field
        • Custom CSS/SCSS for Blocks
        • Gradient Titles
        • Rounded Boxes/Containers
        • Rounded Images
      • Re-usage HTML code snippets
  • UI Kit
    • Global Styles
      • Typography
      • UI Elements
      • Headings/Text Modifications
    • Course Layout
      • Standard View
      • Tab Layout
    • Course Formats
    • Paid Courses
  • Theme Settings
    • General
    • SEO
    • Customization
      • Google Fonts
      • Colors
    • Login page
    • Top Bar
    • Footer
    • Course Page
    • Google/Custom Fonts and GDPR
  • Custom Enrollment Page
  • More
    • 🕶️Show/hide for non-logged in users
    • 🌑Show/hide on the Dark Mode
    • Server recommendations
    • Graphics, Icons etc.
Powered by GitBook
On this page
  • Demo Settings
  • Available options

Was this helpful?

  1. Demo Content
  2. Front Page Blocks
  3. Hero Blocks

Block #4 - Hero Slider #2

Hero Slider #4

PreviousBlock #3 - Hero ImageNextHTML Blocks

Last updated 2 years ago

Was this helpful?

Script: . MIT Licensed, v7.0.8 released on October 4, 2021

Demo Settings

  • Full-width container: Off

  • Content Wrapper Alignment: Left

  • Slider interval: 7000

  • Slides: 3

Slide Heading: Meet a new Moodle Theme

Slide Caption: (Switch to the HTML/Code View)

HTML Code
<p class="text-size-xl">Get this amazing theme <a class="underline--anim">today.</a></p>
<p class="text-size-md">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>
More options
If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin

Slide Image:

  • Size: 1200px x 600px

Slide Heading: Works with Moodle 4.x

Slide Caption: (Switch to the HTML/Code View)

HTML Code
<p class="text-size-lg">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>
More options
If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin

Slide Image:

  • Size: 1200px x 600px

Slide Heading: Just wow!

Slide Caption: (Switch to the HTML/Code View)

HTML Code
<p class="text-size-xl">Get this amazing theme <a class="underline--anim">today.</a></p>
<p class="text-size-md">The Monocolor theme is fully compatible with the latest Moodle version.</p>
<p class="text-size-xs mt-3">Learn how to use this theme. Check out <a href="https://rosea.gitbook.io/monocolor/" class="underline--anim" target="_blank">extended documentation.</a></p>
More options
If you want to display or hide some elements for non-logged-in users use dedicated class names:
For non-logged-in users: hidefornotloggedin
For logged-in users: hideforloggedin

Slide Image:

  • Size: 1200px x 600px

Available options

  • Full-width container (Full width: 100%, Standard: max-width: 1200px )

  • Block Intro Content (HTML Content before the block)

  • Content Wrapper Alignment (Left, Middle, Right)

  • Heading Size (Normal, Large, Extra Large)

    Normal: 40px , Large: 60px , Extra Large: 80px
  • Heading Color (Black, White, Gradient)

    Gradient: $primary-color-200, $primary-color-600
    
    // CSS class
    .rui-text--gradient
  • Heading Font Weight (Normal, Medium, Bold)

  • Show Colorized Content Wrapper (On/Off)

    • Content Wrapper Color (HEX)

  • Slider interval

  • Slider Count (up to 7 slides)

Credits Unsplash:

Credits Unsplash:

Credits Unsplash:

Get the demo Image
https://unsplash.com/photos/Vc2dD4l57og
Get the demo Image
https://unsplash.com/photos/Z4T5tts0wLM
Get the demo Image
https://unsplash.com/photos/rReG42Hkqo4
Additional Class Name (For developers)
Swiper