Date Button CSS style.
Looks like everybody loves it
well, I’m going to share my own date button CSS design….
First - Type the code
(Do not copy and paste. Type it out.)

You can place it before or after your post title. You can also change the position whether to put it on the left or right just change the float attribute in CSS style to left or right.
Second - Create the background image
I’ll use my own creation.

u can also have it but please do not direct link.
Third - Style it
here is my own style: Again do not copy and paste. Type it out in your CSS file.
.post-date{ /* for first box */
float: left;
display: inline;
padding: 8px 0 0 0;
background: url(images/date.jpg) no-repeat;
width: 49px; /* to emphasize the actual width of my image background */
height: 50px; /* to emphasize the actual height of my image background */
}
.month { /* month style */
font-size: 0.9em;
font-family : Georgia, Sans-serif;
text-align: center;
color: #638b14;
font-weight: bold;
margin: 0 5px 0 0;
}
.day { /* today style */
font-size: 1.5em;
font-family : Georgia, Sans-serif;
text-align: center;
color: #fd5cac;
font-weight: bold;
margin: 0 5px 5px 0;
}
For more explanation go to: wpdesigner.com
17 Responses to “Date Button CSS style.”
Ahh gnon pla un. masubukan nga 
wooooow, thanks for the tutorial! yun nga lang hindi ako wp. sayang if it only works sa blogger ano hayyyy… meron bang ganyan sa blogger? hehee sabay ganun ano
anyways I just love your lil date button right there, super cute! kamusta na, ate scart? wishing you a great weekend with family! love yahh
weee ang cute naman niyan. i miss you ate scart.
love yooouuu.
di mo pa ako niaadd sa linkss!! hmp joke!
hi ate scart! kamusta ka naman na? i so miss you na. *HUGS* ang tagal ko na talagang di nakakaupdate at nakakadalaw sa inyo,. grabehan na ito. nakita k yung tag mo sa akin sa tagboard kaya ayun, naisip ko na magupdate nadin kahit papano. hindi ko dinnatiis ang pagbablogging. pahug uli! *hugs*
anyways, goodluck sa new host mo, ‘te scart!
at oo, hopefully magawa ko din yang ganyang style sa dates.
try ko sya next time makagawa ako ng theme. ^_^. TC ate. mwah! have fun pala sa family day.
with ate val.
and the thers nadin. 
@monica: yung last entry mo kasi hindi pumasok single comment lang ginawa ko dun.
@ralp: try mo rin dagdag palamuti sa blog :D
@kitty: pwede ata yan kitty kasi CSS style naman yan pero instead na php date command ang gamitin mo, gamitin mo yung sa blogger asp ata sila diba? sila ba yung may %date% ganun ba yung sa kanila?
@Sherica: i-add din kita sherica de ko pa kasi tapos ayusin yung links
@sandra: ok lang sand… i understand naman kung bkt wala ka pa update kasi syempre school muna bago ang lahat hehehehe 
wow.. buti na lang naisipan ko mag click click dito. dati ko pa gusto malaman kung pano to ginagawa. wala kasi ako time mag research pa eh. thanks!
nix’s last blog post..cellphone ringtones
Thank you in advance for you help!!
My page: http://sunruby.com/make-friends/
Where exactly do I insert that code so that the icon is right to the left of the post heading?
…………………..
.post-date{ /* for first box */
float: left;
display: inline;
padding: 8px 0 0 0;
background: url(images/date.jpg) no-repeat;
width: 49px; /* to emphasize the actual width of my image background */
height: 50px; /* to emphasize the actual height of my image background */
}
.month { /* month style */
font-size: 0.9em;
font-family : Georgia, Sans-serif;
text-align: center;
color: #638b14;
font-weight: bold;
margin: 0 5px 0 0;
}
.day { /* today style */
font-size: 1.5em;
font-family : Georgia, Sans-serif;
text-align: center;
color: #fd5cac;
font-weight: bold;
margin: 0 5px 5px 0;
}
…………………..
The above code goes in “style.css”, but in which sectin (eg: /* main structure */, /* pagelist and search */, etc)?
……………..
Your first code goes in my “index.php”, but where?
Below is the index.php
<?php get_header(); ?>
<div id=”content-ad”>
<?php include (TEMPLATEPATH . ‘/ads.php’); ?>
<div id=”text”>
<?php include (TEMPLATEPATH . ‘/banner.php’); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></h2>
<div class=”pub”>
Posted on
by <?php the_author(); ?> in <?php the_category(’, ‘) ?><?php edit_post_link(’, Edit’); ?>
</div>
<?php the_content(’Read the rest of this entry »’); ?>
<div class=”comm”><?php comments_popup_link(’Post Comment’, ‘Comments (1)’, ‘Comments (%)’); ?></div>
</div>
<?php endwhile; ?>
<div id=”nav”>
<div class=”alignleft”><?php next_posts_link(’« Previous Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(’Next Entries »’) ?></div>
</div>
<?php else : ?>
<div class=”post”>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>
</div>
<?php endif; ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Joseph’s last blog post..Advanced Tips To Attract Women In 30 Seconds Posted By : Flirt Jerk
@Joseph: the css code you can put it anywhere in your CSS file. it doesnt matter.
and this code post it :

before this:
<h2>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></h2>
scart’s last blog post..Moving on…
Hi scart,
Thank you for the reply. I got the date to show up, but it is above the post heading, and there is no jpg in the background. I placed the entire path of the jpg.
url(http://sunruby.com/make-friends/wp-content/themes/orangesense/img/date.jpg)
My page: http://sunruby.com/make-friends/
Thank you. 
Joseph
Joseph’s last blog post..Lie - Of Course I Don’t Lie Posted By : Jean Shaw
@joseph: you dont have to complete the path of the image just paste the code as is.
and put the image file at your img folder and oh by the way, as i have noticed in your code you have a wrong path.
change this path:
background: url(http://sunruby.com/make-friends/wp-content/themes/orangesense/img/date.jpg) no-repeat;
to this:
background: url(img/date.jpg) no-repeat;
and the
div class=post-date” (your lacking a quotation mark).
put this div class=”post-date” (with bracket of course).
scart’s last blog post..Moving on…
Ohhh scart … you are so nice for helping me…I made the changes still the same. I have included the 2 scripts. Thank you again for taking the time to walk me through this!!
My index:
<div class=”post” id=”post-”>
<a href=”" rel=”bookmark” title=”Permanent Link to “>
Posted on by in
Not Found
Sorry, but you are looking for something that isn’t here.
My css:
.post-date{ /* for first box */
float: left;
display: inline;
padding: 8px 0 0 0;
background: url(img/date.jpg) no-repeat;
width: 49px; /* to emphasize the actual width of my image background */
height: 50px; /* to emphasize the actual height of my image background */
}
.month { /* month style */
font-size: 0.9em;
font-family : Georgia, Sans-serif;
text-align: center;
color: #638b14;
font-weight: bold;
margin: 0 5px 0 0;
}
.day { /* today style */
font-size: 1.5em;
font-family : Georgia, Sans-serif;
text-align: center;
color: #fd5cac;
font-weight: bold;
margin: 0 5px 5px 0;
}
Joseph’s last blog post..Lie - Of Course I Don’t Lie Posted By : Jean Shaw
Opps it cut me off…part of my index:
<div class=”post” id=”post-”>
<a href=”" rel=”bookmark” title=”Permanent Link to “>
Joseph’s last blog post..Lie - Of Course I Don’t Lie Posted By : Jean Shaw
your almost there joseph just one more edit and your good to go.
as you notice the quotation mark change into different characters so pls do not “copy and paste” what I write here, type it out.
scart’s last blog post..Moving on…
INCREDIBLE … You are “the woman”, thank you so much!!! All I need to do now is play around with the jpg to blend in with a black background.
I did learn a lot!!
You are one patient and smart woman! Thank you again.
ps: I hope I can come back often to visit and maybe ask a question or two.
Bye for now.
Joseph’s last blog post..Lie - Of Course I Don’t Lie Posted By : Jean Shaw
yes! congrats hehehe just make sure the size of your background image will fit on the code.
and sure anytime you can come back here and ask for a help. goodluck!
scart’s last blog post..Moving on…
Hi scart,
Been searching for this but no luck. I’m looking for a Wordpress calendar widget, you seen one. I would like to be able to adjust colors on it if possible.
Thanks,
Joseph
Joseph’s last blog post..How To Stop A Divorce When You Are Still In Love Posted By :
Leave a Reply
If you're new here or you changed your email add, your comment is held for moderation. I'll return comments as much as I can.




By: monica on Jun-30-07 at 12:04 am
Mozilla Firefox 2.0.0.4 on
Windows XP
From Philippines
maganda yang gawa mo, super cute…
regarding dun sa comment mo, hindi na kailangan doblehin.
after mo submit pag hindi lumabas, refresh mo lng.
God bless! muwah!