Date Button CSS style.

June 30th, 2007 Viewed 1,476 views

Looks like everybody loves it :idea: 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.”

Jump to comment form »

By: monica on Jun-30-07 at 12:04 am
From Philippines
Mozilla Firefox Mozilla Firefox 2.0.0.4 on Windows 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! :1:

By: Ralp on Jun-30-07 at 2:23 am
From Philippines
Mozilla Firefox Mozilla Firefox 2.0.0.4 on Windows Windows XP

Ahh gnon pla un. masubukan nga :cool:

By: kitty on Jun-30-07 at 3:41 am
From United States
Internet Explorer Internet Explorer 7.0 on Windows 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 :mrgreen: 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

By: Sherica on Jun-30-07 at 5:04 am
From Philippines
Mozilla Firefox Mozilla Firefox 2.0.0.4 on Windows Windows XP

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

By: Sandra on Jun-30-07 at 5:23 am
From Philippines
Mozilla Firefox Mozilla Firefox 2.0.0.4 on Windows 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. :)

By: scart on Jun-30-07 at 12:14 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.4 on Windows 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 :sad:

@sandra: ok lang sand… i understand naman kung bkt wala ka pa update kasi syempre school muna bago ang lahat hehehehe :mrgreen:

By: nix on Jun-30-07 at 8:39 am
From Philippines
Flock Flock 1.0.5 on Windows 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

By: Joseph on Jun-30-07 at 9:09 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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 */
}

.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

By: scart on Jun-30-07 at 10:57 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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…

By: Joseph on Jun-30-07 at 8:59 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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

By: scart on Jun-30-07 at 10:11 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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).

scart’s last blog post..Moving on…

By: Joseph on Jun-30-07 at 10:34 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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:

<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

By: Joseph on Jun-30-07 at 10:36 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows Windows XP

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

By: scart on Jun-30-07 at 10:48 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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.

scart’s last blog post..Moving on…

By: Joseph on Jun-30-07 at 11:09 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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.

Joseph’s last blog post..Lie - Of Course I Don’t Lie Posted By : Jean Shaw

By: scart on Jun-30-07 at 11:23 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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!

scart’s last blog post..Moving on…

By: Joseph on Jun-30-07 at 10:19 pm
From United States
Mozilla Firefox Mozilla Firefox 2.0.0.11 on Windows 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 :

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.





© 2008 My daily life experience…  Powered by Wordpress 2.6. Theme by Scarty. 46 queries. 0.389 seconds. Hits today: 90

ss_blog_claim=11d253ebfd2c1787ae61541957292b05