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

      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

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