[Feature]: allow custom CSS for each feed

[Offbeatmammal]

Feature Summary

add custom CSS overrides that are feed specific

What problem does this feature solve?

When I am importing a particular website (eg the feed from https://theconversation.com) I get a block of content that in miniflux is wrapped in .entry-content aside that I want to suppress.

In the feed definition, I have added a remove("#share-dropdown-desktop") which (unless I'm misunderstanding) should exclude that from the content that's retrieved but doesn't seem to.

Being able to apply site specific CSS would allow me to suppress it (admittedly in a slightly brute force way) and clean up my reading experience.

Proposed Solution

Similar to how the general settings have a custom CSS entry box, each feed could have an option to add over-ride CSS for what gets displayed only when rendering feeds from that site.

I worry that applying the CSS for all feeds might have unintended consequences.

Alternatives Considered

attempted to stop the ingest of that content to start with, but didn't seem to resolve my issue.

Additional Context

No response

Checklist

• I have searched existing issues to ensure this feature hasn't been requested before.
• I understand that feature requests are not guaranteed to be implemented.
• I agree to follow the project's contribution guidelines.

[dudumaroja]

The Rewrite rules only work when fetching content (either by pressing the download button or setting it to auto-download); they don’t rewrite content coming directly from the feed itself. I just wanted to mention this as it can be confusing for newcomers.

Regarding the example you suggested: the div with the ID share-dropdown-desktop contains share button logic, but it doesn't contain the information that Miniflux displays when you download the article. Note that if I delete this element in Firefox, the image is still there.

Before

After

In my opinion, the rule is likely working, but you may be targeting the wrong element. If you use the rule remove("div.ml-auto"), it will catch the element div class="hidden sm:flex sm:flex-c…tems-end w-full ml-auto". That will remove all the share and print button elements and code.

PS: This isn't necessarily a suggestion to use that specific code. I’m not familiar enough with the site to know if that element is used elsewhere for important things, like quotes, which might accidentally cut out actual article content.

In many feeds I use, unique classes or IDs aren't available to identify elements. In those cases, I often use a replace rule to swap the generated element with nothing: "".

Example:
If the article address is http://randomsite.org/randomarticle.shtml and the share buttons are always there, you can write a rule like this:
replace("(?is)Article Address:.*?shtml"| "")

This will replace anything that begins with "Article Address:" and ends with "shtml," no matter what is in the middle.

I hope this helps! I’m still learning this myself, and I find that helping others is a great way to reinforce the knowledge.

[ColasNahaboo]

Personally, I use external RSS processors for this, to "filter" RSS feeds before injecting them into miniflux, or generating feed for sites without one.
I installed RSS-Bridge, but you have many other "RSS processors" solutions. I even coded one for my personal use for really tricky sites.

In my opinion, in the spirit of minimalism, it is better to leave this complex task outside of miniflux.

However, I think there is a solution. Untested, but maybe, in your custom CSS, you can use the :has() selector to only apply CSS rules if the Feed matches some condition, for instance having entries linking to "the conversation" site:

/* Target only articles originating from The Conversation */
article:has(a[href*="theconversation.com"]) .entry-content aside,
article:has(a[href*="theconversation.com"]) #share-dropdown-desktop {
    display: none !important;
}```

PS: the modern CSS is incredibly powerful, it is worth exploring its new features