Remove the date on blog posts

  • Author
    Posts
  • #1369966

    tracadiecc
    Member

    When I post something on my blog, it shows the date when it was posted. I want to remove this as it is creating confusion for visitors to my blog.

    The blog I need help with is tracadiecc.com.

    #1370170

    Hey!

    In order to change how an element appears on your page, you need to target it with a CSS selector. A selector is usually an id or class that is applied to the element on its HTML tag. A lot of times, you can also target an element by referring to its container, that being the element that contains the element you want to target. For example, in your page, if you take a look at your page’s source code, you’ll see that the different elements of the dates in your posts (day, month, year) are contained by a <p> tag with the “post-date” class.

    To find selectors for your elements, you can right click on the element you want to style and select the “Inspect Element” option. This will show a panel with the HTML code for the element you clicked, along with the CSS rules applied to it on the right. See https://dailypost.wordpress.com/2013/07/25/css-selectors/ for more information on how to find CSS selectors.

    That being said, for hiding the date on your posts, you can add the following CSS code to the Appearance → Custom Design → CSS panel:

    .post-date {
        display: none;
    }

    As you will notice, removing the date will create some whitespace to the left of your posts. We can remove that with a bit more of CSS. Check how it looks and reply back here if you want help to do that :)

    #1370234

    tracadiecc
    Member

    Thank you so much, that did the trick! I would love to know how to get rid of that whitespace as well if you don’t mind helping me out!

    #1370242

    @tracadiecc, add the following to your CSS to recover that area to the left of the post content.

    .hentry .post-title h1, .post-title h1 a, .hentry .post-info {
        padding-left: 0;
    }
    
    .hentry .post-entry {
        float: left;
        width: 100%;
    }
    
    .hentry .post-extras {
        display: none;
    }

    Also on the CSS edit page, set the “Content Width” to 720px so that images and videos you insert into posts at full-size will use the new full width.

    #1370281

    tracadiecc
    Member

    @thesacredpath Thanks, that did the trick

    #1370282

    You are welcome.

The topic ‘Remove the date on blog posts’ is closed to new replies.