[Resolved] How I can do this on post page?

Home Forums Support [Resolved] How I can do this on post page?

Home Forums Support How I can do this on post page?

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1429871
    Sara

    Hello,

    I would like to make some changes in my post page that would be the following: (first url on textbox bellow)

    1. I would like to show excerpt text after title
    2. Show Category and Tag
    3. After excerpt text would like to show “Author name” like on this page place on textbox bellow the second url
    4. Then show postdate and show avatar image on the left side of both like on page on point 2 and on the right side would like to show category on same row of author name and tag on the same date row
    5. Would like to show images full width on post

    Thanks,

    Sara

    #1429879
    Leo
    Staff
    Customer Support

    Hi there,

    Are you referring to single posts or the posts/blog page here?

    #1430322
    Sara

    I am referring to single post page, where post are publish as you can see on first url on textbox.

    #1430646
    David
    Staff
    Customer Support

    Hi there,

    lets deal with a couple at a time.

    1. Create a new Hook Element:

    Add this to the content:

    <p class="entry-subtitle"><?php echo get_the_excerpt(); ?></p>

    Select the after_entry_title hook
    Check: Execute PHP
    Set the Priority to 5.

    Set the Display Rules to Single Posts

    3 & 4 This example explains:

    https://docs.generatepress.com/article/entry-meta-style/#example-2

    5. Are you using the Block Editor? – if so, you can select the image and in the toolbar select the Wide width option.

    #1431194
    Sara

    Hello David,

    I manage to do steps you mention

    1) Its showing excerpt just want to give a <br> of space between title and excerpt

    2) Pending

    3) It is showing just would like to add static text => “Published $postdate” and under it “By $authorname” and if possible remove authorname link

    4) Mention on point 3 and they seem to show backwards should be first date and second author name

    5) Yes I am using block editor but, I don’t seem to find the option you mention

    #1431722
    David
    Staff
    Customer Support

    1. Add this CSS:

    .entry-subtitle {
        margin-top: 1em;
    }

    2. Pending

    3. Use this CSS – instead of the CSS provided in the Meta example document:

    .entry-meta, .entry-meta .meta-data {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .entry-meta .meta-data {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column-reverse;
        margin-left: 0.75em;
    }
    .entry-meta .meta-gravatar img {
        width: 40px;
        border-radius: 50%;
    }
    .entry-meta .meta-data .posted-on:before {
        content: 'Published';
        margin-right: 0.5em;
    }
    .entry-meta .meta-data .byline:before {
        content: 'By';
        margin-right: 0.5em;   
    }

    Remove link for Author:

    https://docs.generatepress.com/article/generate_post_author_output/#remove-link

    5. This images shows what the alignment toolbar icon looks like – click that and select Wide:

    http://devsite337160.apps-1and1.net/wp-content/uploads/2020/07/Screenshot-2020-07-19-at-11.29.02.png

    #1432765
    Sara

    Hello David, yes its seems to be working just a few more points to finish:

    1) Done

    2) a) On single post to create category on top before title with same style as on site: https://todateen.uol.com.br/novo-filme-da-netflix-estrelado-por-lily-collins-e-amanda-seyfried-tem-primeiras-imagens-divulgadas/ but, with this pink color as background color #FF5481.
    b) Show tag like on sane site as 1 at the bottom where it says “Related topics” with black font and # at beginning of nametag
    c) Would like to remove folder icon for category and tag icon for tag

    3) There is an extra space between tagname “By” and “author name” and same with “Publish” and “postdate” how I can remove that extra space?

    4) Under “By $authorname” would like also to add “Latest updated” and as variable use “latest post revision date”? using same date format as on publish.

    5) Yes your solution works but, not as feature image this option shows when adding image from media library, would like to do this for feature image on post if possible.

    Thanks again David!

    #1433175
    Tom
    Lead Developer
    Lead Developer

    Hi Sara,

    2. To move the categories, let’s do this:

    add_filter( 'generate_footer_entry_meta_items', function( $items ) {
        return array_diff( $items, array( 'categories' ) );
    } );
    
    add_action( 'generate_before_content', function() {
        if ( is_single() ) {
            generate_do_post_meta_item( 'categories' );
        }
    } );

    For the tags, let’s try this CSS:

    .tags-links:before {
        font-family: inherit;
        content: "Related Topics:";
        width: auto;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .tags-links a:before {
        content: "#";
    }

    To remove the folder from categories, do this:

    .cat-links:before {
        display: none;
    }
    
    .cat-links a {
        padding: 5px 10px;
    }

    3. These spaces are controlled by your CSS. For example:

    .entry-meta .meta-data .byline:before {
        content: 'Por';
        margin-right: .5em;
    }

    Adjust the margin-right until it’s good.

    4. You want the updated date below the author, or below the published date?

    5. Un-checking the “Display padding around featured images” option in Customize > Layout > Blog may do the trick.

    #1443956
    Sara

    Hello Tom,

    Thanks a lot for the reply almost everything is working, just need the following:

    1) Done

    2) a) Missing style for category like on site I mention
    b) Done
    c) Done

    3) Done

    4) I would like to place update date on top of publish date, also I would like in both also the time was updated and publish but, I need to add this text “a las” between date and time in both like happens on this site: https://es.ign.com/ea-access/167026/news/ea-eliminara-origin-en-pc-a-cambio-de-una-nueva-aplicacion

    5) Done

    Thanks again!

    Sara

    #1444571
    Tom
    Lead Developer
    Lead Developer

    2 a) Try this:

    .cat-links a {
        background: #ff005b;
        color: white;
        transform: skewX(-15deg);
        display: inline-block;
        font-size: 15px;
        margin-bottom: 5px;
    }

    4. You can learn how to add the time to the date here: https://wordpress.org/support/article/formatting-date-and-time/

    Then remove this CSS:

    .entry-meta .meta-data .posted-on:before {
        content: 'Publicado';
        margin-right: 0.3em;
    }

    And add this:

    .posted-on .updated {
        display: inline-block;
    }
    
    .posted-on .updated:before {
        content: "Updated on ";
    }
    
    .posted-on .published {
        display: block;
    }
    
    .posted-on .published:before {
        content: "Published on ";
    }
    #1459018
    Sara

    Hello Tom, almost done just 2 last things please:

    1) Done

    2) a) This is showing correctly the only thing I would like to change font style on it like on top menu which is the following style:

    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;

    b) Done
    c) Done

    3) Done

    4) This is showing great just would like to remove link from post date and update date.

    5) Done

    Thanks!

    Sara

    #1460200
    Tom
    Lead Developer
    Lead Developer

    2a) Have you tried adding those values to the existing CSS I provided? Should work.

    4. This should help: https://docs.generatepress.com/article/generate_post_date_output/#remove-link-from-date

    #1462803
    Sara

    Hello Tom,

    2a) Yes I did just need to change font style like I mention all other styles are correct.

    4) I will check it and get back to you tomorrow.

    Thanks

    Sara

    #1464109
    Tom
    Lead Developer
    Lead Developer

    You just need to replace the existing block of code I shared with this:

    .cat-links a {
        background: #FF5481;
        transform: skewX(-15deg);
        display: inline-block;
        font-size: 15px;
        margin-bottom: 5px;
        color: #ffffff;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 18px;
    }

    It combines the existing stuff with the additional styling ๐Ÿ™‚

    #1494644
    Sara

    Hey Tom,

    I manage to make all changes just one last question, the only thing I did not manage to do is to remove author link, I have check link you provided: https://docs.generatepress.com/article/generate_post_author_output/#remove-link

    The only thing I don’t understand is where I place that code? Is it on functions.php or do I create a phpsnippet like before?

    Thanks again! ๐Ÿ™‚

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