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

MMM-Astrology font color

Scheduled Pinned Locked Moved Custom CSS
12 Posts 4 Posters 4.6k Views 4 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.
  • L Offline
    letmetakeaselfie
    last edited by yawns Oct 17, 2018, 9:50 AM Oct 17, 2018, 3:10 AM

    Hello everyone, i’m trying to change the color of the main text font I’ve tried .header and .content but it seems to not be changing the color. however when i try .MMM-Astrology. title —the color of the title does change. any tips or advice is greatly appreciated as always thank you for helping a noob.

    @font-face 		{
    			font-family: "DancingScript";	
    			src: 
    			url(DancingScript-Regular.ttf) format("truetype");
    		  
    			}
    
    
     body 
    {
    
    
    }
    
    
    
    
    .compliments .xlarge
    		{
    			font-family: "DancingScript";
    			color: #ff96ca;
    			font-size: 50px;
    
    	}
    
    .region.bottom.left{
    			width: 200px
    			}
    .region.bottom.right{
    			width: 200px
    			}
    .region.top.left{
    			width: 200px
    			}
    
    
    .clock .bright{
    font-size: 40px;
    color: #ff96ca
    }
    
    .clock .dimmed{
    font-size: 20px;
    color: #551033
    }
    
    
    
    
    .MMM-Astrology  {
    		
    		font-family: "DancingScript";
    }
    
    .MMM-Astrology .header{
    		color: #ff96ca;
    			}
    
    J 1 Reply Last reply Oct 17, 2018, 4:27 AM Reply Quote 0
    • J Offline
      justjim1220 Module Developer @letmetakeaselfie
      last edited by justjim1220 Oct 17, 2018, 4:46 AM Oct 17, 2018, 4:27 AM

      @letmetakeaselfie

      change the following highlighted part of your MMM-Astrology.css file:

      0_1539751391233_Screenshot (393).png

      can use any type of color code IE:
      words for some colors: red, blue, maroon, etc
      hex code: #ff0000, #00ffff, #b80000, etc
      rgb code, rgb(255, 0, 0), rgb(0, 255, 255), rgb(137, 40, 19), etc

      then save it.

      run MM.

      Enjoy!

      "Life's Too Short To Dance With Ugly People"
      Jim Hallock - 1995

      1 Reply Last reply Reply Quote 0
      • J Offline
        justjim1220 Module Developer
        last edited by Oct 17, 2018, 4:46 AM

        had to edit my first post, Apologies!

        "Life's Too Short To Dance With Ugly People"
        Jim Hallock - 1995

        1 Reply Last reply Reply Quote 0
        • L Offline
          letmetakeaselfie
          last edited by Oct 18, 2018, 1:57 AM

          thanks for the quick reply however that didn’t change the font color for me :/

          J C 2 Replies Last reply Oct 18, 2018, 2:03 AM Reply Quote 0
          • J Offline
            justjim1220 Module Developer @letmetakeaselfie
            last edited by Oct 18, 2018, 2:03 AM

            @letmetakeaselfie

            Strange, It works for me.

            And, you made the cahnge in the MMM-Astrology.css file?

            Or, ADD the full code snippet to your custom.css file

            Either way should work!

            "Life's Too Short To Dance With Ugly People"
            Jim Hallock - 1995

            1 Reply Last reply Reply Quote 0
            • C Offline
              cowboysdude Module Developer @letmetakeaselfie
              last edited by cowboysdude Oct 18, 2018, 2:09 AM Oct 18, 2018, 2:07 AM

              @letmetakeaselfie I wrote MMM-Astrology… do this… in your custom.css

              It worked for the title because there’s a class for that called ‘title’, I just edited it on github and added a class for description called ‘desc’

              Now you can go into your custom.css file like this:
              call your font [put this in the top of your custom.css file]
              @font-face {
              font-family: “DancingScript”;
              src:
              url(DancingScript-Regular.ttf) format(“truetype”);
              }

              .MMM-Astrology .desc{
              font-family: DancingScript-Regular;
              color: blue;
              }
              .MMM-Astrology .title{
              font-family: DancingScript-Regular;
              color: purple;
              }

              J 1 Reply Last reply Oct 18, 2018, 2:10 AM Reply Quote 0
              • J Offline
                justjim1220 Module Developer @cowboysdude
                last edited by Oct 18, 2018, 2:10 AM

                @cowboysdude

                the content is the same as the description, it changed color for me by just changing that part of the css

                "Life's Too Short To Dance With Ugly People"
                Jim Hallock - 1995

                C 1 Reply Last reply Oct 18, 2018, 2:13 AM Reply Quote 0
                • C Offline
                  cowboysdude Module Developer @justjim1220
                  last edited by Oct 18, 2018, 2:13 AM

                  @justjim1220 NEVER advise ANYONE to change a css file, that is what the custom.css is for.

                  And no your answer will not work… there are two different classes…one for title and one for description… IF he’s using the MMM-Astrology module I wrote…

                  J 2 Replies Last reply Oct 18, 2018, 2:16 AM Reply Quote 0
                  • J Offline
                    justjim1220 Module Developer @cowboysdude
                    last edited by Oct 18, 2018, 2:16 AM

                    @cowboysdude

                    Sorry, I thought that was the reason for the css files, to make the changes to suit your needs.
                    I usually add to the custom.css file after I figure out what does what.

                    My apologies! :worried_face:

                    "Life's Too Short To Dance With Ugly People"
                    Jim Hallock - 1995

                    1 Reply Last reply Reply Quote 0
                    • J Offline
                      justjim1220 Module Developer @cowboysdude
                      last edited by Oct 18, 2018, 2:31 AM

                      @cowboysdude

                      what is the content class in the css file?

                      Just curious, because that is how I figured out how to change the color of the description content…

                      0_1539829368008_Screenshot (394).png
                      gives me this…
                      0_1539829384218_Screenshot (395).png

                      and this…
                      0_1539829461402_Screenshot (396).png
                      gives me this…
                      0_1539829434230_Screenshot (397).png

                      When I go to figure out how things work, I make changes to the css file, then move it to my custom.css file, leaving the original intact. I was told to do it this way way back when I first started doing this. I guess I wasn’t told that changing the original was taboo, although, I have always felt I needed to keep the original intact to go back to just ‘in case’.

                      I was told this was the best way to learn, to play with things. Which I do. And if someone asks a question that I have had some experience with, I tend to return the help given to me by you and all the others who have been so awesome and patient with me.

                      I won’t give that advise anymore, I really am sorry, :pensive_face:

                      "Life's Too Short To Dance With Ugly People"
                      Jim Hallock - 1995

                      X 1 Reply Last reply Nov 4, 2020, 10:36 PM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        8/12
                        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