Tending your site… While you do what you love…

Mar
11
2017

Date in a box

The following applies to the Thesis 2.x Theme

I’ve spent hours reading through forum posts and the web to place the date in a box. So I thought I’d share what I found worked for anyone else looking.

When I create a hook, I always add my initials to the name, so where it says xxx I actually use sls.

This box container needs to be added to the area in the editor where you want the date to show.
Add a HTML Container
Named: Date_Box_Hook
HTML tag = div
HTML class = date-box
Admin tab > Display ID (and Hook Name) = xxx_date_box

Add the following to your custom php file

function published_on () { ?>
<div class=”datebox-published”>
<div class=”datebox-day”><? the_time(‘j’) ?></div>
<div class=”datebox-month”><? the_time(‘M’) ?></div>
<div class=”datebox-year”><? the_time(‘Y’) ?></div>
</div>
<? }
add_action(‘hook_top_xxx_date_box’, ‘published_on’);

The following is the css I used, depending on your font and sizes some of the things might need to be tweaked.

.date-box {
background-color: lightblue;
border-radius: 10px;
color: darkblue;
display: block;
float: left;
font-family: Arial, Helvetica, sans-serif;
margin: 0 10px 10px 0;
height: 75px;
width: 60px;
padding: 10px;
text-align: center;
}
.datebox-month { font-size: 12px; }
.datebox-day { font-size: 16px; font-weight: bold; }
.datebox-year {font-size: 11px; }

to rotate the year change height to 60 and
add the following to the datebox-year css:

left: 33px; position: absolute; top: 12px; transform: rotate(90deg);  -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);

and add:
.datebox-published {position:relative; }