Create custom design Google Calendar widget
- Widget Settings
-
-
Create widget ->
Google Calendar
-
Google Calendar ID ->
feedwindmikle@gmail.com
-
General -> Width -> Responsive/In Pixels ->
Responsive
-
General -> Height -> Events->
3
-
General -> Scroll ->
ON
-
General -> Scroll ->
Horizontal
-
General -> Scroll -> Navigation arrow ->
ON
-
General -> Scroll -> Autoscroll ->
OFF
-
General -> Scroll -> Fade transition ->
OFF
-
General -> Advanced Settings -> Customs CSS Link -> Show custom css
Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting. /* Copy CSS from here */ #fw-gc-feed-items-scroll-area { background: transparent; } header { background: #C04848; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #480048, #C04848); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #480048, #C04848); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color: white; } .fw-gc-feed-header-title .fa { padding-right: 15px; animation: animationFrames linear 1.8s; animation-iteration-count: infinite; transform-origin: 50% 50%; -webkit-animation: animationFrames linear 1.8s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -moz-animation: animationFrames linear 1.8s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -o-animation: animationFrames linear 1.8s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -ms-animation: animationFrames linear 1.8s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; } @keyframes animationFrames { 0% { transform: translate(0px, 0px); } 15% { transform: translate(0px, -25px); } 30% { transform: translate(0px, 0px); } 45% { transform: translate(0px, -15px); } 60% { transform: translate(0px, 0px); } 75% { transform: translate(0px, -5px); } 100% { transform: translate(0px, 0px); } } @-moz-keyframes animationFrames { 0% { -moz-transform: translate(0px, 0px); } 15% { -moz-transform: translate(0px, -25px); } 30% { -moz-transform: translate(0px, 0px); } 45% { -moz-transform: translate(0px, -15px); } 60% { -moz-transform: translate(0px, 0px); } 75% { -moz-transform: translate(0px, -5px); } 100% { -moz-transform: translate(0px, 0px); } } @-webkit-keyframes animationFrames { 0% { -webkit-transform: translate(0px, 0px); } 15% { -webkit-transform: translate(0px, -25px); } 30% { -webkit-transform: translate(0px, 0px); } 45% { -webkit-transform: translate(0px, -15px); } 60% { -webkit-transform: translate(0px, 0px); } 75% { -webkit-transform: translate(0px, -5px); } 100% { -webkit-transform: translate(0px, 0px); } } @-o-keyframes animationFrames { 0% { -o-transform: translate(0px, 0px); } 15% { -o-transform: translate(0px, -25px); } 30% { -o-transform: translate(0px, 0px); } 45% { -o-transform: translate(0px, -15px); } 60% { -o-transform: translate(0px, 0px); } 75% { -o-transform: translate(0px, -5px); } 100% { -o-transform: translate(0px, 0px); } } @-ms-keyframes animationFrames { 0% { -ms-transform: translate(0px, 0px); } 15% { -ms-transform: translate(0px, -25px); } 30% { -ms-transform: translate(0px, 0px); } 45% { -ms-transform: translate(0px, -15px); } 60% { -ms-transform: translate(0px, 0px); } 75% { -ms-transform: translate(0px, -5px); } 100% { -ms-transform: translate(0px, 0px); } } .fw-gc-feed-header-title, .fw-gc-feed-item { border: none; } .fw-gc-feed-item { background-color: white; margin: 10px 0; } .fw-gc-feed-item:nth-child(even), .fw-gc-feed-item:nth-child(odd) { padding-left: 110px; position: relative; } .fw-gc-feed-item:nth-child(even) { background-color: #4b61a3 } .fw-gc-feed-item:nth-child(odd) { background-color: #2d3e50 } .fw-gc-feed-item-date { position: absolute; top: 5px; left: 0; text-align: center; color: white; } .fw-gc-feed-item-date-only, .fw-gc-feed-item-date .fa { display: block; font-size: 18px; padding-top: 10px; } .fw-gc-feed-item-date .fa { font-size: 54px; } /* CSS Ends Here */
-
Calendar Title -> Custom ->
ON
-
Calendar Title -> Font size ->
18
-
Calendar Title -> Colors -> Font color ->
#FFFFFF
-
Calendar Event -> Size -> Event Title ->
18
-
Calendar Event -> Size -> Where ->
14
-
Calendar Event -> Size -> Description ->
16
-
Calendar Event -> Size -> Start Time/Date ->
14
-
Calendar Event -> Colors -> Event Title ->
#FAFAFA
-
Calendar Event -> Colors ->Where ->
#9B9B9B
-
Calendar Event -> Colors -> Description ->
#FFFFFF
-
Calendar Event -> Colors -> Start Time/Date ->
#929ba3
-
Calendar Event -> Colors -> Background ->
#FFFFFF
-
Calendar Event -> Date -> Start Time/Date ->
ON
Rest keep as default
-
Create widget ->