I am building a blog that is using the cloned pages and on the blog_list I want the background of each listing to be alternating in colour

this is what it would look like without couch(I am using bootstrap)

Code: Select all

<section class="content-section">
      <div class="container-fluid" id="bgWhite">
         <div class="container">
            <div class="row" id="blogListitem">
               <div class="col-sm-8 col-sm-offset-2 text-center">
                  <a href="blog.php?mode=1">
                     <img src="img/blogItem1.png" class="img-responsive center-block">
                     <div class="col-sm-12">
                        <h4>Blog title 1</h4>
                        <p class="text-justify">Blog snippet,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis, velit nec malesuada gravida, magna mi egestas ligula, laoreet euismod sapien elit nec erat. Vivamus vitae fermentum quam</p>
                        <button class='btn btn-lg btn-success'>Read More</button>
                     </div><!-- /col-->   
                  </a>
               </div><!-- /col-->                  
            </div><!-- /row-->
         </div><!-- /container-->
      </div>
      
      <div class="container-fluid" id="bgYellow">      
         <div class="container">               
            <div class="row" id="blogListitem">            
               <div class="col-sm-8 col-sm-offset-2 text-center">
                  <a href="blog.php?mode=2">
                     <img src="img/blogItem2.png" class="img-responsive center-block">
                     <div class="col-sm-12">
                        <h4>Blog title2</h4>
                        <p class="text-justify">Blog snippet,Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis, velit nec malesuada gravida, magna mi egestas ligula, laoreet euismod sapien elit nec erat. Vivamus vitae fermentum quam</p>
                        <button class='btn btn-lg btn-success'>Read More</button>
                     </div><!-- /col-->   
                  </a>
               </div><!-- /col-->                  
            </div><!-- /row-->
         </div><!-- /container-->
      </div><!-- /container-->
   </section>

the background colour is set in the id of the container-fluid, ie id='bgWhite";

now my couch code lookes like this

Code: Select all

<section class="content-section">
    <cms:pages masterpage='blog.php' orderby='order'  order='asc'>
      <div class="container-fluid" id="bgWhite">
         <div class="container">
         
            <div class="row" id="blogListitem">
               <div class="col-sm-8 col-sm-offset-2 text-center">
                  <a href="<cms:show k_page_link />">
                     <img src="<cms:show blog_image />" class="img-responsive center-block">
                     <div class="col-sm-12">
                        <h4><cms:show blog_title /></h4>
                        <p class="text-justify"><cms:show blog_text /></p>
                        <button class='btn btn-lg btn-success'>Read More</button>
                     </div><!-- /col-->   
                  </a>
               </div><!-- /col-->                  
            </div><!-- /row-->         
         </div><!-- /container-->
      </div><!-- /container-fluid-->
    </cms:pages/>            
   </section>

how do I change the bg of the outer container from within the looping cloned page.

how do I make this line

Code: Select all

<div class="container-fluid" id="bgWhite">

alternate to

Code: Select all

<div class="container-fluid" id="bgYellow">

every other entry?

Ive tried standard hp code

Code: Select all

<cms:php>$i=0; </cms:php>

and then

Code: Select all

 <cms:php>
if($i==0){
<div class="container-fluid" id="bgWhite">
$i++;
}else{
<div class="container-fluid" id="bgYellow">
$i=0;
}
</cms:php>

but the cms php doesnt pick up the '$i' variable

any help greatly appreciated

[KK]

Hi Barry

What you need is the cms:zebra tag (http://www.couchcms.com/docs/tags-reference/zebra.html)

<cms:pages masterpage='blog.php' orderby='order' order='asc'>
<div class="container-fluid" id="<cms:zebra 'bgWhite' 'bgYellow' />">
..

Hope this helps.

brilliant thanks, I knew you would not have overlooked this possibility, your software is superb

[KK]

Thank you Barry
I am glad it helped.

[cheesypoof]

@barryw33, the HTML specification states that ID values must be unique document-wide. It would be more correct to use classes to alternate the background-color of the listings. Happy coding