Customizing the look of post date and author in drupal nodes

If you want to customize the way post date and author name is displayed in nodes like the one in the picture, you have to modify drupal theme files and add some php code. First, open up template.php from drupal theme, then we have to create function in template.php file, and this code at the end of the template.php.

function myBlogDate($date_time) {
	return t('!month !day !year',
			array(
					'!day' => '<div class="date-day">'.date('j', $date_time).'</div>',
					'!year' => '<div class="date-year">'.date('Y', $date_time).'</div>',
					'!month' => '<div class="date-month">'.date('F', $date_time).'</div>',
			)
	);
}

You can change the way, month year and date displayed (Date PHP function)

drupal-date-author-customization

Then open the node.tpl.php file and find for this code.

<?php if ($submitted): ?>
    <span class="submitted"><?php print $submitted; //print format_date($node->created, 'custom', "d.m.Y"); ?></span>
<?php endif; ?>
Then replace the above code with this one.

<?php if ($submitted): ?>
	<div class="pos_rel">
		<div class="submit-date"><?php print myBlogDate($node->created); ?>
			<div class="author"><?php print theme('username', $node) ?></div>
		</div>
	</div>
<?php endif; ?>

After that add the styles these styles, you can customize these styles to whatever you want, like if you want to remove the author name remove the entire div of author from node.tpl.php file. You can change the colors within the css, total width of the container and the font sizes and so on. You can play with it.

.pos_rel {
	position: relative;
}

.submit-date {
	width: 120px;
	/*  position:absolute;
 Position as needed */
	left: -120px;
	float: right;
	background: #F8F8F8;
	font-family: Helvetica, Arial, Sans-Serif;
	color: #383838;
	border: 1px solid #ccc;
	/* This is the css3 for rounded corners */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.date-month {
	font-size: 14px;
	color: #F8F8F8;
	background: #000;
	padding: 3px;
	/* This is the css3 for rounded top corners */
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.date-day {
	padding-top: 5px;
	font-size: 40px;
}

.date-year {
	padding-bottom: 5px;
	font-size: 12px;
}

.date-day,.date-month,.date-year {
	text-align: center;
	font-weight: bold;
}

.author,.author a {
	text-align: center;
	font-weight: bold;
	background: #000;
	color: white;
	padding: 3px;
	font-size: 1em;
	border: 0;
}

Vivek Vengala
 

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.

Click Here to Leave a Comment Below 0 comments

Leave a Reply:

x

Join My Facebook Group to Receive Coding Tutorial for Free

email-subsribe