[Support request] Shortcode Date

Home Forums Support Shortcode Date

Viewing 15 posts - 31 through 45 (of 51 total)
  • Author
    Posts
  • #977409
    David
    Staff
    Customer Support

    Add this CSS to:

    .entry-header .entry-meta {
        display: block;
    }
    #977423
    Anthony

    now theres tags under the title but also at the bottom

    #977466
    David
    Staff
    Customer Support

    Add this filter:

    add_filter( 'generate_footer_entry_meta_items', function( $items ) {
        if ( is_single() ) {
            $items =  array_diff( $items, [ 'tags' ] );
        }
        return $items;
    } );
    #977477
    Anthony

    it didnt work, it only works if i turn off the snippet that removes the commas (https://gist.github.com/generatepress/18e41e03783b5c7e86402d429e64efc0)

    #977483
    David
    Staff
    Customer Support

    OK – use some CSS to hide them instead:

    .inside-article > .entry-meta .tags-links {
        display: none;
    }

    Otherwise we will need to unpick most of what has been done so far.

    #977497
    Anthony

    updated to body:not(.blog).inside-article > .entry-meta .tags-links and it worked. the only problem is that theres little commas i think in between the tags that spacing it out

    #977922
    David
    Staff
    Customer Support

    We can use this CSS to ‘hide’ the commas:

    .single-post .entry-header .tags-links {
        font-size: 0;
    }
    
    .single-post .entry-header .tags-links a {
        font-size: 12px;
    }
    #978348
    Anthony

    worked 😀 on mobile view, how do i make it so that the post title and date dont wrap text and also place tags beneath the date?

    #978411
    David
    Staff
    Customer Support

    Just to be clear is this on the Posts (blog) page or the Single Post?

    #978416
    Anthony

    oh on the posts page

    #978565
    David
    Staff
    Customer Support

    Removing the CSS here will revert to the title, data, meta stacked in that order

    #978581
    Anthony

    how do i only have it appear in mobile view?

    #978625
    David
    Staff
    Customer Support

    Wrap that CSS in a media query like so:

    @media (min-width: 769px) {
    /* CSS styles in here */
    }

    Then that code will only apply to Desktop size devices.

    #978940
    Anthony

    ok, got it. i also had to remove .separate-containers:not(.single) .entry-header { width: 20%; } to remove the wrapping. i tried adding this code in the media query above but i didnt like how it looked in desktop view because of the spacing with longer titles.

    now in mobile view on posts page, move the comments to the right and vertically align it in the middle with the post, is this possible?

    on desktop view, if the post title is longer it seems like the tags stick close together with the title, how can i fix this while not increasing the space where the title is shorter?

    one more question, can i give tags their own background color? for example if i had a tag labeled ’email’ it would have a red background color and then if i had a tag labeled ‘twitter’ it would be blue, etc.

    #978967
    David
    Staff
    Customer Support

    You can try this to move the comment link:

    @media (max-width: 768px) {
        :not(.single) .inside-article {
            position: relative;
        }
        :not(.single) .comments-link {
            position: absolute;
            top: 10px;
            right: 15px;
        }
        /* Stop title from overlapping comment link */
        :not(.single) .entry-title {
            max-width: calc(100% - 110px);
        }
    }

    You would need to add some margin to the meta like so:

    @media (min-width: 769px) {
        :not(.single) footer.entry-meta {
            margin-left: 15px;
        }
    }

    It needs to be applied to all posts as there is no way to ‘test’ an element is touching another with CSS.

    Unfortunately no easy way to style the meta by tag without custom development at this time.

Viewing 15 posts - 31 through 45 (of 51 total)
  • You must be logged in to reply to this topic.