Styling blog pages in Ethos

[ElytraDesign]

I am at the final stages of a website I am designing with X. One thing I am struggling with is how to style the blog section, as seen here: http://77.104.144.159/~aipinc06/news/. I would like to put a header/banner image at the top like I have in all my other pages, which I diud using cornerstone. Also I can’t figure how to get 2 columns in the blog pages. Please can you advise? Thank you.

[ruenel]

Hello There,

Thanks for writing in!

1.) The Blog index cannot be edited using Cornerstone or even the default WordPress editor. You can only add a custom content using some custom development. And because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Displaying custom Content on Blog Page
// =============================================================================
function add_custom_content () {

  if( is_home() ) {
    $post = get_post( get_option( 'page_for_posts' ) ); ?>
    
    <div id="x-section-0" class="x-section bg-image parallax" style="margin: 0px; padding: 55px 0px; background-image: url(&quot;http://77.104.144.159/~aipinc06/wp-content/uploads/2017/09/color-yellow-blue.jpg&quot;); background-color: transparent; background-position: 50% 9px;" data-x-element="section" data-x-params="{&quot;type&quot;:&quot;image&quot;,&quot;parallax&quot;:true}">
      <div class="x-container max width" style="margin: 0px auto;padding: 0px;">
        <div class="x-column x-sm x-1-1" style="padding: 0px;">
          <h1 class="h-custom-headline cs-ta-center man h-resp h1" style="color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.75) 0px 0.05em 0.25em; font-size: 64px;"><span>Our Work</span></h1>
        </div>
      </div>
    </div>
    <span id="x-responsive-text-1" data-x-element="responsive_text" data-x-params="{&quot;selector&quot;:&quot;.h-resp&quot;,&quot;compression&quot;:&quot;1.5&quot;,&quot;minFontSize&quot;:&quot;48px&quot;,&quot;maxFontSize&quot;:&quot;64px&quot;}"></span>  
  
  <?php }

}
add_action('x_after_view_global__index', 'add_custom_content');



// =============================================================================

And to display 2 columns in your blog index, please go to X > Theme Options > Blog and set the Columns to Two.

Please let us know if this works out for you.