Good morning all,
On the website I’m currently working on, I’d like to implement an RSS feed for our Foundation’s Facebook page. I had no problem making that happen, however the aesthetic of the RSS feed as it currently stands is very unappealing and does not flow with the rest of the site – allsacredfoundation.org.
Is there a way to use custom CSS to alter the visual attributes of the feed? I’d like to make the colors coordinate with the site and make the fonts smaller. Additionally, is there a way to display a [if the post has an associated image] thumbnail (image) of the post along with the text?
Thanks so much for your help!
Regards,
Jonathon
All Sacred Foundation
Hi Jonothan
I don’t believe it’s possible to get images in the feed using the default widget. Would you perhaps like to try an alternative widget to pull the feed?
http://wordpress.org/plugins/rss-feed-widget/
Something like that. We can then re-look at formatting once the images are being pulled.
Andrew,
As always, thanks for the help. I downloaded and installed the widget – I like it a lot! Of course, now the question becomes how to format it. I like that it is using the theme attributes, but obviously the header text is far too large and I’d like to modify the color and size of the body text as well. I presume this is where some custom CSS comes in? Also, should I add the widget into the sidebar in the pagebuilder section of each page or in the customization menu for the theme? Is one way over the other preferred? Thanks!
Regards,
Jonathon
Glad we’re making progress.
Utilising a widget area under Appearance > Widgets will be lower admin as you won’t need to re-insert the feed on a per page/post basis.
Please send through a demo page with the feed inserted into the area you think you’ll like to display it and I’ll send back some formatting ASAP.
Andrew,
Sorry for the delay in my response. I went ahead and added the widget in the manner you suggested. Doing so actually improved the formatting quite a lot, though I would still like to change font color, font size, etc. Possibly other elements of the display as well.
In the process of integrating the feed into my sidebar, I’ve noticed something a bit odd. As of now, the widget should apply to all pages since it was set in appearance > widgets, however, the widget seemingly only displays on pages that are not using page builder for layout:
Both: http://allsacredfoundation.org/ and: http://allsacredfoundation.org/about/ are currently using page builder for their respective layouts. As you can see, the feed widget is not displaying.
However, both: http://allsacredfoundation.org/about/mission/ and: http://allsacredfoundation.org/sacredblog/ are not using page builder and the widget displays properly.
Does this have something to do with specific settings in the theme, or does the widget simply not properly integrate with page builder-based pages? Obviously this is fairly important to me since I would like to take advantage of the power of page builder on pretty much all of my pages.
Please advise regarding the viability of the widget. If it is indeed workable, please provide formatting guidance.
As always, thank you so much for your assistance! If you need any addition information, please let me know.
Thanks!
-Jonathon
No problem.
The sidebar will appear on all posts, archive pages and any pages running the Default page template. You can change the page template for pages in the right column drop down menu. OR run something like Jetpack Widget Visibility: http://jetpack.me/support/widget-visibility/
Take a look at the page template on those pages, if that’s resolved we can move onto formatting.
Andrew,
Perfect. Advice worked well. Before moving on to the formatting, I have one more question:
-On certain pages, I would like to use a different RSS feed specific to the various organizations we work with. An example can be found here: http://allsacredfoundation.org/allies/artfromashes/ – as you can see, the widget does not appear to display text properly as it is truncated and cut off. This only happens when attempting to integrate the widget through page builder. Is this something that can be fixed or remedied? If not, no big deal, just curious.
Beyond that, here’s an example of a page set to the proper default template displaying the RSS widget: http://allsacredfoundation.org/sacredblog/ – I’m a fan of the aesthetic so, once again, thanks for the suggestion. I would love to change the font, font size, and font color if possible.
Thanks!
Super.
Please try this under Appearance > Custom CSS and edit as required:
/* RSS Widget */ .rfw_dock a { color: #248cc8 !important; text-decoration: none !important; } .rfw_dock a:hover { color: #f47e3c !important; } .rfw_dock h3 { font-size: 18px !important; margin: 0 0 10px !important; text-align: center !important; } .rfw_dock li { color: #666666 !important; font-size: 16px; text-align: left; }If in doubt about what values you can assign to each property, head over to W3Schools and take a look. E.g:
http://www.w3schools.com/cssref/pr_text_text-align.asp
Does Settings > Reading > For Each Article In Feed Show: Full Text or Summary – change anything? What’s it set to right now?
Andrew,
You are the man! The custom CSS you provided did the trick and allowed me to format the widget is a fashion that i feel best flows with the site. The formatting change worked both for my global widget as well as the local widget inserted through page builder.
I went to Settings > Reading > For Each Article in Feed Show: – it was set to full text and I changed it to summary. Did not appear to effect anything.
Everything is in order for the most part, but the widget is still displaying somewhat wonky when integrated through page builder: http://allsacredfoundation.org/allies/artfromashes/ – the formatting is spot on, but the title and text still seem out of alignment relative to the container. Not by much, but you can see that roughly 2 or so letters get cut off on the right. I went ahead and added the widget to larger space (approximately 60% width) of an additional row and the problem still exists, which is a bit perplexing to me. Also, the overall formatting of the text seems a bit strange compared to the global widget, in terms of line spacing and so forth.
Any thoughts or suggestions? If this turns out to be some sort of incompatibility, or a problem without a solution, I can simply disable local widget or accept that it is going to be a bit off centered.
Once again, thank you so much for your help and insight.
Regards,
Jonathon
You could try removing the list item margin as follows:
.entry-content .bx-wrapper ul li { margin-left: 0 !important; }Not sure what might be causing the truncation thought. Is there perhaps something in the plugins settings?
It’s possible to add a line height property here:
.rfw_dock li { line-height: 24px !important; }Just copy that one line into the existing selector. So copy line-height: 24px !important; into .rfw.dock li and edit 24px as required.
I’d need more info on what else you’d want to change there if required.
Andrew,
Boom! Your suggestion to remove the list item margin worked like a charm! Additionally the line-height code worked to remedy the spacing issue. Everything now looks fantastic. Can’t thank you enough. If we ever cross paths, I’ll buy you a beer!
Have a great day and week!
Regards,
Jonathon
Glad that helped! All the best for the rest of your project. Have a great week too.
Cheers.