• 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
  1. Home
  2. doubleT
  3. Posts
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.
D
Offline
  • Profile
  • Following 0
  • Followers 4
  • Topics 4
  • Posts 176
  • Groups 1

Posts

Recent Best Controversial
  • RE: organization of the text next to the icon.

    @sdetweil I don’t have any modules with uper case letters (MMM- …) at the moment. Can you confirm the module class name is with uper case letters or is it changed to lower case?

    In this situation, with a unique module name, it’s ok to identfy the module without the .module but in general I’d say it’s best practice that if you want to address a specific module, you describe it as precise as possible.
    E.g. there might be a module “image_frame” that you want to address but there’s also a module that somewhere within its structure has one div with the class “image_frame” that you don’t want to address. Then it’s absolutely necessary to address the target with .module.image_frame

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 8:12 PM
  • RE: organization of the text next to the icon.

    The content of the custom.css should be:

    .module.MMM-homeassistant-sensors table tr td:nth-of-type(2) {
        test-align: left;
    }
    .module.MMM-homeassistant-sensors table tr:nth-of-type(3) td,
    .module.MMM-homeassistant-sensors table tr:nth-of-type(6) td {
        border-bottom: 1px solid white;
    }
    .module.MMM-homeassistant-sensors table {
        border-spacing: 0;
    }
    

    All of it. Not just the last part.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 8:07 PM
  • RE: organization of the text next to the icon.

    Yeeeeah … what about the one above that? The 2nd part. ;)

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 8:02 PM
  • RE: organization of the text next to the icon.

    Create a file named “custom.css” and put the code from above inside it.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:58 PM
  • RE: organization of the text next to the icon.

    Ok, please keep in mind that this is not the best solution (working directly in the code).

    If you want to make the changes via custom.css file, try this:

    (Now, since the module is called “MMM-homeassistant-sensors” I’m going to assume the element is identifiable with _“.module.MMM-homeassistant-sensors” …)

    Tell each 2nd cell to align its content left:

    .module.MMM-homeassistant-sensors table tr td:nth-of-type(2) {
        text-align: left;
    }
    

    Tell the cells of the 3rd and 6th line to have a bottom border line:

    .module.MMM-homeassistant-sensors table tr:nth-of-type(3) td,
    .module.MMM-homeassistant-sensors table tr:nth-of-type(6) td {
        border-bottom: 1px solid white;
    }
    

    If the line is separated, try:

    .module.MMM-homeassistant-sensors table {
        border-spacing: 0;
    }
    

    EDIT: There was an error, it’s text-align, of course. Not test-align.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:55 PM
  • RE: organization of the text next to the icon.

    MMM-homeassistant-sensors.js

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:38 PM
  • RE: organization of the text next to the icon.

    If you want to work in the code and are not afraid that an update might overwrite it, you could try to change

    		// Name
    		newCell = newrow.insertCell(1);
    		newText = document.createTextNode(name);
    		newCell.appendChild(newText);
    

    to

    		// Name
    		newCell = newrow.insertCell(1);
    		newCell.className = "align-left";
    		newText = document.createTextNode(name);
    		newCell.appendChild(newText);
    

    That seems to be what’s aligning the icon cell to the left. That css comes from MM’s main.css.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:35 PM
  • RE: organization of the text next to the icon.

    It can be done in css even if there are no class names. Give me a minute.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:27 PM
  • RE: organization of the text next to the icon.

    Ok, I understand. I’m looking at the code and I think it’s not written very good. There are cells named “align-left” and “align-right” – stupid in this case as there’s no CSS for it and the cells are taking their alignment from the module position, it seems.

    Are you familiar with the dev mode? Can you check the html structure of the table and see if the cells and table rows that you try to change have any class names?

    I’m trying to figure this out and then I’d suggest some entries in the custom.css file.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:26 PM
  • RE: organization of the text next to the icon.

    Wait! I think that’s not what @iorifly wants, right?

    If I understand this correct (and it is difficult to understand ;) ) the text in the middle should be aligned left?

    If I place the module on the right side, the text is far from the icons.

    posted in Custom CSS
    D
    doubleT
    Jan 18, 2020, 7:14 PM
  • 1
  • 2
  • 3
  • 4
  • 5
  • 17
  • 18
  • 2 / 18
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