How to edit latest articles

The latest articles appear in the template as 3 types:

  • on the homepage, at the bottom as a “3-column row”

This is the code where the image paths can be uploaded.

<div class="latest_posts">
  <div class="row">
   <div class="col-sm-6 col-lg-4">
    <div class="post-wrapper">
     <a href="article.html" class="latest_posts-link plus hover-border">
      <img src="images/hero_02.jpg" width="370" height="200" alt title="hero_04.jpg" class="latest_posts-img">
      <span class="latest_posts-readon u-trans-all-2s">Read more +</span>
     </a>
     <em class="latest_posts-details">14 October 2016 By mihai in
       <a href="#" rel="category tag">Infographics</a>,
       <a href="#" rel="category tag">Marketing</a>,
       <a href="#" rel="category tag">Technology</a>,
       <a href="#" rel="category tag">Web Design</a>
     </em>
     <h3 class="latest_posts-title"><a href="article.html">10 Hacks to Keep Visitors on Your Pages Longer</a></h3>
  </div>
 </div>
[..]
</div><!--end latest posts-->

The style can be modified in app/css/scss/elements/_latestPosts.scss

 

  • on the news.html, as a masonry gallery

This is the markup where the image path can be added

<!--start first article-->
<li class="grid-item grid-item--width3">
  <div class="blog-item-container">
   <div class="blog-item-thumbnail">
    <a class="latest_posts-link" href="article.html">
      <img src="images/hero_02.jpg" width="370" height="200" alt title="hero_04.jpg" class="latest_posts-img">
    </a>
    <div class="portfolio-overlay">
     <div class="portfolio-inner">
       <a href="article.html" class="blog-item-overlay-more" data-readmore="Read More"></a>
     </div>
    </div>
  </div>
[..]<!--end first article-->

The style can be modified in app/css/scss/_blogpage.scss

  • on the article.html as a “3-column row”

This is the markup where the image path can be added

<div class="col-sm-4 related-articles__wrapper">
 <a href="article.html" class="related-articles-img-link">
   <img src="images/hero_04.jpg" width="370" height="240" alt title="hero_04.jpg">
 </a>
 <h5>
  <a href="article.html">5 Big Changes to the Internet From the Past Decade
  </a>
 </h5>
</div>

The style can be modified in app/css/scss/elements/_latestPosts.scss