Post Layout style

[Grant]

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.

[Radu]

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

What support service includes ? What not ?

[Grant]

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.

[Radu]

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

What support service includes ? What not ?

[Grant]

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

[Grant]

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

[Grant]

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

[Radu]

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

What support service includes ? What not ?

[Grant]

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

[Radu]

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

What support service includes ? What not ?

[Author]

Posts