<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[MMM-cryptocurrency side by side top bar]]></title><description><![CDATA[<p dir="auto">Currently, the currencies are displaying vertically with lots of padding. How can I alter the css to have them displaying side by side in the top bar?</p>
<p dir="auto">This is what it currently looks like.<br />
<img src="https://i.imgur.com/8509w10.png" alt="Current State" class=" img-fluid img-markdown" /></p>
<p dir="auto">And this is what I would like it to look like<br />
<img src="https://i.imgur.com/FeLhLDm.png" alt="What I Would Like" class=" img-fluid img-markdown" /></p>
<p dir="auto">Any help is greatly appreciated!</p>
]]></description><link>https://forum.magicmirror.builders/topic/6751/mmm-cryptocurrency-side-by-side-top-bar</link><generator>RSS for Node</generator><lastBuildDate>Mon, 13 Apr 2026 11:31:16 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/6751.rss" rel="self" type="application/rss+xml"/><pubDate>Sat, 10 Mar 2018 19:01:59 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to MMM-cryptocurrency side by side top bar on Sun, 11 Mar 2018 13:51:25 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/stacheenthusiast" aria-label="Profile: StacheEnthusiast">@<bdi>StacheEnthusiast</bdi></a> You’re right. Tables don’t take styling very well; table rows (<code>tr</code>) insist on taking their own line, so there’s no easy way to move them beside each other. The proposed solution above should circumvent this, putting all the cells (<code>td</code>) into a single row.</p>
]]></description><link>https://forum.magicmirror.builders/post/36883</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/36883</guid><dc:creator><![CDATA[ninjabreadman]]></dc:creator><pubDate>Sun, 11 Mar 2018 13:51:25 GMT</pubDate></item><item><title><![CDATA[Reply to MMM-cryptocurrency side by side top bar on Sat, 10 Mar 2018 23:34:19 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/ninjabreadman" aria-label="Profile: ninjabreadman">@<bdi>ninjabreadman</bdi></a><br />
Wow, terrific answer and thank you. I will give this a shot and post what I come up with. My attempt at setting the tr widths from custom.css was getting no where.</p>
]]></description><link>https://forum.magicmirror.builders/post/36862</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/36862</guid><dc:creator><![CDATA[StacheEnthusiast]]></dc:creator><pubDate>Sat, 10 Mar 2018 23:34:19 GMT</pubDate></item><item><title><![CDATA[Reply to MMM-cryptocurrency side by side top bar on Sat, 10 Mar 2018 22:41:14 GMT]]></title><description><![CDATA[<p dir="auto">Hi <a class="plugin-mentions-user plugin-mentions-a" href="/user/stacheenthusiast" aria-label="Profile: StacheEnthusiast">@<bdi>StacheEnthusiast</bdi></a>, in <code>getDom()</code> at <code>MMM-cryptocurrency.js:164</code> it creates the layout for the module in a <code>table</code>. It loops through, and for each currency creates a <code>tr</code> (table row) and <code>td</code> (table cell).</p>
<p dir="auto">It looks a bit like this:</p>
<p dir="auto"><img src="/assets/uploads/files/1520721638765-screen-shot-2018-03-10-at-5.33.03-pm.png" alt="0_1520721637727_Screen Shot 2018-03-10 at 5.33.03 PM.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">So I think if you take the <code>tr</code> creation outside of the loop, it should work:</p>
<pre><code>getDom: function() {
    if (this.config.displayType == 'logo' || this.config.displayType == 'logoWithChanges') {
        this.folder = (this.config.coloredLogos ? 'colored/' : 'black-white/')
        return this.buildIconView(this.result, this.config.displayType)
    }
    var data = this.result

    var wrapper = document.createElement('table')
    wrapper.className = 'small mmm-cryptocurrency'

    var tableHeader = document.createElement('tr')
    tableHeader.className = 'header-row'

    var tableHeaderValues = [
        this.translate('CURRENCY'),
        this.translate('PRICE')
    ]
    if (this.config.headers.indexOf('change1h') &gt; -1) {
        tableHeaderValues.push(this.translate('CHANGE') + ' (1h)')
    }
    if (this.config.headers.indexOf('change24h') &gt; -1) {
        tableHeaderValues.push(this.translate('CHANGE') + ' (24h)')
    }
    if (this.config.headers.indexOf('change7d') &gt; -1) {
        tableHeaderValues.push(this.translate('CHANGE') + ' (7d)')
    }
    for (var i = 0; i &lt; tableHeaderValues.length; i++) {
        var tableHeadSetup = document.createElement('th')
        tableHeadSetup.innerHTML = tableHeaderValues[i]
        tableHeader.appendChild(tableHeadSetup)
    }
    wrapper.appendChild(tableHeader)

    var trWrapper = document.createElement('tr') // moved from below
    trWrapper.className = 'currency' // moved from below

    for (i = 0; i &lt; data.length; i++) {
        var currentCurrency = data[i]
//      var trWrapper = document.createElement('tr')
//      trWrapper.className = 'currency'
        var name
        if (this.config.displayLongNames) {
            name = currentCurrency.name
        } else {
            name = currentCurrency.symbol
        }

        var tdValues = [
            name,
            currentCurrency.price,
        ]
        if (this.config.headers.indexOf('change1h') &gt; -1) {
            tdValues.push(currentCurrency.percent_change_1h + '%')
        }
        if (this.config.headers.indexOf('change24h') &gt; -1) {
            tdValues.push(currentCurrency.percent_change_24h + '%')
        }
        if (this.config.headers.indexOf('change7d') &gt; -1) {
            tdValues.push(currentCurrency.percent_change_7d + '%')
        }

        for (var j = 0; j &lt; tdValues.length; j++) {
            var tdWrapper = document.createElement('td')
            var currValue = tdValues[j]
            // If I am showing value then set color
            if (currValue.includes('%')) {
                tdWrapper.style.color = this.colorizeChange(currValue.slice(0,-1))
            }
            tdWrapper.innerHTML = currValue
            trWrapper.appendChild(tdWrapper)
        }
//      wrapper.appendChild(trWrapper)
    }
    wrapper.appendChild(trWrapper) // moved from above
    return wrapper
},
</code></pre>
<p dir="auto">I’ve not run this code, as I don’t use <code>MMM-cryptocurrency</code>, but I think it should work. Just be careful when modifying your <code>MMM-cryptocurrency.js</code> to only replace the <code>getDom()</code> function. I also don’t think this <em>should</em> break any of the module’s functionality or styling.</p>
<p dir="auto">Worst case, you can always use <code>git checkout MMM-cryptocurrency.js</code> to revert to the original version.</p>
]]></description><link>https://forum.magicmirror.builders/post/36860</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/36860</guid><dc:creator><![CDATA[ninjabreadman]]></dc:creator><pubDate>Sat, 10 Mar 2018 22:41:14 GMT</pubDate></item><item><title><![CDATA[Reply to MMM-cryptocurrency side by side top bar on Sat, 10 Mar 2018 20:58:30 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/stacheenthusiast" aria-label="Profile: StacheEnthusiast">@<bdi>StacheEnthusiast</bdi></a></p>
<p dir="auto">Update: I have taken the cowards way out and trimmed the currencies and duplicated the modules config into different regions of the config.js like top_left, top_center, and top_right. This has solved the issue.</p>
]]></description><link>https://forum.magicmirror.builders/post/36842</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/36842</guid><dc:creator><![CDATA[StacheEnthusiast]]></dc:creator><pubDate>Sat, 10 Mar 2018 20:58:30 GMT</pubDate></item></channel></rss>