Jump to content

Calendar Widget - removing the Skeuomorphism!


mobrien
 Share

Recommended Posts

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

Capture.PNG

Link to comment
Share on other sites

  • 2 weeks later...

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>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...