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
  • Explanation
  • Sample SCSS code to add

Was this helpful?

  1. Demo Content
  2. Front Page Blocks
  3. Advanced Options

Custom Block Title

Learn how to change the individual block title properties.

Explanation

First, you have to check the block class. You can use the browser site inspector.

E.g for: Block #5 it will be -> .rui-fp-block--5

  • Breakpoints:

      xs: 0,
      sm: 320px,
      md: 768px,
      lg: 1100px,
      xl: 1300px,
      xxl: 1900px

Sample SCSS code to add

Advanced -> Raw SCSS

/* Block #5 */
.rui-fp-block--5 {
	.rui-block-title {
		@include media-breakpoint-up(lg) {
		color: red;
		}
		
		@include media-breakpoint-only(md) {
		color: purple;
		}
				
		@include media-breakpoint-between(xs, sm) {
		color: blue;
		}
	}
}

Results:

PreviousAdditional ClassesNextCustom CSS field

Last updated 2 years ago

Was this helpful?