• 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.

compliments reduce font size and move down a little bit

Scheduled Pinned Locked Moved Custom CSS
4 Posts 3 Posters 1.1k Views 3 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.
  • K Offline
    kusselin
    last edited by kusselin Dec 26, 2020, 5:19 PM Dec 26, 2020, 5:08 PM

    Hello everyone and have a nice Christmas,
    where in which css file can I reduce the font of “compliments”? and how with which variables ?? and move a little bit down in the mirror?
    Thank you very much for a short feedback.

    S 1 Reply Last reply Dec 26, 2020, 5:24 PM Reply Quote 0
    • S Offline
      sdetweil @kusselin
      last edited by Dec 26, 2020, 5:24 PM

      @kusselin u always put css changes in custom.css

      once u know the class to change

      according to the doc, compliments uses

      classes	Override the CSS classes of the div showing the compliments
      
      Default value: thin xlarge bright
      

      which u can change in config, or you can override in custom.css

      .modulename .class { … }

      u might be able to use large instead of xlarge (for the size part)

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • K Offline
        kusselin
        last edited by kusselin Dec 27, 2020, 10:41 AM Dec 27, 2020, 10:36 AM

        hello sam…, but where can i find the css class…in custom.css i don´t find anythin also in main.css… :-(

        EDIT:

        O.K. i found this in main.css and put this with smaller numbers…then it´s ok.

        Thank you sam

        1 Reply Last reply Reply Quote 0
        • K Offline
          keineAhnung123
          last edited by Jan 16, 2021, 2:03 PM

          Hello @sdetweil
          I have a similar question: I want the compliments module to have the same appearance as the title of the newsfeed module.

          found in newsfeed-code:

          			if (!this.config.showFullArticle) {
          				const title = document.createElement("div");
          				title.className = "newsfeed-title bright medium light" + (!this.config.wrapTitle ? " no-wrap" : "");
          				title.innerHTML = this.newsItems[this.activeItem].title;
          				wrapper.appendChild(title);
          			}
          

          so i want the compliments style to be “bright medium light”

          the compliments code shows

          	getDom: function () {
          		var wrapper = document.createElement("div");
          		wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";
          

          Im not sure how to modify the custom.css.
          Something like:

          .compliments .class {
          bright medium light;
          }
          

          Can you help me? :)

          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