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
42 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.
Mujo
Julho 15, 2018 |Amazing article my friend
?? ???
Janeiro 27, 2020 |thats great
Amit Garg
Abril 25, 2020 |This is really a great piece of CSS Code.
Thanks
Text Messages
Agosto 12, 2020 |You only realize something’s values when it’s gone; the same phrase suffices for text messages.
Update Kodi on Firestick
Agosto 12, 2020 |How to update Kodi is the hottest topic you can find everywhere because many get confused to perform this simple process.
Ecobee Vs Nest
Agosto 12, 2020 |Ecobee Vs Nest: About smart thermostats, there are a couple of names that tend into the future up higher than the other: Nest and Ecobee.
Install IAP Cracker
Agosto 12, 2020 |Today, we will see what is IAP Cracker used for and how to install IAP Cracker in detail.
Meilleur GPS
Agosto 20, 2020 |Vous seriez tous d’accord avec moi qu’une fois dans votre vie, vous vous êtes perdu en conduisant dans un endroit, peut-être en emmenant vos enfants regarder un film dans les centres commerciaux.
Frases Para Enamorarz
Agosto 20, 2020 |Frases para enamorar|Frases de buenos dias|citas de motivación on Frases Para Enamorarz
Siteground Deals
Setembro 13, 2020 |Thanks for sharing complete code.
sanu kumar
Setembro 15, 2020 |This is really an awesome code. Thanks for sharing
Kedar Dangal
Outubro 1, 2020 |Asewome man. You are a genius.
Thank you for sharing whole source code.
Anil Agarwal
Novembro 1, 2020 |Great stuff from you, man. This post has a great bit of enlightening information.
Ban Sharma
Novembro 11, 2020 |This is what i need, The design of your calendar is elegant
Shreya
Novembro 25, 2020 |Thanks buddy.. I was looking for it for my college project and you made my day.. Thanks again for sharing the design..
Satish Ithamsetty
Junho 18, 2021 |Very good coding. the design of the calendar is very nice. Thank you for this stuff man.
Bloggingstarts
Junho 21, 2021 |Thanks for that. I need this. It’s really help me lot. Thanks.
Anoop Gupta
Julho 18, 2021 |Your code makes it easy to use at any WordPress blog. Thank you for your hard work.
sunetrameyecare
Fevereiro 6, 2022 |helpful post..
LUSTROUS.FUN
Março 1, 2022 |Gamers are extremely dedicated to playing games, and often have some skills that make them good. So if you are a gamer and looking for the BEST ADULT GAMES TO PLAY? You can join and get find best deals for adult games with LOCAL HOOKUP IN YOUR AREA.
Mohit Bhargav
Outubro 3, 2022 |Wow… You have written a really great CSS code here. Thank you