MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

How can I inject some CSS styles in a block of text in Javascript so I can differentiate two different blocks of text



  • Hi I’m kludging some code together, how Can i inject some CSS into this terrible piece of javascript I hacked together. I want to style the elements so that the title is different from the text. Here is what my screen looks like now - its the center piece about Super Troopers:

    alt text
    Id love to bold out "super troopers paul soter is a nimbly-bimly adman as a title to seperate it from the rest of it which is the text/description part.

    Here’s my code block that generates this:

    var ratio = Math.min(200 / Number(fix_width) , 200 / Number(fix_height));
    		var width = fix_width*ratio;
    		var height = fix_height*ratio;
    		var messageElement = document.createElement('div');
    		messageElement.className = 'light medium';
    		messageElement.innerHTML = "<table><tr><td><img src=" + image_bed + " /></td><td>" +  this.slackMessages[0].title + "</td></tr><tr><td>" + this.slackMessages[0].text + "</td></tr></table>";
    		}
    		return messageElement;
    
    


  • @mediathreat you have different possibilities, e.g.

    add a class

    in your td tag add a class attribute class='MyFancyTitle', the forum don't want to render it. Then in your css you can style this class
    

    or add inline styling

    in your td tag add a style attribute style='font-weight: bold'