Updates Calendar
A cute little thing to add on your blog. The calendar will update itself automatically when the month changes. Installation tutorial under the cut.
1) Copy / paste the following right before <style>:
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="color:Calendar Accent" content="#fde7e1"/> <meta name="color:Calendar Icon" content="#000"/> <meta name="color:Calendar Month Year" content="#000"/> <meta name="color:Calendar Weekdays" content="#525252"/> <meta name="color:Calendar Dates" content="#636363"/>
2) Copy / paste the following right after <body>:
<script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/micaelis/tmblrnotes/master/felinumCal.js"></script> <div id="calendar"></div>
3) Copy / paste the following right before </style>:
/************************ calendar ************************/ table.calendar { position:fixed; top:20px; left:20px; padding:10px; font:10px/1.8 'Work Sans', calibri, sans-serif; text-align:center; color:{color:Calendar Dates}; background:#fff; } table.calendar td, table.calendar th {padding:0 5px;} /*** icon ***/ .fa-calendar { margin-left:-5px; margin-right:7px; padding:6px 1px 7px 7px; font-size:9px; background:{color:Calendar Accent}; color:{color:Calendar Icon}; } table.calendar tr:nth-child(1) th:hover:after { position:absolute; top:6px; left:30px; content:'by felinum 🐾'; width:180px; font:8px/1.8 'Work Sans', calibri, sans-serif; letter-spacing:2px; background:#fff; } /*** month & year ***/ table.calendar tr:nth-child(1) th { border-bottom:1px solid {color:Calendar Accent}; letter-spacing:7px; font-size:8px; text-transform:uppercase; text-align:left; color:{color:Calendar Month Year}; } /*** weekdays ***/ table.calendar tr:nth-child(2) { font-weight:bold; color:{color:Calendar Weekdays}; text-shadow:3px 3px 2px {color:Calendar Accent}; } /*** message on hover ***/ table.calendar tr td:hover:before { position:absolute; max-width:100px; margin-left:-9px; margin-top:2.7em; padding:2px 4px; background:#fff; border:1px solid #ccc; -webkit-box-shadow: 3px 3px 0px 0px {color:Calendar Accent}; -moz-box-shadow: 3px 3px 0px 0px {color:Calendar Accent}; box-shadow: 3px 3px 0px 0px {color:Calendar Accent}; color:#000; }
Notice the bold properties in the table.calendar selector. You can adjust them to your liking or you can replace top with bottom and / or left with right.
4) Copy / paste the following right after the code from the previous step:
/************************ calendar updates ************************/ /*** update day ***/ table.calendar tr:nth-child(row) td:nth-child(column) { border:1px solid #ccc; -webkit-box-shadow:3px 3px 0px 0px {color:Calendar Accent}; -moz-box-shadow:3px 3px 0px 0px {color:Calendar Accent}; box-shadow:3px 3px 0px 0px {color:Calendar Accent}; color:#000; } /*** hover text on update day ***/ table.calendar tr:nth-child(row) td:nth-child(column):hover:before { content:'my first update'; }
table.calendar tr:nth-child(row) td:nth-child(column) is the selector that styles the update day.
table.calendar tr:nth-child(row) td:nth-child(column):hover:before contains the text that appears when you hover over the update day. Make sure to keep the quotation marks intact when you edit the hover text in the content property.
The image below shows how to find the right row and column for each day. As you can see, the first two rows contain the month and weekdays titles, so we won’t use 1 or 2 in tr:nth-child(row).
Example: Say we want to add an update on June 20th, which is located on row 6, column 3. We’re going to edit the code from step 4) like so:
/*** update day ***/ table.calendar tr:nth-child(6) td:nth-child(3) { border:1px solid #ccc; -webkit-box-shadow:3px 3px 0px 0px {color:Calendar Accent}; -moz-box-shadow:3px 3px 0px 0px {color:Calendar Accent}; box-shadow:3px 3px 0px 0px {color:Calendar Accent}; color:#000; } /*** hover text on update day ***/ table.calendar tr:nth-child(6) td:nth-child(3):hover:before { content:'my first update'; }
To add more updates, copy / paste the code from above and change the row and column numbers accordingly.
Click Update Preview > Save, then go back to your Theme Options panel to edit the Calendar color options.
I hope this was helpful! Have a nice day 👊