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

newbie css help

Scheduled Pinned Locked Moved General Discussion
2 Posts 1 Posters 194 Views 1 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.
  • U Offline
    unison
    last edited by Apr 11, 2024, 5:03 PM

    Hi all
    used this in my css custom file from CSS experiments for newbies (thx to Piranha1605) I’m new to css
    but got everything i want working . what i want is to shorten the banner for the newsfeed. i want it to stop and start only around the text that newsfeed gives… thx in advance unison

    html {
    cursor: default;
    overflow: hidden;
    background: #000;
    }

    body {
    margin: 10px;
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin-bottom: -10px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    color: rgba( 0, 150, 254, 1 );
    background: transparent;
    }

    header {
    background: transparent;
    padding: 0.5rem;
    text-align: center;
    font-size: 20px;
    color: rgba( 0, 150, 254, 1 );
    text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
    border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
    }
    .dimmed {
    color: rgba( 0, 150, 254, 1 );
    }

    .normal {
    color: rgba( 0, 150, 254, 1 );
    }

    .bright {
    color: rgba( 0, 150, 254, 1 );
    }

    /**

    • module.color_border_shadow
      */
      .module.clock,
      .module.calendar,
      .module.newsfeed,
      .module.weatherforecast,
      .module.currentweather,
      .module.compliments {
      padding:8px;
      border-radius: 10px;
      border-color: rgba( 0, 150, 254, 1 );
      box-shadow: 0 0 25px 2.5px rgba( 0, 150, 254, .4 );
      background: #000;
      }

    .clock .time {
    font-size: 80px;
    text-align: center;
    margin-top: 25px;
    color: rgba( 0, 150, 254, 1 );
    padding: 15px;
    }
    .clock .date {
    background: transparent;
    padding: 5px;
    text-align: center;
    border-bottom: 0.7px solid rgba( 0, 150, 254, 1 );
    color: rgba( 0, 150, 254, 1 );
    text-shadow: 0 0 30px rgba( 0, 150, 254, .7 ), 0 0 50px rgba( 0, 150, 254, 1 );
    font-size: 20px;
    }

    /**

    • module.width_height
      */
      .module.calendar {
      width:450px;
      height: 320px;
      }
      .module.weatherforecast {
      width:400px;
      height: 220px;
      }
      .module.currentweather {
      height: 180px;
      width:400px;
      text-align: center;
      }
    1 Reply Last reply Reply Quote 0
    • U Offline
      unison
      last edited by Apr 12, 2024, 2:35 PM

      changed css file now the compliments banner is to small and gone to the left instead of center

      body {
      margin: 10px;
      position: absolute;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      margin-bottom: -10px;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1.5;
      color: rgba( 0, 150, 254, 1 );
      back.ground: transparent;

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