WordPress.org

Ready to get started?Download WordPress

Forums

bottom border for each instance of php the_date (6 posts)

  1. brittanie
    Member
    Posted 5 years ago #

    My site is http://rulebrittaniea.org

    I am using php the-date to call a date header only for the most recent post on days with multiple posts. The code looks like this:

    <p class="postdate" style="text-align: right;"><?php the_date('', '', '', TRUE); ?></p>
    
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link','bnTiny'); ?>: <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    
    <p class="posted"><?php the_time(); ?> | <?php comments_popup_link('0', '1', '%'); ?>
     | <?php the_category(', '); ?> | <?php the_tags('', ', ', ''); ?>
    
    <?php edit_post_link($link = __('Edit','bnTiny'), $before = ' | ', $after = ''); ?></p>
    
    <?php the_content(); ?>

    I am trying to get a dotted border to show up after each instance of the_date but so far the border is showing up after every single post, even if there are multiple posts on the same day.

    Here is what my css looks like:

    .postdate {
    font: normal 1.5em/120% 'Nimbus Sans L', helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #888;
    text-align: right;
    border-bottom: dotted 1px #bbb;
    }

    How can I get that bottom border to appear only ONCE each day?

    Thanks for your help.

  2. Joni
    Member
    Posted 5 years ago #

    First of all, in your template, take the style out (stuff between brackets below); it's redundant, as it's already in your stylesheet. ;)

    <p class="postdate"[ style="text-align: right;"]>

    Try this instead; I posted The Loop code so you could be sure you had the date call in the right place.

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php the_date('','<p class=\"postdate\">','
    '); ?>

    That puts the date code at the top of the day's posts. But it's not a wrapper so it won't insert your border at the end of that day's posts. You should create a wrapper division or move the "post" division up in front of the date code (after The Loop and before the date code I posted). Make it a class, not an ID, in case you have several days' worth of posts. Then style it with a bottom border and some bottom margin and padding.

  3. brittanie
    Member
    Posted 5 years ago #

    Hmm, that didn't work. I'm still getting the border between every post, not just on the first post.

    (Also, for some reason the align:right in my style sheet is not applying/working for the postdate class which is why I have it inline as well. Any help on figuring that out will be appreciated.

  4. Joni
    Member
    Posted 5 years ago #

    Try:

    text-align: right !important;

  5. Joni
    Member
    Posted 5 years ago #

    Did you create the wrapper division in your stylesheet (and add it to your template) and apply border styling to it and REMOVE the border styling from the .postdate class?

  6. brittanie
    Member
    Posted 5 years ago #

    I did. I'm still getting both borders with every post instead of with every date call.

    I'm not sure if I'm doing it right though.

    What I want is the slanted-dash line right above every date, and the dotted line right above every post. So that dashed line should separate days and the dotted line should separate posts.

    The trouble is that I'm also using the AsidesShop plugin to style Twitter posts differently, so every style I apply to the style sheet also has to be styled in the plugin as well.

    But that doesn't matter, because even the non-twitter posts are not styled like I want them.

    Here is my CSS:

    .dateborder{
    background: #fff url('http://rakka.tumblr.com/themes/3/stripes.gif') top repeat-x;
    }
    
    .postdate {
    font: normal 1.5em/120% 'Nimbus Sans L', helvetica, arial, sans-serif;
    text-transform: uppercase;
    color: #888;
    text-align: right;
    padding-top: 15px;
    margin-bottom: 10px;
    border-bottom: dotted 1px #bbb;
    }

    And here is my PHP:
    <div class="dateborder"><div class="postdate"><?php the_date('', '', '', TRUE); ?></div></div>

    I am self-taught at all this (and have learned only bits and pieces as I've needed them) which I why I'm not sure if what I've done is correct.

    I appreciate your help though!

Topic Closed

This topic has been closed to new replies.

About this Topic