Category: Resources

Some resources for FeedWind and RSS users

CSS for Google Calendar Event Date & Time Elements

custom google calendar widgetWe have just introduced new classes for the Google Calendar widget date & time components.

These allow you to customize the date and time with CSS and achieve any styling you want. You can match your website style and make your Calendar Event date/time more prominent in the feed.

This article focuses on the CSS used for the date/time components of your custom Google Calendar widget. You can find out more about how to use CSS to style the remaining widget components in our in-depth article on Google Calendar CSS.

Custom Google Calendar Widget CSS Classes

These are the relevant classes for Google Calendar event date/time:

‘Clock icon’ class

This class is for the clock icon which appears alongside the date/time by default.

.fa.fa-clock-o

Note – If you wish to hide this icon you can use:

.fa.fa-clock-o {display:none!important;}

‘Time’ class

The ‘Time’ class styles the time element of the date/time.

.fw-gc-feed-item-time-only

‘Date’ class

The ‘Date’ class styles the date element of the date/time.

.fw-gc-feed-item-date-only

‘Date & Time’ class

This class styles both date and time components. Useful for adding a border around the whole date+time element, or to reposition the whole date+time element using margins.

.fw-gc-feed-item-date

Using these CSS classes you can create a widget such as the example below. You can find the full CSS used for this custom Gcal widget here.

If you need any assistance with customizing your Google Calendar widget, please contact us and we’ll be happy to help!

Supported site building platforms

The FeedWind RSS widget is suitable for many popular site building platforms, both on and offline. We support many website building platforms. Here is a list of those we have successfully tested and created support articles for:

Online site building platforms / blogs

Desktop website building software

  • Adobe Dreamweaver
  • Adobe SiteBuilder
  • Serif PagePlus

Online site building platforms come in various configurations with free, paid and freemium versions available. One of the features that can differentiate between a paid version and a free version is the availability of a HTML module – i.e. an input area (usually within the text editor, or a web building/code module where HTML can be pasted.

The FeedWind code provided from our setup screen after a widget has been created and saved, is suitable for pasting into these input areas.

Make sure you paste our code into the right editor

The text editor found on many platforms has an alternative view which allows you to view/edit HTML. When the text editor supports HTML, these are usually available as a link from the editor menu which looks like one of these examples

< >  or  </>  or   <HTML>   or  Source or in WordPress, the  Text tab of your page/post editor.

When the editor opens, you will be able to paste the FeedWind code you have copied from the setup screen.

If you attempt to copy the FeedWind code into a formatting editor (WYSIWIG-style editor), you will simply see the code displayed instead of the widget. The right editor must be used in order for FeedWind to work correctly.

If you are not sure where to place your code in your site builder, please contact us and include the name of your site builder in the contact request details.