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:

google calendar css specificationis


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

/* This adds the ability to utilize Google WebFonts in your FeedWind widget */
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

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

/* This is the styling for the header container*/
#header {
margin: 10px 20px 10px 20px;
color: #fff;
font-size: 18px;
background-color: #888;
background-image: url(“http://glassho.me/fwtest/bannertop.png”);
background-repeat: repeat-x;
}

.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 feed header title */

.fw-gc-feed-header-title {
border:0 solid #000;
}

/* 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;
}

/* This is the 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;
}

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

/* This is the 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.*/

/* This is the styling for the Event Feed Items’ content module – i.e. the body container */
.fw-gc-feed-item-content-module {
margin: 10px 10px 10px 0;
height: 170px;
padding: 10px;
border-bottom: 1px solid #7a86c4;
border-top: 1px #7a86c4 solid;
box-shadow: 0 1px 1px #222;
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;
}

/* This is the 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: #00aeff;
text-decoration: none;
font-size: 16px;
}

/* This is the 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;
}
/* This is the 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;
}
/* This is the 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;
}

/* This is the 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;
}

/* This is the 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;
margin: 10px 0 0 0;
color: #fff;
font-weight: 300;
word-wrap: break-word;
text-decoration:none;
display:block; }

/* This is the styling affecting a Feed Item Date for a feed item in the body container*/
.fw-gc-feed-item-date {
display:block;
margin: 0 20px 0 3px;
padding: 0 2px 0 3px;
color: #999;
font-size: 10px;
text-align: right;
}

 



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