This topic has 9 replies, 2 voices, and was last updated 6 years by Radu.

  • Author
  • #194460
     Grant
    Participant

    Hi Guys,

    Hope you are all well.

    I just have a general question about how to re-style the layout of the post page. I would like to style the Posts ONLY (not the Pages) into a layout style like the attached sample (medium.jpg) from the Medium website. The display order should be:

    – Featured Graphic
    – Title
    –  Avatar and Post Meta
    – Article Content

    The Kleo theme appears to style it in this order. See attached (iho.jpg)

    – Title
    – Avatar and Post Meta
    – Featured Graphic
    – Article Content

    Does the post template need to be changed to achieve this or can this be achieved through a CSS hack?

    Cheers Guys,

    Grant

     

    Attachments:
    You must be logged in to view attached files.
    #194521
     Radu
    Moderator

    Hi,

    There are one or more php files to edit to sort them in that order and to get an appropriate layout like medium. It’s not enough to use CSS.

    wp-content/themes/kleo/content.php this it’s the php file that renders content of a post in that order excepr breadcrumbs, if you want to make some changes to that file you will have to install kleo child theme then to copy via FTP the content.php file from wp-content/themes/kleo/content.php in this path wp-content/themes/kleo-child/content.php and then you can change the order of the title, image, content and meta…

    Cheers
    R

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #194599
     Grant
    Participant

    Hi Radu,

    Thanks for your reply mate. By re-arranging the media and meta sections, I managed to get the Picture to display at the top with the meta data following.

    However, re-arranging the page title section made no difference at all. That section of code at the top of the content.php file does not seem to affect the page title positioning.

    Is there something else that I need to edit to get the title to display below the image?

    Cheers Mate,

    Grant

    Attachments:
    You must be logged in to view attached files.
    #194618
     Radu
    Moderator

    Hi,

    try to set this option like this wp-admin -> theme options -> Layout settings -> Page Title location* -> Main Section

    Cheers
    R

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #194626
     Grant
    Participant

    Hi Radu,

    I already have that value set on the theme options.

    The code at the top of the content.php file still has no affect on the title if you move it below the media code. So it must require a further change?

    Cheers,

    Grant

    #194784
     Grant
    Participant

    Hi Mate,

    I’ve been analysing the code in the content.php and there does not seem to be a relationship to the CSS code where it refers to the ‘article-title’. When I display a Post, that code does not appear anywhere on the page when you inspect the Element.

    The Post CSS refers to ‘post-title’ – not ‘article-title’. It is the Post title that needs to be relocated below the Image. Alternatively, if we can hide the Post Title and I will reload the Post Title with some code from the Gravity Form that I want to use anyway.

    Cheers,

    Grant

    #194785
     Grant
    Participant

    Hi,

    I know I can always hide the Post Title but I’d prefer to use that only as last option. I just need a way to display the Post Title below the Featured Image.

    Cheers,

    Grant

    #194994
     Radu
    Moderator

    Hi,

    Add this php code it needs to be pasted in wp-content/themes/kleo-child/functions.php

    PHP:

    COPY CODE
    
    add_action('kleo_before_main', 'sq7rdu_show_featured_before_content');
    function sq7rdu_show_featured_before_content() {
        if (is_single()) {
            if (has_post_thumbnail()) {
                echo '<div class="fullwidth-image-before-content">';
                echo the_post_thumbnail('full');
                echo '</div>';
            }
        }
    }
    

    CSS code:

    COPY CODE
    
    
    .fullwidth-image-before-content, .fullwidth-image-before-content img {
        text-align: center;
    }
    

    The css will be added to wp-admin -> theme options -> General settings -> Quick CSS or in child theme style.css

    NOTE: Child theme needs to be installed and activated.

    It should add the image before all, if still have issues let me know the wp-admin credentials and FTP.

    Note : doing that it may need to de-activte this option : wp-admin -> theme options -> blog -> Display media on post page* -> off

    Let me know

    Cheers
    R

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #195094
     Grant
    Participant

    Way to go mate,

    Got it sorted with that update. I needed to make a minor tweak to some existing CSS code to position the graphic correctly but it now appears before the Page Title.

    Cheers,

    Grant

    #195117
     Radu
    Moderator

    Hi,

    Good

    Cheers
    R

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 10 posts - 1 through 10 (of 10 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?