Creation date custom view

Quote

Total posts: 655
15 Oct 2017 09:13

Hello is there possibility to display Day numbers with bigger font and on one line and Month and Year with smaller fort and second line like it is here

Last Modified: 23 Oct 2017

Quote

pepperstreet VIP

Total posts: 3,837
22 Oct 2017 23:04

Hello Giorgi, your example is from a Helix3 powered template and its HTML overrides. It makes use of the Jlayout override as well. See respective layout file here:

/EDUCONtemplate/html/layouts/joomla/content/info_block/publish_date.php

Inside you will find a JHTML DATE function, which seem to format the source date.
So, all you have to do is replace the source date with your Cobalt date:

Swap
$displayData['item']->publish_up

with
$item->created

Result:

<div class="published-date">  
<time datetime="<?php echo JHtml::_('date', $item->created, 'c'); ?>" itemprop="datePublished" >  
<span><?php echo JHtml::_('date', $item->created, 'd'); ?></span>  
<?php echo JHtml::_('date', $item->created, 'M'); ?>,<?php echo JHtml::_('date', $item->created, 'Y'); ?>  
</time>  
</div>

You will also need some CSS styles. The position and sizes might depend on your surrounding markup!

Here are some example rules from EDUCON template.

EDUCON Notices:

.published-date {
  background: #3f51b5;
  padding: 22px 9px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  position: relative;
  top: initial;
  width: 93px;
  height: 93px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  -webkit-transition: .3s;
  transition: .3s;
}

.published-date span {
  font-size: 36px;
  font-weight: 600;
  display: block;
  line-height: .8;
}

EDUCON Blog:

.published-date {
  width: 93px;
  height: 93px;
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 22px 9px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  position: absolute;
  top: -110.5px;
  z-index: 100;
  letter-spacing: -0.5px;
}

.published-date span {
  display: block;
  font-size: 36px;
  font-weight: 600;
  line-height: .8;
}

Hope this helps.

Quote

Sergey

Total posts: 13,748
23 Oct 2017 14:07

you can see something like this in our Blog. Here is what I do in PHP

<div class="date img-circle img-polaroid">
    <div class="date-day"><?php echo $item->ctime->format('d'); ?></div>
    <div class="date-month"><?php echo $item->ctime->format('M'); ?></div>
    <div class="date-year"><?php echo $item->ctime->format('Y'); ?></div>
</div>

And then apply CSS.

Login (copy)