saiyajin no gunshou (_tumblweed) wrote in component_help,
saiyajin no gunshou
_tumblweed
component_help

  • Mood:

fancy date stamp tutorial

Whee! My first tutorial ever!

EDIT 4/11/05: argh! i can't believe no one smarter than me noticed my blatant stupidity in adding extra triple-quotes! anyway, it's fixed. on with the tutorial...

While designing my new LJ, I wanted to put in the fancy date/time stamp, but couldn't remember how and it wasn't listed on the tutorials page in a nice, easy format. At daimones' suggestion, I cooked one up.

Code is based off comments from windswept and daimones in this thread. Original code looks to be from exotic_kittenv, whose journal no longer exists at that username.

Place this in your print_custom_head area, and adjust the stuff in red as you see fit:

function Page::print_custom_head() {

"""<style type="text/css">

.date4{
line-height: 36px; 
font-family: serif; 
font-size: 80pt; 
color: #f9a861; 
letter-spacing: 10px; 
text-align: center;
}

.date2{
line-height: 10px;
margin-top: -19px;
margin-left: 170px;
font-family: serif; 
font-size: 10pt; 
color: #ffe3c6;
letter-spacing: 5px;
text-align: left;
}

.date3{
line-height: 10px;
margin-top: 8px;
margin-left: 285px;
font-family: serif; 
font-size: 10pt; 
font-weight: 700;
color: #ffe3c6;
letter-spacing: 2px;
text-align: left;
}

</style>""";}


**NEWBIE ALERT** You only have ONE function print_custom_head per layer. If you are already modifying this function, just plug the stuff in pink and red somewhere between the style tags, adjusting the stuff in red as necessary to get the colors, fonts, and spacing you want.

Then, follow the custom entries tutorial and find this line:
print_entry_header((defined $e.security_icon?"$e.security_icon &nbsp; ":"")
+$e.time->time_format()+" <b>"+$e.time->date_format("long")+"</b>");

Replace it with this line:
print_entry_header((defined $e.security_icon?"$e.security_icon ":"")
+"<div class=date4>"+$e.time->date_format("%%day%%")
+"</div><div class=date2>"+$e.time->date_format("long")
+"</div><div class=date3>"+$e.time->time_format()+"</div>");


**NEWBIE ALERT** Yes, it is necessary to use the custom entries tutorial for this to work. Yes, it's a lot of scary code in there, but if you just copy and paste exactly and make only the one change described above, the date format is the only change you'll see the only changes made will be to the date, the addition of a permalink, and the shifting of the default entry icons from side to bottom (thanks daimones for the edit). If you take this code line by line and really look at it, you'll learn a lot about how Component is organized and you'll be able to do a lot of other nifty things, so don't be intimidated. Good luck!
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 62 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →