alam7o

استایل متفاوت برای پست ها در صفحه اصلی

6 پست در این موضوع قرار دارد

سلام

دوستان چطور میتونم کاری کنم که که پست هام یکی در میون استایلشون باهم فرق کنه مثال

<div class="backred">post 1</div>
<div class="backblue">post 2</div>
<div class="backred">post 3</div>
<div class="backblue">post 4</div>
<div class="backred">post 5</div>
<div class="backblue">post 6</div>

امیدوارم منظورمو واضح رسونده باشم

0

به اشتراک گذاری این پست


لینک به پست

سلام

<?php
if(have_posts()): while(have_posts()): the_post();
if($post->ID%2==0){ ?>
<div class="backred">post 1</div>
<?php
} else { ?>
<div class="backblue">post 2</div>
<?php }
endwhile; endif; ?>

 

1

به اشتراک گذاری این پست


لینک به پست
در 1 ساعت قبل، SM-Mahdavi گفته است :

 

ممنون از پاسختون کدتون رو به اینصورت گذاشتم ولی متاسفانه نتیجه به این شکل شد

 

PHP

<?php
if(have_posts()): while(have_posts()): the_post();
if($post->ID%2==0){ ?>
<div class="postsa">
   
   <h2><a href="<?php the_permalink() ?>" target="_blank"><?php the_title(); ?></a><span style="font-size:10px;"><?php the_field ('release_date'); ?></span></h2>
   <?php the_excerpt(); ?>

</div>
<?php
} else { ?>
<div class="postsb">
   
   <h2><a href="<?php the_permalink() ?>" target="_blank"><?php the_title(); ?></a><span style="font-size:10px;"><?php the_field ('release_date'); ?></span></h2>
   <?php the_excerpt(); ?>

</div>
<?php }
endwhile; endif; ?>

CSS

.posts .postsb{
  background:#000;
}
.posts .postsa{
  background:#ff0000;
}

 

1231.jpg

0

به اشتراک گذاری این پست


لینک به پست

دوستان کسی نظری نداره ؟ 

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام

یه راهش اینه بگید پست های فرد، رنگ a بگیرند . پست های زوج، رنگ b

به این شکل:

.post :nth-child(even){
	background:green;
}
.post :nth-child(odd){
	background:blue;
}

البته بجای post. کلاسی که برای قسمت مطالب سایتتون استفاده شده رو بذارید.

اگه جواب نگرفتید آدرس آنلاین سایتتون رو بذارید.

ویرایش شده در توسط Mohammad_E
3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

بسیار ممنون از راهنمایی خوب و سادتون قشنگ جواب داد البته با این کد

 

.posts:nth-last-of-type(odd) {background: green;}
.posts:nth-last-of-type(even) {background: yellowgreen;}

ویرایش شده در توسط alam7o
1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری