[SOLVED] Styling of breakdown of date format on CGBlog

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
fearmydesign
Power Poster
Power Poster
Posts: 363
Joined: Sun Feb 28, 2010 10:54 pm

[SOLVED] Styling of breakdown of date format on CGBlog

Post by fearmydesign »

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

Code: Select all

<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
Last edited by fearmydesign on Wed Mar 21, 2012 8:13 pm, edited 1 time in total.
calguy1000
Support Guru
Support Guru
Posts: 8169
Joined: Tue Oct 19, 2004 6:44 pm

Re: Styling of breakdown of date format on CGBlog

Post by calguy1000 »

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>
Follow me on twitter
Please post system information from "Extensions >> System Information" (there is a bbcode option) on all posts asking for assistance.
--------------------
If you can't bother explaining your problem well, you shouldn't expect much in the way of assistance.
User avatar
fearmydesign
Power Poster
Power Poster
Posts: 363
Joined: Sun Feb 28, 2010 10:54 pm

Re: Styling of breakdown of date format on CGBlog

Post by fearmydesign »

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}
User avatar
fearmydesign
Power Poster
Power Poster
Posts: 363
Joined: Sun Feb 28, 2010 10:54 pm

Re: Styling of breakdown of date format on CGBlog

Post by fearmydesign »

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"}
Post Reply

Return to “Layout and Design (CSS & HTML)”