Blog Layout - Changes

[whitemedia]

Hi,

Is there any way of changing the blog layout in Pro? I am using the Integrity stack, but have been asked to get the main blog and blog category pages looking something like the grid in this page: https://blog.transformationalnutrition.com/

This is really a layout change - from top to bottom: Image > Category > Blog Title > Read More

Can this be achieved with Pro? Any guidance would be gratefully received.

Thanks,
Christopher

[whitemedia]

Hi,

I have figured out most of the layout as I want it by using the CSS below. The only thing I have not achieved is to move the category between the image and the title - i.e. between .entry-thumb and .entry-title. Does this need to be done by editing the php in the child theme?

/***************************/
/* B L O G   S E C T I O N */
/***************************/
.entry-thumb img {
  height: 250px !important;
  object-fit: cover;
  background: #ffffff !important;
}

.entry-thumb {
  background-color: #271689 !important;
}

/* Post Title changes */
.entry-title {
  font-size: 24px !important;
  text-align: center !important;
  padding-bottom: 20px !important;
}

/* Center meta */
.p-meta {
  text-align: center !important;
  font-size: 20px !important;
}

/* Hide all meta except category */
.p-meta > span:nth-child(1),
          span:nth-child(2),
          span:nth-child(4) {
    display: none;
}

/* Hide Bookmark icon */
.p-meta .x-icon-bookmark {
  display: none !important;
}

/* Hide "/" separator */
.p-meta>span:after {
  display: none !important;
}

/* Hide post excerpt */
.entry-content p {
   display: none !important;
}

/* Transform READ MORE link */
.more-link {
  text-align: center !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* Center READ MORE */
.excerpt {
  text-align: center !important;
}

/* Hide post tags on category pages */
.entry-footer {
  display: none !important;
}

/* Hide Box shadow and reduce padding on post entry */
.entry-wrap {
  box-shadow: none !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
}

Thanks,
Christopher

[nabeel]

Hey Christopher,

Thank you for reaching out to us. To move the post meta between the featured image and the title, create a new file and name it _content-post-header.php and paste the following code inside:

<?php

// =============================================================================
// VIEWS/INTEGRITY/_CONTENT-POST-HEADER.PHP
// -----------------------------------------------------------------------------
// Standard <header> output for various posts.
// =============================================================================

?>

<header class="entry-header">
	<?php x_integrity_entry_meta(); ?>
	<?php if ( is_single() ) : ?>
	<h1 class="entry-title"><?php the_title(); ?></h1>
	<?php else : ?>
	<h2 class="entry-title">
		<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
	</h2>
	<?php endif; ?>
</header>

Then via FTP upload the file to /pro-child/framework/views/integrity/ in your child theme. If you don’t find a directory then create one so you have this path /pro-child/framework/views/integrity/

Hope this helps!

[whitemedia]

Thanks. That works great.

[rad]

You’re most welcome!