change css dynamically if condition in PHP

Question

I'm using a wordpress theme and I do want to change the css of 2 blocks using php when the value of certain variable is even or odd..

this is my code :

<?php 
            $i = 0;
            while ( have_posts() ) {

                // Override
                if(($i % 2) == 1) { ?>

                    <style type="text/css">
                        .grid-box-img {
                            width: 54%;
                            float: left;
                        }

                        .entry-head {
                            width: 56%;
                            background-color: #fff;
                            position: absolute;
                            z-index: 10;
                            margin-left: 43%;
                            margin-top: 27%;
                        }
                    </style>
                    <?php 
                }
                else { ?>
                    <style type="text/css">
                        .grid-box-img {
                            width: 54%;
                            float: right;
                        }

                        .entry-head {
                            width: 56%;
                            background-color: #fff;
                            position: absolute;
                            z-index: 10;
                            margin-top: 27%;
                        }
                    </style>
                    <?php
                } 
                $i++;
                the_post(); 
            } ?>

But, unfortunately it doesn't work... It applies only the CSS of the last value.

How can I do that ? Thank you :)

Moeed Farooqui · Accepted Answer · 2013-07-07 14:04:07Z

2

Best practice is that make two classes one for even and other for odd and place a if condition where it needed.

<a href="/" class="<?php if(($i % 2) == 1){ echo 'even';} else { echo 'odd';} ?> ">Link </a>

In your CSS:

.even{
//your styling for even class
}
.odd{
    //your styling for odd class
    }

answered Jul 7, 2013 at 14:04

Moeed Farooqui

3,6281 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2013-07-07 13:53:34Z

0

CSS applies to the whole document (HTML 5 introduces scoped stylesheets, but browser support is weak and they are a terrible solution for this problem).

If you want to indicate that different elements are different then make them members of different classes, don't try to apply different stylesheets to them.

answered Jul 7, 2013 at 13:53

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

user1079425 Over a year ago

Thank you. So I oly have to add the value of the variable in the class.. for example : grid-box-img-12 and then doing the test using the value 12 of the class. Right ?

Quentin Over a year ago

You only have two different styles you want to apply, having a "12" seems silly. class="grid-box-img even" would seem to make more sense.

Collectives™ on Stack Overflow

change css dynamically if condition in PHP

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related