Windswept (windswept) wrote in component_help,
Windswept
windswept
component_help

Adding shadows to spiffy date format

Okay, I added some css:



.date4b{
line-height: 28px;
font-family: serif;
font-size: 24pt;
font-weight: 900;
color: #6E1009;
letter-spacing: 10px;
text-align: right;
}

.date4{
margin-top: -26px;
margin-right: 2px;
font-family: serif;
font-size: 24pt;
font-weight: 900;
color: #D72012;
letter-spacing: 10px;
text-align: right;
}

.date2b{
margin-top: -14px;
font-family: sans-serif;
font-size: 10pt;
font-weight: bold;
letter-spacing: 3px;
color: #6E1009;
text-align: right;
}

.date2{
margin-top: -24px;
margin-right: 2px;
font-family: sans-serif;
font-size: 10pt;
font-weight: bold;
letter-spacing: 3px;
color: #f9a861;
text-align: right;
}

.date3b{
margin-top: -6px;
margin-right: 48px;
font-family: sans-serif;
font-size: 8pt;
color: #6E1009;
letter-spacing: 2px;
text-align: right;
}

.date3{
margin-top: -24px;
margin-right: 50px;
font-family: sans-serif;
font-size: 8pt;
color: #f9a861;
letter-spacing: 2px;
text-align: right;
}


And then my code for the date/time looks like this:


  # Print the header for the entry.
  print_entry_header(
      "<div class=date4b>"+$e.time->date_format("%%day%%")+"</div>
       <div class=date4>"+$e.time->date_format("%%day%%")+"</div>
       <div class=date2b>"+$e.time->date_format("long")+"</div>
       <div class=date2>"+$e.time->date_format("long")+"</div>
       <div class=date3b>"+$e.time->time_format()+"</div>
       <div class=date3>"+$e.time->time_format()+"</div>"
      );



This is probably a horrible hack, since it basically involves printing each line twice, in different colors, slightly offset. (It took forever to get the top-margin values right.) Any improvements will be welcome.

EDIT: If anyone wants to see my layer, it's here.
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 17 comments