CMS Made Simple Forums

Posted: **Wed Mar 21, 2012 6:50 pm**

Hi, I am trying to style my CGBlog summary date individually by Day, Month and Year, something like this:

<div class="date">
<span class="month">May</span>
<span class="day">12</span>
<span class="year">2011</span>
</div>

On my CGBlog sumamry template its calling the date:

Code: Select all

{if $entry->postdate}
	<div class="CGBlogSummaryPostdate">
		{$entry->postdate|cms_date_format}             
	</div>
{/if}

...and so I am trying to style like this, but its not recognizing the individual items of the date:

Code: Select all

.CGBlogSummaryPostdate {
  width: 60px;
  height: 60px;
  background: #0084ff;
  border: solid 2px #b9b9b9;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  color: #fff;
}
.CGBlogSummaryPostdate .day {
  color: #fff;
  font-size: 10px;
}
.CGBlogSummaryPostdate .month {
  color: #ce40d0;
  font-size: 14px;
}
.CGBlogSummaryPostdate .year {
  color: #44902c;
  font-weight: bold;
  font-size: 16px;
}

Any idea what I am doing wrong? Thanks in advance

Posted: **Wed Mar 21, 2012 7:02 pm**

Something like this would work... you'd have to read the manual for strftime and cms_date_format to make sure I am correct... but I bet I'm 90% of the way there.

Code: Select all

<span class="month">{$entry->postdate|cms_date_format|'%m'}</span>/
<span class="day">{$entry->postdate|cms_date_format|'%d'}</span>/
<span class="year">{$entry->postdate|cms_date_format|'%Y'}</span>

Posted: **Wed Mar 21, 2012 8:12 pm**

calguy1000 wrote:Something like this would work... you'd have to read the manual for strftime and cms_date_format to make sure I am correct... but I bet I'm 90% of the way there.

Yeap almost there, thank you, here is the final code:

Code: Select all

{if $entry->postdate}
	<div class="CGBlogSummaryPostdate">
   <span class="month">{$entry->postdate|cms_date_format:"%m"}</span>/
   <span class="day">{$entry->postdate|cms_date_format:"%d"}</span>/
   <span class="year">{$entry->postdate|cms_date_format:"%Y"}</span>         
	</div>
{/if}

Posted: **Wed Mar 21, 2012 8:39 pm**

fearmydesign wrote: Here is the final code:

Code: Select all

{if $entry->postdate}
	<div class="CGBlogSummaryPostdate">
   <span class="month">{$entry->postdate|cms_date_format:"%m"}</span>/
   <span class="day">{$entry->postdate|cms_date_format:"%d"}</span>/
   <span class="year">{$entry->postdate|cms_date_format:"%Y"}</span>         
	</div>
{/if}

...and if you want to display the month in actual letters (i.e. March vs 03), just replace the "%m" with "%B"

Code: Select all

{$entry->postdate|cms_date_format:"%B"}

CMS Made Simple Forums

[SOLVED] Styling of breakdown of date format on CGBlog

[SOLVED] Styling of breakdown of date format on CGBlog

Re: Styling of breakdown of date format on CGBlog

Re: Styling of breakdown of date format on CGBlog

Re: Styling of breakdown of date format on CGBlog