Customizing RSS feed without plugins

  • Unknown's avatar
    lrncfarmn · Member ·

    Hello
    Is there a way to customize the RSS feed shortcode using the CSS?

    The blog I need help with is: (visible only to logged in users)

  • aleone89 · Staff ·

    Hello there,

    It’s not possible to customize an RSS feed with CSS as it’s essentially just a file.

    Can you offer more information as to what you’re looking to do? I’ll happily try and point you in the right direction.

  • Unknown's avatar
    lrncfarmn · Member ·

    Thank you for your response. Sometimes, I need to change the appearance of individual fields in an RSS feed. To be able to change the RSS font, I had to include it in an HTML block as a short code. The problem is that the shortcode for RSS does not come with the option to specify the number of feeds. I only need a few. Even though rather complicated, there might be a way around it if I knew how to customize the shortcode. But I don’t know how to do that. As for an RSS feed block, from what I understand, an RSS feed block has three subclasses:
    title
    publish-date
    excerpt.

    I tried adding a CSS code like this:
    .MyRss {
    font-size: 11px;
    font-family: Arial;
    color: purple;
    }
    It changed the font for the entire feed. But when I tried t change it for only one feed and leave the rest by adding a code like this:
    .MyRss .item .publish-date {
    font-size: 11px;
    font-family: Arial;
    color: purple;
    }
    It didn’t make any changes. Do you have any suggestions?

  • fstat · Staff ·

    Hi, do you want to change the font in the feeds on this page https://lrncfarmn.org/feeds/ ?

    If that’s the case, then you can use this CSS code:

    a.rsswidget, .rssSummary, .rss-date {
    font-family: “Gentium Book Basic”,serif;
    }

    If you’re referring to changing the fonts in your site’s RSS feed, then that’s not possible as this is just a file and each RSS reader renders the feed items based on their default font.

  • Unknown's avatar
    lrncfarmn · Member ·

    Thank you very much. It worked for two fields rss-date and rssSsummary. I am not sure what you mean by my site’s RSS feed. If you are referring to the RSS block (as opposed to the RSS shortcode), then it seems that I have not been able to have any success in changing the font for all items on the feed. I tried this feed:
    ul.wp-block-rss, li.item, div.item-title, time.item-publish-date {
    font-size: 22px;
    color: green;
    font-family: “Gentium Book Basic”, serif;
    }
    It only changed everything to green. Shall I give up on changing individual fields’ look for the RSS block?

  • supernovia · Staff ·

    Hi! I do want to clarify we can’t go too in depth with CSS help here. But if you’d like us to just take a look, could you send a link to the affected page?

    Are you using Inspect Element to test your changes?

    One thing that might help, too: on the page where you’re adding the block, under Advanced, you can add a class to your block. That should make targeting easier.

  • Unknown's avatar
    lrncfarmn · Member ·

    Hello and thank you.
    Assuming that by site’s RSS feed you mean the RSS block since I have already been told by two people that the RSS feed fonts for the web cannot be changed, I will be fine with that. I am not sure what Inspect Element is that you mentioned. It may be a feature not included in my plan (premium). However, since you asked, I will create a page called My RSS Block Test. The page will contain only one RSS feed block. In the advanced section, I will include the CSS class codes for the changes in the font for that block. The address to that page is:
    https://lrncfarmn.org/my-rss-block-test/
    This is an advanced subject beyond my scope. I am not even sure I am writing the CSS class codes correctly. I will write the custom RSS codes (assuming that it is changeable) the way I normally declare any class. If you wish to go deeper into detail with my CSS codes, this will be the code I have been writing:

    .MyRSS, .item {
    font-size: 44px;
    color: yellow;
    font-family: “Gentium Book Basic”, serif;
    }
    .MyRSS, .item, .item-title {
    font-size: 44px;
    color: black;
    font-family: “Gentium Book Basic”, serif;
    }

    MyRSS, .item, .item-publish-date {
    font-size: 33px;
    color: Green;
    font-family: “Gentium Book Basic”, serif;
    }

    .MyRSS, .item, .item-excerpt {
    font-size: 11px;
    color: purple;
    font-family: “Gentium Book Basic”, serif;
    }

    Otherwise, I assume that (as I understand) the RSS block fonts cannot be changed for each field individually (i.e only for date), and will be fine with that. Thank you for your help.

  • staff-zinnia · Staff ·

    I am not sure what Inspect Element is that you mentioned.

    Great question. This is actually part of your browser. When looking at your site right click, then choose inspect from that menu. This is a space where you can test the CSS on the live site to see the changes and then if they work, you can add it to the actual site through your WordPress.com editing. You can also hover on certain areas of the site to learn what their classes are, and styling too.

    I found this article that shows you how to do that: https://kb.blackbaud.com/knowledgebase/Article/96839

  • Unknown's avatar
    lrncfarmn · Member ·

    I think I know what you are referring to now. I believe that is possible only on Mac and PC, not on iPad. I can still view the source code find the class and its hierarchy then write the CSS code to declare that class on iPad.

  • staff-totoro · Staff ·

    From what I can see you may be able to use an app like this (with the Mobile Safari browser) to inspect webpage elements as well: https://apps.apple.com/us/app/web-inspector/id1584825745

    Hope that helps!

  • Unknown's avatar
    lrncfarmn · Member ·

    I finally got there. Thank you.

  • The topic ‘Customizing RSS feed without plugins’ is closed to new replies.