Edit date circle shape/text and make it a link

Home Forums WordPress Themes – Premium Luminescence Edit date circle shape/text and make it a link

This topic contains 6 replies, has 3 voices, and was last updated by  Sushil Adhikari 2 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #14500

    Ella Ivshin
    Member

    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.
    #18872

    Sushil Adhikari
    Moderator

    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.

    #14501

    Sushil Adhikari
    Moderator

    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 '
    '; } else { echo '
    '; } ?>
    #42662

    Jack Cobb
    Participant

    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

    #42763

    Sushil Adhikari
    Moderator

    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

    #42778

    Jack Cobb
    Participant

    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?

    #42837

    Sushil Adhikari
    Moderator

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.