• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Modify the font of the compliment module

Scheduled Pinned Locked Moved Custom CSS
2 Posts 2 Posters 305 Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • H Offline
    Horyzon
    last edited by Mar 19, 2024, 6:08 PM

    Hi all !

    I browsed every post regarding this topic and tried to follow the instructions, but nothing seems to work for me so far.
    I want to use a specific font for the compliments module on my MM.
    I tried to set up my custom.css as follows (to no avail):

    body {	
    }
    
    :root {
      --color-text: #999;
      --color-text-dimmed: #666;
      --color-text-bright: #fff;
      --color-background: black;
    
      --font-primary: "Roboto Condensed";
      --font-secondary: "Roboto";
      
      --font-size: 30px;
      --font-size-small: 0.75rem;
    
      --gap-body-top: 60px;
      --gap-body-right: 60px;
      --gap-body-bottom: 60px;
      --gap-body-left: 60px;
      
      --gap-modules: 30px;
    }
    
    @font-face {
      font-family: "DS";
      font-style: normal;
      font-weight: normal;
      src: locale("Dancing Script Regular"), url('fonts/DancingScript-Bold.woff') format('woff');;
    }
    
    .compliments {
            font-family: "DS";
    	font-weight: 600;
    }
    
    

    Any pointers as to how I could make it work ?
    Thanks a lot !

    S 1 Reply Last reply Mar 19, 2024, 7:39 PM Reply Quote 0
    • S Away
      sdetweil @Horyzon
      last edited by sdetweil Mar 20, 2024, 3:20 AM Mar 19, 2024, 7:39 PM

      @Horyzon the compliments module provides a config option to set the classs or classes for the content

      then you can style it/them in custom.css

      classes:'foo'
      
      .foo {
        color:......
      }
      

      Screenshot_20240319_123533_Chrome.jpg

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • 1 / 1
      1 / 1
      • First post
        1/2
        Last post
      Enjoying MagicMirror? Please consider a donation!
      MagicMirror created by Michael Teeuw.
      Forum managed by Sam, technical setup by Karsten.
      This forum is using NodeBB as its core | Contributors
      Contact | Privacy Policy