Customising the Blog Page: Changing the blog post style

Support
#1

I tried to set up a blog, which currently looks something like:

I’ve downloaded the wp-index.php from wp-content/themes/x/framework/views/integrity/ and put it into wp-content/themes/x-child/framework/views/integrity/.

The contents of the wp-index.php are:

<?php get_header(); ?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">
      <h2 class="mtn">Latest Updates | News</h2>
      <?php x_get_view( 'global', '_index' ); ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

I need to edit <?php x_get_view( 'global', '_index' ); ?> and replace it with something using

<?php while ( have_posts() ) {
echo '<div class="post"></div>';}?>

Currently, I have 2 columns (or 3), but ideally I would want only 1 column, but what I want to achieve is a 50-50% split between the image and meta content: Title, Tag, Date, 50-60 words of content, featured image. Example: https://www.digitalcomputerarts.com/type/stories

#2

Hello @s1344678,

Thanks for asking. :slight_smile:

Exactly getting the layout will fall outside the scope of the support we offer but I am sharing few CSS codes that you can use to get started. First please select standard layout from X > Launch > Options > Blog > Style (select standard) and for layout, select global. After that you can use following CSS to get started:

.blog .hentry, .archive .hentry {width: 100%; display: block; clear: both;}

.blog .hentry .entry-featured, .archive .hentry .entry-featured {float: left; width: 28%; margin-right: 2%; }

.blog .hentry .entry-wrap, .archive .hentry .entry-wrap {width: 65%; float: left; margin-bottom: 30px;}

.blog .hentry .entry-footer, .archive .hentry .entry-footer {text-align: center; display: block; clear: both;}

.blog .hentry .entry-footer a, .archive .hentry .entry-footer a{float: none;}

If you would like to explore and customize further, I suggest you to refer following resource:

Thanks.

#3

This would change the CSS of the output, I would like to change the HTML structure of the blog post preview. Which file should I edit?

#4

HI,

You can copy the file wp-content/themes/x/framework/views/integrity/content.php into your child theme and edit as you like.

Thanks

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.