Edit date circle shape/text and make it a link

[Ella Ivshin]

Hello,

I would like to increase and edit the size of the date circle (make it larger and oval) and the date text inside the circle (make it two lines, 1st Line big font: May 05; 2nd Line centered below in smaller font: 2008).

I just want to know which image asset I need to resize and how the code needs to be changed to accommodate the new shape size and to make the date circle and/or its inner text a clickable link to the post (just like the title text).

Thank you,
Ella
Screenshot2014-01-0618.02.57.png

Attachments:

You must be logged in to view attached files.

[Sushil Adhikari]

The circle isn’t an image…it uses css to achieve what you see. This is where you will need to use a CSS edit plugin, or the child theme that comes with the theme (that you would install and activate). But the styling for that date circle is found in the theme’s style.css and starts at line 574

.entry-date-box {
	width: 4.813em; 
	height: 4.813em;  
	position:absolute; 
	bottom:-2.25em; 
	left:46%; 
	text-align:center;
	border-radius: 50%;
	-webkit-box-shadow:  0 0 1em 0 rgba(0, 0, 0, .7);
    box-shadow:          0 0 1em 0 rgba(0, 0, 0, .7);
}
.entry-month,
.entry-date,
.entry-year {
	display:block;
	text-transform: uppercase;
}
.entry-date {
	font-size: 2em;
	line-height:1em;
}
.entry-month {
	margin-top: 0.625em;
}
.entry-month,
.entry-year {
	font-size: 0.75em;
	line-height: 1.25em;
}

The em measurements is a relative sizing instead of px (pixels) because it helps with responsive viewing of the site. However, to get an idea what the em conversion is for px, use this tool: http://www.pxtoem.com

I would recommend you take whatever editing slow to make sure the circle does not fall out of place. It’s using absolute positioning, so if you change the size of the width and height, you may need to adjust the left: 46%. But this will also be needed adjustment further down the style.css near the bottom :

/* Max width on tablets */
@media (max-width: 768px) {
	.entry-date-box {
		left: 46%;
	}
}

….as for making the date clickable….this is a tricky thing to do with this particular theme because it’s coded with PHP. So unless you are comfortable with PHP coding, it’s probably best to leave the link out option out.

[Sushil Adhikari]

To give you an idea of the PHP code if you want to make the date circle a link, this is from the content.php file:

<?php if ( has_post_thumbnail() && ! post_password_required() ) {           
            echo '
' . the_post_thumbnail();
            echo '
';
            echo get_the_time(__('M', 'luminescence')) . '';
            echo '';
            echo get_the_time(__('d', 'luminescence')) . '';
            echo '';
            echo get_the_time(__('Y', 'luminescence')) . '';
            echo '
';            
        } else {           
            echo '
';
            echo get_the_time(__('M', 'luminescence')) . '';
            echo '';
            echo get_the_time(__('d', 'luminescence')) . '';
            echo '';
            echo get_the_time(__('Y', 'luminescence')) . '';
            echo '
';
        }  ?>  

[Jack Cobb]

How about eliminating or even hiding the circle shape/text. If I could customize it with a logo or something I would also like that. But foremost I would like to remove it.

On a similar topic, I have added this to my child theme style.css and it has removed some of the info, but the circle at top is still visible and the date is still showing at the bottom. Other meta data has been removed.
Code used in child stylesheet:

span.meta-posted,
span.meta-author,
span.meta-entry-date-box,
span.meta-date {
display: none;
}

ALSO, how could I do the same for the “Staff” section? I would like to remove all the posted, author etc from a staff persons page.
Thanks

[Sushil Adhikari]

Hi Jack,

Could you please send us your site url with possible screen of the pages where you are encountering those issue.?

We look forward for your response.

Thanks

[Jack Cobb]

Visit the URL and you can see that the “Staff” page I created has a circle at the top with the date (to mask this I have colored the font the same color as the circle) and it also has meta data near the bottom of the content. (no content has been added yet).

I would like the “staff” page to be more like a regular page, bot a blog post.
Not sure why a “staff” page be same as a blog posts format?

[Sushil Adhikari]

Hi Jack,

Please use this custom css to hide the circle from that page:
.entry-date-box {
display: none;
}

And regarding to staff page ,there is no any specific template for staff page, so it is taking default template of theme. You can create specific template by create new page something like this page-{page-slug}.php. Please go to this article to know about template heirarchy:

Thanks

[Author]

Posts