Remove dates from header?

  • Author
    Posts
  • #159659

    davidbrittan
    Member

    Hi Leland! Is it possible to remove dates from the header (i.e., prevent them from displaying), but keep the dates in the post timeline below the header? Thanks.

    The blog I need help with is thenecessary.net.

    #159661

    lelandf
    Theme Author

    Yes, that would be possible.

    I assume by “header” you mean the entire featured content area? This would include all five feautured posts (the one up top, then the four below).

    If so, try this Custom CSS:

    body .featured-content .posted-on,
    body .featured-secondary .posted-on {
      visibility: hidden;
    }

    Best regards,
    Leland

    #159667

    davidbrittan
    Member

    Sorry, you’re right — I meant the five posts in the featured content area. I tried your Custom CSS, but it doesn’t change anything. Adding !important after “hidden” doesn’t work either. Any other possibilities? Thank you.

    #159669

    lelandf
    Theme Author

    Hmm, well that is just completely bizarre. I see the CSS is indeed applied on your site, although it does not do anything.

    Try adding an “opacity: 0;” rule for good measure, like so:

    body .featured-content .posted-on,
    body .featured-secondary .posted-on {
      visibility: hidden;
      opacity: 0;
    }

    The !important flag should not be necessary although you’re welcome to add it if you’d like.

    Best regards,
    Leland

    #159670

    lelandf
    Theme Author

    Also, can you paste the full contents of your Custom CSS panel? I get the feeling there must be an error elsewhere in the CSS. Happy to take a look at that.

    If you’re curious about the weirdness I’m seeing, the screenshot linked below may help illustrate:

    https://cloudup.com/cVFQBtH86Dj

    I manually added “visibility: hidden” (which you can see crossed out) and it hid the text. Although the exact same rule taking precedence (due to !important flag, hence, no cross-out) does not hide it.

    #159671

    davidbrittan
    Member

    OK, I’ve inserted “opacity: 0;” and it did what I wanted. Thanks!

    As for the CSS, I’m completely winging it, so I wouldn’t be surprised if there’s something weird in there. Thank you SO much for offering to take a look at my Custom CSS. Here it is:

    /*
    Welcome to Custom CSS!

    To learn how this works, see https://wp.me/PEmnE-Bt
    */
    .entry-meta .author,
    .post-author {
    display: none !important;
    }

    /* add bottom margin to Jetpack likes — 3439305-zen */
    div.jetpack-comment-likes-widget-wrapper iframe {
    margin-bottom: 15px;
    }

    /* Remove blank space on posts caused by post-nav */

    nav.navigation.post-navigation {
    display: none;
    }

    #article-wrap .article-content {
    position: relative;
    padding-bottom: 45px;
    }

    /* NOT WORKING Remove date from Featured Content posts */
    body .featured-content .posted-on,
    body .featured-secondary .posted-on {
      visibility: hidden;
    opacity: 0;
    }

    /* Change header background color */
    .site-header {
    background-color: #ffda36;
    }

    /* Change site-title color */
    .site-title a {
    color: #000 !important;
    }

    /* Add drop shadow to site title */
    .site-title a {
    text-shadow: 0px 0px 0px black;
    }
    /* Change site-description color, add drop shadow */
    .site-description {
    color: #000 !important;
    text-shadow: 0px 0px 0px black;
    }

    /* Larger site description font */
    .site-description {
    font-size: 24px;
    letter-spacing: .15em;
    margin: 0 0 19px;
    padding: 0;
    text-transform: uppercase;
    }

    /* Main navigation background color */
    .slide-menu {
    background: #1e1e1e;
    }

    /* Main navigation text color */
    .main-navigation a, .menu-back {
    color: #fff;
    }

    /* Header bottom border */
    .featured-row {
    border-bottom: 1px solid #ffda36;
    padding-bottom: 25px;
    }

    /* STORIES heading, per CSS forum*/
    .home #article-wrap:before {
    content: “\STORIES\ “;
    font-size: 4em;
    letter-spacing: .17em;
    }

    /* For widget background and text color
    */
    .widget .widget-title {
    background-color: #7F7F7F;

    }
    /* Sidebar widget margin */
    .widget div >ul li, .widget > ul li {
    margin-left: 20px;
    }

    /* Widget link color */
    .widget a, .site-info-text a {
    border-bottom: 1px solid #fc791c;
    transition: .5s border-bottom-color;
    }

    /* Footer widget color */
    .footer-widgets {
    background: #7F7F7F;
    color: #000;
    }

    /* Yellow block behind post heds */
    .single .entry-title:before {
    background: #ffda36;
    }

    /* Change link color */
    .post-content a {
    color: #fc791c;
    }

    /* Remove previous&next post at bottom of post */
    .post-navigation .nav-links {
    visibility: hidden;
    }

    /* Reply box color & font size */
    .comment-reply-title {
    background: #ffda36;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    }

    /* Verse block tighter, no tint */
    .wp-block-verse {
    background: #fff;
    font-family: Lora;
    font-size: 16px;
    font-size: .94rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
    }

    .wp-block-verse-green {
    background: #e4fbdb;
    }

    /* Hyperlinks in post, change color */
    .entry-content a {
    border-bottom: 1px solid #fc791c;
    transition: .5s border-bottom-color;
    }

    /* Change site-title color */
    .site-title a {
    color: #000;
    }

    /* Change site-description color */
    .site-description {
    color: #000;
    }

    /* Bulleted list: smaller font */
    .bullets-smaller-font ul {
    font-size: 17px;
    }

    /* Table, smaller font */
    .wp-block-table {
    font-size: 12pt;
    }

    /* Block quote, no left border */
    .single .entry-content blockquote, .page .entry-content blockquote {
    border-left: none;
    }

    /* “Follow” button color */
    #subscribe-blog input[type=”submit”] {
    background: #2d7ffd !important;
    color: #fff;
    }

    /* Share icons move to top or post */
    .at-share-btn-elements a {
    box-shadow: none !important;
    }

    .at-above-post {
    margin: 0 auto !important;
    width: 440px !important;
    padding-bottom: 15px;
    }

    /* Recent Post Widget Extended settings */
    .rpwe-block ul{
    list-style: none !important;
    margin-left: 0 !important;
    padding-left: 10 !important;
    }

    .rpwe-block li{
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    padding-bottom: 10px;
    list-style-type: none;
    }

    .rpwe-block a{
    display: inline !important;
    text-decoration: none;
    }

    .rpwe-block h3 a{
    font-size: 16px !important;
    }

    .rpwe-block h3{
    background: none !important;
    clear: none;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 1.5em;
    }

    .rpwe-thumb{
    border: 1px solid #eee !important;
    box-shadow: none !important;
    margin: 2px 10px 2px 0;
    padding: 3px !important;
    }

    .rpwe-summary{
    font-size: 14px;
    }

    .rpwe-time{
    color: #bbb;
    font-size: 14px;
    }

    .rpwe-comment{
    color: #bbb;
    font-size: 11px;
    padding-left: 5px;
    }

    .rpwe-alignleft{
    display: inline;
    float: left;
    }

    .rpwe-alignright{
    display: inline;
    float: right;
    }

    .rpwe-aligncenter{
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .rpwe-clearfix:before,
    .rpwe-clearfix:after{
    content: “”;
    display: table !important;
    }

    .rpwe-clearfix:after{
    clear: both;
    }

    .rpwe-clearfix{
    zoom: 1;
    }

    #159686

    lelandf
    Theme Author

    Hmm, all right. First, glad to hear the opacity worked. I’m a bit weirded out by why the visibility didn’t work originally though.

    In your CSS, I don’t see any glaring errors. Most of it is pretty solid as far as I can tell. May be missing some things, although I have a few notes:

    text-shadow: 0px 0px 0px black;

    This isn’t an error per se. I just don’t think these will do anything because each size value is set to 0 anyway.

    Also, in the case of 0px, the units do not need to be defined. 0em = 0px = 0rem = 0, as far as CSS goes.

    Kind of like how “0 multiplied by any number equals 0.”

    content: “\STORIES\ “;

    This one catches my eye. Is there some reason there are backslashes in there?

    Also, are you sure proper quotation marks are used? There is a slight difference between and ", for example. Due to WordPress’s built-in formatting (from way back: https://ma.tt/2002/09/smart-quotes-in-php/) there may have been something lost in translation if you got this CSS from a WordPress-powered forum and the quotes were unintendedly converted, although in CSS “normal” rather than “curly” quotes should be used.

    font-family: Lora;

    I would change this to:

    font-family: 'Lora', serif;

    To ensure there’s some fallback to a system font just in case the “Lora” font does not load. It’s a very rare situation although it’s good to put in there just in case IMO.

    #159687

    davidbrittan
    Member

    Wow, thank you for the close read, Leland!

    – I’ve removed the backslashes in “STORIES,” which were indeed unnecessary. Quotation marks appear vertical and non-curly in my CSS sidebar.

    – What I’d really like to do with the word “STORIES” is fix the padding so there’s more space below it and less space above it. Is there a CSS fix?

    – Changed ‘Lora’ as suggested.

    – The “0px” values you wondered about are there in case I want to quickly change the appearance of the site-title (e.g. from plain black to white-with-drop-shadow) when I update the background image. Any harm in leaving those values in place?

    Thanks again.

    David

    #159694

    lelandf
    Theme Author

    What I’d really like to do with the word “STORIES” is fix the padding so there’s more space below it and less space above it. Is there a CSS fix?

    Sure.

    .home #article-wrap::before {
        content: "STORIES";
        font-size: 4em;
        letter-spacing: .17em;
        display: block; /* important to convert pseudo-element to block display */
        padding-bottom: 10px; /* space below */
        margin-top: -10px; /* negative space above */
    }

    I took your current CSS block for that and added a few lines to it.

    Any harm in leaving those values in place?

    Any harm would be inconsequential, in my opinion. The browser will spend a tiny bit of extra time downloading and processing the CSS, although we’re probably talking fractions of a millisecond.

    #159696

    davidbrittan
    Member

    Works like a charm. Thanks for everything, Leland!

    #159711

    lelandf
    Theme Author

    Works like a charm. Thanks for everything, Leland!

    No worries. Thanks for the update!

The topic ‘Remove dates from header?’ is closed to new replies.