4

I'm trying to figure out how to apply targeted CSS styling to ODD and EVEN blog articles in the blog list output. Particularly, white background on ODD and light grey background on EVEN. Is there a way to do this? Sorry for what is probably overkill on the code supplied (I'm a noob)

<!-- /templates/blog.liquid -->

{% comment %}

  Loop through a defined number of articles with the 'paginate' tag.
  Don't forget to close the tag after your loop.
{% include 'blog-slider' %}
{% include 'blog-grid' %}

{% endcomment %}



{% paginate blog.articles by 9 %}

<section class="collection blog">
  <div class="wrapper">
    
    
    

    <header class="content-util">
    {% include 'breadcrumb' %}
    {% include 'social-icons' %}
    </header>

    
    
    
    <div class="grid">
      <div class="collection-container blog-container">
        {% comment %}
        <header class="collection-header">
          <div class="container">
            {% if current_tags %}
              <h1>{{ blog.title | link_to: blog.url }} &mdash; {{ current_tags.first }}</h1>
            {% else %}
              <h1>{{ blog.title }}</h1>
            {% endif %}
          </div>
        </header>
{% endcomment %}
        
        
        {% comment %}
        <div class="mobile-aside-container">
          <a href="#" class="button simple">{{ 'layout.navigation.blog_menu' | t}}</a>
          <aside>
            {% include 'blog-sidebar' %}
          </aside>
        </div>
{% endcomment %}
        
        <div class="blog-list">
          {% for article in blog.articles %}
          <article>
            <header>
              <h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
              {% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
              {% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
              <p class="byline">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
            </header>
            {% if article.image %}
              <div class="article-image">
                <a href="{{ article.url }}"><img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.title }}"></a>
              </div>
            {% endif %}
            <section>
              {% comment %}
                Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
                Since this is just a listing page, you can either use the excerpt or truncate the full article.
              {% endcomment %}
              <div class="rte">
                {% if article.excerpt.size > 0 %}
                  {{ article.excerpt }}
                  <p class="read-more"><a href="{{ article.url }}" class="button outline">{{ 'blogs.article.read_more' | t }}</a></p>
                {% else %}
                  <p>{{ article.content }}</p>
                {% endif %}
              </div>

              {% comment %}
                Show off meta information like number of comments and tags.
              {% endcomment %}
              <div class="post-meta">
                {% if blog.comments_enabled? %}
                <a href="{{ article.url }}#Comments" class="comments">{{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}</a>
                {% endif %}

                {% include 'tags-article' %}
              </div>
            </section>
          </article>
          {% endfor %}

        </div>
        {% if paginate.pages > 1 %}
        <footer class="collection-footer">
          {% include 'pagination' %}
        </footer>
        {% endif %}
      </div>

      <div class="aside-container">
        <aside>
          {% include 'blog-sidebar' %}
        </aside>
      </div>
    </div>

  </div>
</section>

{% endpaginate %}

/*============================================================================
  #Blog
==============================================================================*/
.recent-posts-collection {
  padding: $verticalContainerPadding 20px;
  background-color: $blogBackgroundColor;
  {% if settings.homepage_show_borders %}
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  {% endif %}

  @include mediaQuery($max, $mobile) {
    padding: 20px;
  }

  .wrapper {
    @if $blogFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  .wrapper > header {
    @include clearfix();
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);
    h4 {
      //float: left;
      margin: 0;
      line-height: 2;
      font-size: em(28px);
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
    }
    a.button.outline {
      position: absolute;
      top: 50%;
      right: 0;
      @include transform(translateY(-50%));
      @include buttonOutline;
    }

    @include mediaQuery($max, $mobile) {
      text-align: center;
      a.button.outline {
        position: relative;
        @include transform(translateY(0));
      }
      padding-bottom: 20px;
    }
  }

  .recent-posts-container {
    @include grid();
  }

  &.layout-2 {
    article {
      @include grid-item(6);

      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
      }
    }

  }
  &.layout-3 {
    article {
      @include grid-item(4);

      @include mediaQuery($max, $tablet) {
        @include grid-item(6);

        &:nth-of-type(3n){
          display: none;
        }
      }
      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
        &:nth-of-type(3n){
          display: block;
        }
      }
    }
  }

  article {
    @extend %blog-article;

    header {
      text-align: center;
    }

    .article-image {
      margin-bottom: 4px;
    }

    section {
      font-size: 15px;
    }

    time {
      position: relative;
      top: -6px;
      font-family: $navFontStack;
      //font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      font-size: em(11px);
    }

    @include mediaQuery($max, $mobile) {
      @include grid-item(12);
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: 0;
      }
    }
  }
}

.blog-list,
.blog-permalink {
  article {
    @extend %blog-article;
    margin: $verticalContainerPadding 0 0;

    &:last-of-type {
      border-bottom: 0;
      padding-bottom: 0;
    }

    header {
      text-align: center;
      margin-bottom: 20px;
    }

    a.button.outline {
      display: inline-block;
      @include buttonOutline;
      margin-top: 10px;
    }

    footer {
      .pagination {
        margin-top: 20px;
      }
    }
  }
}
.blog-list {
  article {
    margin: $verticalContainerPadding 0 20px;
    padding-bottom: 40px;
  }
}

