MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Fit background fade to text



  • Can anyone help me
    I have a fade, on my compliments background. The text is black.
    The problem is, that the fade is fully across the screen, from side to side. I would like it to fit the length of the compliment text only.
    This is my custom css contents
    body {
    color: #000;
    }

    .dimmed {
    color: #000;
    }

    .normal {
    color: #000;
    }

    .bright {
    color: #000;
    }

    .module.clock {
    background-color:rgba(255,255,255,0.6);
    border-radius:8px;
    padding:8px;
    }

    .module.compliments {
    background-color:rgba(255,255,255,0.6);
    border-radius:8px;
    padding:8px;
    }

    .module.calendar {
    background-color:rgba(255,255,255,0.6);
    border-radius:8px;
    padding:8px;
    }

    .module.newsfeed {
    background-color:rgba(255,255,255,0.6);
    border-radius:8px;
    padding:8px;
    }
    Also, how do I mark a previous post as solved ?


  • Module Developer

    @TamP said in Fit background fade to text:

    .module.compliments {
    background-color:rgba(255,255,255,0.6);
    border-radius:8px;
    padding:8px;
    }

    Without having checked for myself, try this:

    .module.compliments div{
      background-color:rgba(255,255,255,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    or

    .module.compliments span{
      background-color:rgba(255,255,255,0.6);
      border-radius:8px;
      padding:8px;
    }
    

    You need to reference not the module itself but the text container the is being created by the getdom method inside the module.
    There is a wrapper div and a span in this div.



  • @lavolp3 Thanks for that.
    Out of curiosity I will give it a try

    I have just this minute managed to get what wanted by positioning the module newsfeed by changing it to center instead of bottom bar
    module: “newsfeed”,
    //position: “bottom_bar”,
    position: “bottom_center”,

    and the complimentets I changed to center. Although this is top center, I am happy with that


Log in to reply