WordPress.org

1. tymayn
   Member
   Posted 2 years ago #

   So I need some help styling the_time().

   I am trying to make a 2-level date. On the top I will have the day and the suffix, sitting beneath it I will have the month & year.

   Here is the theme I currently building...

   http://tymayn.com/themebuilder/news/latest-around-here/

   If you see on the left there is a green box, and the date is going to sit in there. As for now it just says 17th, and I have this code in there for now...

   <div id="date_holder">
       <?php the_time('d'); ?><?php the_time('S'); ?>
       </div>

   I am trying to make the date number a larger font, and then the suffix a smaller font on the right.

   I have tried giving them their own div's like this...

   <div id="date_holder">
       <div class="class1"><?php the_time('d'); ?></div><div class="class2"><?php the_time('S'); ?></div>
       </div>

   But when I do the above it puts the suffix down to the next line, and even then it still won't change the font-size of the text.

   Any suggestions?

2. alchymyth
   The Sweeper
   Posted 2 years ago #

   looks like your extra divs have not reached the single post (single.php ?):
   

   <div id="date_holder">
       17th    </div>

3. or1gb1u3
   Member
   Posted 2 years ago #

   adding the class just gives you a hook to style you need to edit the style.css file to change the font size on that div class

4. tymayn
   Member
   Posted 2 years ago #

   Let me clarify a little.

   Alch, right now I have taken out the 2 divs because it was forcing the 'th' to be bumped down to the next line. Currently its setup like this:

   <div id="date_holder">
       <?php the_time('d'); ?><?php the_time('S'); ?>
       </div>

   So the div's shouldn't be there right now.

   or1gb1u3, I added the class to the style.css, but the issue was that it was bumping the 'th' down to the next line. I tried floats as well and they didn't seem to work. I put that there just for reference on how I tried to set it up before.

   Should I try a span?

5. tymayn
   Member
   Posted 2 years ago #

   Got it working.

   Here is the solution I did:

   <div id="date_holder">
       <div id="date_day" align="right"><?php the_time('d'); ?></div><div id="date_suffix" align="left"><?php the_time('S'); ?></div>
       <div id="date_month" align="center"><?php the_time('F'); ?> <?php the_time('Y'); ?> </div>
       </div>

   and the CSS:

   #date_holder {float:left; margin:10px 0px 0px 0px; width:100px; height:106px; background-image:url(images/date_bg.jpg); background-repeat:no-repeat; background-position:top left; }
   #date_info {font-size:10px; margin:0px 0px 0px 9px; }
   #date_info a{color:#0e5844 ;}
   #date_day { font-size:40px; line-height:50px; width:50px; height:50px; float:left ;margin:18px 0px 0px 0px; padding:10px 0px 0px 0px; font-weight:bold;}
   #date_suffix { font-size:10px; width:33px; height:15px;float:left; margin:20px 0px 0px -1px; padding:35px 9px 0px 0px;}
   #date_month { float:left; width:90px; margin:auto; margin:6px 0px 0px -4px; font-size:10px;}

   See it in action here : http://tymayn.com/themebuilder/news/new-spost-6/

Topic Closed

This topic has been closed to new replies.