In Ohanah v1 and v2 we had a big date badge that was used to emphasize the date of the event. In the v3, our approach is to keep templates clean and extensible. That opens possibilities for a very easy template overrides. 

Step 1 - Create an override

If you are not familiar with template overrides for Joomla, you can find a nice guide in the Joomla documentation. Be sure you are familiar with the procedure before you attempt this. 

For big date badge, we will override default template from the events view. To do this, we need to copy this file

/components/com_ohanah/views/events/tmpl/default.html.php

to the folder

/templates/YOUR_CURENT_TEMPLATE/html/com_ohanah/events/

If this is the first time you are doing a template override for Ohanah, you will need to create com_ohanah folder inside htmlfolder first, and then to create a folder eventsin it. 

Of course, you can access the Joomla template manager and create an override from there, if you prefer. Just be careful, since Joomla creates overrides for all templates for the view, and for this we need only the default.html.php.

Step 2 - Add the markup

Open this file

/templates/YOUR_CURENT_TEMPLATE/html/com_ohanah/events/default.html.php

You can do that from the Joomla template manager or directly on the server, however you like. 

Find the code for the title. It's around line 84, and it looks like this

<h2 class="event_title" itemprop="name">
 <a itemprop="url" href="<?= route($event->url_query); ?>"><?= $event->title; ?></a>
</h2>

Just bellow that file, paste the following code

<div class="event-date-badge_container">
 <div class="event-date-badge">
 <div class="event-date-badge_day">
 <?= helper('date.format', array('date' => $event->start, 'format' => 'd', 'timezone' => $event->timezone)) ?>
 </div>
 <div class="event-date-badge_month">
 <?= helper('date.format', array('date' => $event->start, 'format' => 'M', 'timezone' => $event->timezone)) ?>
 </div>
 <div class="event-date-badge_year">
 <?= helper('date.format', array('date' => $event->start, 'format' => 'Y', 'timezone' => $event->timezone)) ?>
 </div>
 </div>
</div>

That's your badge markup. 

Step 3 - Give it some style

Put the following CSS code in your template's custom CSS feature. See the template documentation where to put it, there is usually an option in the template settings. 

.event-date-badge_container {
 float: left;
 width: 63px;
 height: 75px;
 padding: 3px;
 margin-right: 10px;
 position: relative;
 background-color: #333;
 color: #FFF;
 font-weight: bold;
 text-align: center;
 font-family: "Arial";
}
.event-date-badge_day {
 font-size: 36px;
 line-height: 36px;
 font-weight: bold;
 padding-top: 2px;
}
.event-date-badge_month {
 font-size: 18px;
 line-height: 18px;
}
.event-date-badge_year {
 font-size: 12px;
 line-height: 12px;
 padding-top: 2px;
}
@media screen and (max-width:1024px) {
 .event-date-badge_container {
 display: none;
 }
}

The last piece of code will hide the badge on small screens. Adjust it according to your template breakpoints. 

Alternatively, you can put this code in the file itself (not recommended). In that case, surround the code with the proper <style> tag and put it on the second line of the file, just bellow the line that is loading the style.css in the view. 

More styles

If you wish to make the badge rounded, add this to the code above:

.event-date-badge_container {
 border-radius: 50%;
 width: 90px;
 height: 81px;
 padding-top: 9px;
 }

Contribute!

If you have some awesome date badge design that you would like to share with others, contact us and we will include it in this guide. Happy coding!