How to customize the CSS of the TrendMD widget

In general, the widget will automatically match the CSS styling of where it is placed, but you can customize the CSS using the !important rule.
Here is an example using the !important rule.
Sample HTML code : <div id="trendmd-suggestions"> [...] <div class="trendmd-widget-inner"> <div class="trendmd-widget-section"> [...] </div> </div> [...] </div>` CSS code : /* Our definition */ .trendmd-widget-section { margin: 0 !important; padding-left: 0 !important; border: none !important; } /* How to add a border (even if our definition has !important) */ #trendmd-suggestions .trendmd-widget-section { border: 1px solid red !important; } The widget is enclosed in a container with the id "trendmd-suggestions". All its classes can be overridden using CSS instructions prefixed with the container id.

Customizing the title #trendmd-suggestions .trendmd-widget-header__heading { color: red !important; font-size: 24px !important; font-family: serif !important; } Customizing the suggestions links #trendmd-suggestions .trendmd-widget-list-item__link { text-decoration: underline !important; color: blue !important; } Customizing the suggestion description #trendmd-suggestions .trendmd-widget-list-item__meta span { color: black !important; font-style: italic !important; }