Tweaking the graphic calendar

Hello!

Can someone help me with my problem on the theme? I’m trying to customize the little calendar beside the comic title, basically I would like to change the month color to white.

Here is what it looked like before:

View post on imgur.com

And what it looks like now, my problem is I can’t put the day and year under the month, probably because of the div?:

View post on imgur.com

Here is my new code (I’m quite a newb with that) in the \functions\displaypost.php

if (!function_exists('easel_display_post_calendar')) {
	function easel_display_post_calendar() {
		global $post, $wp_query;
		if (is_page()) return;
		if (easel_themeinfo('enable_post_calendar') && (($post->post_type == 'post') || ($post->post_type == 'comic'))) {
			$post_calendar = "<div class=\"calendar-month\">".get_the_time('M')."</div>";
			echo apply_filters('easel_display_post_calendar', $post_calendar);
		if (easel_themeinfo('enable_post_calendar') && (($post->post_type == 'post') || ($post->post_type == 'comic'))) {
			$post_calendar = "<div class=\"calendar-day\">".get_the_time('d')."</div>";
			echo apply_filters('easel_display_post_calendar', $post_calendar);
		if (easel_themeinfo('enable_post_calendar') && (($post->post_type == 'post') || ($post->post_type == 'comic'))) {
			$post_calendar = "<div class=\"calendar-year\">".get_the_time('Y')."</div>";
			echo apply_filters('easel_display_post_calendar', $post_calendar);
		}
		}
		}
	}
}

And my css:

.calendar-month {
	display: inline;
	padding: 2px 1px 0px 0px;
	height: 50px;
	width: 45px;
	background: url(https://www.ryo.me/images/calendrier.png) center no-repeat;
	font-family: 'Verdana' , sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	float: left;
	margin-right: 3px;
	text-align: center;
	box-sizing: border-box;
}

.calendar-day {
	display: inline;
	font-family: 'Georgia' , serif;
	font-size: 16px;
	color: #000000;
	float: left;
	text-align: center;
}

.calendar-year {
	display: inline;
	font-family: 'Verdana' , sans-serif;
	font-size: 15px;
	color: #000000;
	float: left;
	text-align: center;
}

Thanks for your help!

• This topic was modified 7 years, 4 months ago by Ry?.

The page I need help with: [log in to see the link]