slugmuffin / MMM-OnThisDayWikiApi

This is a module for the MagicMirror². It displays historical events from Wikipedia based on the current date using the free Wikimedia API.
MIT License
4 stars 1 forks source link

How to re-add the module header #2

Open mlcampbe opened 10 months ago

mlcampbe commented 10 months ago

I'd like to use your module but I want to customize it for my installation. In my case I want to re-add the module header that most MM modules have at the top of the content with the underbar. For example I normally see something like this for a module:

UPCOMING EVENTS

my calendar data

But it seems with MMM-OnThisDayWikiApi you are somehow suppressing the header altogether. I played around with the css in developer tools and see that the class module-header for the module has a "display: none" style. I can change that to "block" and it will display the underbar but not the defined header text.

So, can you help me figure out how to enable the header text and underbar, even if I need to modify the actual module code and not just custom css that would be ok with me.

slugmuffin commented 10 months ago

@mlcampbe

Could you try removing this and see if it helps.

getHeader() {
    return null;
  },
mlcampbe commented 10 months ago

Thank you for the quick reply and fix. I call myself searching for anything with "header" in it but somehow just completely missed the getHeader function. I am so sorry to bother you with something I should have found myself. Many thanks, I made a couple of other tweaks to the classes in the .js file to make them match the rest of the modules and all is great now.

slugmuffin commented 10 months ago

@mlcampbe Feel free to submit a Pull Request if you have any fixes or improvements.

mlcampbe commented 10 months ago

The changes I made were to the class & span definitions in the .njk file to make the display more consisent with my other modules. For example, you have something like this:

{% if not config.showTitle %}
   <span class="bright light">{{ activeItem.year }}</span><span class="dimmed">:</span>
{% endif %}

In my case I needed to change the style so I changed it to this:

{% if not config.showTitle %}
   <span class="bright regular">{{ activeItem.year }}</span><span class="bright">:</span>
{% endif %}

Notice the change from "bright light" to "bright regular" in the class. I made a couple of other changes along the same lines as well. Maybe I just don't quite understand all of the css setup but I could not find a way to adjust what appears to be hardcoded styles via the custom.css file.

So my only thought would be to move these hardcoded styles over to the css file so I could override them in the MM custom.css. Or, if there is a way to already do this please let me know.