Entry Title and Date Reversal

[GatorArch]

I am setting up my blog with a modified version of Andreas00. Currently the date is shown before the title above entries. I would like to reverse that with the title followed by the date. I would also like to have the date in a smaller font size.

I tried searching the forum for the answer which led me to editing the style.css file and the entries.tpl file.

I tried editing the style.css file with no luck. Here is the code from it:

Code: Select all

#content h2, #contentleft h2, #contentright h2, .serendipity_commentsTitle, h4.serendipity_title  {
font-size:1.5em;
letter-spacing:-1px;
font-weight:normal;
margin:8px 0 10px 0;
padding:0;
}

#content h3.serendipity_date, #contentleft h3.serendipity_date, #contentright h3.serendipity_date  {
font-size:1.2em;
letter-spacing:-1px;
font-weight:normal;
margin:8px 0 10px 0;
padding:0;
}

I also tried editing the entries.tpl file with no luck:

Code: Select all

{foreach from=$entries item="dategroup"}
    <div class="serendipity_Entry_Date">
        {foreach from=$dategroup.entries item="entry"}
        <h2 class="serendipity_title">
		{if not $is_single_entry}{if $dategroup.is_sticky}
        {$CONST.STICKY_POST}
        {else}
        {$entry.timestamp|@formatTime:DATE_FORMAT_ENTRY_ANDREAS}
        {/if}{/if} <a href="{$entry.link}">{$entry.title|@default:$entry.id}</a></h2>

My blog is here: http://www.dustinfike.com/blog

Thanks for any help you can give.

[abdussamad]

Replace the code you gave before with this:

Code: Select all

{foreach from=$entries item="dategroup"}
    
        {foreach from=$dategroup.entries item="entry"}
        <h2 class="serendipity_title">
     <a href="{$entry.link}">{$entry.title|@default:$entry.id}</a></h2> 
     <div class="serendipity_Entry_Date">
      {if not $is_single_entry}{if $dategroup.is_sticky}
        {$CONST.STICKY_POST}
        {else}
    
    {$entry.timestamp|@formatTime:DATE_FORMAT_ENTRY_ANDREAS}
        {/if}{/if} 
     </div><!--end serendipity_Entry_Date -->

To make the date smaller open up style.css and find the selector .serendipity_Entry_Date and add an appropriate smaller font size in it:

Code: Select all

.serendipity_Entry_Date{
font-size:.75em
}

[GatorArch]

Thanks for the help. That makes the date look the way I want it to. Just a couple other things. Is it possible to have the date on the same line as the title, just in a smaller font size? Currently it looks like this:

Title
: Date

I would like it to read:

Title : Date

Second: On the main page that shows recent entries, the first date group shows up correctly with a 170px margin on the right so that it does not run into the rightbar. However, any entries after the first date group do not have that margin. They are positioned slightly left of the first date group and the footer extends into the rightbar. The body text however wraps at the proper position. An example of this can be seen at my blog:

http://www.dustinfike.com/blog

Thanks again for the help.

[abdussamad]

To get the date to appear on the same line as the post heading add this code to style.css:

Code: Select all

.serendipity_Entry_Date
{

display:inline !important;
}
h2.serendipity_title
{
display:inline;
}

Your other problem is related to an extra closing </div> tag that is probably in your entries.tpl file. Validate your site's xhtml markup at
http://validator.w3.org/check to locate the error.

[GatorArch]

Thanks! That worked great!

One last question and then everything will be perfect. How do I add a little bit of space between the Title : Date line and the start of the body of the entry?

I intend on using the blog to post photos a lot. Right now, the title is touching the top of the photo in my entry. I would like to have a little space between the two, like about a half line.

[judebert]

Add a little margin to the image or the title.

Code: Select all

.serendipity_Entry_Date {
    margin-bottom: 0.5em;
}
img {
    margin-top: 0.5em;
}

[judebert]

Scratch that; I just did some fooling around with Firebug (You really ought to get it. It's fantastic for web development!) and discovered that adding margin-bottom to the date or h2 didn't help at all. My guess is that the image or its containing div is floated, removing it from the flow.

But don't despair! Some more fooling around with Firebug (seriously, get it) showed that adding margin-top to the serendipity_entry div took care of it:

Code: Select all

.serendipity_entry {
    margin-top: 0.5em;
}

Sorry for the earlier bad advice.

[GatorArch]

Everything looks perfect! Thank you very much for the help!