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

Two color font?

Scheduled Pinned Locked Moved Custom CSS
13 Posts 5 Posters 2.6k Views 5 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.
  • S Away
    sdetweil @ember1205
    last edited by Sep 22, 2022, 10:55 PM

    @ember1205 one can see the value under the text, don’t have to map the whole screen.

    you know what you drew…

    and they have to honor z-index order clipping, so they know what is under what…

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    1 Reply Last reply Reply Quote 0
    • K Offline
      kayakbabe @ember1205
      last edited by Sep 23, 2022, 3:30 AM

      @ember1205 look at the css for text . You want Shadow . It can help with this problem a lot. Won’t make it go away. But help a lot.

      1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @ember1205
        last edited by Sep 23, 2022, 7:07 AM

        @ember1205

        Ref. this; https://forum.magicmirror.builders/topic/15732/contrasting-text-on-a-changing-background-again/3?_=1663916722258

        I think most efficient and easiest way is using text-shadow dropping.

        1 Reply Last reply Reply Quote 1
        • M Offline
          MMRIZE
          last edited by MMRIZE Sep 23, 2022, 7:18 AM Sep 23, 2022, 7:15 AM

          And, for the dynamic colour changing;
          I used that trick on my CX3 modules for full-day events which could have white/black text on the various background colours;
          You can reference the source code of my CX3 modules. (related to magic keywords.)

          But it is a trick, not a sole and firm solution. And it still has a mid-zone ambiguity issue. (white on the grey level or black on the grey level, in both cases, still visibility would not be so good.)

          E 1 Reply Last reply Sep 23, 2022, 11:20 AM Reply Quote 0
          • E Offline
            ember1205 @MMRIZE
            last edited by Sep 23, 2022, 11:20 AM

            @MMRIZE Thanks for the pointer.

            Why wouldn’t I use the “Outline” option? That seems like it would achieve the result I’m after as well?

            Also, I have absolutely no clue where or how to implement these changes. Working my way through CSS and such is an immensely trial-and-error process for me that tends to requires hours of “Developer Console” type access through a browser trying to chase down the files involved, tinkering with changes, and often times not actually getting the result I want without at least breaking one other thing.

            S 1 Reply Last reply Sep 23, 2022, 12:03 PM Reply Quote 0
            • S Away
              sdetweil @ember1205
              last edited by sdetweil Sep 23, 2022, 12:17 PM Sep 23, 2022, 12:03 PM

              @ember1205 everything goes in custom.css you don’t need to change anything else as it would break a module’s ability to update

              the dev window shows you where (file) a class comes from. but u don’t edit that file

              you can change by adding/editing in the top window in elements mode.

              css is hierarchical

              last one in wins

              main.css is first
              module specific css is next
              custom.css is last, it overrides anything above

              so if u wanted to add shadow to .small from main.css

              in costum.css

              .small {
              whatever required
              }

              done, custom.css wins.

              but it might be tedious to find every element class as there is no enforcement for using the mm provided classes…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • R Offline
                rubelahamed
                last edited by Oct 20, 2022, 12:19 PM

                @MMRIZE said in Two color font?:

                I think most efficient and easiest way is using text-shadow dropping.
                I think most efficient and easiest way is using text-shadow dropping.

                S 1 Reply Last reply Oct 20, 2022, 12:27 PM Reply Quote 0
                • S Away
                  sdetweil @rubelahamed
                  last edited by Oct 20, 2022, 12:27 PM

                  @rubelahamed and?

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • 1
                  • 2
                  • 1 / 2
                  • 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