mobrien Posted May 18, 2017 Share Posted May 18, 2017 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 Link to comment Share on other sites More sharing options...
Graham Quince Posted May 30, 2017 Share Posted May 30, 2017 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 More sharing options...
mobrien Posted June 1, 2017 Author Share Posted June 1, 2017 Excellent, many thanks @Graham Quince, worked a treat! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now