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 342 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

      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 Reply Quote 0
      • S Offline
        sdetweil @Horyzon
        last edited by sdetweil

        @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
        • First post
          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