Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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


  #1  
Old Feb 4, 2011, 09:48 AM
2BRetired
 
50 posts · Jan 2011
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
  #2  
Old Feb 4, 2011, 11:06 AM
runnerb0y
 
67 posts · Nov 2010
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

Last edited by juggledad; Dec 14, 2011 at 06:08 PM.
  #3  
Old Feb 4, 2011, 11:21 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Slick!!! That looks great
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Feb 4, 2011, 02:15 PM
2BRetired
 
50 posts · Jan 2011
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.
  #5  
Old Feb 4, 2011, 02:29 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Feb 4, 2011, 02:53 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
Name:  cal-redgradient.jpg
Views: 2367
Size:  408 Bytes

or you can just use a background color
HTML Code:
        background: #AD4744;
in place of the image
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Feb 4, 2011 at 03:24 PM.
  #7  
Old Feb 4, 2011, 05:31 PM
2BRetired
 
50 posts · Jan 2011
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
  #8  
Old Feb 4, 2011, 06:14 PM
runnerb0y
 
67 posts · Nov 2010
Quote:
Originally Posted by juggledad
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
Heck, I don't mind. Actually I feel flattered.
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

Last edited by runnerb0y; Feb 4, 2011 at 06:39 PM.
  #9  
Old Feb 4, 2011, 06:20 PM
runnerb0y
 
67 posts · Nov 2010
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

Last edited by runnerb0y; Feb 4, 2011 at 06:26 PM.
  #10  
Old Feb 6, 2011, 10:23 AM
2BRetired
 
50 posts · Jan 2011
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
  #11  
Old Feb 6, 2011, 01:36 PM
vincent
 
64 posts · Nov 2010
Excellent tip here, many thanks to runnerb0y and juggledad for the tweaks.

- Vincent

Bookmarks

Tags
date logo



Similar Threads
Thread Thread Starter Forum Replies Last Post
Trying to find plugin to duplicate this ..... nickcroker Plugins & Atahualpa 1 Dec 2, 2010 04:02 PM
% sign after date on posts viewed from a catagory scidmail Atahualpa 3 Wordpress theme 1 Nov 7, 2010 10:20 PM
Grouping posts by date. grimbles Center area post/pages 1 Jun 17, 2010 06:20 AM
[SOLVED] Can I find my LOST post? And Slow/unreliable saving of posts/theme changes outofdebtagain Atahualpa 3 Wordpress theme 3 Jan 1, 2010 01:28 PM
[SOLVED] Order Posts by Modified Date ysbwriel2k Excerpts, Read more, Pagination 3 Aug 21, 2009 02:36 PM


All times are GMT -6. The time now is 12:12 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.