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 calendar icon, 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 html folder first, and then to create a folder events in 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')) ?>
        </div>
        <div class="event-date-badge_month">
            <?= helper('date.format', array('date' => $event->start, 'format' => 'F')) ?>
        </div>
        <div class="event-date-badge_year">
            <?= helper('date.format', array('date' => $event->start, 'format' => 'l')) ?>
        </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;
    padding: 0px;
    margin-top: -20px;
    margin-right: 20px;
    position: relative;
}

.event-date-badge
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  margin: 2em auto;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(0deg) skewY(0deg);
  -webkit-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
}

.event-date-badge *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

.event-date-badge_month
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

.event-date-badge_year
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

.event-date-badge_day
{
  width: 100%;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 1.1em;
  color: #2f2f2f;
}

.event-date-badge:hover, .event-date-badge:focus
{
  -webkit-animation: swing 0.6s ease-out;
  animation: swing 0.6s ease-out;
}

@-webkit-keyframes swing {
  0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
  20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
  60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
  80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
  100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
}

@keyframes swing {
  0%   { transform: rotate(0deg)  skewY(0deg); }
  20%  { transform: rotate(12deg) skewY(4deg); }
  60%  { transform: rotate(-9deg) skewY(-3deg); }
  80%  { transform: rotate(6deg)  skewY(-2deg); }
  100% { transform: rotate(0deg)  skewY(0deg); }
}

@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. 

If everything is done correctly

If you did everything correctly, on your website you will see the following. It even swings if you move your mouse over it

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!