Wordpress Themes - WP Forum at BFA - [SOLVED] How to find a plugin that puts a Date logo into Posts

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] How to find a plugin that puts a Date logo into Posts (http://forum.bytesforall.com/showthread.php?t=12627)

[SOLVED] How to find a plugin that puts a Date logo into Posts

I am trying to find a plugin or some way to put a date logo next to the post title as follows (cannot paste logo here). Looks like a small square with month/date/year vertically each band in a different color.

Thanks, Bob

Bob,

There may be a plug-in that handles that, but I use a different solution.

I've built several sites that incorporate a "calendar-like" logo that places the date, month, and year into a "small calendar logo" and places that next to the title of the post/page.

The way I've achieved this (I'm sure others have done it differently (and probably better than I) is the following.

I usually place the following html code into the kicker in the ATA--> Edit Posts/Page Info Items--> Kicker sections you want to display the "logo".

Code:

<div class="date">

    <div class="date-inside">

        <div class="date-month"><?php the_time('M'); ?></div>

        <div class="date-day"><?php the_time('d'); ?></div>

        <div class="date-year"><?php the_time('Y'); ?></div>

    </div>

</div>

In my example... I have the Day, Month and Year being displayed.

For 3.7.1 and up, use

HTML Code:

<div class="date">

    <div class="date-inside">

        <div class="date-month">%date('M')%</div>

        <div class="date-day">%date('d')%</div>

        <div class="date-year">%date('Y')%</div>

    </div>

</div>

Then in the ATA--> Add HTML/CSS Inserts I add the following

Code:

.date {

       background: url('<?php bloginfo('template_url'); ?>/images/cal-redgradient.jpg') repeat-x  scroll top left;

        display: inline;

        float: left;

        width:60px;

        text-align:center;

        color:#fff;

        font-family:Arial, Helvetica, sans-serif;

        font-size:12px;

         border:1px solid #7e0101;

        margin: 0 10px 0px 0;

}

.date-inside {

         border:1px solid #FFEEBF;

        padding:2px;

}

.date .date-day {

        font-size:22px;

}

In that example the graphic I'm using is the cal-redgradient.jpg, which is 60px wide.
I had to play around with the font sizes and try them with different sizes of graphics. It's not an exact science, but it works.

If you want to see this date "logo" live visit the site I'm using this on. It's a small town Chamber of Commerce site. I'm still working on the development (when I can get good input from the Chamber). Here's the site: http://www.dufur.org

Slick!!! That looks great

Thanks runnerb0y,

This is the type of thing I am looking for, cannot seem to find a plugin. I will try this on my localhost version before I attempt to change the real site.

Being new to programming which sub sections do I place the code into.

ATA--edit post/page info has multiple Kicker sections:- Homepage/multi post pages/single post/page pages

also

ATA--HTML/CSS inserts has :- HTML inserts header/body tag/body top/body bottom and CSS inserts.

In the CSS insert section, if I need to put code there, before or after all the code that is there already.

Thanks again Bob

What hight do i need to make the jpg you recomended 60px wide but not the hight. I will try with my own logo.

Quote:

ATA--edit post/page info has multiple Kicker sections:- Homepage/multi post pages/single post/page pages

The sections are there so you can have different settings for each section. If you want it on all the sections, put the code in each section

Quote:

In the CSS insert section, if I need to put code there, before or after all the code that is there already.

doesn't matter, except the last code takes precedence over something earlier. Let's say you changed the <div> color to blue, then later change it to red, the red will be what you get

Attached is a copy of the graident that runnerb0y used (hope you don't mind) and slight improvement in the CSS. As of 3.6, if you put the file in a folder called 'atahualpa_images' in the 'wp-contents' folder you can change the background statement to

HTML Code:

       background: url('<?php get_option('wpurl'); ?>/wp-content/atahualpa_images/cal-redgradient.jpg') repeat-x  scroll top left;

and not have to worry about it when you do a theme upgrade
Attachment 1122

or you can just use a background color

HTML Code:

background: #AD4744;

in place of the image

Thanks juggledad and runnerboy,

Have been playing around with the date setting and finished a small logo with gimp 60px x 60px and it works great even managed to figure out how to have different colors month and day. Take a look if you like on 2BRetired.com.

Thanks again both of you, at least I learned something today.

I have not updated to 3.6 yet as I am concerned with losing all my setting.

Bob

Quote:

Originally Posted by juggledad (Post 56978)

HTML Code:

       background: url('<?php get_option('wpurl'); ?>/wp-content/atahualpa_images/cal-redgradient.jpg') repeat-x  scroll top left;

and not have to worry about it when you do a theme upgrade
Attachment 1122

or you can just use a background color

HTML Code:

background: #AD4744;

in place of the image

Heck, I don't mind. Actually I feel flattered. :o
And I should get around to moving those images to a less "volatile" folder location. Too much to do.

Thanks juggledad and good luck to you 2BRetired!

I see by your site (2BRetired) that you got it figured out and it looks great!

This is a great 'family' of people here and they've got some amazing moderators. Whatever your website design ideas are, I'm certain people here can help achieve just about anything you can dream up.

~runnerb0y

2BRetired,

When I was browsing your site. It looks good and has some great information on it. I'll bookmark it and see what you do.

A word to the wise. I would very strongly suggest that you kill your "ADMIN" account and create another "Admin Level" account with a totally different name. Many novice hackers will eventually be able to break your password since they already know your "admin" account name. Also, once you create another account... It's also advisable that you display the Nickname as your Author ID. That way your real ID is still a mystery, or possibly you've already outsmarted them by having a Nickname of ADMIN and your real ID is something else.

My 2 cents.

~runnerb0y

Thanks guys this has been a great help, not only being able to get ATA to do what I wanted but also how to use ATA.

Regards, Bob:)

This has been solved

Excellent tip here, many thanks to runnerb0y and juggledad for the tweaks.

- Vincent