// Extend Product Thumbnail
%blog-article {
  header {
    h1,
    h2 {
      font-weight: $blogTitleTextWeight;
      font-size: em(40px);
      margin-bottom: 0;
      font-weight: normal;
      a {
        color: $primaryTitleColor;
        &:hover,
        &:focus {
          color: $primaryHoverColor;
        }
      }
      @include mediaQuery($max, $tablet) {
        font-size: em(28px);
      }
      @include mediaQuery($max, $mobile) {
        font-size: em(24px);
      }

    }
    h5 {
      font-weight: $blogTitleTextWeight;
      font-size: em(22px);
      margin-bottom: 0;
      a {
        color: $primaryTextColor;
        &:hover {
          color: $primaryHoverColor;
        }
      }
    }
    p.byline {
      font-family: $navFontStack;
      //font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      font-size: em(11px);
    }
  }

  .article-image {
    margin: 0 0 ($gutter/2) 0;
    img {
      display: block;
      margin: 0 auto;
    }
  }

  section {

    img {
      display: block;
      max-width: 100%;
      margin: 0 auto 26px;
      height: auto;
    }
    p {
      img {
        margin: 0 auto;
      }
    }
    p:last-of-type {
      margin-bottom: em(8px);
    }
    a.button.outline {
      margin-top: 0px;
    }
    .post-meta {
      margin-top: 20px;
      padding-top: 10px;
      border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
      display: table;
      width: 100%;

      a.comments {
        color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
        font-family: $navFontStack;
        //font-weight: $siteHeaderNavTextWeight;
        text-transform: $siteHeaderNavTextTransform;
        font-size: em(12px);
        text-decoration: none;
        min-width: 120px;
        display: table-cell;
        &:hover {
          color: $primaryHoverColor;
        }
      }
      ul.tags {
        text-align: right;
        display: table-cell;
        li {
          display: inline-block;
          color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
          font-family: $navFontStack;
          text-transform: $siteHeaderNavTextTransform;
          font-size: em(12px);

          &:last-child {
            a {
              margin-right: 8px;
            }
          }

          a {
            @include buttonOutline;
            padding: 4px 0;
            font-size: 0.875em;
            border: none;
            box-shadow: 8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%), -8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%);
            background-color: mix($primaryTextColor, $primaryBackgroundColor, 10%);
            margin-right: 8px;
            margin-left: 10px;
            &:hover {
              color: $primaryTextOnAccentColor;
              background-color: $primaryAccentColor;
              border-color: $primaryAccentColor;
              box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor;
            }
          }

        }
      }
    }
  }

  footer {
    margin-top: 40px;

    .comments-container {
      margin: 40px 0 0;
      padding: 40px;
      border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);

      @include mediaQuery($max, $mobile) {
        padding: 40px 0;
      }
      h3 {
        text-align: center;
        text-transform: $siteHeaderTitleTextTransform;
      }
      p.form-success {
        text-align: center;
        font-size: em(14px);
      }
      .comment {
        padding: 20px;
        background: $contentBoxBackgroundColor;
        {% if settings.primary_dropshadow %}
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
        {% endif %}
        font-size: em(14px);
        margin-bottom: 20px;

        p.author {
          margin-bottom: .5em;
          font-size: em(15px);
          span {
            font-weight: bold;
          }
          time {
            font-style: italic;
          }
        }
      }
      .pagination {
        margin-top: 0;
      }
    }
    .add-comment {
      padding: 0 40px;
      margin: 20px auto 0;
      max-width: 600px;
      h3 {
        text-align: center;
      }
      @include mediaQuery($max, $mobile) {
        padding: 0;
      }
    }
  }
}
Nick Sandford
  • 41
  • 3
  • 2
    Possible duplicate of [Using CSS :even and :odd pseudo-classes with list items](http://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-classes-with-list-items) – Phil Feb 02 '16 at 00:34

2 Answers2

2

In CSS3, you can use the nth-child(odd) and nth-child(even) selectors

article:nth-child(odd) {
  background: white;
}
    
article:nth-child(even) {
  background: #C8C8C8;
}
<article>This is an article</article>
<article>This is a second article</article>
<article>This is a third article</article>
<article>This is the fourth article</article>
Richard Hamilton
  • 25,478
  • 10
  • 60
  • 87
1

It's perfectly fine to use CSS for this, as Richard suggested, but you can also achieve the same thing in liquid with a cycle (the documentation even suggests it):

Uses for cycle include:

  • applying odd/even classes to rows in a table

For example:

{% for article in blog.articles %}
  <article class="{% cycle 'odd', 'even' %}">
    ... 
  </article>
{% endfor %}

There's a similar question on Stack Overflow here.

Community
  • 1
  • 1
Steph Sharp
  • 11,462
  • 5
  • 44
  • 81