Title: Simple(r) widget styling – sample css Last modified: August 31, 2016 --- # Simple(r) widget styling – sample css * Resolved [DarthTater](https://wordpress.org/support/users/darthtater/) * (@darthtater) * [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/) * For what it’s worth, a stab at simpler grid calendar widget styling. * You can see it (at least for a week or two) here: [](http://wp.interiorhorsecouncil.com/test/) * /******* Simple Calendar Plugin widget grid styling ***********/ /* /* Original stylesheets for popup: qtip.min.css /* /* .simcal-events-dots is the bottom bar each row w/ dots */ /* .simcal-no-events is a date without events */ /* .simcal- day-has-events is a date with events */ /* Still need to style qtips, original css is qtip.min.css */ * /* The table body background */ #gce_widget-2 { color: #666; font-size: 12px;- webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 1px 5px rgba( 0,0,0,0.3); box-shadow: 0 1px 5px rgba(0,0,0,0.3); } * /* Get rid of extra space below widget */ #gce_widget-2 table { margin-bottom: 0px; } * /* Default table cell styling. */ #gce_widget-2 tbody td { height: 30px; color:# 666; text-shadow: 0 1px 0 rgba(255,255,255,0.5); padding: 8px; text-align: center; font-weight: bold; border: 1px solid; border-color: #fff #bbbbbb #bbbbbb #fff; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dedede)); background: -moz-linear-gradient(top, #ededed, # dedede); } * /* Transparent background for day numbers. */ /* Else event & today special background colors won’t show. */ #gce_widget-2 .simcal-default-calendar-grid . simcal-day-number { background: transparent; } * /* No cell borders for blank leading & trailing calendar space */ #gce_widget- 2 tbody td.simcal-day.simcal-day-void { border: 0; background: #f5f5f5; background:- webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec)); background:- moz-linear-gradient(top, #f5f5f5, #ececec); } * /* Hide dots indicated number of events for a day */ #gce_widget-2 .simcal-default- calendar-grid .simcal-events-dots b { font-size: 1px; color: transparent !important;} * /* Overlay invisible dots on top of day number for hover. */ #gce_widget-2 . simcal-default-calendar-grid .simcal-events-dots { position: relative; z-index: 50000; height: 1px ! important; margin-top: -25px; ! important; } * #gce_widget-2 .simcal-default-calendar-grid .simcal-no-events { display: none;/* Otherwise weird space below cell */ } * #gce_widget-2 .simcal-day-label.simcal-day-number { height: 30px; /* to display event cell color */ z-index: 20; /* z-index lower than the dots. */ } * /* Center & align the day numbers within their cells. */ #gce_widget-2 .simcal- default-calendar-grid .simcal-day-number { padding: 8px 4px 0px 4px; /* top-right- bottom-left */ text-align: center; } * /* Different style for today */ #gce_widget-2 td.simcal-today.simcal-present. simcal-day > div > span.simcal-day-label.simcal-day-number { background-color: transparent !important; color: #99001C !important; /* Dark red */ font-weight: 600 !important; font-size: 120% !important; margin-top: -2px !important; /* compensate for bigger font */ } * /* No border for today, else number slightly misaligned */ #gce_widget-2 .simcal- default-calendar-grid .simcal-day> div { border: 0 !important; } * /* Hide the widget calendar title, it speaks for itself */ #gce_widget-2 h3. widget-title { display: none; } * /* Shorten row heights of month header & days abbreviations. */ #gce_widget- 2 table thead tr th.simcal-nav, #gce_widget-2 table thead tr th.simcal-week-day{ padding-top: 4px !important; padding-bottom: 4px !important; } * /* Keep nav arrows from falling off header area */ #gce_widget-2 table thead tr th.simcal-nav.simcal-prev-wrapper, #gce_widget-2 table thead tr th.simcal- nav.simcal-next-wrapper { padding-left: 0px !important; padding-right: 0px !important;} * /* Different header background color for month & nav arrows */ #gce_widget-2 table thead tr th.simcal-nav { background: #398235; background: -webkit-gradient( linear, left top, left bottom, from(#398235), to(#005200)); background: -moz- linear-gradient(top, #398235, #005200); } * /* Make the nav arrows a little smaller. */ #gce_widget-2 .simcal-icon-left,# gce_widget-2 .simcal-icon-right { color: white; } * /* Font styling for “current” month header */ #gce_widget-2 .simcal-current h3 { font-size: 1.4em; /* Smaller, fits on 1 row */ color: white; } * /************ Done styline Simple Calendar grid widget ******************/ * [https://wordpress.org/plugins/google-calendar-events/](https://wordpress.org/plugins/google-calendar-events/) Viewing 5 replies - 1 through 5 (of 5 total) * Thread Starter [DarthTater](https://wordpress.org/support/users/darthtater/) * (@darthtater) * [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/#post-7009051) * Woops, it took almost the entire post as the link text. But you can click on the css and it will get you to the test page. * Plugin Contributor [Nick Young](https://wordpress.org/support/users/nickyoung87/) * (@nickyoung87) * [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/#post-7009327) * Thanks for providing this, hope someone finds it useful! * Thread Starter [DarthTater](https://wordpress.org/support/users/darthtater/) * (@darthtater) * [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/#post-7009340) * You are very welcome. Thank you for providing such a useful plugin. * [cpelvis74](https://wordpress.org/support/users/cpelvis74/) * (@cpelvis74) * [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/#post-7009372) * This CSS is perfetc for me, but when I copy css in my child css doesn’t works. * Thread Starter [DarthTater](https://wordpress.org/support/users/darthtater/) * (@darthtater) * [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/#post-7009374) * Hi cpelvis74, * I think someone mentioned that the latest theme upgrade was clobbering some child themes but I don’t run a child theme. I run half a child theme in the sense that I use JetPacks “Custom CSS” plugin which does seem to load its css stylesheet after any theme stylesheet. I don’t don’t anything with my functions.php file. * So you could try enabling that part of JetPack’s plugin, then go to the “Edit CSS” sidebar menu option, and cut & paste the above code. Good luck, and let me know how things work out. Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Simple(r) widget styling – sample css’ is closed to new replies. * ![](https://ps.w.org/google-calendar-events/assets/icon-256x256.png?rev=1263960) * [Simple Calendar - Google Calendar Plugin](https://wordpress.org/plugins/google-calendar-events/) * [Frequently Asked Questions](https://wordpress.org/plugins/google-calendar-events/#faq) * [Support Threads](https://wordpress.org/support/plugin/google-calendar-events/) * [Active Topics](https://wordpress.org/support/plugin/google-calendar-events/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/google-calendar-events/unresolved/) * [Reviews](https://wordpress.org/support/plugin/google-calendar-events/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [simple calendar](https://wordpress.org/support/topic-tag/simple-calendar/) * [styling](https://wordpress.org/support/topic-tag/styling/) * [widget](https://wordpress.org/support/topic-tag/widget/) * 5 replies * 3 participants * Last reply from: [DarthTater](https://wordpress.org/support/users/darthtater/) * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/simpler-widget-styling-sample-css/#post-7009374) * Status: resolved