TYPO3 using iteration issue with EXT: News System KEY: news VER: 2.2.1

Question

I'm running the EXT: News System, KEY: news ver. 2.2.1 on a TYPO3 v. 6.1 with FLUID/EXTBASE

I having some issues getting an iteration to work, I showing 3 items/page and I need to use 3 diffrent css classes for the 3 items (li classes, i'm trying to give the LI some class names, but i'm only get the UL tag and the a div tag, there is not comming any LI tag with a class after the UL.

Have someone tried to show the items with an iteration condition ?

my code.

  <!-- Show List/Grid of drills Start (..list/itemdrills.html) -->
  <f:if condition="{settings.templateLayout} == 100">
    <f:then>
      <f:if condition="{settings.hidePagination}">
        <f:then>
          <f:for each="{news}" as="newsItem" iteration="iterator">
            <f:if condition="{iterator.index} == 1">
              <li class="first-item"><f:render partial="List/ItemDrills" arguments="{newsItem: newsItem, settings:settings}" /></li>
            </f:if>
            <f:if condition="{iterator.index} == 2">
              <li class="second-item"><f:render partial="List/ItemDrills" arguments="{newsItem: newsItem, settings:settings}" /></li>
            </f:if>
            <f:if condition="{iterator.index} == 3">
              <li class="third-item"><f:render partial="List/ItemDrills" arguments="{newsItem: newsItem, settings:settings}" /></li>
            </f:if>
          </f:for>
        </f:then>
        <f:else>  
          <n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">       
            <div class="news-list-view">
              <ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">            
                <f:for each="{paginatedNews}" as="newsItem">
                  <f:render partial="List/ItemDrills" arguments="{newsItem: newsItem, settings:settings}" />
                </f:for>         
              </ul>
            </div>
          </n:widget.paginate>
        </f:else>
      </f:if>
    </f:then>
  <!-- Show List/Grid of drills End -->

Answer 1

If you're displaying 3 items per page I assume that you're using the pagination. Then only the else part of the "hidePagination" condition will apply.

So you the iteration for

<f:for each="{paginatedNews}" as="newsItem">

and pass it to the partial where you apply the styles. Keep in mind that styling the 1st, 2nd, 3rd item is easy with pure CSS.