Date Button CSS style.

Saturday, June 30, 2007 17:52 (1,804 views)

Posted in category Designs

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

You can follow any responses to this entry through the RSS 2.0 feed.

You can leave a response, or trackback from your own site.

Tags: CSS, design, stylesheet, Tutorial, wordpress date button

The Owner

Just call me Scart. I blog almost anything from personal, reviews, products, websites that I visited the most and I also write articles where I receive compensation. Though some of my articles were compensated I can assure you that I blog with my own honest opinion. BTW, haters are not allowed here. If you don't like this blog you can ignore it and leave or just visit my other blog and photoblog. More of me...

My daily life experience… is proudly powered by WordPress | Base theme by BlueDream | Modified By Scarty | 54 queries. 0.279 seconds. Hits today: 191

monica says:

July 1st, 2007 at 12:04 am
From Philippines
Using Mozilla Firefox 2.0.0.4 on Windows XP

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!

Ralp says:

July 1st, 2007 at 2:23 am
From Philippines
Using Mozilla Firefox 2.0.0.4 on Windows XP

Ahh gnon pla un. masubukan nga

kitty says:

July 1st, 2007 at 3:41 am
From United States
Using Internet Explorer 7.0 on Windows Vista

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

Sherica says:

July 1st, 2007 at 5:04 am
From Philippines
Using Mozilla Firefox 2.0.0.4 on Windows XP

weee ang cute naman niyan. i miss you ate scart.
love yooouuu.
di mo pa ako niaadd sa linkss!! hmp joke!

Sandra says:

July 1st, 2007 at 5:23 am
From Philippines
Using Mozilla Firefox 2.0.0.4 on Windows XP

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.

scart says:

July 1st, 2007 at 12:14 pm
From United States
Using Mozilla Firefox 2.0.0.4 on Windows Vista

@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

nix says:

January 16th, 2008 at 8:39 am
From Philippines
Using Flock 1.0.5 on Windows XP

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

Joseph says:

February 1st, 2008 at 9:09 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows XP

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 */
}

.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

February 1st, 2008 at 10:57 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows Vista

@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…

February 2nd, 2008 at 8:59 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows XP

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

February 2nd, 2008 at 10:11 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows Vista

@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).

February 2nd, 2008 at 10:34 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows XP

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:

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 */
}

February 2nd, 2008 at 10:36 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows XP

Opps it cut me off…part of my index:

February 2nd, 2008 at 10:48 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows Vista

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.

February 2nd, 2008 at 11:09 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows XP

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.

February 2nd, 2008 at 11:23 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows Vista

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!

February 3rd, 2008 at 10:19 pm
From United States
Using Mozilla Firefox 2.0.0.11 on Windows XP

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 :