Jump to content
mobrien

Calendar Widget - removing the Skeuomorphism!

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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
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.


  • Similar Content

    • By Graham Quince
      Some of you have already spotted this tutorial, but we've just updated it to reflect feedback from schools.
      You can now use the same code 'hack' a menu to open external links, subpages and even sites
      https://www.frogeducation.com/community/tutorials/frogcode-tutorials/external-links
    • By K.Ermit
      Hi,
      I have been provided with this code from Linguascope, but it doesn't work in the HTML widget.   
      <script language="javascript" src="http://www.linguascope.com/link/login/linguascope_login250x250.js"></script> Can anyone help please?
    • By K.Ermit
      Every time I add in a text widget,, I have to resize the text, as it starts too small, is there a way of setting the size be default?
    • By Dawn Spears
      Hi,
       
      I have set up a sildeshow, using a file drop as detailed in the tutorial below:
      http://www.frogcommunity.com/app/os#!filedrop/slideshow
       
      My first slideshow was working correctly, and I could add/remove files to the drop and the correct pictures were showing.
      I then tried to add another slideshow (on a new tab within the site), so set up a new file drop, got the new ID and created the HTML again as per the tutorial, however the second file drop won't work as expected. The pictures from the second file drop show up in the first slideshow, despite them having completely different IDs. If I set up a list of file names for the second file drop, the files are correct, but they are showing on the wrong page. Sometimes they appear as part of the slideshow, and other times the new pictures are above the first pictures. I will attach some screenshots so that hopefully you can see what I mean.
      Additionally, the first file drop will work correctly until I try and look at the second file drop, then when I go back to the first I have the problem (caching issue maybe?).
      First file drop showing Micky Mouse correctly:
       
       
      2nd file drop showing only the file name (testing) widget. The file drop arrows show up but no pictures.

       
      Now, I go back to the first tab and Goofy is showing despite him being on the other file drop.

       
       
      Any ideas?
       
      Kind regards
       
      Dawn
    • By Tom
      Dear Service Desk
      I have a staff calendar on my staff landing page, but some staff members can view the calendar, and some cannot - how do I fix this?
×
×
  • Create New...