I coded a calendar style based on Pretty Little Calendar by the fantastic Orman Clark.
The style is based in the WordPress calendar widget markup, so you can just copy the css below and paste it in your theme style and you’re done.
Its not an exact copy because, as I said, the markup is based in WordPress calendar widget, which makes it easy to use.
The markup is also included in the post in case you want to include it somewhere outside WordPress
Demo
The style:
#wp-calendar {
color: #666;
font-size: 12px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
#wp-calendar a { color: #467b89 }
#wp-calendar caption {
background: #383838;
color: #e0e0e0;
font-size: 14px;
padding: 10px 0;
text-align: center;
text-shadow: 0 -1px 0 #000;
-webkit-box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 0 #484848, 0 -1px 5px rgba(0,0,0,0.3);
border: 1px solid #373737;
z-index: -99;
}
#wp-calendar thead th {
font-size: 8px;
padding: 5px 0;
color: #666;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
border-bottom: 1px solid #bbbbbb;
background: #f7f7f7;
background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#f1f1f1));
background: -moz-linear-gradient(top, #f7f7f7, #f1f1f1);
}
#wp-calendar tbody td {
color: #666;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
padding: 8px;
text-align: center;
font-weight: bold;
border: 1px solid;
border-color: #fff #bbbbbb #bbbbbb #fff;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#dedede));
background: -moz-linear-gradient(top, #ededed, #dedede);
}
#wp-calendar tbody td.pad {
background: #f5f5f5;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
background: -moz-linear-gradient(top, #f5f5f5, #ececec);
}
#wp-calendar tfoot {
color: #e0e0e0;
font-size: 12px;
text-align: center;
}
#wp-calendar tfoot tr {
background: #f5f5f5;
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ececec));
background: -moz-linear-gradient(top, #f5f5f5, #ececec);
}
#wp-calendar tfoot td { padding: 10px 10px }
#wp-calendar tfoot a {
color: #666;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#wp-calendar tfoot td#prev { text-align: left }
#wp-calendar tfoot td#next { text-align: right }
#wp-calendar #today {
color: #fff;
border: 1px solid #467b89;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
background: #6eafbf;
background: -moz-radial-gradient(50% 50% 0deg,ellipse cover, #6eafbf, #569EB1);
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 20, from(#6eafbf), to(#569EB1));
}
The markup:
<table id="wp-calendar">
<caption>March 2011</caption>
<thead>
<tr>
<th scope="col" title="Monday">M</th>
<th scope="col" title="Tuesday">T</th>
<th scope="col" title="Wednesday">W</th>
<th scope="col" title="Thursday">T</th>
<th scope="col" title="Friday">F</th>
<th scope="col" title="Saturday">S</th>
<th scope="col" title="Sunday">S</th>
</tr>
</thead>
<pre> <tfoot>
<tr>
<td colspan="3" id="prev"><a href="#" title="">« Feb</a></td>
<td> </td>
<td colspan="3" id="next"><a href="#" title="">Apr »</a></td>
</tr>
</tfoot></pre>
<tbody>
<tr>
<td colspan="3"> </td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
</tr>
<tr>
<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
</tr>
<tr>
<td>19</td><td>20</td><td>21</td><td>22</td><td id="today">23</td><td>24</td><td>25</td>
</tr>
<tr>
<td><a href="#" title="">26</a></td><td>27</td><td>28</td><td>29</td><td>30</td><td colspan="2"> </td>
</tr>
</tbody>
</table>
If you want WordPress to display Mon instead of M you need to paste this in the place you want the calendar within your theme
<?php get_calendar(false); ?>
Demo
21 thoughts on “Pretty Little Calendar CSS3”
Nico Andrade
Maio 29, 2011 |Amazing work!
Congratulations!
João Sardinha
Maio 29, 2011 |Thank you ;)
ReDLine PC
Junho 22, 2011 |Tens bastante talento, gostei da tua página ;)
Parabéns.
João Sardinha
Junho 23, 2011 |Obrigado ;)
Lena
Julho 30, 2011 |Caramba, curti bastante.
Fazer no photoshop é fácil, agora botar em ação não é mole não. Parabens e obrigada pela ajuda!! :D
João Sardinha
Julho 30, 2011 |Obrigado Lena, fico feliz que tenha sido útil :)
Pingback: Sources and Credits « Ecommercesystems Wiki Site
David
Agosto 6, 2012 |Thanks mate! Those are sexy css3 and html.
Jason
Novembro 6, 2012 |This is pretty slick. Good work!
JOGJALAB.COM
Janeiro 19, 2013 |Nice calendars. This outstanding work ^^
Carlos
Março 13, 2013 |Amazing work!!!! nonono…. excellent!!!
Pingback: ???????????????????????9 | Life is short!
how to develop muscle
Agosto 28, 2014 |First off I want to say great blog! I had a quick question that
I’d like to ask if you do not mind. I was curious to find out how you
center yourself and clear your mind prior to writing. I’ve had difficulty clearing my thoughts in getting my ideas out.
I do enjoy writing but it just seems like the first 10 to 15 minutes are usually lost just trying to figure out how to begin. Any recommendations or
tips? Thanks!
texas workforce commission
Outubro 1, 2014 |Unfortunately, apartment owners (usually large companies own all apartments in the buildings) reluctantly rent
apartments to immigrants who just arrived to Toronto and have no
job nor credit history in Canada. You can easily slide into a counselor and
guide, any person, living the role of a house to rent. Noida
is the preferred location for many buyers and investors
especially who are looking for modern units according
to their needs and requirements.
Margery
Outubro 2, 2014 |That green or white bar of soap in the shower might be fine
for the rest of the body, but the drying effects of these products can strip the penile skin of its natural moisture, leaving the skin red, rough and sore.
Acquiring mentioned all that, 1000 calories
is a extremely very low calorie intake and should be used
only as a starter for body weight reduction or as a cleansing eating habits.
All the online jobs which receive good reviews are proven to be reliable by the reviewing
company.
funny tee shirts
Maio 11, 2016 |This is the right web site for anybody who wants to find
out about this topic. You understand so much its almost tough to argue with
you (not that I really will need to…HaHa). You definitely put
a fresh spin on a subject which has been discussed for many years.
Great stuff, just great!
AlexaUSawina
Agosto 13, 2016 |Hey just wanted to give you a brief heads up. The text within your
article seem to be running off the screen in Internet explorer.
I’m unclear if this is a format issue or something connected to
browser compatibility nevertheless i figured I’d post to inform you.
The design look wonderful though! I do hope you have the issue resolved soon. Cheers
Naunat
Agosto 15, 2016 |Thanks for this info. This helps. me a lot.
find-way.net
Setembro 3, 2016 |Today s freebie should help you keep on top of your admin; a pretty little calendar design. The perfect tool for bookings, meetings, to-do s, events you name it.
g-style slick dogg
Janeiro 8, 2017 |Quality articles is the crucial to invite the people to
go to see the web page, that’s what this site is providing.
Yhgervxz
Abril 14, 2018 |Latest posts by TRS Staff (see all)West Ham Fight Off Eagles, Swoop Like Buzzards – January 31, 2018.
He could not lead a stacked Dodgers club to the World Series and the Marlins have not improved under his watch.
When looking over the different first basemen in the AL, it is hard to find numerous players who are playing well.
Among them are respect for self and others, accountability for actions and choices, and integrity.
Instead of getting a stop and forcing a field goal attempt, backup corner Robert Nelson let Rishard Matthews run right past him and catch a touchdown in the corner of the end zone.