Custom Google Calendar widget using CSS

As with all our widgets, you can use CSS to create a custom Google Calendar widget and match any website design. The setup screen for our Google Calendar widget allows you to create a variety of different styles. However, we understand you may need your widget styling to match your site design more closely, so using CSS you can achieve almost any styling you want.

Tip: If you use an online site building platform with no available storage for CSS files (such as Wix or Weebly), or for any other reason you want to store your CSS file elsewhere, please check out this article on how to use Dropbox to host CSS.

CSS classes in detail

Here are the CSS classes and structure for you to create a custom Google Calendar widget:

custom google calendar widget


Implementation instructions

1. Create a CSS file

Use your favorite text editor or software to prepare the CSS file for your custom Google Calendar widget. Notepad++ is a great free editor that is ideal for creating a CSS file, but there are others available online. All you need is a text editor that does not apply any formatting such as font sizing etc..

A basic file would look something like the example (see below), and produce the simple customization you see in the example below. As you can see the CSS is split into three sections; the Container, Header and Content. We have commented these . You can simply copy this code into your code/text editor and modify the contents, then save is as myfilename.css (or whatever name you want, but it must have the .css extension).

2. Upload the CSS file for your custom Google Calendar widget to your web server

Place the CSS file on your local server or use a service such as Dropbox to store your CSS file offsite. Copy the URL for use in the Feedwind setup screen.

3. Input the CSS URL

Click on the >Advanced Settings link in the “General” section of the setup screen. Enter the URL of the custom CSS location in URL of Custom CSS box. The new design will be displayed in the Preview area.


google calendar widget css


EXAMPLE CSS FOR A CUSTOM GOOGLE CALENDAR WIDGET

 

/* Utilize Google WebFonts in your FeedWind widget */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

/* Styling for the Google Calendar feed container – NOTE: the background-color affects the footer background.*/
#fw-gc-container {
text-align: left;
padding: 0px;
font-family: ‘Noto Sans’, Helvetica, sans-serif;
box-sizing: border-box;
background-color:#4e82d0;
height:auto;
}

/* Styling for the header container*/
#header {
margin: 10px 20px 10px 20px;
color: #fff;
font-size: 18px;
background-color: #888;
}

/* Styling for an individual calendar event item */

.fw-gc-feed-item {
display:block;
}

/* Styling for the Main Calendar Title in the header container*/
.fw-gc-feed-title {
margin: 10px 20px;
font-weight: bold;
word-wrap: break-word;
text-align: center;
text-shadow: 1px 1px 0 blue;
display:block;
}

/* Styling for the Main Title link in the header container*/
.fw-gc-feed-title a:link {
color: #fef;
text-decoration: none;
}

/* Styling for a “visited” Main Feed Title link in the header container*/
.fw-gc-feed-title a:visited {
color: #ddd;
text-decoration: none;
}

/* Styling for a Main Title link on “mouseover” (also known as “hover”) in the header container*/
.fw-gc-feed-title a:hover {
color: #fff;
text-decoration: none;
}

/* Styling for an “active” Main Title link in the header container*/
.fw-gc-feed-title a:active {
color: #fff;
text-decoration: none;
}

/* Styling for the feed body (i.e all Feed Items) container. */
/* WARNING: be careful adding Left or Right Padding as you can lose the scrollbar
when the L/R padding is set to more than 8px; the scrollwheel on a mouse still works however,
but the scrollbar can disappear after 8px of padding either side. Use Margins instead add space around the content container.*/

/* Styling for the Event Feed Items’ content module – i.e. the body container */
.fw-gc-feed-item-content-module {
margin: 10px 10px 10px 0;
padding: 10px;
border-bottom: 1px solid #7a86c4;
border-top: 1px #7a86c4 solid;
box-shadow: 0 1px 1px #222;
/* Fallback color */
background-color:#237ffc;
/* CSS3 color */
background-color: rgba(30, 30, 30, 0.6);
}

/* This is the styling for the Event Item Title in the body container*/
.fw-gc-feed-item-title {
display:block;
}

/* Styling for an “unvisited/unclicked” Event Item Title link in the body container*/
.fw-gc-feed-item-title a:link {
margin: 20px 0 10px 0!important;
color: #8FAF10;
text-decoration: none;
font-size: 16px;
}

/* Styling for a “visited/clicked” Event Item Title link in the body container*/
.fw-gc-feed-item-title a:visited {
color: #39f;
padding: 20px 0 0 0;
text-decoration: none;
}
/* Styling for an Event Item Title link on “mouseover” (also known as “hover”) in the body container*/
.fw-gc-feed-item-title a:hover {
color: #39c;
text-decoration: none;
padding: 20px 0 0 0;
}
/* Styling for an active Event Item Item Title link in the body container*/
.fw-gc-feed-item-title a:active {
color: #09f;
text-decoration: none;
padding: 20px 0 0 0;
}

/* Styling affecting an “unvisited/unclicked” Feed Item anchor for a feed item in the body container*/
.fw-gc-feed-item-link a{
color: #123456;
text-decoration: none;
}

/* Styling for the Description in a Feed Item (i.e. the text of a Feed Item in Thumbnail mode, or text+images in Full HTML mode)*/
.fw-gc-feed-item-description {
font-size: 12px;
text-align: left;
color: #333;
word-wrap: break-word;
text-decoration:none;
display:block;
height:60px;

}

/*This is the styling for the clock icon which appears alongside the date. Use display:none!important to remove it (as below) */

.fa.fa-clock-o{
background: #52ca1d;
padding: 6px;
display: none!important;
color: white;
width: 15px;
text-transform: uppercase;
text-align: center;
font-size: 16px;
}

/* Styling for the Date component of Date/time */

.fw-gc-feed-item-date-only {
background: #52ca1d;
padding: 6px;
display: inline-block;
color: white;
width: 80px;
text-transform: uppercase;
text-align: center;
font-size: 14px;
}

/* Styling for the Time component of Date/time */

.fw-gc-feed-item-time-only {
background: #098e89;
color: white;
padding: 6px;
display: inline-block;
clear: both;
width: 40px;
text-align: center;
margin-top: -3px;
}

/* Styling for the whole date/time container */

.fw-gc-feed-item-date {
padding: 5px 20px 0 20px;
font-size: 14px;
color: #929ba3;
overflow: hidden;
text-overflow: ellipsis;
display: inline-table;
float: right;
margin-top: -125px;
}

 


Here is an example the result of using the above CSS in a Google Calendar widget.


With CSS you can create virtually any custom Google Calendar widget design you want!

Try out the Google Calendar widget today and see how easy it is to build a Feedwind Google Calendar widget

April 26, 2017 11:47 pm