the_time( ) custom styling help needed

  • Resolved tymayn

    (@tymayn)


    14 years, 10 months 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…

    https://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?

Viewing 4 replies - 1 through 4 (of 4 total)

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

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

    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

    Thread Starter tymayn

    (@tymayn)

    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?

    Thread Starter tymayn

    (@tymayn)

    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 : https://tymayn.com/themebuilder/news/new-spost-6/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘the_time( ) custom styling help needed’ is closed to new replies.

Tags