Calendar Widget - removing the Skeuomorphism!

[mobrien]

Dear Community,

On the Frog website designs showcase page, there is a link to Theale Green School. We have noticed that they have a calendar widget on their homepage without the skeuomorphic red rings at the top.

Does anyone have some code to achieve this with the HTML widget? All I have managed to do so far is remove the header text.

Thanks,

Michael

[Graham Quince]

Hi @mobrien,

I think our design team did this, here's the CSS from their website:

<style>
 .widget_calendar table {
    margin-top: 0px !important;
}
 .widget_calendar {
    width: 450px;
    margin: 0px auto 0px 0px;
}
    
 .widget_calendar table.withchrome tbody tr td, .widget_calendar table.withchrome tbody tr th {
  border-left: none;
  border-top: none;
}
 .widget_calendar table.withchrome tbody tr td:last-child,
 .widget_calendar table.withchrome tbody tr th:last-child,
 .widget_calendar table.withchrome tbody tr td.last-child,
 .widget_calendar table.withchrome tbody tr th.last-child {
  border-right: none;
}
.widget_calendar table.withchrome tbody tr:last-child td, .widget_calendar table.withchrome tbody tr.last-child td {
  border-bottom: none;
}

.ie8 .widget_calendar table {
  border-bottom: none!important;
}
.ie8 .widget_calendar tbody tr td, .ie8  .widget_calendar tbody tr th {
  border-left: none;
}
.ie8  .widget_calendar tbody tr td.last-child, .ie8  .widget_calendar tbody tr th.last-child {
  border-right: none!important;
}
.ie8  .widget_calendar td.last-child td {
  border-bottom: none;
}    
.widget_calendar .calendar-widget-title h1 {
  background-image: none;
    height:0px;
    display:none;
}
    
.widget_calendar .calendar-widget-title span.first-child {
  background-image: none;
    height:0px;
    display:none;
}
 .widget_calendar .calendar-widget-title span.last-child {
  background-image: none;
    height:0px;
    display:none;
}
    .widget_calendar .calendar-widget-title {
    height:0px;
}

@media screen and (max-width: 800px) {
.ui-theme-tglanding-container .widget_calendar {
    width: 450px;
    margin: 0px auto 0px auto;
}

}

@media screen and (max-width: 450px) {
.ui-theme-tglanding-container .widget_calendar {
    width:calc(100% - 20px);
    margin: 0px 10px 0px 10px;
}	
}
</style>

 

[mobrien]

Excellent, many thanks @Graham Quince, worked a treat!